/* ══════════════════════════════════════════════════════════════════════════ DER KALENDER DES SENSORVERANTWORTLICHEN · als eigenes Bauteil Herausgeloest am 23.09.2026 aus `entwurf-rollout.html`, Modus `?nur=handy`. Dani hat diese Ansicht am 09.09.2026 am echten iPhone abgenommen (sitzungen/rollout/02-kalender-und-telefon.md, „Sein Kalender auf dem echten Telefon"). Jede Zahl und jeder Sonderfall hier ist Absicht. WORTGLEICH KOPIERT, Regeln und Kommentare. Geaendert ist nur die Anschrift: · Jede Regel haengt unter `.svk`, damit sie auf einer fremden Seite nichts ueberschreibt (dort gibt es z.B. eigene `.adr`, `.karte`, `.kopf`). · `:root` (die Gruppenfarben) steht auf `.svk`. · Regeln fuer `html` und `body` gelten nur, wenn die Seite das Bauteil traegt (`:has(.svk)`): im Entwurf setzte sie das Skript nur im Modus `?nur=handy`. · Der Klon der Wochenzeile haengt am Seitenkoerper und traegt selbst die Klasse `svk`, darum `.svk.wzklon` statt `.wzklon`. · Weggelassen: die Regel, die im Entwurf alles andere am Seitenkoerper versteckte (sie gehoert dem Blatt, nicht dem Bauteil), die Auswahlleiste `.farbwahl` des Pruefstands, und was nur der Web-Kalender braucht. Voraussetzung: `assets/design-sprache.css` ist geladen, der Body traegt `ds`. ══════════════════════════════════════════════════════════════════════════ */ /* ── DIE PASTELLPALETTE · eine Farbe je Sensorverantwortlichem ────────── */ .svk{ --g1:var(--gr1); --g1t:var(--gr1t); /* Salbei */ --g2:var(--gr2); --g2t:var(--gr2t); /* Sand */ --g3:var(--gr3); --g3t:var(--gr3t); /* Nebel */ --g4:var(--gr4); --g4t:var(--gr4t); /* Altrosa */ --g5:var(--gr5); --g5t:var(--gr5t); /* Lavendel */ /* --linie und --linieFein kommen aus assets/design-sprache.css. */ } /* Die Liste scrollt in sich, der Kopf bleibt stehen (Dani, 07.09.2026). Vorher lief die Wochenzeile beim Scrollen mit nach oben weg, und man wusste bei Immobilie 14 nicht mehr, welche Woche man ansieht. Die Hoehe ist hier fest, in der Seite ist es die Resthoehe des Fensters. */ .svk .plan{border:1px solid var(--linie);border-radius:13px; overflow-x:hidden;overflow-y:auto;max-height:var(--planHoehe,520px)} .svk .plan-kopf,.svk .plan-zeile{display:grid;grid-template-columns:var(--sp) 1fr} /* Deckend, nicht halbdurchsichtig: sonst scheinen die Balken durch, waehrend sie darunter hindurchlaufen. */ .svk .plan-kopf{border-bottom:1px solid var(--linie);background:var(--hochTon); position:sticky;top:0;z-index:4} .svk .plan-ecke{border-right:1px solid var(--linie);padding:9px 12px 8px; display:flex;flex-direction:column;justify-content:flex-end;gap:7px} .svk .plan-wochen{display:grid;grid-auto-flow:column;grid-auto-columns:1fr} .svk .plan-kw{font:600 italic 15px/1 'Newsreader',Georgia,serif;color:var(--tinte); text-align:center;padding:10px 0 8px;border-right:1px solid var(--linieFein)} .svk .plan-kw:last-child{border-right:none} .svk .plan-kw b{display:block;font:800 9.5px/1 Manrope;font-style:normal; color:var(--faint);margin-top:5px;letter-spacing:.06em} .svk .plan-kw.jetzt{background:rgba(30,51,40,.07)} .svk .plan-kw.jetzt b{color:var(--dim)} .svk .plan-zeile{border-bottom:1px solid var(--linieFein);min-height:33px} .svk .plan-zeile:last-child{border-bottom:none} .svk .plan-name{border-right:1px solid var(--linie);padding:5px 12px; display:flex;align-items:center;gap:10px;min-width:0} .svk .klammer{width:6px;align-self:stretch;flex-shrink:0} .svk .klammer.oben{border-radius:3px 3px 0 0;margin-top:4px} .svk .klammer.unten{border-radius:0 0 3px 3px;margin-bottom:4px} .svk .klammer.allein{border-radius:3px;margin:4px 0} .svk .adr{font:700 12.5px/1.2 Manrope;color:var(--ink);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;display:block} .svk .vw{font:700 10.5px/1.2 Manrope;color:var(--faint);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;display:block;margin-top:2px} /* Waagrecht abschneiden, senkrecht nicht: der Balken darf ueber die Zeilengrenze hinaus schatten, sonst schwebt er nicht, sondern klebt. `overflow:hidden` haette beides gekappt. */ .svk .plan-bahn{position:relative;overflow:visible;clip-path:inset(-16px 0)} .svk .plan-raster{position:absolute;inset:0;display:grid;grid-auto-flow:column; grid-auto-columns:1fr;pointer-events:none} .svk .plan-raster i{border-right:1px solid var(--linieFein)} .svk .plan-raster i:last-child{border-right:none} .svk .plan-raster i.jetzt{background:rgba(30,51,40,.05)} /* ── Der Balken · GESETZT, wird nicht mehr variiert ──────────────────── EINE Pille, innen unterteilt: deine Haelfte, die des Monteurs, und was ueber die zwei Wochen hinauslaeuft. Die Trennungen sind Linien, keine Luecken: es ist ein Vorgang, nicht drei. */ /* Erhaben, nach dem Rezept der Sprache: Licht von links oben, Schatten nach rechts unten. Der Balken liegt damit UEBER dem Raster, nicht darin. */ .svk .pille{position:absolute;top:5px;bottom:5px;border-radius:11px;overflow:hidden; display:flex;min-width:24px; box-shadow:-3px -3px 9px rgba(255,255,255,.9), 3px 5px 13px rgba(104,116,98,.22), 0 6px 20px var(--schatten)} /* Die Woelbung. Sie liegt UEBER den inneren Haelften, weil ein `inset` auf der Pille von deren Fuellung uebermalt wuerde. */ .svk .pille::after{content:'';position:absolute;inset:0;border-radius:inherit; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.42) 0, rgba(255,255,255,.05) 46%, rgba(30,51,40,.09) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} .svk .pille .halb{position:relative;box-sizing:border-box; border-right:1px solid rgba(255,255,255,.7)} .svk .pille .hf{position:absolute;left:0;top:0;bottom:0} .svk .pille .spaet{position:relative;display:flex;align-items:center; background:repeating-linear-gradient(115deg,var(--rotBg) 0 5px,transparent 5px 10px)} .svk .pille .spaet span{font:800 9.5px/1 Manrope;color:var(--rot);padding-left:9px; letter-spacing:.06em;white-space:nowrap} /* ── Wem gehoert welcher Teil der Pille · Vorschlaege (07.09.2026) ────── Heute trennt nur ein weisser Strich. Dass die rechte Haelfte dem Sensorverantwortlichen gehoert, weiss nur, wer es gebaut hat. KEIN Wort in die Pille (Dani), also traegt es die Form oder die Farbe. */ /* ── Wem gehoert welcher Teil der Pille · GESETZT (Dani, 07.09.2026) ──── Ein Fuss unter jeder Haelfte: gestrichelt fuer dich, durchgezogen fuer den Sensorverantwortlichen. Gleich dick, gleiche Farbe, nur die Strichform unterscheidet. Gewaehlt aus vier Wegen (nur seiner traegt einen Fuss · oben und unten · Form · Gegenfarbe), weil zwei dunkle Toene nebeneinander bei keiner der fuenf Gruppenfarben zu unterscheiden waren. KEIN Wort in der Pille, das war die Bedingung. Sein Bereich ist EIN Stueck: die zweite Haelfte UND der ueberfaellige Teil, denn ueberfaellig heisst, dass er noch nicht montiert hat. Die KANTE (Dani, 07.09.2026): die durchgezogene Linie beginnt genau rechts vom weissen Strich, die gestrichelte endet genau links davon. Dafuer braucht `.halb` ein `box-sizing:border-box`, sonst zaehlt der 1px-Strich zur Breite dazu und die Prozentzahl trifft immer daneben. */ .svk .seinTeil{position:absolute;top:0;bottom:0;right:0;pointer-events:none; border-radius:0 11px 11px 0;box-sizing:border-box;z-index:1; border-bottom:2.5px solid var(--seinRand)} .svk .meinTeil{position:absolute;top:0;bottom:0;left:0;pointer-events:none; border-radius:11px 0 0 11px;box-sizing:border-box;z-index:1; border-bottom:2.5px dashed var(--seinRand)} /* Das Datum am Uebergang: bis hierher hat Dani versendet. Nur in SEINEM Kalender, nicht in dem des Sensorverantwortlichen (Dani, 07.09.2026). */ /* Auf dem Telefon gibt es kein Darueberfahren, also steht das Versanddatum dort sichtbar auf der Kachel, unter der Adresse (Dani, 07.09.2026). Auf der Webseite steht es stattdessen im Tooltip. */ .svk .gesendet{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%); text-align:center;font:800 9.5px/1 Manrope;color:var(--tinte); letter-spacing:.03em;white-space:nowrap;pointer-events:none;z-index:2} .svk .wartet{position:absolute;top:5px;bottom:5px;border-radius:11px; background:var(--tiefTon);border:1px dashed var(--linie);box-sizing:border-box; display:flex;align-items:center} .svk .wartet span{font:800 9.5px/1 Manrope;color:var(--faint);padding-left:9px;letter-spacing:.06em} /* Kein Treffer. Ohne das stuende bei „Wartet" plus „Livit" ein leerer Rahmen da, und man wuesste nicht, ob es laedt oder ob nichts passt. */ .svk .leer{padding:26px 14px;text-align:center;font:700 12.5px/1 Manrope;color:var(--faint)} /* ── SEIN TELEFON ─────────────────────────────────────────────────────── Derselbe Kalender, nur auf seine Haeuser gefiltert und schmal. Quer ist fuer einen Kalender die richtige Haltung, aber erzwingen kann man sie nicht: darum dasselbe Bauteil mit einem anderen Ausschnitt. */ .svk .handy{border-radius:16px;overflow:hidden;box-sizing:border-box} /* EIN Kopf, eine Zeile: Titel, Zeitraum, Legende. Vorher standen Titel und Zeitraum untereinander und rechts blieb Weiss (Dani, 07.09.2026). */ .svk .handy .hkopf{display:flex;align-items:center;gap:11px;flex-wrap:wrap; padding:10px 12px;border-bottom:1px solid var(--linieFein)} .svk .handy .htitel{font:800 13px/1.2 Manrope;color:var(--ink)} .svk .handy .hunter{font:700 10px/1.2 Manrope;color:var(--faint);display:block;margin-top:1px} .svk .handy .hzeit{display:flex;align-items:center;gap:6px} .svk .handy .hzeit .z{font:600 italic 12.5px/1 'Newsreader',Georgia,serif;color:var(--tinte); white-space:nowrap} .svk .handy .ds-bl-pfeil{width:22px;height:22px} .svk .handy .plan{border:none;border-radius:0} .svk .handy .plan-kopf,.svk .handy .plan-zeile{grid-template-columns:var(--nsp) minmax(0,1fr)} /* Nichts darf hier umbrechen, sonst waere `max-content` sinnlos. */ .svk .handy .adr,.svk .handy .vw{white-space:nowrap} .svk .handy .plan-zeile{cursor:pointer} .svk .handy .plan-zeile:hover{background:rgba(255,255,255,.5)} .svk .handy .adr{font-size:12px} .svk .handy .vw{font-size:10px} .svk .handy .plan-kw{font-size:13px;padding:8px 0 6px} .svk .handy .plan-kw b{font-size:9px;margin-top:3px} .svk .handy .plan-ecke{padding:0 11px 7px} /* Die Pille erbt vom Web-Kalender: dieselbe Gruppenfarbe, dieselbe Form, dieselbe Kerbe, dieselbe Schraffur. Nur der Ausschnitt und die Schriftgroessen sind kleiner (Dani, 07.09.2026: „beide wie Rollout-Kalender, Webversion"). */ /* ── Der Eingang in seine Seite · GESETZT (Dani, 07.09.2026, C) ──────── Auf dem Telefon gibt es kein Darueberfahren: was anklickbar ist, muss im Ruhezustand zu sehen sein. Gewaehlt aus drei Wegen (Winkel, Namensknopf, ganze Zeile): die ganze Zeile ist die Kachel. Nicht der Name fuehrt weiter, sondern die Immobilie samt ihrem Balken. Die Flaeche liegt bewusst ZWISCHEN den zwei Werten der Sprache: das deckende Weiss (--hochTon) war „zu krass weiss", das Glas (.52) hob sich nicht mehr ab. Danis Wort: „nicht ganz so weiss, schon ein bisschen dass es sich abhebt, aber nicht zu krass weiss." */ .svk .handy .plan-zeile{background:rgba(255,253,248,.72);border-bottom:none; border-radius:12px;margin:5px 6px; box-shadow:-3px -3px 9px rgba(255,255,255,.9), 3px 5px 13px rgba(104,116,98,.22), 0 6px 20px var(--schatten)} /* GEAENDERT am 09.09.2026, am echten Telefon: Dani will SCROLLEN statt blaettern, in beide Richtungen, mit dem Finger. „Nur oben bleibt steif und die Liste der Immobilien. Kann man auf alle Seiten scrollen?" Das ersetzt den Entscheid vom 07.09. („er blättert, er scrollt nicht"). Damit es waagrecht ueberhaupt etwas zu scrollen gibt, sind die Wochen jetzt FESTE Spalten statt `1fr`: sonst passen sie sich der Breite an und es gibt nichts zu bewegen. */ .svk .handy .plan{background:rgba(219,220,209,.22); overflow-y:auto;overflow-x:hidden;touch-action:pan-y; overscroll-behavior:contain} /* ── WAAGRECHT SCROLLEN, zweiter Anlauf (09.09.2026) ──────────────────── Der erste Versuch machte die ZEILEN breiter als den Bildschirm und zerstoerte damit die Balken: sie sitzen prozentual auf der Zeitachse ihrer Zeile, und die Prozente rechneten danach gegen eine andere Breite. Richtig ist das Gegenteil: der KALENDER bekommt eine feste, groessere Breite, und ein Rahmen darum wird geschoben. Innen aendert sich nichts, alle Prozente rechnen weiter gegen dieselbe Zeile, die Geometrie aus vier Runden bleibt unangetastet. Nur der Ausschnitt wandert. Weil die Zeile jetzt wirklich breiter ist als der Rahmen, kann die Adressspalte kleben (`position:sticky`) und er sieht beim Schieben immer, welches Haus er vor sich hat. */ /* Beide Richtungen scrollen am SCHIEBER, damit die Adressspalte kleben kann. Ohne sie ist der Sprung ins Jetzt unbrauchbar: gemessen stand die laufende Woche im Blick und keine einzige Adresse daneben. DER KNIFF IST `clip-path`. `overflow:hidden` schneidet zwar die Balken am Rand des Zeitraums ab (Entscheid 07.09.2026: die Zeile schneidet ab, nicht der Balken, sonst verschieben sich seine Haelften), macht die Zeile aber zugleich zum naechsten scrollenden Vorfahren, und dort hat `sticky` waagrecht nichts zu tun. `clip-path` schneidet genauso und erzeugt keinen Scroll-Container. Dasselbe Mittel wie beim schwebenden Balken im Web-Kalender, aus demselben Grund. `touch-action:pan-y` steht weiter oben auf `.handy .plan` und verbietet dem Finger die waagrechte Geste; am Rechner faellt das nicht auf, weil Maus und Trackpad nicht betroffen sind. MERKSATZ: `touch-action` laesst sich nur am GERAET pruefen. */ .svk .nurhandy .plan-wochen{grid-auto-columns:minmax(0,1fr)} /* Unter der letzten Immobilie laufen die Wochenlinien weiter, sonst bricht das Raster mitten im Bild ab. Gezeichnet als wiederholter Verlauf, damit dafuer keine leeren Zeilen erfunden werden muessen: die Spaltenbreite ist die Kalenderbreite ohne die Namensspalte, geteilt durch die Wochen. */ .svk .nurscroll > .plan{background-image:repeating-linear-gradient(to right, transparent 0, transparent calc(var(--woBreit,72px) - 1px), var(--linieFein) calc(var(--woBreit,72px) - 1px), var(--linieFein) var(--woBreit,72px)); background-position:var(--sp) 0;background-repeat:repeat} /* DIE LAUFENDE WOCHE ALS DURCHGEHENDE SPUR (Dani, 09.09.2026: „die aktuelle Woche soll einen anderen Hintergrund haben, damit man sieht, was heute fuer eine Woche ist"). Am Rechner genuegt die getoente Kopfzelle, weil man die ganze Breite auf einen Blick hat. Auf dem Telefon sieht man drei oder fuenf Wochen und weiss nach zwei Wischern nicht mehr, wo heute liegt. Die Spur ist doppelt so kraeftig wie am Rechner (.10 statt .05) und bekommt zwei Kanten, damit sie auch dort noch zu sehen ist, wo ein Balken darueberliegt. */ .svk.wzklon .plan-kw.jetzt{background:rgba(30,51,40,.12)} .svk .nurhandy .plan-raster i.jetzt{background:rgba(30,51,40,.10); box-shadow:inset 1px 0 0 rgba(30,51,40,.16), inset -1px 0 0 rgba(30,51,40,.16)} .svk .nurhandy .plan-kw.jetzt{background:rgba(30,51,40,.12)} /* Der Kopf sagt zusaetzlich in Worten, welche das ist: eine Toenung allein ist auf einem kleinen Bildschirm zu leise, und Farbe ist hier schon vergeben (sie gehoert den Gruppen). */ /* Auch im Klon: er haengt am Seitenkoerper, nicht in `.nurhandy`, und ohne diese zweite Anschrift fehlte ihm das Wort. Er war dadurch niedriger als das Original, und dessen „HEUTE" schaute unter ihm hervor (Dani, 09.09.2026, dreimal „er darf noch mehr runter"). */ .svk .nurhandy .plan-kw.jetzt::after, .svk.wzklon .plan-kw.jetzt::after{content:'heute';display:block; font:800 8.5px/1 Manrope;letter-spacing:.12em;text-transform:uppercase; color:var(--rot);margin-top:3px} /* Die Adresse ist ein Knopf: ein Tipp schiebt die Zeit zu ihrem Balken (Dani, 09.09.2026). Auf einem schmalen Geraet ist das der Unterschied zwischen Suchen und Finden. */ .svk .nurscroll .plan-name{cursor:pointer} /* DIE GEWAEHLTE ZEILE IST GEFUELLT, in der Tinte. Erster Versuch war ein heller, erhabener Grund; Danis Befund am Geraet: „Jetzt hast Du's weiss gemacht. Man sieht's einfach nicht." Auf einer Flaeche, die selbst schon cremeweiss ist, kann Weiss nichts auszeichnen (design-sprache.md: auf hellem Grund traegt der Hellwert, nicht der Schatten). Die Sprache hat dafuer eine fertige Antwort, und sie ist von Dani selbst: „die angeklickte Immobilie moechte ich trotzdem wieder schwarz haben" (28.08.2026). Es gibt genau EINE gefuellte Flaeche je Seite, und sie gehoert dem, was gerade gewaehlt ist. Kein eigener Farbton: Farbe gehoert den Gruppen. Die Balken bleiben pastellig und stehen auf dem Dunkel sogar deutlicher als auf dem Hellen. */ .svk .nurscroll .plan-zeile.gewaehlt{background:var(--tinte); box-shadow:0 6px 18px var(--tinteSchatten)} .svk .nurscroll .plan-zeile.gewaehlt .adr{color:#FBF8F2;font-weight:800} .svk .nurscroll .plan-zeile.gewaehlt .zu, .svk .nurscroll .plan-zeile.gewaehlt .vw{color:rgba(251,248,242,.72)} .svk .nurscroll .plan-zeile.gewaehlt .klammer{opacity:1;width:5px} /* Auf der dunklen Zeile verschwindet der Fuss, der sagt, welcher Teil der Pille dem Sensorverantwortlichen gehoert: er ist in der dunklen Gruppenfarbe gezeichnet und liegt dann dunkel auf dunkel. Er wird hell, die Strichform bleibt (gestrichelt deiner, durchgezogen seiner). */ .svk .nurscroll .plan-zeile.gewaehlt .seinTeil{border-bottom-color:rgba(255,253,248,.85)} .svk .nurscroll .plan-zeile.gewaehlt .meinTeil{border-bottom-color:rgba(255,253,248,.55)} /* Der weiche Schatten der Pille ist auf Weiss unsichtbar und auf Dunkel ein Heiligenschein (Dani, 09.09.2026). Auf der gewaehlten Zeile bleibt nur die Lichtkante oben, die die Form traegt. */ .svk .nurscroll .plan-zeile.gewaehlt .pille{box-shadow:inset 0 1px 0 rgba(255,255,255,.55)} .svk .nurscroll .plan-zeile.gewaehlt .plan-raster i{border-color:rgba(255,255,255,.10)} .svk .nurscroll .plan-zeile.gewaehlt .plan-raster i.jetzt{background:rgba(255,255,255,.10); box-shadow:inset 1px 0 0 rgba(255,255,255,.18), inset -1px 0 0 rgba(255,255,255,.18)} /* KEIN NACHFEDERN, und die Ecke steht wirklich still (Dani, 09.09.2026). Drei Dinge zusammen, jedes einzeln reicht nicht: · `overscroll-behavior:none` statt `contain`. `contain` haelt die Geste nur davon ab, die Seite darunter mitzunehmen; das Gummiband am Ende des Wegs bleibt. `none` schaltet auch das ab. · `-webkit-overflow-scrolling:touch` ist raus. Es schiebt das Scrollen auf einen eigenen Faden, und die klebenden Teile hinken dabei sichtbar nach: genau das Zittern der Adressspalte beim Ziehen. Auf heutigem iOS ist die weiche Bewegung ohnehin Standard. · Die klebenden Teile bekommen eine eigene Ebene (`translateZ(0)`), damit sie nicht bei jedem Bild neu gezeichnet werden. */ .svk .nurscroll{overflow:auto;overscroll-behavior:none;touch-action:pan-x pan-y} /* Der Kalender fuellt den Schieber auch dann ganz, wenn seine Zeilen nicht bis unten reichen. Sonst endet das Bild nach der letzten Immobilie und darunter steht der blosse Seitenverlauf als farbiger Rand (Dani, 09.09.2026 am Bild markiert). `min-height:100%` statt einer festen Zahl: die Hoehe haengt am Geraet. */ .svk .nurscroll > .plan{width:var(--kalBreite,780px);max-height:none;min-height:100%; overflow:visible;clip-path:inset(0);touch-action:pan-x pan-y} .svk .nurscroll .plan-zeile{overflow:visible;clip-path:inset(0)} /* DIE ADRESSE SCROLLT MIT (Dani, 09.09.2026, dreimal gesagt und von mir dreimal falsch herum gebaut): „Es scrollt unter Weinbergstrasse 37 durch. Ich moechte das nicht, beides soll wegscrollen." Also KEIN `position:sticky` auf der linken Spalte und keins auf ihrer Ecke. Stehen bleibt allein der Wochenkopf, und nur senkrecht. Waagrecht wandert die Zeile als Ganzes, Adresse und Balken zusammen. */ .svk .nurscroll .plan-kopf{transform:translateZ(0)} /* ── GROESSER, NUR AUFS TELEFON (Dani, 09.09.2026: „es ist wirklich sehr klein ... ich rede nur fuers Handy, nicht fuers Web") ──────────────── Die `.handy`-Regeln weiter oben verkleinern alles, weil dort ein ganzes Blatt in einen 375-Rahmen musste. Im Vollbild ist dieser Grund weg. */ .svk .nurhandy .adr{font-size:15px} .svk .nurhandy .vw,.svk .nurhandy .zu{font-size:12px} /* Auch im Klon, wie beim Wort „heute": er haengt am Seitenkoerper und nicht in `.nurhandy`, also griffen die groesseren Schriften dort nicht. Die Datumszeile war dadurch kleiner als im Original (Dani, 09.09.2026). */ .svk .nurhandy .plan-kw,.svk.wzklon .plan-kw{font-size:16px;padding:11px 0 9px} .svk .nurhandy .plan-kw b,.svk.wzklon .plan-kw b{font-size:11px;margin-top:4px} .svk.wzklon .plan-ecke{padding:0 13px 9px} .svk .nurhandy .plan-zeile{min-height:52px} .svk .nurhandy .plan-ecke{padding:0 13px 9px} .svk .nurhandy .htitel{font-size:16px} .svk .nurhandy .hunter{font-size:12px} .svk .nurhandy .hzeit .z{font-size:15px} .svk .nurhandy .ds-wz{font-size:12.5px;padding:7px 13px} .svk .nurhandy .legende,.svk .nurhandy .legende *{font-size:12px} .svk .handy .plan-name{border-right:1px solid var(--linieFein)} /* Der Kopf ist eine Kachel wie die Zeilen: gleicher Rand, gleiche Rundung, gleiches Relief. Vorher war er ein eckiger, deckender Riegel zwischen lauter gerundeten Kacheln und stach heraus (Dani, 07.09.2026). Deckend bleibt er, weil die Balken beim Scrollen unter ihm durchlaufen; und er rueckt gleich weit ein, sonst laegen die Wochen nicht mehr unter ihren Zahlen (Regel 5, Ausrichtung auf den Pixel). */ .svk .handy .plan-kopf{margin:5px 6px 6px;border-bottom:none;border-radius:12px; box-shadow:-3px -3px 9px rgba(255,255,255,.9), 3px 5px 13px rgba(104,116,98,.22), 0 6px 20px var(--schatten)} /* ── Was er sieht · GESETZT (Dani, 07.09.2026, aus drei Wegen) ────────── Er kann an deiner Haelfte nichts tun, er kann nur warten. Darum traegt sie bei ihm keinen Fuss: eine Zustaendigkeit, nicht zwei. Und was noch gar nicht versendet ist, tritt zurueck, statt ihn zu mahnen. Am Fall Hofackerstrasse 8 zu sehen: ueberfaellig, aber noch nicht versendet, der Verzug ist also nicht seiner. */ .svk .handy .meinTeil{border-bottom:none} .svk .handy .plan-zeile.nochnicht .pille{opacity:.45} .svk .handy .plan-zeile.nochnicht .adr{color:var(--dim)} .svk .handy .plan-zeile.nochnicht .vw{opacity:.7} /* Der Text sagt, WORAUF er wartet. Er steht neben der Pille, nicht in ihr, sonst wuerde ihn die Daempfung mit verschlucken. Mittig ueber der ganzen Kapsel, nicht ueber einer Haelfte. */ .svk .nochtext{position:absolute;top:50%;transform:translateY(-50%); text-align:center;font:800 9.5px/1 Manrope;color:var(--dim); letter-spacing:.03em;white-space:nowrap;pointer-events:none;z-index:2} /* Die Auswahl-Kapseln des Sensorverantwortlichen. Eigene Gruppe, nicht bei den Pfeilen: die Pfeile sagen WANN, die Kapseln sagen WAS. Dieselbe Trennung wie im Operator-Kalender. */ .svk .hfilter{display:flex;gap:5px;flex-wrap:wrap;align-items:center} /* Solange etwas ueberfaellig ist, mahnt die Kapsel in Orange (Dani, 07.09.2026). Die Farbe ist die der Sprache fuer „wartet, fehlt", nicht das Rot des Defekts: es ist eine Erinnerung, kein Alarm. Sie pulsiert langsam und hoert auf, sobald der Filter laeuft, denn dann schaut er ja hin. Anders als `ds-zeig` ist das ein Dauerzustand, darum bleibt die Bewegung schwach: nur Grund und Rahmen, keine Groesse. */ .svk .ds-wz.mahnt{color:var(--or);animation:mahnen 2.2s ease-in-out infinite} @keyframes mahnen{ 0%,100%{background:transparent; box-shadow:inset 0 0 0 1px rgba(196,134,22,.28)} 50%{background:var(--orBg); box-shadow:inset 0 0 0 1px rgba(196,134,22,.55)} } /* Wer die Bewegung abgestellt hat, bekommt den Zustand trotzdem, nur ruhig. Der Hinweis darf nicht verlorengehen (dieselbe Regel wie bei ds-zeig). */ @media (prefers-reduced-motion:reduce){ .svk .ds-wz.mahnt{animation:none;background:var(--orBg); box-shadow:inset 0 0 0 1px rgba(196,134,22,.45)} } /* Der Kopf traegt vier Gruppen: WER bin ich · WANN · WAS zeige ich · und rechts die Erklaerung. Vorher stand alles im gleichen Abstand nebeneinander, und damit standen fuenf verschiedene Stile aneinander geklebt (Dani, 07.09.2026). Geordnet wird mit LUFT, nicht mit Strichen: ein Trennstrich braucht Breite, und die fehlt dann der Adressspalte. Innerhalb einer Gruppe eng, zwischen den Gruppen weit. */ .svk .handy .hkopf{gap:0} .svk .handy .hkopf .hzeit{margin-left:20px} /* Die drei Kapseln stehen in EINER Gruppe mit gleichem Abstand zueinander, und die Gruppe sitzt mittig zwischen dem Zeitraum und der Legende (Dani, 07.09.2026). Zwei `auto` teilen den freien Raum gleichmaessig; die Legende darf darum keines mehr haben, sonst wuerde er gedrittelt. */ .svk .handy .hkopf .hfilter{margin:0 auto;gap:9px} .svk .handy .hkopf .hlegende{margin-left:0} /* Auf dem breiten Geraet ist die Klammer unsichtbar: `display:contents` laesst ihre Kinder direkte Flex-Kinder des Kopfes bleiben. */ .svk .hlinks{display:contents} /* Auf dem schmalen reicht die Breite fuer eine Zeile nicht. Dann wird der Kopf zweispaltig: links Titel, Zeitraum und Kapseln untereinander, rechts die Legende als Spalte im freien Block (Dani, 07.09.2026). Ohne das klebte der Umbruch die Gruppen wieder aneinander. */ .svk .handy.schmal .hkopf{align-items:flex-start;flex-wrap:nowrap} .svk .handy.schmal .hlinks{display:flex;flex-direction:column;align-items:flex-start; gap:7px;min-width:0} .svk .handy.schmal .hlinks .hzeit, .svk .handy.schmal .hlinks .hfilter{margin:0} .svk .handy.schmal .hlegende{flex-direction:column;align-items:flex-start; gap:5px;margin-left:auto;flex-shrink:0} .svk .hlegende{display:flex;gap:11px;flex-wrap:wrap;align-items:center; font:700 10px/1 Manrope;color:var(--dim);margin-left:auto} .svk .hlegende span{display:inline-flex;align-items:center;gap:6px} .svk .hlegende i{width:14px;height:9px;border-radius:3px;display:block;flex-shrink:0} /* Dasselbe Muster wie im Operator-Kalender, nur kleiner. Aus SEINER Sicht ist der Fuss in der Gruppenfarbe „du", der graue „WaschPlan". */ .svk .hlegende i.fuss{background:color-mix(in srgb, var(--g1) 55%, var(--hochTon)); border-bottom:2px solid var(--g1t);box-sizing:border-box;height:11px} /* Genau das Muster des Balkens: dieselbe Streifenbreite (5/10 statt 4/8) UND derselbe Untergrund. Auf leerem Grund sah die Schraffur rot aus, im Balken liegt sie auf der blassen Gruppenfarbe und wirkt gruen (Dani, 07.09.2026: „Die Farben stimmen noch nicht ueberein"). */ .svk .hlegende i.sr{background: repeating-linear-gradient(115deg,var(--rotBg) 0 5px,transparent 5px 10px), color-mix(in srgb, var(--g1) 55%, var(--hochTon))} /* ══ Ab hier der Block, den der Modus ?nur=handy im Entwurf per JS einfuegt (entwurf-rollout.html Zeilen 1059-1237), ohne die erste Regel. ══ */ /* Der Grund gehoert auf HTML und BODY, nicht nur auf die Flaeche: hinter der Uhrzeit und unter der Leiste zeigt das Geraet den Grund des Dokuments. Eine eigene Flaechenfarbe stand hier kurz davor und war ein Fehlgriff: sie faerbte die ganze Seite blaeulich und aenderte am Streifen nichts. Es ist derselbe Verlauf wie ueberall. */ /* Was AUSSERHALB der Seite liegt (hinter der Uhrzeit, unter der Leiste), fuellt der Browser mit der Hintergrund-FARBE des Dokuments, nie mit einem Hintergrund-BILD. Unser Grund ist ein Verlauf, also ein Bild, und genau darum blieben die Raender weiss, egal was daneben stand. Zwei Farben, je eine fuer oben und unten, weil der Verlauf von Mintgruen nach Creme laeuft und eine einzelne Farbe nur eine Seite treffen kann: · oben die theme-color im Kopf der Datei (#DCF0EA, das Mint) · unten die Flaechenfarbe auf html (#F7F0DF). Nicht geschaetzt: der Verlauf wurde in ein Canvas gemalt und die Farbe am unteren Rand abgelesen (links #F5EFE0, Mitte #F7F0DF, rechts #F8F0DE). Der erste Wert #F4EFE0 war der Ton bei 78 Prozent des Verlaufs und kam sichtbar zu braun heraus. Auf der Seite selbst sieht man beide nicht: dort liegt der Verlauf. */ /* Der Verlauf gehoert auf HTML und wird dort am Fenster festgemacht. Der Hintergrund des Wurzelelements wird auf die ganze Zeichenflaeche uebertragen, also auch in die Bereiche hinter Statusleiste und unterer Leiste; mit fixed bleibt er dabei am Fenster stehen statt mit dem Inhalt zu wandern. Damit trifft er oben das Mint und unten das Creme, was eine einzelne Flaechenfarbe nie kann: sie deckte zuletzt beide Raender mit demselben Beige zu, und oben war es sichtbar falsch. Der BODY bleibt durchsichtig, sonst legt er sich darueber. */ /* UMGEDREHT (Dani, 09.09.2026, am Geraet): links das Creme, rechts das Mint. Dieselben fuenf Farben wie in der Designsprache, nur in der anderen Reihenfolge, damit es dieselbe Familie bleibt. NUR IM VOLLBILD-MODUS. Ob der Verlauf ueberall gedreht wird, ist ein eigener Entscheid: er traegt Operator UND Verwaltung. */ /* DERSELBE Verlauf auf Wurzel UND Seite, sonst gibt es zwei. Der Body traegt die Klasse ds aus der Designsprache, und die bringt den ungedrehten Verlauf samt Lichtfleck mit. Ein schlichtes body{background:none} reicht dagegen nicht: .ds ist spezifischer. Gemessen war darum die ganze Flaeche ungedreht und nur die Raender gedreht, und genau an dieser Kante brach die Farbe (Dani: „unter der Uhr ist es beige, unter Meine Immobilien nicht"). */ /* KEIN background-attachment:fixed. Damit malt der Browser das Bild nur im Fenster; die Zonen hinter Uhrzeit und Leiste bekommen stattdessen die Flaechenfarbe, und die traf den Verlauf an dieser Stelle nicht. Genau das war der bleibende Unterschied zwischen dem Streifen unter der Uhr und dem Kopf darunter (Dani, mehrfach gemeldet). Ohne fixed wird der Hintergrund der Wurzel ueber die GANZE Zeichenflaeche uebertragen, also auch in diese Zonen. Die Flaechenfarbe steht trotzdem da, aber jetzt auf dem Ton, mit dem der Verlauf oben links wirklich beginnt. */ /* NUR EIN Hintergrund, und zwar auf der Wurzel. Vorher lag derselbe Verlauf auch auf dem Body, und weil die zwei Boxen verschieden hoch sind, ergaben sie an derselben Stelle zwei verschiedene Farben: das war der Unterschied zwischen dem Streifen unter der Uhr und dem Kopf darunter, den Dani sechsmal gemeldet hat. Der Body ist jetzt durchsichtig. Der Hintergrund der Wurzel wird auf die ganze Zeichenflaeche uebertragen, also auch hinter Uhrzeit und Leiste. */ /* ZURUECK AUF DEN VERLAUF DER DESIGNSPRACHE (09.09.2026). Ich habe ihn gedreht, dann die Richtung geaendert, dann auf zwei Elemente gelegt und wieder auf eines: mit jedem Schritt war etwas anderes falsch, zuletzt war gar kein Verlauf mehr zu sehen. Der Ausgangszustand ist der, den die ganze Oberflaeche traegt. Er liegt auf der Wurzel, damit er auch hinter Uhrzeit und Leiste uebertragen wird, und der Body bleibt durchsichtig, damit es nicht zwei davon gibt. Die Flaechenfarbe und die theme-color stehen auf dem Ton, mit dem er oben links beginnt. WAS BLEIBT: der Streifen hinter der Uhrzeit trifft den Kopf darunter nicht genau. Sechs Anlaeufe, keiner hat es geloest. */ html:has(.svk){background-image:var(--grund)!important; background-attachment:scroll!important;background-size:cover!important; background-repeat:no-repeat!important;background-color:#DCF0EA} body.ds:has(.svk){background:none!important} body:has(.svk){min-height:100vh;min-height:100lvh} /* Der Lichtfleck der Sprache liegt als eigene Ebene darueber und wuerde den gedrehten Verlauf wieder aufhellen, wo er nicht soll. */ body.ds:has(.svk)::before{display:none} /* KEIN overflow:hidden mehr. Es stammt aus der Zeit, als die Seite selbst nicht scrollen sollte, und hat genau das verhindert, was jetzt gebraucht wird: gemessen stand der Kopf trotz sticky nicht still, weil das Dokument gar nicht scrollte. */ body:has(.svk),.ds:has(.svk){margin:0;min-width:0!important;overscroll-behavior:none} html:has(.svk){overscroll-behavior:none} /* BIS UNTER DIE LEISTE VON SAFARI (Dani, 09.09.2026: „könnte man das Bild so erweitern, dass es unter diese Browserpille weitergeht, bis ganz an den unteren Rand?"). 100dvh waere die SICHTBARE Hoehe und endet ueber der Leiste; 100vh ist die grosse Hoehe und reicht darunter. Unten darum auch kein Sicherheitsabstand: dort soll der Kalender ja durchlaufen. Links, rechts und oben bleibt er, dort sitzen Insel und gerundete Ecken. ACHTUNG: dieser Text steht IN einem Template-String. Kein einziges Rueckwaerts-Anfuehrungszeichen hier hinein, es beendet ihn. */ /* KEIN GLAS im Vollbild. Die Klasse ds-glas ist halbdurchsichtiges Weiss mit Unschaerfe: im Blatt liegt sie als Kachel auf dem Grund und sieht richtig aus, im Vollbild ist sie die ganze Seite und legt einen weissen Schleier ueber alles. Am oberen Rand, wo die Uhrzeit steht, war genau das der weisse Strich. Hier zeigt die Flaeche den Seitengrund selbst. (Kein Rueckwaerts-Anfuehrungszeichen in diesem Block, siehe unten.) */ /* DIE SEITE SELBST SCROLLT, und daran haengt alles andere. Safari klappt seine Leisten nur ein, wenn das DOKUMENT scrollt: dann schrumpft die untere Leiste zur Pille und der Inhalt laeuft unter die Uhrzeit. Dani hat es an Wikipedia gezeigt. Solange ein Element INNERHALB der Seite scrollt, bleibt Safari voll ausgefahren, und kein CSS aendert daran etwas: nicht 100vh, nicht 100lvh, nicht viewport-fit, nicht theme-color. Vier Anlaeufe lang habe ich an der falschen Stelle gesucht. Darum jetzt: senkrecht scrollt das Dokument, waagrecht der Schieber. Seitenkopf und Wochenzeile bleiben per sticky stehen. */ /* KEIN overflow-x:hidden auf html/body. Es macht das Dokument selbst zum Scroll-Container, und dann klebt position:sticky nicht mehr am Fenster: gemessen wanderte der Kopf beim Scrollen mit. Den waagrechten Ueberlauf haelt ohnehin der Schieber. */ html:has(.svk),body:has(.svk){height:auto;overflow:visible} .svk .nurhandy{display:block!important;position:static;width:auto!important; overflow:visible!important;background:none!important;backdrop-filter:none!important; -webkit-backdrop-filter:none!important;box-shadow:none!important; min-height:100vh;min-height:100lvh;height:auto; min-width:0!important;border-radius:0;box-sizing:border-box;padding:0} /* DER SEITENKOPF SCROLLT MIT (Dani, 09.09.2026): „dass man nach oben scrollen kann, inklusive Meine Immobilien, und fertig nach oben ist ueber 37, 38, 39." Also klebt nicht er, sondern die WOCHENZEILE: sie ist die Kante, an der das Scrollen aufhoert. Der Kopf mit Zeitraum, Heute und Legende wandert davor weg und ist wieder da, wenn man ganz nach oben zurueckkommt. */ /* KEIN eigener Hintergrund. Der Kopf trug den Verlauf der Designsprache, also den UNGEDREHTEN, und stand damit als eigener Farbblock unter dem gedrehten Rand: unter der Uhr creme, im Kopf gruen (Dani, 09.09.2026). Seit er mitscrollt, braucht er keinen deckenden Grund mehr; jetzt scheint derselbe Verlauf durch wie ueberall. */ .svk .nurhandy > .hkopf{position:static;background:none; padding-top:calc(6px + env(safe-area-inset-top)); padding-left:calc(11px + env(safe-area-inset-left)); padding-right:calc(11px + env(safe-area-inset-right))} /* Der Schieber scrollt nur noch waagrecht; senkrecht waechst er mit seinem Inhalt, damit das Dokument etwas zum Scrollen hat. */ /* overflow-y:clip statt visible: sobald EINE Achse scrollt, macht der Browser aus visible auf der anderen ein auto und die Flaeche wird zum Scroll-Container. Dann sucht position:sticky der Wochenzeile ihn statt des Dokuments und klebt an etwas, das gar nicht scrollt: gemessen war die Zeile beim Scrollen einfach weg. clip schneidet ab, ohne Scroll-Container zu sein. Dasselbe Mittel wie beim Abschneiden der Balken, aus demselben Grund. */ .svk .nurhandy > .nurscroll{overflow-x:auto;overflow-y:clip;height:auto!important} .svk .nurscroll > .plan{max-height:none!important} /* DIE WOCHENZEILE KLEBT NICHT MEHR. Versucht war: sie bleibt unterhalb des Seitenkopfs stehen, in einer gemessenen Hoehe. Am Geraet stimmte die Zahl nicht (der Kopf ist dort hoeher, wegen des Abstands zur Uhrzeit), und die Zeile stand mitten im Bild ueber den Immobilien. Danis Wort: „unten geht es jetzt, aber oben ist es komisch geworden." Zwei Dinge in verschiedenen Behaeltern auf denselben Pixel zu kleben, haengt an einer Zahl, die niemand garantiert. Also klebt nur der Seitenkopf mit Zeitraum und Heute; die Wochenzeile scrollt mit weg und ist wieder da, wenn man nach oben zurueckkommt. */ /* DIE WOCHENZEILE KANN NICHT KLEBEN, solange sie in der waagrecht schiebbaren Flaeche liegt. Zweimal versucht, beide Male gemessen: sobald eine Achse scrollt, wird die Flaeche zum Scroll-Container, und sticky sucht IHN statt des Dokuments. overflow-y:clip sollte das umgehen und tut es hier nicht. Ehrlich stehen lassen statt so tun als ob: die Zeile scrollt mit weg wie der Kopf. Wer es doch will, muesste die Wochenzeile aus dem Schieber nehmen und ihr Verschieben von Hand mitfuehren. Das ist ein Umbau am Kalender und Danis Entscheid. */ .svk .nurscroll .plan-kopf{position:static!important} /* Unten gerundet wie eine Kachel, oben eckig: oben schliesst er an den Bildrand an, unten liegt er ueber der Liste (Dani, 09.09.2026). Die Rundung sitzt am Rahmen, nicht an der Kopie: der Rahmen schneidet ab, also muss er selbst die Form haben. */ .svk.wzklon{display:none;position:fixed;top:0;z-index:35;overflow:hidden; pointer-events:none;border-bottom-left-radius:13px; border-bottom-right-radius:13px} /* Die Kopie braucht die Rundung selbst. Steht der Kalender ganz links, liegt ihre eigene Kante genau auf der des Rahmens, und ihre Ecke deckt dessen Rundung zu: die Ecke IMMOBILIE war dann eckig, beim Schieben nach rechts rund (Dani, 09.09.2026). */ .svk.wzklon > *{will-change:transform;border-bottom-left-radius:13px; border-bottom-right-radius:13px;overflow:hidden} /* DIE KAMERA-INSEL liegt quer ueber der linken Spalte, also ueber den Adressen. Der Kalender rueckt darum um den geschuetzten Rand ein, und der Klon mit ihm; hochkant ist dieser Wert null und nichts aendert sich. */ .svk .nurhandy > .nurscroll{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);box-sizing:border-box}