/* ══════════════════════════════════════════════════════════════════════════ DIE DESIGNSPRACHE VON OPERATOR UND VERWALTUNG Entschieden mit Dani am 27.08.2026, beschrieben in design-sprache.md. WARUM DIESE DATEI EXISTIERT (Dani, 28.08.2026) Vorher stand dieselbe Optik zweimal da: einmal im Pruefstand, einmal in der Oberflaeche. Beim Einbau wurde von Hand uebersetzt, und dabei ging jedes Mal etwas verloren oder kam etwas dazu. Die Recherche dazu nennt es „AI drift" und den Grund: zwei Quellen der Wahrheit koennen nicht anders als auseinanderlaufen. Darum gibt es die Optik ab jetzt NUR HIER. Wer sie aendert, aendert sie an dieser Stelle, und Pruefstand wie Oberflaeche aendern sich mit. WER DIESE DATEI LAEDT Die zwei bleibenden Oberflaechen: verwaltung.html operator.html Dazu 32 Pruefstaende (`entwurf-*.html`), allen voran entwurf-bauteile.html das Blatt mit allen Bauteilen, die Referenz Die Pruefstaende werden hier NICHT einzeln gefuehrt: es sind zu viele, und eine Liste, die nur die Haelfte nennt, ist eine Behauptung. Wer wirklich wissen will, wer sie laedt: `grep -l design-sprache.css *.html`. (operator.html fehlte hier bis zum 08.09.2026, obwohl es sie seit dem 31.08.2026 laedt. Gefunden vom design-pruefer.) DIE EINE REGEL erhaben (.ds-hoch) heisst „hier kann man druecken" eingedrueckt (.ds-tief) heisst „das ist gewaehlt" oder „hier wird geschrieben" flach und farbig (.ds-m) heisst „das ist nur Information" gefuellt gibt es GENAU EINMAL je Seite: die Haupthandlung Wer eine zweite Flaeche fuellt, nimmt der ersten ihre Bedeutung. Schriften: Manrope fuer alles, Newsreader kursiv fuer das zweite Wort im Seitentitel. Beide werden von der einbindenden Seite geladen, nicht hier, damit die Seite selbst bestimmt, wann sie sie holt. ══════════════════════════════════════════════════════════════════════════ */ /* Die Werte gelten ueberall, damit die Bauteile auch ausserhalb einer .wp-Flaeche stimmen, zum Beispiel auf dem Bauteile-Blatt. */ :root{ --grund:linear-gradient(102deg,#DCF0EA 0%,#E5F2EA 26%,#EEF3E8 54%,#F4EFE0 78%,#F8F0DE 100%); --tinte:#1E3328; --tinteSchatten:rgba(30,51,40,.28); --ink:#20261F; --dim:#66766B; --faint:#8B998E; /* Die erhabene Flaeche ist DECKEND, nicht durchscheinend (Dani, 29.08.2026, Variante C aus entwurf-pillen-kontrast.html). Vorher rgba(255,253,249,.86): an der laufenden Seite gemessen hatte eine Pille damit gegen den Grund nur 1,02 bis 1,10 zu 1, war also fast nur durch ihren Schatten da. Danis Wort: „die Knoepfe verschwinden fast, sie loesen sich fast auf mit dem Hintergrund". Deckend heisst: der Unterschied liegt im Hellwert statt im Schatten, und den liest das Auge am schnellsten. */ --hochTon:#FFFDF8; --tiefTon:rgba(219,220,209,.42); --relief:rgba(104,116,98,.14); --reliefTief:rgba(104,116,98,.22); --schatten:rgba(58,74,58,.12); --rot:#9B3320; --rotBg:rgba(186,66,44,.13); --rotRand:rgba(186,66,44,.24); --or:#8D6208; --orBg:rgba(196,134,22,.15); --orRand:rgba(196,134,22,.28); --gut:#2C6A4C; --gutBg:rgba(52,120,86,.13); --gutRand:rgba(52,120,86,.26); /* Blau ist KEIN Zustand: es sagt, dass Claude gehandelt hat und nicht Dani (Dani, 12.09.2026: „dein Name ist Claude und du bist blau"). Im Verlauf des Sensors und fuer die Anmeldung am Netz. Auf Hell gemessen 6,4 zu 1. */ --blau:#2F5AA8; --dFlaeche:#1B2F25; --dInk:#E8F3EC; --dDim:#9DB6A8; --dFaint:#7A9187; --dLinie:rgba(255,255,255,.10); --dHoch:rgba(255,255,255,.07); /* Trennlinien in Tabellen und Gittern: die kraeftige zwischen Bereichen, die feine zwischen Zeilen. Eine Quelle fuer alle Oberflaechen. */ --linie:rgba(96,116,104,.3); --linieFein:rgba(96,116,104,.16); --dTief:rgba(0,0,0,.26); --dOr:#F0B95E; --dRot:#E8836B; --dGut:#6FC79B; --dKnopf:#D8EFE0; /* der gefuellte Knopf AUF der dunklen Flaeche */ /* Die Farben, die man einer selbst gemachten Pille geben kann. Sie stehen hier, damit niemand sie im Code neu erfindet. */ --pf1:#9B3320; --pf2:#8D6208; --pf3:#2C6A4C; --pf4:#6B4FA8; --pf5:#2F5AA8; --pf6:#B9C8BF; /* GRUPPENFARBEN, pastell. Sie ordnen etwas EINANDER ZU (welche Immobilien zum selben Sensorverantwortlichen gehoeren, welche Waschkueche ein Geraet traegt), sie sagen NICHTS ueber einen Zustand: dafuer sind Fuellung und Relief da. Jede hat ihren Tintenton fuer Schrift darauf. Bis zum 08.09.2026 standen dieselben fuenf Werte VIERMAL im Code, unter drei Namensschemata (--g1/--g1t im Kalender, --op/--mo/--ku in der Werkbank, dazu zweimal in den Pruefstaenden). Der design-pruefer hat es gefunden; am selben Tag war schon der Kuechenbuchstabe daran auseinandergelaufen, weil er an zwei Orten gerechnet wurde. */ /* KRAEFTIGER seit 09.09.2026, Danis Wahl aus drei Stufen am echten Telefon. Sein Befund: „Die Kontraste auf dem hellen Hintergrund mit diesem Gruen ... vielleicht allgemein einfach dunklere Pastellfarben nehmen." Abgeleitet aus den bisherigen fuenf, nicht neu erfunden: Helligkeit -0.14, Saettigung +0.10. Nur die Helligkeit zu senken haette sie schlammig gemacht, sie verlieren dann ihre Farbigkeit. DIE TINTE MUSSTE MIT: auf der dunkleren Flaeche fiel die alte auf 2.73 (Mindestwert 4.5). Gemessen mit den neuen Werten: Flaeche gegen Grund 1.81 bis 3.44, Tinte darauf 4.20 bis 6.56. */ --gr1:#6ABD89; --gr1t:#153024; --gr2:#DFAE47; --gr2t:#3E2C08; --gr3:#5FA2CC; --gr3t:#132A36; --gr4:#CE747B; --gr4t:#3F1E22; --gr5:#8B73CB; --gr5t:#251B36; /* ABLAEUFE: zwei Wege nebeneinander und ein Grau (06.09.2026, beim Einbau der Erstanmeldung in den Operator). Jede Spur hat ein Verlaufspaar, damit ein langer Strang oben dunkler ist als unten und man die Richtung sieht. Gruen ist der Weg ueber den Bewohner, Blau der ueber die Verwaltung, Grau heisst: hier ist nichts geschehen. Sie standen bis dahin im Entwurf hartcodiert; der Pruefer hatte das am 06.09.2026 als offenen Punkt notiert. */ --wegA1:#2C6A4C; --wegA2:#5C8C3E; --wegB1:#2F5AA8; --wegB2:#3E77C0; --wegAus:#C3CDC5; } /* Die Flaeche selbst: Grund, Schriftfarbe, Lichtfleck oben rechts. */ /* DIE SEITE HAT EINE MINDESTBREITE (Dani, 29.08.2026). Sein Wort: „die Seite hat, um schoen dargestellt zu werden, eine gewisse Grundbreite. Wenn man das Fenster kleiner macht, sollte die Groesse bleiben. Man muss dann halt scrollen." Vorher versuchte die Seite, sich in jedes Fenster zu quetschen: unter 1155 Pixel brachen die Reiter der Vorschau um, unter 900 auch die Pillenreihe. Ein umgebrochener Entwurf ist kein Entwurf mehr, und niemand hat je entschieden, wie er umgebrochen aussehen soll. 1180 ist die Breite, auf die der Inhalt ohnehin begrenzt ist (`maxWidth` in der Seite). Darunter waechst nichts mehr zusammen, sondern das Fenster bekommt einen Querbalken. `overflow-x` MUSS dafuer weg: `hidden` schneidet ab, statt scrollen zu lassen, und dann waere der rechte Teil der Seite unerreichbar. */ /* DIE SCHRIFT DER OBERFLAECHE steht hier, nicht in den Seiten (31.08.2026). Sie fehlte: `entwurf-bauteile.html` setzte Manrope auf dem body, die gebauten Seiten nie — verwaltung.html gar nichts, operator.html ausdruecklich `-apple-system`. Damit lief JEDE abgenommene Fassung auf einer anderen Schrift als das Ergebnis, und die Masse der Sprache (13.5px Kacheltitel, 9.5px Beschriftung) waren fuer Manrope gerechnet. Dani, 31.08.2026, vor den Waschplan-Bildern: „Wenn ich mir optisch Verwaltung und Immobilien anschaue, dann ist doch das ganz was anderes." Newsreader bleibt, wo sie hingehoert: an den Seitentiteln (.ds-titel). */ .ds{background:var(--grund);color:var(--ink);min-height:100vh;position:relative; min-width:1180px; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif} /* Der Lichtfleck oben rechts. Er ist `position:fixed` und ragte bis zum 31.08.2026 mit `right:-120px` ueber den rechten Rand hinaus. Ein festes Element, das ueber den Rand hinausragt, ERZEUGT EINE ROLLLEISTE: gemessen 1300 statt 1180 Pixel. In der Verwaltung fiel das nicht auf, weil die Seite dort ohnehin eine Mindestbreite hat und darunter rollen darf (Dani, 29.08.2026). Im Operator gilt das Gegenteil: „Das Fenster soll PASSEN, nicht rollen" (Dani, 08.08.2026), und dort wurde `maschinen-reiter-breite` rot. Er sitzt jetzt buendig am Rand; der Mittelpunkt des Verlaufs ist um dieselben 120 Pixel nach rechts gewandert (120/520 = 23 Prozentpunkte), damit der sichtbare Schein an derselben Stelle bleibt. */ .ds::before{content:'';position:fixed;width:520px;height:520px;border-radius:50%; top:-210px;right:0;filter:blur(18px);pointer-events:none;z-index:0; background:radial-gradient(circle at 63% 34%,rgba(255,255,255,.7),transparent 72%)} .ds > *{position:relative;z-index:1} .ds-glas{background:rgba(255,255,255,.52); backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25); box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 6px 20px var(--schatten)} .ds-hoch{background:var(--hochTon); box-shadow:-3px -3px 9px rgba(255,255,255,.9), 3px 5px 13px rgba(104,116,98,.22)} .ds-hoch:hover{box-shadow:-3px -3px 9px rgba(255,255,255,.95), 4px 6px 15px rgba(104,116,98,.30)} .ds-tief{background:var(--tiefTon); box-shadow:inset -3px -3px 8px rgba(255,255,255,.8), inset 3px 4px 10px var(--reliefTief)} .ds-dunkel{background:var(--dFlaeche);color:var(--dInk)} .ds-titel{font-family:'Newsreader',Georgia,serif;font-size:27px;font-weight:400; letter-spacing:-.015em;line-height:1;color:var(--tinte);margin:0} /* Der Titel EINES REITERS innerhalb der Immobilie. Er steht unter dem Namen des Hauses und muss darum leiser sein. Stand bis 31.08.2026 dreimal als `style={{fontSize:25}}` im Markup — dieselbe Zahl an drei Orten, also drei Gelegenheiten auseinanderzulaufen. */ .ds-titel.reiter{font-size:25px} .ds-titel em{font-style:italic} .ds-lab{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--faint);display:block;margin-bottom:5px} /* Steht eine Beschriftung IN einer Kachel, grenzt die Kachel sie ab und sie darf leise sein. Steht sie auf dem blossen Grund, muss die Schrift das allein tun: dann `stark`. Ohne das verschwindet sie zwischen den Zeilen, weil sie dieselbe Art und Groesse haette wie der Text darunter (Dani, 28.08.2026: „Die Titel verschwinden"). */ .ds-lab.stark{color:var(--tinte);font-size:10px;letter-spacing:.15em; margin-bottom:0;display:inline-block} /* DER TITEL EINER KACHEL ist KEINE Beschriftung (Dani, 29.08.2026). Sein Wort: „Ich habe immer noch Probleme mit den Titeln in den Kacheln. Sie sind zu wenig markant, sie verschwinden. Es springt einem nicht ins Auge." Gemessen war er 9,5px in `--faint` und kam damit auf 2,77 zu 1, der Mindestwert fuer Schrift ist 4,5. Alle drei Regler standen auf leise zugleich: Farbe, Groesse und Machart. Vorgelegt wurden fuenf Wege (`entwurf-kacheltitel.html`), Dani waehlte C: NICHT GESPERRT, sondern gross und fett, in der Tinte. Gemessen 14,4 zu 1. Ein Titel ist damit an der MACHART als Titel erkennbar und nicht nur an der Lautstaerke: gesperrt heisst Etikett, ungesperrt und fett heisst Titel. `ds-lab` bleibt, was es war: die Beschriftung ueber einem Eingabefeld und die leise Bildunterschrift. Wer einen Kachelkopf beschriftet, nimmt `ds-kt`. */ .ds-kt{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.2; display:inline-block;letter-spacing:-.01em} .ds-feld{border-radius:11px;padding:9px 12px;font-size:12.5px;color:var(--ink);border:none; outline:none;font-family:inherit;width:100%;font-weight:500} .ds-feld::placeholder{color:var(--faint)} .ds-feld:focus{box-shadow:inset -3px -3px 8px rgba(255,255,255,.8), inset 3px 4px 10px var(--reliefTief), 0 0 0 1.5px var(--tinte)} select.ds-feld{cursor:pointer;-webkit-appearance:none;appearance:none} .ds-kat{border-radius:100px;padding:8px 15px;font-size:12px;font-weight:700;color:var(--dim); display:inline-flex;gap:8px;align-items:center;border:none;font-family:inherit;cursor:pointer; white-space:nowrap} .ds-kat b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} .ds-kat.an{background:var(--tinte);color:#F1F7F3;box-shadow:0 6px 16px var(--tinteSchatten)} .ds-kat.an b{color:#F1F7F3} /* GEWAEHLT ist nicht dasselbe wie GEFUELLT (gefunden am 28.08.2026 in der Design-Kritik). Die Sprache kannte fuer „gewaehlt" nur die gefuellte Flaeche, und darum trug eine Seite sieben davon, obwohl es genau eine geben darf. Gewaehlt heisst ab jetzt EINGEDRUECKT, nach derselben Regel wie ueberall: das Relief traegt den Zustand, die Fuellung die Handlung. */ .ds-kat.gewaehlt{background:var(--tiefTon);color:var(--ink);font-weight:800; box-shadow:inset -3px -3px 8px rgba(255,255,255,.8), inset 3px 4px 10px var(--reliefTief), 0 0 0 1.5px var(--tinte) inset} .ds-kat.gewaehlt b{color:var(--ink)} .ds-kat.gewaehlt i{box-shadow:0 0 0 2px rgba(255,255,255,.5)} .ds-kat i{width:7px;height:7px;border-radius:50%;display:block;flex:none} /* LEER heisst: es gibt hier gerade nichts zu holen. Bis zum 29.08.2026 stand dafuer `opacity:.45`, und das blendete Schrift UND Relief zugleich herunter: die Beschriftung kam auf 2,17 zu 1, der Mindestwert ist 4,5. Leer wird jetzt an der HOHLEN Marke und an der grauen Zahl gezeigt, nicht am Verblassen des ganzen Knopfes. Das Wort selbst bleibt voll lesbar, denn „Defekt" ist auch dann eine Auskunft, wenn eine Null dahinter steht. Gemessen: 4,1 zu 1. */ .ds-kat.leer{color:var(--dim)} .ds-kat.leer b{color:var(--faint);font-weight:700} /* `!important`, weil die Seite die Farbe der Marke als inline-Stil setzt und ein inline-Stil jede Klasse schlaegt. Die hohle Marke traegt ihren Ring im `box-shadow`, damit sie dieselbe Groesse behaelt wie eine gefuellte. */ .ds-kat.leer i{background:transparent !important; box-shadow:0 0 0 1.5px var(--pf6) inset} /* Der Griff erscheint erst beim Darueberfahren, damit die Zeile im Ruhezustand aufgeraeumt bleibt (Dani, 27.08.2026). */ .ds-griff{width:0;overflow:hidden;opacity:0;transition:all .13s;font-size:11px; letter-spacing:-1.5px;color:var(--faint)} .ds-kat:hover .ds-griff{width:11px;opacity:1;margin-right:2px} .ds-kat.an:hover .ds-griff{color:rgba(241,247,243,.6)} /* Selbst gemachte Pillen: ein feiner Rand in ihrer Farbe. */ .ds-kat.eigen{box-shadow:-5px -5px 16px rgba(255,255,255,.85), 4px 6px 16px var(--relief), 0 0 0 1.5px var(--eigenFarbe,rgba(107,79,168,.35)) inset} .ds-kat.zieht{transform:rotate(-2deg) scale(1.04); box-shadow:0 16px 34px rgba(30,51,40,.28);cursor:grabbing;opacity:.9} .ds-kat.ds-dunkel b{color:var(--dOr)} .ds-wz{border-radius:100px;padding:5px 12px;font-size:11px;font-weight:700;color:var(--dim); border:none;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .ds-wz.an{background:var(--tinte);color:#F1F7F3;box-shadow:0 5px 14px var(--tinteSchatten)} /* EIN NAME, DER EIN GRIFF IST (Dani, 31.08.2026). Fuer Tabellenzeilen, die NICHT als Ganzes drueckbar sein duerfen, weil in ihnen schon etwas anderes klickbar ist. Anlass: auf der Mieterseite trug die Zeile den Klick, der das Bewohner-Fenster oeffnet, UND die E-Mail-Adresse war ein `mailto:`-Link darin. Ein Klick auf die Adresse tat darum beides zugleich. Ein Klick, eine Wirkung: die Zeile ist still, der Name traegt den Griff. Flach im Ruhezustand, erhaben beim Darueberfahren — dieselbe Regel wie beim `.ds-griff` an den Pillen: der Griff zeigt sich erst, wenn man hinfaehrt, sonst waeren zwoelf erhabene Flecken in einer Liste. */ .ds-name{border:none;background:none;font-family:inherit;font-size:inherit; color:var(--ink);font-weight:800;text-align:left;cursor:pointer; border-radius:8px;padding:3px 7px;margin:-3px -7px;transition:box-shadow .12s} .ds-name:hover,.ds-name:focus-visible{background:var(--hochTon);outline:none; box-shadow:-2px -2px 6px rgba(255,255,255,.9), 2px 3px 9px rgba(104,116,98,.22)} .ds-zeile{border-radius:13px;padding:11px 13px;cursor:pointer;display:flex;align-items:center; gap:11px;width:100%;text-align:left;border:none;font-family:inherit} /* Die angewaehlte Zeile ist gefuellt, nicht eingedrueckt (Dani, 28.08.2026). Sie ist die eine gefuellte Flaeche der Seite: was gerade offen ist, sagt die Zeile, und rechts steht der Beleg dazu. Wer sie fuellt, uebernimmt auch die hellen Entsprechungen der Zustandsfarben, sonst verschwindet der Zustand des Hauses im Dunkeln. */ .ds-zeile.an,.ds-zeile.gewaehlt{background:var(--tinte);color:var(--dDim); box-shadow:0 8px 22px var(--tinteSchatten)} /* Die Farben stehen HIER und nicht als inline-Stil in der Seite: ein inline-Stil schlaegt jede Klasse, und dann bliebe der Text auf der gefuellten Zeile dunkel auf dunkel. */ .ds-zeile div>span:not([class]),.ds-zeile>span:not([class]){color:var(--dim)} .ds-zeile.an b,.ds-zeile.gewaehlt b{color:#F1F7F3} .ds-zeile.an div>span:not([class]),.ds-zeile.gewaehlt div>span:not([class]), .ds-zeile.an>span:not([class]),.ds-zeile.gewaehlt>span:not([class]){color:var(--dDim)} .ds-zeile.an .ds-kreis,.ds-zeile.gewaehlt .ds-kreis{ border-color:rgba(232,243,236,.55);background:rgba(255,255,255,.14)} .ds-zeile.an .ds-kreis.warn,.ds-zeile.gewaehlt .ds-kreis.warn{border-color:var(--dRot)} .ds-zeile.an .ds-kreis.acht,.ds-zeile.gewaehlt .ds-kreis.acht{border-color:var(--dOr)} .ds-zeile.an .ds-kreis.gut,.ds-zeile.gewaehlt .ds-kreis.gut{border-color:var(--dGut)} .ds-zeile.an .ds-kreis.gewaehlt,.ds-zeile.gewaehlt .ds-kreis.gewaehlt{ background:#F1F7F3;border-color:#F1F7F3} /* Der Kreis bleibt optisch 17px, bekommt aber ueber ::before eine treffbare Flaeche von 40px. Ein Klickziel unter 24px ist zu klein (WCAG 2.5.8), und auf einem Tablet trifft man 17px nicht (Design-Kritik, 28.08.2026). */ .ds-kreis{width:17px;height:17px;border-radius:50%;flex:none;border:2.5px solid #B9C8BF; position:relative;background:rgba(255,255,255,.5);cursor:pointer} .ds-kreis::before{content:'';position:absolute;inset:-12px;border-radius:50%} .ds-kreis.warn{border-color:var(--rot)} .ds-kreis.acht{border-color:var(--or)} .ds-kreis.gut{border-color:var(--gut)} .ds-kreis.gewaehlt{background:var(--tinte);border-color:var(--tinte)} .ds-kreis.gewaehlt::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:7.5px; border:solid #F1F7F3;border-width:0 2px 2px 0;transform:rotate(42deg)} .ds-m{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap; border:1px solid transparent;display:inline-flex;align-items:center;gap:6px} .ds-m i{width:6px;height:6px;border-radius:50%;display:block} .ds-m.rot{background:var(--rotBg);color:var(--rot);border-color:var(--rotRand)} .ds-m.rot i{background:var(--rot)} .ds-m.orange{background:var(--orBg);color:var(--or);border-color:var(--orRand)} .ds-m.orange i{background:var(--or)} .ds-m.still{background:rgba(96,116,104,.10);color:#5E6E64;border-color:rgba(96,116,104,.24)} .ds-m.still i{background:var(--faint)} .ds-m.gut{background:var(--gutBg);color:var(--gut);border-color:var(--gutRand)} .ds-m.gut i{background:var(--gut)} .ds-knopf{border:none;border-radius:11px;padding:9px 16px;font-size:12px;font-weight:700; font-family:inherit;cursor:pointer;background:var(--tinte);color:#FBF8F2; box-shadow:0 6px 18px var(--tinteSchatten)} .ds-knopf.klein{padding:7px 13px;font-size:11.5px;border-radius:10px} .ds-knopf[disabled]{opacity:.45;cursor:default;box-shadow:none} .ds-knopf2[disabled]{opacity:.45;cursor:default;box-shadow:none} /* Der loeschende Knopf. Auch er ist gefuellt, aber in einem Rot, das sich vom Rot der Zustands-Marken unterscheidet: er handelt, sie berichten nur. */ .ds-knopf.gefahr{background:#8E2C1B;box-shadow:0 6px 18px rgba(142,44,27,.30)} .ds-knopf.gefahr[disabled]{box-shadow:none} .ds-knopf2{border:none;border-radius:11px;padding:9px 16px;font-size:12px;font-weight:700; font-family:inherit;cursor:pointer;color:var(--ink)} .ds-knopf2.klein{padding:7px 13px;font-size:11.5px;border-radius:10px} .ds-klapp{position:absolute;z-index:40;border-radius:16px;padding:9px;min-width:300px; background:rgba(255,255,255,.88); backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 18px 46px rgba(58,74,58,.26)} .ds-kkopf{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--faint);padding:7px 12px 8px;display:flex;align-items:center;gap:8px} .ds-ktrenn{height:1px;background:rgba(96,116,104,.16);margin:6px 8px} .ds-kz{border-radius:11px;padding:9px 12px;font-size:12.5px;font-weight:700;color:var(--ink); cursor:pointer;display:flex;align-items:center;gap:10px;border:none;background:none; font-family:inherit;width:100%;text-align:left} .ds-kz:hover{background:rgba(255,255,255,.7)} .ds-kz .ks{font-size:10.5px;color:var(--faint);font-weight:600;margin-left:auto; white-space:nowrap;padding-left:12px} .ds-kz > span:first-child{white-space:nowrap} .ds-kz[disabled]{opacity:.4;cursor:default} /* Das Haekchen. KEIN margin hier: wo es steht, entscheidet die Anordnung, nicht das Bauteil. Bis 28.08.2026 stand `margin-left:auto` in der Klasse selbst, und darum rutschte es in einem Formular an den rechten Rand, obwohl es neben seinem Text stehen sollte. */ .ds-hk{width:18px;height:18px;border-radius:6px;flex:none;position:relative} /* In einer Menuezeile gehoert es ans Ende. Das ist Sache der Zeile. */ .ds-kz .ds-hk{margin-left:auto} .ds-hk.an{background:var(--tinte)} .ds-hk.an::after{content:'';position:absolute;left:5.5px;top:3px;width:5px;height:8px; border:solid #F1F7F3;border-width:0 2px 2px 0;transform:rotate(42deg)} /* REITER SIND LEISE (Dani, 31.08.2026). Sein Befund: „Die Pillen oben sehen exakt gleich aus wie die Pillen unten." Er hatte recht. Die Sprache unterschied bis dahin nur ZUSTAENDE (erhaben = drueckbar, eingedrueckt = gewaehlt), aber nicht ARTEN: ein Reiter wechselt die SEITE, ein Werkzeug tut etwas AUF der Seite. Beide waren drueckbar, also sahen beide gleich aus, und man musste jedes Wort lesen. Seither gilt zusaetzlich: ERHABEN heisst „ich tue etwas", FLACH heisst „ich gehe irgendwohin". Ein Reiter traegt darum KEIN erhabenes Relief mehr; nur der gewaehlte ist eingedrueckt, wie jedes Gewaehlte seit dem 28.08.2026. Damit bleibt die Regel unangetastet, sie wird nur schaerfer. Gegen den Einwand „flache Schrift sieht nicht klickbar aus": beim Darueberfahren wird sie dunkler, und der gewaehlte Reiter ist deutlich eingedrueckt. Wer `ds-rt` benutzt, gibt ihm NICHT `ds-hoch` dazu. */ .ds-rt{border-radius:10px;padding:7px 13px;font-size:11.5px;font-weight:700;color:var(--dim); border:none;font-family:inherit;cursor:pointer;white-space:nowrap;background:none; transition:color .12s} .ds-rt:hover{color:var(--ink)} .ds-rt.an{background:var(--tinte);color:#F1F7F3;box-shadow:0 5px 14px var(--tinteSchatten)} .ds-rt b{margin-left:6px;font-weight:800;color:var(--ink)} .ds-rt.an b{color:#F1F7F3} .ds-rt.gewaehlt{background:var(--tiefTon);color:var(--ink);font-weight:800; box-shadow:inset -3px -3px 8px rgba(255,255,255,.8), inset 3px 4px 10px var(--reliefTief), 0 0 0 1.5px var(--tinte) inset} .ds-rt.gewaehlt b{color:var(--ink)} .ds-tk{border-radius:12px;padding:11px 13px;margin-bottom:7px;display:flex;align-items:center; gap:10px;cursor:pointer;border:none;font-family:inherit;width:100%;text-align:left} .ds-tk .kante{width:3px;align-self:stretch;border-radius:2px;flex:none;background:#B9C8BF} /* DIE LEISE LISTENKARTE (Dani, 31.08.2026). Sein Befund an der Kachel-Fassung der Mieterliste: „gefaellt mir schon auch, aber es ist halt sehr klobig." Zwoelf volle Reliefs untereinander sind zu viel. `.leise` ist dieselbe Karte, nur im Ruhezustand FLACH; ihr Relief bekommt sie erst beim Darueberfahren. Dieselbe Regel, die am 27.08.2026 fuer die Griffe an den Pillen entschieden wurde und die seit dem 31.08. auch `.ds-name` traegt: der Griff zeigt sich, wenn man hinfaehrt, sonst bleibt die Liste ruhig. Gemessen gegen die laute Fassung: 508 auf 445 Pixel bei sieben Wohnungen. Die Gruppe bleibt trotzdem lesbar, weil zwischen zwei Karten ein Abstand steht und INNERHALB einer Karte nur eine Haarlinie. WICHTIG, entschieden am 31.08.2026: das Heben zeigt, WO DER ZEIGER STEHT, nicht wo man klicken kann. Anfassbar ist der Name darin (`.ds-name`), nicht die Karte. Dani wurde das ausdruecklich vorgelegt und er hat es so gewaehlt: „Dass sich die ganze Karte ein bisschen abzeichnet, wenn man mit dem Zeiger drueberfaehrt, gefaellt mir auch so." Wer die Karte spaeter klickbar macht, dreht einen Entscheid um, keinen Zufall. */ .ds-tk.leise{border-radius:10px;padding:7px 12px;margin-bottom:3px; background:rgba(255,253,248,.55);box-shadow:none; transition:box-shadow .13s, background .13s} .ds-tk.leise:hover{background:var(--hochTon); box-shadow:-2px -2px 6px rgba(255,255,255,.9), 2px 3px 9px rgba(104,116,98,.20)} .ds-tk.leise .kante{width:2px} .ds-tk.a .kante{background:var(--rot)} .ds-tk.b .kante{background:var(--or)} /* ── Personen ────────────────────────────────────────────────────────────── Das Kuerzel ist erhaben, weil man es antippen kann. Mehrere ueberlappen sich leicht, der Name kommt im Aufklappen darunter. */ .ds-kuerzel{width:28px;height:28px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:9.5px;font-weight:800;color:var(--tinte);flex:none} .ds-kuerzel.gross{width:30px;height:30px;font-size:10px} .ds-koepfe{display:flex} .ds-koepfe .ds-kuerzel + .ds-kuerzel{margin-left:-9px} .ds-dunkel .ds-kuerzel{color:var(--dInk)} /* Das Feld „Betreut durch". Gruen wenn jemand zugeteilt ist, orange wenn niemand. Erhaben, weil es aufklappt. */ .ds-betreut{border:none;font-family:inherit;border-radius:10px;padding:8px 13px; font-size:11.5px;font-weight:800;cursor:pointer;white-space:nowrap;color:var(--gut); box-shadow:-5px -5px 16px rgba(255,255,255,.85), 4px 6px 16px var(--relief), 0 0 0 1.5px var(--gutRand) inset} .ds-betreut.leer{color:var(--or); box-shadow:-5px -5px 16px rgba(255,255,255,.85), 4px 6px 16px var(--relief), 0 0 0 1.5px var(--orRand) inset} /* ── Das Aufklappen unter dem Zeiger ─────────────────────────────────────── Es schwebt und schiebt nichts weg. Ohne Klick, nur beim Darauffahren. */ .ds-huelle{position:relative;display:inline-flex} .ds-pop{position:absolute;bottom:calc(100% + 8px);left:0;z-index:20;border-radius:13px; padding:11px 13px;white-space:nowrap;text-align:left; /* DECKEND, nicht durchscheinend (04.09.2026). Er deckte nur mit 82 Prozent und verliess sich auf sein `backdrop-filter`. Der wirkt aber nicht, sobald der Pop INNERHALB einer `ds-glas`-Kachel steht: die traegt selbst einen und macht damit einen eigenen Bezugsrahmen auf — dieselbe Falle wie bei `position:fixed`, an einer neuen Stelle. Gefunden am Kampagnen-Entwurf: durch die Erklaerung hindurch waren „Ablauf pruefen" und der Fusstext lesbar. Ein Erklaerkasten, durch den man fremden Text liest, ist keiner. */ background:var(--hochTon); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 14px 40px rgba(58,74,58,.22), 0 0 0 1px var(--relief); opacity:0;visibility:hidden;transform:translateY(4px);transition:all .13s ease-out} .ds-pop.rechts{left:auto;right:0} .ds-huelle:hover .ds-pop{opacity:1;visibility:visible;transform:translateY(0)} .ds-pop .pt{display:block;font-size:9.5px;font-weight:800;letter-spacing:.11em; text-transform:uppercase;color:var(--faint);margin-bottom:7px} .ds-pop .pz{display:block;font-size:12.5px;color:var(--ink);line-height:1.7} /* ── Der Fingerzeig ──────────────────────────────────────────────────────── Dani, 29.08.2026: „Wenn man ein To-do anklickt, geht die Seite dorthin, wo man noch offene Sachen hat, und die Kachel ist rot umrandet und leuchtet sanft, dass man sieht, wo genau man etwas anpassen muss." Es ist ABSICHTLICH kein Zustand, sondern eine Bewegung: nach gut vier Sekunden ist es weg. Ein Zustand waere eine Behauptung ueber das Element, ein Fingerzeig ist eine Antwort auf einen Klick. `outline` statt `box-shadow`, weil das Relief im box-shadow steckt: ein zweiter box-shadow wuerde es fuer die Dauer der Bewegung loeschen. Das Leuchten macht `drop-shadow`, das folgt der Form des Bauteils. */ .ds-zeig{outline:2px solid var(--rot);outline-offset:3px;border-radius:inherit; animation:dsZeig 4.4s ease-out forwards} @keyframes dsZeig{ 0% {filter:drop-shadow(0 0 0 rgba(155,51,32,0)); outline-color:rgba(155,51,32,.9)} 12% {filter:drop-shadow(0 0 11px rgba(155,51,32,.55))} 38% {filter:drop-shadow(0 0 2px rgba(155,51,32,.14))} 62% {filter:drop-shadow(0 0 11px rgba(155,51,32,.55))} 88% {filter:drop-shadow(0 0 2px rgba(155,51,32,.12)); outline-color:rgba(155,51,32,.9)} 100%{filter:drop-shadow(0 0 0 rgba(155,51,32,0)); outline-color:rgba(155,51,32,0)} } /* Wer die Bewegung im Betriebssystem abgestellt hat, bekommt den Rahmen trotzdem, nur ohne Pulsieren. Der Hinweis darf nicht verlorengehen. */ @media (prefers-reduced-motion:reduce){ .ds-zeig{animation:none;outline-color:var(--rot)} } /* ── Beim Warten ─────────────────────────────────────────────────────────── Eingedrueckte Rinne mit einem Lichtstreifen, der durchwandert. */ .ds-lade{height:13px;border-radius:7px;background:var(--tiefTon); box-shadow:inset 2px 3px 7px var(--reliefTief);overflow:hidden;position:relative} .ds-lade::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); animation:dsWandern 1.7s infinite} @keyframes dsWandern{from{transform:translateX(-100%)}to{transform:translateX(100%)}} /* ── Der Griff an ziehbaren Pillen ───────────────────────────────────────── Erscheint erst beim Darueberfahren, damit die Zeile ruhig bleibt. */ .ds-griff{width:0;overflow:hidden;opacity:0;transition:all .13s;font-size:11px; letter-spacing:-1.5px;color:var(--faint)} .ds-kat:hover .ds-griff{width:11px;opacity:1;margin-right:2px} .ds-kat.an:hover .ds-griff{color:rgba(241,247,243,.6)} .ds-kat.eigen{box-shadow:-5px -5px 16px rgba(255,255,255,.85), 4px 6px 16px var(--relief), 0 0 0 1.5px var(--eigenFarbe,rgba(107,79,168,.35)) inset} .ds-kat.zieht{transform:rotate(-2deg) scale(1.04); box-shadow:0 16px 34px rgba(30,51,40,.28);cursor:grabbing;opacity:.9} .ds-kat.ds-dunkel b{color:var(--dOr)} /* ── Zahlen und Ueberschriften ─────────────────────────────────────────────*/ .ds-h2{font-size:17px;font-weight:800;color:var(--ink)} .ds-h3{font-size:13.5px;font-weight:800;color:var(--ink)} .ds-zahl{font-family:'Newsreader',Georgia,serif;font-size:34px;font-weight:400; line-height:1;letter-spacing:-.02em;color:var(--tinte)} .ds-zahl.warn{color:var(--rot)} .ds-zahl.acht{color:var(--or)} .ds-zahl.gut{color:var(--gut)} /* ── Die Tabelle ─────────────────────────────────────────────────────────── Fuer Seiten, auf denen viele Zeilen mit vielen Spalten stehen und man vergleicht statt entscheidet: Mieter, Maschinen, Buchungen. Der Kopf ist dunkel, weil er die Tinte ist; die Zeilen sind Glas. */ .ds-tabelle{width:100%;border-collapse:collapse;font-size:12.5px} .ds-tabelle thead tr{background:var(--dFlaeche)} .ds-tabelle th{padding:10px 12px;color:var(--dDim);font-size:9.5px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;text-align:left;white-space:nowrap} .ds-tabelle th.r{text-align:right} .ds-tabelle td{padding:11px 12px;color:var(--dim);border-bottom:1px solid rgba(96,116,104,.14)} .ds-tabelle td.r{text-align:right} .ds-tabelle td b{color:var(--ink);font-weight:800} .ds-tabelle tbody tr:last-child td{border-bottom:none} .ds-tabelle tbody tr:hover td{background:rgba(255,255,255,.45)} .ds-tabellenkarte{border-radius:16px;overflow:hidden} /* ── Die Kachel ──────────────────────────────────────────────────────────── Eine Zahl und ihr Wort. Erhaben, wenn sie irgendwohin fuehrt, sonst Glas. */ .ds-kachel{border-radius:16px;padding:15px 17px;display:block;width:100%;text-align:left; border:none;font-family:inherit} .ds-kachel .kt{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--faint);margin-bottom:9px;display:block;line-height:1.3} .ds-dunkel .kt{color:var(--dFaint)} .ds-kachel .zu{font-size:11.5px;color:var(--dim);margin-top:6px;font-weight:600;display:block} .ds-dunkel .zu{color:var(--dDim)} /* ── Der Streifen ────────────────────────────────────────────────────────── Waagrechte Zeile aus Feldern, fuer Formulare und Stammdaten. */ .ds-streifen{display:grid;gap:12px} /* `minmax(0,1fr)` und nicht `1fr`: `1fr` laesst eine Spalte nie unter ihren Inhalt schrumpfen, die Flaeche waechst dann ueber ihren Rahmen hinaus. Genau das passierte am 04.09.2026 mit den Kampagnen-Karten: sie standen 39 Pixel ueber der Kante ihrer Kachel, und die zwei Spalten einer Reihe waren verschieden breit. Steht als Falle in design-regeln.md. */ .ds-streifen.zwei{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .ds-streifen.drei{grid-template-columns:repeat(3,minmax(0,1fr))} /* ── Der Schalter ────────────────────────────────────────────────────────── Fuer Dinge, die an oder aus sind und sofort gelten, ohne Speichern: „In App sichtbar". Die Mulde ist eingedrueckt, der Knopf darin erhaben. Eingeschaltet fuellt sich die Mulde mit der Tinte. */ /* `display:inline-block` ist KEIN Schoenheitsfehler, sondern noetig: ein ist von Haus aus inline, und an einem inline-Element wirken `width` und `height` nicht. Der Schalter war darum 0 x 23 Pixel gross und man sah nur den Knopf, der als `::after` absolut sitzt. Aufgefallen ist es erst am 29.08.2026, weil das Bauteil bis dahin immer in einer Flex-Spalte stand: dort wird ein inline-Element zum Block gemacht und die Masse gelten wieder. Ein Bauteil darf aber nicht davon abhaengen, wo es zufaellig steht. */ .ds-schalter{display:inline-block;width:40px;height:23px;border-radius:100px; position:relative;cursor:pointer;flex:none;background:var(--tiefTon); box-shadow:inset -2px -2px 6px rgba(255,255,255,.8), inset 3px 4px 9px var(--reliefTief); transition:background .15s} .ds-schalter::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px; border-radius:50%;background:var(--hochTon);transition:transform .15s; box-shadow:-2px -2px 5px rgba(255,255,255,.9), 2px 3px 6px var(--relief)} .ds-schalter.an{background:var(--tinte); box-shadow:inset 2px 3px 8px rgba(0,0,0,.28)} .ds-schalter.an::after{transform:translateX(17px);background:#F1F7F3; box-shadow:0 2px 5px rgba(0,0,0,.3)} /* Auf der dunklen Flaeche kehrt sich das Licht um, sonst sieht man von der Mulde nichts und nur der Knopf schwebt frei (gefunden am 28.08.2026 beim Bauen der Bento-Fassung). */ .ds-dunkel .ds-schalter{background:var(--dTief); box-shadow:inset 3px 4px 9px rgba(0,0,0,.5), inset -1px -1px 0 rgba(255,255,255,.07)} .ds-dunkel .ds-schalter::after{background:var(--dHoch); box-shadow:-1px -1px 0 rgba(255,255,255,.12) inset, 2px 3px 6px rgba(0,0,0,.4)} .ds-dunkel .ds-schalter.an{background:var(--dKnopf); box-shadow:inset 1px 2px 5px rgba(0,0,0,.22)} .ds-dunkel .ds-schalter.an::after{background:var(--dFlaeche); box-shadow:0 2px 5px rgba(0,0,0,.35)} /* ── Die Datei ───────────────────────────────────────────────────────────── Ein Dokument mit seinem Zustand: hinterlegt oder nicht. */ .ds-datei{display:flex;align-items:center;gap:12px;padding:11px 0} .ds-datei + .ds-datei{border-top:1px solid rgba(96,116,104,.16)} .ds-datei .dn{font-size:13px;font-weight:800;color:var(--ink)} .ds-datei .dz{font-size:11px;font-weight:600;margin-top:2px} .ds-datei .dz.da{color:var(--gut)} .ds-datei .dz.fehlt{color:var(--or)} /* ══════════════════════════════════════════════════════════════════════════ DER ABLAUF ALS PILLENKETTE (31.08.2026) Aus der Maschinenseite des Operators übernommen und hell gemacht. Ein Bauteil, zwei Anwendungen, und genau das war Danis Wunsch: „Ich möchte so was Ähnliches für die Defektmeldung." Sensor bestellt · in Bearbeitung · versendet · aktiv Defekt gemeldet · in Arbeit · behoben `war` heisst erledigt, `jetzt` heisst hier stehen wir, ohne Klasse heisst noch nicht. `.defekt` an der Kette färbt das Erledigte rot statt grün: derselbe Bau, andere Tinte. ══════════════════════════════════════════════════════════════════════════ */ .ds-kette{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0} .ds-kette .p{font:800 10px/1 Manrope,system-ui,sans-serif;letter-spacing:.1em; text-transform:uppercase;padding:6px 11px;border-radius:9px; background:var(--tiefTon);color:var(--faint);white-space:nowrap; box-shadow:inset 0 1px 2px var(--relief);border:1px solid transparent} .ds-kette .p.war{background:var(--gutBg);color:var(--gut); box-shadow:none;border-color:var(--gutRand)} .ds-kette .p.jetzt{background:var(--tinte);color:var(--hochTon);border-color:transparent; box-shadow:0 2px 8px var(--tinteSchatten)} .ds-kette .v{width:9px;height:2px;background:var(--relief);flex:none} .ds-kette .v.war{background:var(--gutRand)} .ds-kette.defekt .p.war{background:var(--rotBg);color:var(--rot);border-color:var(--rotRand)} .ds-kette.defekt .v.war{background:var(--rotRand)} /* ── Der Messbalken ──────────────────────────────────────────────────────── 26 Segmente, jedes in seiner Zonenfarbe, die erreichten stehen höher. Beim Operator liegt hinter jedem erreichten ein Schein; auf Hell trägt der nichts und steht darum hier nicht. Die nicht erreichten nehmen die Bg-Töne der Sprache statt 17 % Deckkraft, sonst wären sie auf dem Grund unsichtbar. */ .ds-balken{display:flex;gap:2px;align-items:flex-end;height:11px;margin:5px 0 3px} .ds-balken span{flex:1;border-radius:1px;height:7px} .ds-balken span.an{height:11px} .ds-balken span.rot{background:var(--rotBg)} .ds-balken span.rot.an{background:var(--rot)} .ds-balken span.or {background:var(--orBg)} .ds-balken span.or.an {background:var(--or)} .ds-balken span.gut{background:var(--gutBg)} .ds-balken span.gut.an{background:var(--gut)} /* ── Der grosse Wert in seiner Mulde ─────────────────────────────────────── Beim Operator ein dunkler Verlauf, hier eine eingedrückte Mulde: „hier wurde etwas hineingelegt". Zahlen stehen untereinander. */ .ds-mulde{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px} .ds-gross{font:800 27px/1 Manrope,system-ui,sans-serif;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .ds-gross .eh{font-size:14px;font-weight:700;color:var(--dim);margin-left:5px} .ds-gross.leer{color:var(--faint)} /* ── Das „i" ─────────────────────────────────────────────────────────────── Erhaben, weil man es drücken kann. Erklärendes gehört dahinter, nicht auf die Seite (design-regeln.md, Regel 1). */ .ds-info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px; border-radius:99px;font:800 10px/1 Manrope,system-ui,sans-serif;cursor:pointer; align-self:center;background:var(--hochTon);color:var(--dim);border:none;flex:none; position:relative; box-shadow:0 1px 2px var(--schatten),0 0 0 1px var(--relief)} /* Das „i" bleibt optisch 15px und wird ueber ::before auf 24px treffbar — derselbe Handgriff, den `ds-kreis` darueber schon benutzt. Er steht HIER und nicht in einer Seite: sonst ist das „i" ueberall dort wieder 15px klein, wo jemand die Zeile nicht mitkopiert hat (Design-Pruefer, 02.09.2026). */ .ds-info::before{content:'';position:absolute;left:50%;top:50%;width:24px;height:24px; transform:translate(-50%,-50%)} .ds-info:hover{color:var(--ink)} /* ══════════════════════════════════════════════════════════════════════════ DER AUSHANG (31.08.2026) Dani: „Dieses Projekt heisst WaschPlan. Und dieser Waschplan ist das Abbild von einem Waschplan. Und der sollte wirklich hübsch, schön, ansprechend daherkommen." Dazu das Bild eines gedruckten Wochenplans, und: „So wie man früher den Waschplan an der Wand gehabt hat. Das ist ja ein bisschen das, was wir ablösen. Da kommt noch ein bisschen Nostalgie dazu." Darum ist der Wochen-Kalender KEINE Glaskachel wie alles andere, sondern ein Blatt Papier. Es ist die einzige Fläche der Verwaltung mit eigenem Charakter, und das ist Absicht: sie trägt den Namen des Produkts. ══════════════════════════════════════════════════════════════════════════ */ .ds-blatt{position:relative;border-radius:20px;padding:24px 26px 22px;overflow:hidden; background:linear-gradient(168deg,#FFFDF6 0%,#FDFAF0 46%,#FBF6E9 100%); border:1px solid rgba(96,116,104,.14); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 34px rgba(58,74,58,.13)} /* Seifenblasen statt Blattwerk: dasselbe Prinzip wie auf dem gedruckten Vorbild, aber es gehört zur Waschküche. 5,5 Prozent, man sieht es fast nicht. */ .ds-blatt::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.055; background-image: radial-gradient(circle at 8% 12%, transparent 15px, var(--tinte) 15px, var(--tinte) 16px, transparent 16px), radial-gradient(circle at 14% 26%, transparent 9px, var(--tinte) 9px, var(--tinte) 10px, transparent 10px), radial-gradient(circle at 91% 8%, transparent 22px, var(--tinte) 22px, var(--tinte) 23px, transparent 23px), radial-gradient(circle at 96% 30%, transparent 12px, var(--tinte) 12px, var(--tinte) 13px, transparent 13px), radial-gradient(circle at 5% 78%, transparent 26px, var(--tinte) 26px, var(--tinte) 27px, transparent 27px), radial-gradient(circle at 12% 93%, transparent 14px, var(--tinte) 14px, var(--tinte) 15px, transparent 15px), radial-gradient(circle at 88% 88%, transparent 18px, var(--tinte) 18px, var(--tinte) 19px, transparent 19px), radial-gradient(circle at 97% 70%, transparent 10px, var(--tinte) 10px, var(--tinte) 11px, transparent 11px)} /* Das Korn. Ein SVG-Filter als data-URI: kein Bild im Repo, kein fremder Host, und es sieht in jeder Groesse gleich aus. */ .ds-blatt::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.4; mix-blend-mode:multiply;border-radius:inherit; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")} .ds-blatt > *{position:relative} /* Der Kopf: geschrieben, nicht gesetzt. */ .ds-bl-titel{font:400 italic 34px/1 'Newsreader',Georgia,serif;letter-spacing:-.01em; color:var(--tinte)} .ds-bl-zeit{display:inline-flex;align-items:baseline;gap:7px; font:400 15px/1 'Newsreader',Georgia,serif;color:var(--dim)} .ds-bl-zeit .v{font:600 15px/1 'Newsreader',Georgia,serif;color:var(--ink); border-bottom:1px solid rgba(96,116,104,.4);padding:0 9px 3px;min-width:62px; text-align:center;font-variant-numeric:tabular-nums} .ds-bl-kw{font:600 italic 19px/1 'Newsreader',Georgia,serif;color:var(--tinte); font-variant-numeric:tabular-nums} .ds-bl-pfeil{width:27px;height:27px;border-radius:50%;border:none;cursor:pointer; background:var(--hochTon);color:var(--dim);font-size:13px;font-family:inherit; box-shadow:0 1px 3px var(--schatten),0 0 0 1px var(--relief)} .ds-bl-pfeil:hover{color:var(--ink)} .ds-bl-fuss{display:flex;justify-content:space-between;align-items:center;margin-top:12px; font:500 10.5px/1 Manrope,system-ui,sans-serif;color:var(--faint)} .ds-bl-fuss .marke{font:400 italic 12px/1 'Newsreader',Georgia,serif} /* Das Raster des Aushangs. */ .ds-bl-rahmen{border:1px solid rgba(96,116,104,.3);border-radius:4px;overflow:hidden; display:grid} .ds-bl-ecke{border-right:1px solid rgba(96,116,104,.3); border-bottom:1px solid rgba(96,116,104,.26);background:rgba(96,116,104,.05)} .ds-bl-tk{font:400 italic 15px/1 'Newsreader',Georgia,serif;color:var(--tinte); padding:10px 8px 9px;text-align:center;white-space:nowrap; border-bottom:1px solid rgba(96,116,104,.26); border-right:1px solid rgba(96,116,104,.16);background:rgba(96,116,104,.05)} .ds-bl-tk:last-child{border-right:none} .ds-bl-tk b{font:600 15px/1 'Newsreader',Georgia,serif;font-style:normal; font-variant-numeric:tabular-nums} .ds-bl-tk.we{background:rgba(96,116,104,.085)} .ds-bl-tk.heute{background:rgba(30,51,40,.09)} .ds-bl-tk.heute b{position:relative} .ds-bl-tk.heute b::after{content:'';position:absolute;left:-3px;right:-3px;bottom:-3px; height:2px;background:var(--tinte);border-radius:2px} /* Die Achse. JEDE Stunde bekommt ihre Marke, und keine wird angeschnitten. */ .ds-bl-achse{border-right:1px solid rgba(96,116,104,.3);position:relative; background:rgba(96,116,104,.03)} .ds-bl-achse .h{position:absolute;right:9px;margin-top:-5px;white-space:nowrap; font:500 10.5px/1 'Newsreader',Georgia,serif;color:var(--dim); font-variant-numeric:tabular-nums} .ds-bl-achse .h.voll{font-weight:600;color:var(--tinte)} .ds-bl-feld{position:relative;border-right:1px solid rgba(96,116,104,.16)} .ds-bl-feld:last-child{border-right:none} .ds-bl-feld.we{background:rgba(96,116,104,.05)} .ds-bl-linien{position:absolute;inset:0;pointer-events:none} .ds-bl-linien i{position:absolute;left:0;right:0;height:1px;display:block; background:rgba(96,116,104,.13)} .ds-bl-linien i.voll{background:rgba(96,116,104,.22)} /* DIE KACHEL IST GLAS: backdrop-filter zeichnet weich, was dahinter liegt, also kommen die Stundenlinien DURCH sie hindurch statt auf sie gemalt zu sein. Licht oben, Schatten unten: sie schwebt ueber dem Blatt. */ .ds-bl-blk{position:absolute;left:5px;right:5px;border-radius:11px;padding:9px 10px; box-sizing:border-box;overflow:hidden; backdrop-filter:blur(3px) saturate(1.5);-webkit-backdrop-filter:blur(3px) saturate(1.5); box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 4px 13px rgba(58,74,58,.15)} .ds-bl-blk .w{font:700 12px/1.25 Manrope,system-ui,sans-serif} .ds-bl-blk .p{font:500 10.5px/1.3 Manrope,system-ui,sans-serif;color:var(--dim);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ds-bl-blk .z{font:600 11px/1 'Newsreader',Georgia,serif;margin-top:6px;opacity:.85; font-variant-numeric:tabular-nums} .ds-bl-frei{position:absolute;left:5px;right:5px;border-radius:11px; border:1.5px dashed rgba(96,116,104,.28);display:flex;align-items:center; justify-content:center;font:400 italic 12.5px/1 'Newsreader',Georgia,serif;color:var(--faint); background:repeating-linear-gradient(45deg,rgba(96,116,104,.045) 0 6px,transparent 6px 12px)} /* ── Der Kachelkopf, gross ───────────────────────────────────────────────── Wenn eine Kachel EIN Ding zeigt und dessen Name der Titel ist: der Gerätename auf der Maschinenseite. Stand bis 31.08.2026 als feste Angabe `font:'800 21px/1.1 inherit'` im Markup. */ .ds-kt.gross{font-size:21px;line-height:1.1;letter-spacing:-.02em} /* ── Die Bereichs-Überschrift ────────────────────────────────────────────── Teilt eine Kachel in benannte Hälften: „Waschmaschine" links, „Sensor" rechts. Sie steht ÜBER der erhabenen Karte, nicht darin, und ist darum keine Beschriftung (ds-lab) und kein Kacheltitel (ds-kt). */ .ds-bereich{font:800 14px/1 Manrope,system-ui,sans-serif;letter-spacing:.09em; text-transform:uppercase;color:var(--gut)} /* ── DER WINK ─────────────────────────────────────────────────────────────── Ein kleiner Hinweis, der beim Schweben unter seinem Anker aufgeht. Er ersetzt den `title`-Tooltip des Browsers, und zwar an jeder Stelle: der ist schwarz, kommt mit einer Sekunde Verzoegerung, laesst sich nicht gestalten und setzt einen Fragezeichen-Zeiger mitten auf die Schrift. Dani am Bild, 31.08.2026: „das komische Fragezeichen mit dem unschoenen Datum, das glaub ich geht besser." Er gehoert in die Sprache und nicht in eine Seite, damit er ueberall gleich aussieht. Der Anker braucht `position:relative`. */ .ds-anker{position:relative} .ds-wink{position:absolute;left:50%;top:calc(100% + 7px);z-index:60; transform:translateX(-50%) translateY(-4px) scale(.97);transform-origin:top center; opacity:0;pointer-events:none;transition:opacity .13s ease,transform .13s ease; white-space:nowrap;padding:6px 11px 7px;border-radius:10px; font:700 11px/1.25 Manrope,system-ui,sans-serif;letter-spacing:.005em; text-transform:none;color:var(--ink); background:var(--hochTon);border:1px solid var(--relief); box-shadow:0 6px 18px var(--schatten),0 1px 0 rgba(255,255,255,.9) inset} /* Das Spitzchen, damit der Wink zu seinem Anker gehoert und nicht daneben schwebt. */ .ds-wink::before{content:'';position:absolute;left:50%;top:-4px;width:7px;height:7px; margin-left:-3.5px;transform:rotate(45deg);background:var(--hochTon); border-left:1px solid var(--relief);border-top:1px solid var(--relief)} .ds-anker:hover>.ds-wink{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} /* Der leise Teil: „Bestellt" steht klein davor, das Datum traegt die Aussage. */ .ds-wink .w{color:var(--dim);font-weight:800;font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;display:block;margin-bottom:2px} /* Sitzt der Anker am rechten Rand, kippt der Wink nach links. */ .ds-wink.links{left:auto;right:0;transform:translateX(0) translateY(-4px) scale(.97); transform-origin:top right} .ds-anker:hover>.ds-wink.links{transform:translateX(0) translateY(0) scale(1)} .ds-wink.links::before{left:auto;right:14px;margin-left:0} /* Und nach oben, wenn unter dem Anker etwas steht, das nicht verdeckt werden darf. Fehlte ebenfalls: an der Marke „noch 24.–" legte sich der Wink auf die Zahl darunter und schnitt ihre Oberlaengen an (gemessen 0,7px Abstand). */ .ds-wink.oben{top:auto;bottom:calc(100% + 7px);transform-origin:bottom center} .ds-wink.oben::before{top:auto;bottom:-4px;border-left:none;border-top:none; border-right:1px solid var(--relief);border-bottom:1px solid var(--relief)} .ds-wink.oben.links{transform-origin:bottom right} .ds-wink.oben.rechts{transform-origin:bottom left} /* Und am linken Rand nach rechts. Fehlte bis zum 04.09.2026: die Männchen- Reihe der Kampagnen-Karte fängt am Rand der Kachel an, und der Wink des ersten stand 25 Pixel neben der Kachel. */ .ds-wink.rechts{left:0;transform:translateX(0) translateY(-4px) scale(.97); transform-origin:top left} .ds-anker:hover>.ds-wink.rechts{transform:translateX(0) translateY(0) scale(1)} .ds-wink.rechts::before{left:14px;margin-left:0} /* Die Tafel-Fassung des Winks: mehrere Angaben statt einer Zeile. Gedacht fuer „welches Geraet haengt hier" — beim Operator ein Fenster auf Klick, hier beim Darueberfahren (Dani, 31.08.2026). */ .ds-wink.tafel{white-space:normal;min-width:250px;padding:10px 12px 11px; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px} .ds-wink.tafel .f{min-width:0} .ds-wink.tafel .f b{display:block;font-weight:800;font-size:9px;letter-spacing:.1em; text-transform:uppercase;color:var(--faint);margin-bottom:2px} .ds-wink.tafel .f span{display:block;font-weight:700;font-size:11.5px;color:var(--ink); overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} .ds-wink.tafel .f span.leer{color:var(--faint);font-weight:600}