/* Die Marke, an einem Ort. * * Andri hat drei Farben geschickt (09.09.2026): Petrol, Orange, Beige. * Orange und Beige standen schon in vier Dateien, jede mit ihrer eigenen * Abschrift; das Blau war bisher ein weiches Blaugrau, das es in der * Marke nicht gibt. Jetzt stehen die drei hier und nirgends sonst - * die Anwendung holt sie per @import, die Prototypen per . * * Aus drei Farben werden keine zehn. Was dazukommt, sind Stufen * derselben Farbe fuer Text auf Beige (tief), fuer Akzente auf Schwarz * (hell) und fuer Flaechen (soft). Die Ampel - gut, bald, faellig - * bleibt bei den Seiten, die sie brauchen: sie ist Bedeutung, keine Marke. */ :root{ /* * Die Massordnung (E212. Ralf, 22.09.2026: «ich bin gerade etwas enttaeuscht * von der qualitaet»). * * An einem Morgen fand Ralf acht Dinge, und jedes war eine Groesse: * null Pixel zwischen zwei Knoepfen, 405 Pixel Loch in einer Spalte, * springende Zeilenhoehen, ein Titel, der die Zeile darunter beruehrt. * Keine dieser Zahlen stand je in einem Kriterium - weil es kein * gemeinsames Mass gab und jeder Bau seine eigenen Werte erfand * (gezaehlt: 10px 125-mal, 8px 122-mal, 6px 103-mal, dazu 7px, 9px, * 18px ...). * * Sechs Stufen, mehr braucht es nicht. Wer einen Zwischenwert * braucht, nimmt die naechste Stufe - nicht 7px. * * Sie steht hier und nicht in globals.css, weil das Kundenportal * globals.css gar nicht liest: es laedt marke.css direkt. Ein Mass, * das nur die Werkstatt kennt, ist kein Mass - gemerkt beim ersten * Bau, der es benutzen wollte, keine zwei Stunden spaeter. */ --raum-1:4px; --raum-2:8px; --raum-3:12px; --raum-4:16px; --raum-5:24px; --raum-6:32px; /* Was ein Daumen trifft (Apple: 44px). Am Tresen mit der Maus darf es kleiner sein, darunter aber nie. */ --ziel-min:32px; --ziel-min-hand:44px; /* * Die Leiter fuer Schrift (Ticket 528f7701, E215). * * Sechs Stufen statt 30 Groessen. Gerechnet aus dem, was heute schon * benutzt wird, an den 1'569 Textstellen der Anwendung: * * --schrift-1 11px Abzeichen, Tabellenkoepfe, Fusszeilen (395) * --schrift-2 12.5px Nebentext, Tabellenzellen, Hinweise (798) * --schrift-3 14px Fliesstext, Formularfelder, Knoepfe (279) * --schrift-4 16px Kartenkoepfe, hervorgehobene Zahlen (36) * --schrift-5 20px Ueberschrift einer Karte (h2) (36) * --schrift-6 26px Name der Seite (h1) (25) * * --schrift-2 ist ein halber Pixel und trotzdem richtig: 12,5px ist * mit 311 Stellen die meistbenutzte Groesse der Anwendung. * * --schrift-min bleibt und zeigt auf --schrift-1 (E213). 11 und nicht * 12: keiner von Ralfs acht Funden am 22.09. war eine Schriftgroesse, * und die Abzeichen und Fusszeilen stehen bei 11px. Wirklich zu klein * sind die 9- und 9,5px-Stellen, die auf 11 wachsen. */ --schrift-1:11px; --schrift-2:12.5px; --schrift-3:14px; --schrift-4:16px; --schrift-5:20px; --schrift-6:26px; --schrift-min:var(--schrift-1); /* Der Abstand zwischen zwei Bedienelementen, die nebeneinander oder untereinander stehen. Null heisst: man trifft das falsche. */ --ziel-abstand:8px; /* Der Abstand zwischen einem Zeichen (Punkt, Kreis, Symbol) und dem Text, zu dem es gehoert (E216). Darunter liest das Auge beides als eins - der Punkt der Zeitachse im Serviceheft stand 1px vor dem Datum. */ --zeichen-abstand:var(--raum-2); /* Der sichtbare Kreis des InfoKnopfs (Ticket 30fdb9d1). Sichtbar klein, antippbar gross: die Antippflaeche wird ueber ::before auf --ziel-min gefuehrt, ohne das Layout zu vergroessern. */ --info-kreis:18px; --petrol:#00678A; --petrol-tief:#004D68; --petrol-hell:#4FA3C2; --petrol-soft:#DCEBF0; --orange:#E84C15; --orange-tief:#A83510; --orange-hell:#FF7A4A; --orange-soft:#FDEDE6; --beige:#ECE8E0; --beige-tief:#DFDBD2; --sand:#F6F3EE; --paper:#FFFFFF; /* Neutrale mit einem Hauch Beige, damit Schrift und Linien zur Flaeche gehoeren. */ --txt:#2F2E2D; --mut:#6B6863; --mut2:#9A948A; --line:#D5CFC3; --line-soft:#E6E1D6; --display:"Saira","Eurostile","Avenir Next Condensed",system-ui,sans-serif; --sans:"Barlow","DIN Next",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* Das Karo aus dem Bumpy-Abzeichen. */ --checker:repeating-conic-gradient(var(--orange) 0% 25%,transparent 0% 50%); } /* * Der InfoKnopf (Ticket 30fdb9d1). * * Ralf, 27.09.2026: «haben wir nicht bereits an anderen orten * info-buttons? falls ja bitte ein einheitliches design machen und in * unserer design vorlage dokumentieren.» Vor diesem Ticket standen im * Portal fuenf Fassungen; jetzt eine. Bauteil: src/components/InfoKnopf.tsx. * * Sichtbarer Kreis --info-kreis (18px), Antippflaeche --ziel-min (32px) * ueber ::before, ohne das Layout zu vergroessern. */ .infoknopf{position:relative;display:inline-flex;align-items:center;justify-content:center; width:var(--info-kreis);height:var(--info-kreis);border-radius:50%; border:1px solid var(--line);background:var(--paper);color:var(--mut); font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700; font-size:var(--schrift-2);line-height:1;padding:0;flex:none; vertical-align:middle;cursor:pointer;-webkit-appearance:none;appearance:none} .infoknopf::before{content:"";position:absolute; inset:calc((var(--info-kreis) - var(--ziel-min)) / 2); border-radius:50%} .infoknopf:hover,.infoknopf:focus-visible,.infoknopf.offen{ border-color:var(--orange);color:var(--orange);outline:none} /* Auf dunklem Grund uebernimmt der Knopf die Farbe des Grunds. */ .infoknopf.hell{background:transparent;color:currentColor;border-color:currentColor} .infoknopf.hell:hover,.infoknopf.hell:focus-visible,.infoknopf.hell.offen{ color:#FFB08A;border-color:#FFB08A} /* * Der Hinweis-Tipp (art=hinweis). Erscheint mit Maus beim Ueberfahren, * mit dem Finger nach dem Tipp (.offen). Bricht am Rand des Bildschirms * nicht - er misst hoechstens 260 px und schmiegt sich rechts an. */ .infoknopf-tipp{position:absolute;z-index:60;top:calc(100% + var(--raum-1));right:0; min-width:180px;max-width:260px;width:max-content; background:var(--txt);color:#fff;font-family:var(--sans);font-style:normal; font-weight:400;font-size:var(--schrift-1);line-height:1.5; text-align:left;letter-spacing:0;padding:var(--raum-2) var(--raum-3); border-radius:5px;box-shadow:0 10px 30px rgba(0,0,0,.18);pointer-events:none} @media (max-width:520px){.infoknopf-tipp{max-width:min(260px,calc(100vw - 32px))}}