/* * terXtic - (c) Jucama KG, proprietaer. * * Handgeschrieben, kein Framework, kein Build-Schritt - dieselbe Minimallinie * wie in den beiden Website-Projekten. * * MOBIL ZUERST: Alle Grundregeln gelten fuer das schmale Fenster, die * Media Queries schalten erst nach oben. Grund ist die Vorgabe: Das System * soll am Handy genauso bedienbar sein - und das ist es nur, wenn der schmale * Fall der Normalfall im Stylesheet ist und nicht der nachtraeglich * zurechtgebogene Sonderfall. */ /* * FARBEN AUS DEM LOGO (branding/Logo_mwork.svg). * * Die Marke ist ein kräftiges Rot: #e20000. Es ist die einzige Farbe im * Logo neben Schwarz, Weiss und einem hellen Grau - deshalb ist das Schema * hier bewusst schwarz/weiss/grau MIT rotem Akzent und nicht bunt. * Dieselbe Linie wie bei paXCry. * * Rot ist damit die Farbe der Marke UND die Farbe für Fehler. Das ist kein * Versehen: Ein Fehler steht in einem Meldungskasten mit hellem Grund, eine * Hauptschaltfläche ist eine gefüllte rote Fläche - verwechseln kann man * beides nicht. Für Fehler wird ausserdem das dunklere #b00000 verwendet. */ :root { --dunkel: #1c1c1c; /* Kopfzeile */ --dunkler: #0f0f0f; --rand: #d0d0d0; --rand-hell: #e6e6e6; --grund: #f4f4f4; --flaeche: #ffffff; --text: #171717; --text-leise: #6b6b6b; --akzent: #e20000; /* die Markenfarbe */ --akzent-tief: #b00000; /* für Text auf hellem Grund und beim Überfahren */ --akzent-hell: #fff2f2; /* Das Zweitblau der Marke - im Logo stehen die Buchstaben "work" in #0096ff. Fuer eine Flaeche mit weisser Schrift ist genau dieser Ton zu hell (nur 3,1:1, gemessen), deshalb eine Stufe tiefer: 5,0:1. Erkennbar dieselbe Familie, aber im Sonnenlicht noch lesbar. */ --blau: #0077a8; --blau-tief: #005f87; --gut: #15803d; --gut-hell: #f0fdf4; --schlecht: #b00000; --schlecht-hell: #fff2f2; --warn-hell: #fffbeb; --intern: #b8860b; /* interne Notizen - bewusst NICHT rot, sonst liefe es mit der Markenfarbe zusammen */ --radius: 8px; /* Die Breite des Inhalts. Als Variable, weil sie an DREI Stellen gilt (Kopfzeile, Inhalt, Fusszeile) - stuenden dort drei Zahlen, liefe eine davon frueher oder spaeter auseinander, und dann sitzt die Kopfzeile anders als der Inhalt darunter. Gestaffelt statt einer Zahl: "FullHD ist fast die Mindestaufloesung" (Nutzer, 2026-08-05) - auf 1920 blieben von 1200px zwei Handbreit Rand. Ab 1720px ist Schluss: Dieser Rechner hat 3840 Punkte Breite, und ein Kalender ueber die volle Wand ist nicht mehr ueberblickbar, sondern nur noch weit. */ --breite: 1200px; /* Trifft die Systemschrift des jeweiligen Geraets. Keine Webfonts: Das waere eine externe Abhaengigkeit und zusaetzliche Ladezeit im Mobilfunknetz - fuer nichts, was ein Ticket lesbarer machte. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; } * { box-sizing: border-box; } body { margin: 0; background: var(--grund); color: var(--text); -webkit-text-size-adjust: 100%; } h1, h2, h3, h4, h5 { line-height: 1.25; margin: 0 0 .5em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } /* EINE ÜBERSCHRIFT DIREKT NACH EINEM FORMULAR KLEBTE AN DESSEN SCHALTFLÄCHE. Gemessen im Browser: 0 Punkte Abstand - die Zeile darüber gibt h1..h5 bewusst nur einen UNTEREN Abstand, und das ist fast überall richtig. Betrifft „Zuletzt getankt" im Fahrtenbuch und „Verbrauch" in der Fuhrparkverwaltung; beide lasen sich wie eine Beschriftung des Knopfes. */ form + h3 { margin-top: 1.2rem; } a { color: var(--akzent); } a:hover { color: var(--dunkel); } code { background: var(--grund); padding: .1em .3em; border-radius: 4px; font-size: .9em; } /* ========================================================================== Kopf und Navigation ========================================================================== */ /* * WEISSE KOPFZEILE, nicht dunkel. * * Der dunkle Balken war meine Erfindung, nicht die der Marke. Das Logo ist * für weissen Grund gezeichnet: Rot #e20000 auf Fast-Schwarz käme auf rund * 3,4:1 Kontrast - zu wenig, und die roten Striche des M würden matt. * Auf Weiss stehen Rot und Blau so, wie sie gemeint sind. * * Der rote Abschlussstrich unten trennt die Kopfzeile vom Inhalt und * nimmt die Markenfarbe auf, ohne sie aufzudrängen. */ .kopf { background: var(--flaeche); color: var(--text); border-bottom: 3px solid var(--akzent); /* Bleibt beim Rollen oben stehen: Am Handy ist eine lange Ticketliste schnell mehrere Bildschirme hoch, und "Neues Ticket" soll erreichbar bleiben, ohne ganz nach oben zurückzurollen. */ position: sticky; top: 0; z-index: 20; } .kopf-innen { max-width: var(--breite); margin: 0 auto; padding: .6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; } .marke { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; white-space: nowrap; } /* 30 Punkte: die Höhe, bei der die dünnen Buchstabenstriche nachgemessen noch sauber stehen. Darunter verblasst "work" gegenüber dem M. */ .marke img { height: 30px; width: auto; display: block; } .marke small { font-weight: 600; color: var(--text-leise); font-size: .8rem; border-left: 1px solid var(--rand); padding-left: .5rem; } /* -------------------------------------------------------------------------- Das Menü am Handy -------------------------------------------------------------------------- Bis 2026-08-07 rollte die Leiste hier waagrecht. Das war platzsparend und ein Fehler: Wer nicht auf die Idee kommt zu wischen, sieht die hinteren Punkte nie - vom Nutzer im Betrieb beobachtet. Jetzt klappt sie auf. Das Kästchen ist unsichtbar, aber NICHT `display: none` - sonst wäre es mit der Tastatur nicht mehr erreichbar und das Menü ohne Maus nicht zu öffnen. -------------------------------------------------------------------------- */ .menue-schalter { position: absolute; opacity: 0; margin: 0; /* WINZIG UND UNANTASTBAR, und beides aus einem gemessenen Grund: Mit 44x44 lag das unsichtbare Kästchen bei 375px Breite auf y=202 - mitten auf dem DRITTEN Menüpunkt. Weil es `position: absolute` trägt, liegt es über der Leiste; ein Tipp auf die linke Hälfte von "Kalender" hätte also das Menü zugeklappt, statt dorthin zu gehen. Im Bild ist davon nichts zu sehen. `pointer-events: none` schliesst das ein für alle Mal aus - bedient wird es ohnehin über die Beschriftung, und mit der Tastatur bleibt es erreichbar (Leertaste). */ width: 1px; height: 1px; pointer-events: none; } /* Die drei Schnellzugriffe, links vom Hamburger. Nur am Handy - am Rechner steht die ganze Leiste offen da (Regel weiter unten). */ .schnellzugriff { display: flex; gap: .3rem; margin-left: auto; order: 1; } .schnell-knopf { display: flex; align-items: center; justify-content: center; /* Dieselben 44px wie ueberall. Quadratisch, weil nur das Sinnbild darinsteht - eine Beschriftung passt neben "Menue" nicht mehr in die Zeile. */ width: 44px; height: 44px; border: 1px solid var(--rand); border-radius: var(--radius); color: var(--text-leise); text-decoration: none; } .schnell-knopf:hover { background: var(--grund); color: var(--text); } .schnell-knopf.an { background: var(--akzent); border-color: var(--akzent); color: #fff; } /* Das Sinnbild nimmt die Schriftfarbe an - deshalb stimmt es auch auf dem roten, markierten Knopf, ohne zweite Fassung. */ .sym { width: 22px; height: 22px; flex: 0 0 auto; } /* In der aufgeklappten Leiste steht das Sinnbild vor dem Namen. */ .nav a .sym { margin-right: .5rem; } .menue-knopf { display: flex; align-items: center; gap: .45rem; /* Kein margin-left:auto mehr: Diesen Platz schiebt jetzt die Schnellzugriffsleiste, und beide zusammen wuerden die Gruppe auseinanderreissen. */ order: 2; /* Dieselben 44px wie überall sonst. */ min-height: 44px; padding: 0 .6rem; border: 1px solid var(--rand); border-radius: var(--radius); color: var(--text-leise); font-size: .85rem; font-weight: 600; cursor: pointer; user-select: none; } .menue-knopf:hover { background: var(--grund); color: var(--text); } /* Den freien Platz schiebt IMMER GENAU EINER, sonst reisst er die Gruppe auseinander: Haben beide `margin-left: auto`, teilen sie ihn sich und zwischen den Knoepfen klafft eine Luecke. Gibt es die Leiste (sie fehlt, wenn alle drei Plaetze leer sind), schiebt sie; sonst der Hamburger. AB 2.22.0.0 KANN EIN DRITTER DAZUKOMMEN: der feste Posteingang-Knopf. Steht er da, schiebt ER - er ist der linkeste der drei. Die beiden anderen muessen dann still sein, sonst ist die Luecke wieder da. UND ES IST EIN VIERTER: DIE GLOCKE. Sie traegt seit 2.10.0.0 ebenfalls `margin-left: auto` (weiter unten bei `.glocke`), stand aber nie in dieser Aufzaehlung - beim Einbau des Posteingang-Knopfs hat sie deshalb niemand still gestellt. Am Rechner teilten sich beide den Platz, und die Glocke stand mitten in der Kopfzeile (vom Nutzer gemeldet 2026-09-22, nachgemessen: je 501,97px Aussenabstand). Behoben in der Regel fuer breitere Fenster; siehe `.glocke { order: 1 }` dort. */ .menue-knopf { margin-left: auto; } .schnellzugriff ~ .menue-knopf { margin-left: 0; } .fix-zugriff { display: flex; gap: .3rem; margin-left: auto; order: 1; } .fix-zugriff ~ .schnellzugriff { margin-left: .3rem; } .fix-zugriff ~ .menue-knopf { margin-left: 0; } /* Der Knopf traegt ein Abzeichen - dafuer braucht er einen eigenen Bezugspunkt; .schnell-knopf hat von sich aus keinen. */ .schnell-knopf.fest { position: relative; } /* Dieselben Masse und Farben wie an der Glocke: Zwei verschieden aussehende Abzeichen fuer dieselbe Sache ("da liegt etwas") waeren nur verwirrend. */ .schnell-zahl { position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 0 4px; border-radius: 9px; background: var(--akzent); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; } /* Sichtbar, wohin die Tastatur gerade zeigt - der Knopf ist ja nur eine Beschriftung, er bekommt den Fokusrahmen nicht von selbst. */ .menue-schalter:focus-visible + .menue-knopf { outline: 2px solid var(--akzent); outline-offset: 2px; } /* Die drei Striche aus einem Element: der mittlere ist der Kasten selbst, die äusseren sind seine beiden Schatten. Spart zwei leere . */ .menue-striche, .menue-striche::before, .menue-striche::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .menue-striche { position: relative; } .menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; } .menue-striche::before { top: -6px; } .menue-striche::after { top: 6px; } /* Offen: aus den Strichen wird ein Kreuz. Damit ist am Zeichen selbst abzulesen, dass derselbe Knopf wieder schliesst. */ .menue-schalter:checked + .menue-knopf .menue-striche { background: transparent; } .menue-schalter:checked + .menue-knopf .menue-striche::before { top: 0; transform: rotate(45deg); } .menue-schalter:checked + .menue-knopf .menue-striche::after { top: 0; transform: rotate(-45deg); } .nav { display: none; flex-direction: column; gap: .15rem; order: 4; width: 100%; margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--rand); /* DIE KOPFZEILE KLEBT OBEN (position: sticky), und mit sieben offenen Punkten wurde sie 452 von 812 Punkten hoch - nachgemessen bei 375x812. Wer das Menü aufmacht und dann rollt, statt etwas auszuwählen, hätte mehr als die halbe Anzeige verloren; auf einem kleinen Telefon fast alles. Deshalb ein Deckel: Was darüber hinausgeht, rollt innerhalb der Leiste. */ max-height: calc(100vh - 12rem); overflow-y: auto; } .menue-schalter:checked ~ .nav { display: flex; } .nav a { color: var(--text-leise); text-decoration: none; padding: .45rem .7rem; border-radius: var(--radius); white-space: nowrap; font-size: .95rem; /* Dieselben 44px wie bei den Schaltflächen. Mit blossem padding kamen die Punkte auf 37px - nachgemessen bei 375px Fensterbreite. Zu wenig für einen Fingertipp, und ausgerechnet die Navigation trifft man dann daneben. */ display: flex; align-items: center; min-height: 44px; } .nav a:hover { background: var(--grund); color: var(--text); } .nav a.an { background: var(--akzent); color: #fff; } .wer { margin-left: auto; text-align: right; line-height: 1.2; font-size: .8rem; } .wer-name { display: block; font-weight: 600; } .wer-firma { display: block; color: var(--text-leise); } /* DER NAME WIRD AM HANDY GEDECKELT (2.11.0.0) - und das ist der eigentliche Fix am gemeldeten Fehler, nicht das kleinere "Abmelden". Die Kopfzeile teilt sich per `order` bewusst in zwei Zeilen: oben wer man ist, unten wohin man kann. Fuer die obere bleiben bei 375 Punkten 343 uebrig, und davon brauchen Logo (97), Glocke (44), Abmelden (44) und die drei Luecken (48) schon 233. Fuer den Namen sind es also 110. GEMESSEN: "Markus Gspandl" ist 96 Punkte breit und passt knapp. "Maximilian Obermayr-Tschofen" braucht 187 - damit brach die Zeile AUSEINANDER und Abmelden rutschte wieder nach unten, genau der gemeldete Fehler. Ohne Deckel haengt die Kopfzeile also davon ab, wie der Mitarbeiter heisst. Gekuerzt wird mit Auslassungspunkten statt umgebrochen: Der Name ist hier eine Erinnerung daran, als wer man angemeldet ist - vollstaendig steht er unter Konto. */ @media (max-width: 40rem) { .wer { max-width: 6.5rem; } .wer-name, .wer-firma { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* NUR NOCH DAS SYMBOL (2.11.0.0): Am Handy rutschte "Abmelden" in eine zweite Zeile - vom Nutzer gemeldet. Der Text brauchte gut 75 Punkte, das Quadrat braucht 44, und mit dem entfallenen "Tickets" neben dem Logo passt die Zeile wieder. Dieselben 44 Punkte wie .schnell-knopf und .tw-knopf, und bewusst dieselbe ZURUECKHALTENDE Farbe wie die Schnellzugriffe: Abmelden ist nichts, was man anstrebt - es soll auffindbar sein, nicht einladend. */ .abmelden { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; color: var(--text-leise); text-decoration: none; border: 1px solid var(--rand); border-radius: var(--radius); } .abmelden .sym { width: 20px; height: 20px; } .abmelden:hover { background: var(--grund); color: var(--text); } .inhalt { max-width: var(--breite); margin: 0 auto; padding: 1rem; } .fuss { max-width: var(--breite); margin: 2rem auto 0; padding: 1rem; color: var(--text-leise); font-size: .8rem; border-top: 1px solid var(--rand-hell); } /* -------------------------------------------------------------------------- `hidden` muss staerker sein als jede Anzeigeregel -------------------------------------------------------------------------- Der Browser bringt `[hidden] { display: none }` selbst mit - aber JEDE eigene Regel mit einer Klasse schlaegt sie, weil die des Browsers die schwaechste ist. `.anhang-liste { display: grid }` hat genau das getan: Beim Zuklappen der Anhaenge stand `hidden` am Element, und die Liste war trotzdem 473 Punkte hoch - nachgemessen am 2026-08-09. Am Zahlenwert war das nicht zu sehen; das Element MELDETE `hidden = true`. Nur die gemessene Hoehe hat es verraten. `!important` ist hier richtig und nicht faul: "versteckt" ist keine Gestaltungsfrage, ueber die eine spaetere Regel abstimmen darf. -------------------------------------------------------------------------- */ [hidden] { display: none !important; } /* ========================================================================== Bausteine ========================================================================== */ .karte { background: var(--flaeche); border: 1px solid var(--rand-hell); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; } .karte-kopf { display: flex; /* UMBRECHEN, nicht ueberstehen (2026-09-12, am Handy gemeldet): Der Kopf traegt links eine Ueberschrift und rechts eine .knopf-reihe. Bei "Beschreibung" steckt in dieser Reihe das Aufklappformular "PDF mailen" - also ein ganzes Formular mit Adressfeld, Textfeld und der Liste der Anhaenge. Auf 375 Punkten blieben daneben 216 uebrig, gebraucht wurden 316: die Seite liess sich waagrecht schieben, die Ueberschrift stand links ausserhalb. Ohne flex-wrap kann die Reihe nicht auf eine eigene Zeile ausweichen - ein Flex-Element mit min-width:auto behaelt seine Inhaltsbreite und schiebt stattdessen den Rahmen auf. .seiten-kopf hat diese Zeile seit jeher, hier fehlte sie. GEMESSEN (375x812, Ticket mit vier Anhaengen): vorher 475 Punkte Inhalt, danach genau 375. Die naheliegende Gegenmassnahme - min-width:0 auf Reihe, details, form und fieldset - hat NICHTS gebracht, solange diese Zeile fehlte; mit ihr braucht es keine davon. */ flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .karte-kopf h2 { margin: 0; } /* Und die Reihe darf auch schmaler werden als ihr Inhalt (2026-09-12). Gemessen: Ohne das blieb sie 316 Punkte breit, obwohl im Kartenkopf nur 309 Platz sind - sie ragte in die Innenpolsterung der Karte. Nichts Sichtbares zerbrach daran, aber der rechte Rand war um 7 Punkte schmaler als der linke. Ein Flex-Element traegt von sich aus min-width:auto und behaelt damit seine Inhaltsbreite; hier ist das das Aufklappformular. */ .karte-kopf > .knopf-reihe { min-width: 0; } .seiten-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; } .seiten-kopf h1 { margin: 0; } .zurueck { display: inline-block; font-size: .85rem; text-decoration: none; margin-bottom: .2rem; } .klein { font-size: .85rem; color: var(--text-leise); } .mitte { text-align: center; } .hinweis-zeile { margin-top: -.5rem; } .meldung { padding: .7rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; font-size: .95rem; } .meldung.ok { background: var(--gut-hell); border-color: #bbf7d0; color: var(--gut); } .meldung.fehler { background: var(--schlecht-hell); border-color: #f0bcbc; color: var(--schlecht); } .meldung.info { background: var(--akzent-hell); border-color: #f5c2c2; color: var(--akzent-tief); } /* Die Warnung - neu am 2026-08-09 fuer den Hinweis auf den fehlenden Anhang bei der Abfahrt. Gelb statt rot, und das ist der Punkt: Sie haelt nichts auf, sie macht aufmerksam. Rot stuende fuer "das geht nicht". */ .meldung.warnung { background: var(--warn-hell); border-color: #f5d98b; color: var(--intern); } /* --- Schaltflächen ------------------------------------------------------ */ .knopf { display: inline-block; background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius); /* 44px Höhe ist die übliche Mindestgrösse für einen Fingertipp. Darunter trifft man am Handy mit Handschuhen nichts mehr - und genau das ist der Anwendungsfall. */ padding: .6rem 1rem; min-height: 44px; font: inherit; font-size: .95rem; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; } .knopf:hover { background: var(--grund); color: var(--text); } .knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; } .knopf.haupt:hover { background: var(--akzent-tief); color: #fff; } .knopf.leise { color: var(--text-leise); } .knopf.breit { width: 100%; } /* Auch die kleinen Schaltflächen bleiben bei 44px Höhe - nur schmaler. Nachgemessen kamen sie sonst auf 34px, und "Bearbeiten" ist am Handy keine Nebensache, sondern der Weg zur Korrektur. */ .knopf.klein { padding: .35rem .7rem; min-height: 44px; font-size: .85rem; } /* Aufklapper sind Bedienelemente, keine Überschriften. Gemessen kamen sie auf 19-22px - mit dem Finger kaum zu treffen, und dahinter steckt unter anderem die ursprüngliche Fassung eines Tickets. */ details > summary { min-height: 44px; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; cursor: pointer; /* display:flex nimmt dem das eingebaute Aufklapp-Dreieck. Ohne Ersatz sieht man dem Element nicht mehr an, dass sich etwas öffnet - ausgerechnet bei "Ursprüngliche Fassung ansehen" wäre das fatal, weil der Nachweis dann unauffindbar dahinterläge. Deshalb ein eigenes Zeichen, das sich beim Öffnen dreht. */ list-style: none; } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: "▸"; flex: none; color: var(--text-leise); font-size: .9em; transition: transform .15s ease; } details[open] > summary::before { transform: rotate(90deg); } /* Der Aufklapper der Löschen-Rückfrage ist als Schaltfläche gestaltet und soll nicht über die ganze Breite laufen. */ details > summary.knopf { display: inline-flex; } .knopf-reihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* ========================================================================== Die Werkzeugleiste unter dem Tickettitel (2.11.0.0) ========================================================================== AUFTRAG: "Buttons damit man nicht immer scrollen muss ... Alle nur mit Symbol statt Text. Die Buttons sollen eine andere Farbe haben als die neben dem Menü." BLAU, und das ist die zweite Markenfarbe (rotes "M" + blaues "work" im Logo) - sie war bis dahin fast ungenutzt. Sie trennt die Leiste von beidem, was ihr sonst gleichen könnte: von den neutralen Schnellzugriffen neben dem Menü, die aus dem Ticket HINAUSFÜHREN, und von den roten Hauptknöpfen, die etwas abschicken. Diese hier bleiben im Ticket und schicken nichts ab. Weiss auf --blau ergibt 4,99:1 - nachgerechnet, nicht geschätzt; WCAG AA verlangt 4,5:1 für Text und 3:1 für Sinnbilder. 44 Punkte wie überall. Das ist keine Zierde, sondern die kleinste Fläche, die sich am Telefon zuverlässig treffen lässt - und bei sechs Symbolen nebeneinander die Grenze, unter der man das falsche erwischt. ========================================================================== */ /* DIE KLEBENDE KOPFZEILE MUSS BEIM SPRINGEN MITGERECHNET WERDEN (2.11.0.1, vom Nutzer gemeldet: "beim klick auf die buttons wird etwas zu weit gescrollt. Die überschrift des jeweiligen Bereichs sollten sichtbar sein"). .kopf ist `position: sticky`. Ein Sprungziel landet damit oben am Fensterrand - also HINTER der Kopfzeile, und genau die Überschrift, die man sehen will, ist verdeckt. Es wurde nie zu weit gerollt, sondern zu hoch. scroll-margin-top ist dafür gebaut und der richtige Ort: Es wirkt für scrollIntoView UND für den gewöhnlichen Ankersprung ohne JavaScript - und der hatte denselben Fehler, seit es Sprungmarken gibt. GEMESSEN ist die Kopfzeile 118 Punkte hoch, bei 768 aber 165 (dort bricht die Navigation anders um). Ein einziger Wert trägt also nicht; der hier ist die GROSSZÜGIGE Seite. Zu weit nach oben zu rollen kostet nur ein paar Punkte Luft über der Überschrift, zu wenig verdeckt sie - und das ist der gemeldete Fehler. Das Skript schreibt die wirklich gemessene Höhe in --klebe-hoehe nach (siehe app.js); diese Werte sind der Rückfall. */ :root { --klebe-hoehe: 126px; } @media (min-width: 48rem) and (max-width: 61.999rem) { :root { --klebe-hoehe: 172px; } } .karte[id] { scroll-margin-top: calc(var(--klebe-hoehe) + .6rem); } .ticket-werkzeuge { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; } .tw-knopf { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; background: var(--blau); border: 1px solid var(--blau); border-radius: var(--radius); color: #fff; text-decoration: none; } .tw-knopf:hover { background: var(--blau-tief); border-color: var(--blau-tief); } .tw-knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .tw-knopf .sym { width: 22px; height: 22px; } /* Der Papierkorb-Knopf am Ticket (2.12.0.0). Dieselbe Form wie die Werkzeugleiste - es ist derselbe Griff -, aber in Rot: Er nimmt etwas weg, und das soll man an der Farbe sehen, bevor man drauftippt. */ .tw-knopf.tw-gefahr { background: var(--schlecht); border-color: var(--schlecht); } .tw-knopf.tw-gefahr:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); } /* Ohne Erklaertext (Nutzervorgabe) steht der Knopf allein in seiner Karte - ohne diese Regel klebte er am oberen Rand. */ .pk-weg { margin: 0; } /* Die Auswahlliste im Papierkorb. */ .pk-tabelle .pk-haken { width: 2.4rem; text-align: center; } .pk-tabelle .pk-haken input { width: 1.15rem; height: 1.15rem; } .pk-tabelle label { cursor: pointer; } .pk-knoepfe { margin-top: .8rem; } /* Drei Arten, drei Schildchen - damit in einer gemischten Liste auf einen Blick klar ist, was da liegt. Die Farben sind die schon vorhandenen: Blau wie die Werkzeugleiste, Gelb wie interne Notizen, Grau fuer Dateien. EIGENE KLASSE UND NICHT .marke, obwohl es die gibt - und das ist ein ausgewichenes Problem, kein Geschmack: `.marke` steht in dieser Datei ZWEIMAL mit verschiedener Bedeutung. Zeile ~135 ist der Logo-Behaelter der Kopfzeile (`display: flex`), Zeile ~1209 das runde Schildchen. Wer .marke benutzt, erbt das `display: flex` der ersten - im Papierkorb spannte das Schildchen dadurch die ganze Spalte -, und die spaetere Regel ueberschreibt ausserdem jede Farbe, die vorher gesetzt wurde. Beides am Bildschirm gesehen, nicht am Code. Die Doppelung selbst bleibt unangetastet: Sie aufzuloesen hiesse, jede Stelle im System zu pruefen, die `.marke` benutzt. */ .pk-art { display: inline-block; border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; white-space: nowrap; margin-right: .3rem; } .pk-art-ticket { background: var(--blau); color: #fff; } .pk-art-kommentar { background: var(--intern); color: #fff; } .pk-art-anhang { background: var(--text-leise); color: #fff; } /* ========================================================================== Das Fenster fuer eine Sperrmeldung (2.13.0.0) ========================================================================== "Aktuell steht die Meldung oben und man wundert sich, warum nichts passiert." Ein koennte man uebersehen, wenn es aussieht wie eine Karte - deshalb der rote Rand oben und das abgedunkelte Dahinter. ::backdrop statt eines eigenen Ueberzugs: Das macht der Browser selbst, und Escape schliesst von Haus aus. Ein nachgebautes Fenster muesste Tastaturbedienung, Fokusfang und das Schliessen selbst mitbringen. ========================================================================== */ .sperr-dialog { max-width: 32rem; width: calc(100% - 2rem); border: 1px solid var(--rand); border-top: 4px solid var(--schlecht); border-radius: var(--radius); padding: 1.2rem; background: var(--flaeche); color: var(--text); } .sperr-dialog::backdrop { background: rgba(0, 0, 0, .45); } .sperr-dialog h2 { margin: 0 0 .5rem; font-size: 1.15rem; } .sperr-text { margin-bottom: 1rem; line-height: 1.5; } /* Die Meldung wird geklont - der Rahmen der Zeile oben gehoert hier nicht hin, der Dialog ist schon der Rahmen. */ .sperr-text .meldung { border: 0; padding: 0; margin: 0; background: none; } .sperr-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; } /* Die Rueckfrage (2.15.2.0) - dasselbe Fenster wie die Sperrmeldung, damit das System einheitlich aussieht. Blauer Rand fuer gewoehnliche Fragen, roter fuer alles, was etwas wegnimmt. */ .frage-dialog { max-width: 28rem; width: calc(100% - 2rem); border: 1px solid var(--rand); border-top: 4px solid var(--blau); border-radius: var(--radius); padding: 1.1rem 1.2rem; background: var(--flaeche); color: var(--text); } .frage-dialog.gefahr { border-top-color: var(--schlecht); } .frage-dialog::backdrop { background: rgba(0, 0, 0, .45); } .frage-dialog h2 { margin: 0 0 .5rem; font-size: 1.1rem; } .frage-dialog p { margin: 0 0 1rem; line-height: 1.5; overflow-wrap: anywhere; } .frage-dialog .knopf { min-height: 44px; } /* Eine Wahl in einer Meldung (2.15.3.0). Ohne JavaScript steht sie in der Meldung oben, mit JavaScript wandert sie in die Knopfreihe des Fensters. */ .meldung-wahl { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; } .meldung-wahl form { margin: 0; } .sperr-knoepfe .meldung-wahl { margin-top: 0; justify-content: flex-end; } .sperr-knoepfe .knopf { min-height: 44px; } /* Der Verweis in der Meldung selbst (ohne JavaScript sichtbar, mit JavaScript wandert er als Knopf in das Fenster). */ .meldung-weg { white-space: nowrap; } /* ========================================================================== Kalender als Auswahldialog (2.15.0.0) ========================================================================== Dieselbe Familie wie .sperr-dialog: mit ::backdrop, Escape schliesst von Haus aus. Die Stundenknoepfe sind .frei-feld - dieselben Farben wie im Kalender, damit "knapp" dort und hier gleich aussieht. NUR DER INHALT ROLLT: Kopf, Wochenwechsel und Fuss bleiben stehen. Ein Dialog, dessen "Abbrechen" am Handy unten hinausragt, liesse sich nur noch mit der Zuruecktaste verlassen. ========================================================================== */ .kw-anzeige { cursor: pointer; } /* Bis-Feld mit "+1 h" / "+2 h" (2.15.1.0). Das Feld darf schrumpfen, die Knoepfe nicht - sonst stuende "+2 h" am Handy in zwei Zeilen. */ .kw-zeile { display: flex; gap: .3rem; align-items: stretch; } .kw-zeile .kw-anzeige { flex: 1 1 auto; min-width: 0; } .kw-plus { flex: 0 0 auto; white-space: nowrap; padding: .3rem .5rem; font-size: .85rem; } /* KOMPAKTER SEIT 2.15.1.0 (Nutzerwunsch: Zahl, Raender der Felder, Tag und Datum und die Wochenknoepfe kleiner). Die Knoepfe liegen damit unter der 44-Punkt-Empfehlung - bei acht bis zehn Stunden je Tag ist eine Woche auf einen Blick wichtiger, und daneben liegt nichts, was man versehentlich trifft. */ .kw-dialog { max-width: 34rem; width: calc(100% - 1rem); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); border: 1px solid var(--rand); border-top: 3px solid var(--blau); border-radius: var(--radius); padding: .6rem .7rem; background: var(--flaeche); color: var(--text); } .kw-dialog[open] { display: flex; flex-direction: column; gap: .4rem; } .kw-dialog::backdrop { background: rgba(0, 0, 0, .45); } .kw-dialog h2 { margin: 0; font-size: .95rem; } .kw-kopf p { margin: .1rem 0 0; font-size: .75rem; } .kw-nav { display: flex; align-items: center; gap: .4rem; } .kw-nav .knopf { min-width: 2.2rem; min-height: 2rem; padding: .1rem .5rem; font-size: 1rem; line-height: 1; } .kw-woche { flex: 1 1 auto; text-align: center; font-weight: 700; font-size: .85rem; } .kw-inhalt { overflow-y: auto; min-height: 5rem; } .kw-tag { padding: .25rem 0; border-top: 1px solid var(--rand-hell); } .kw-tag:first-child { border-top: 0; } .kw-tag h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; margin: 0 0 .15rem; font-size: .75rem; } .kw-tag h3 .marke-feiertag { font-size: .7rem; } .kw-tag.heute h3 { color: var(--akzent); } .kw-geschlossen { margin: 0; font-size: .75rem; color: var(--text-leise); } .kw-stunden { display: flex; flex-wrap: wrap; gap: 2px; } /* DIE STUNDEN TEILEN SICH DIE ZEILE (flex 1 1 0) statt fester Breite: Mit 2.2rem standen am Handy neun in der Reihe und die zehnte allein darunter - ein Tag in zwei Zeilen, und die Woche war doppelt so hoch. Die Unter- und Obergrenze halten die Knoepfe lesbar und auf breitem Schirm nicht riesig. */ .kw-stunden .frei-feld { flex: 1 1 0; min-width: 1.9rem; max-width: 2.6rem; min-height: 2.1rem; padding: .05rem 0; border-radius: 3px; font: inherit; line-height: 1.05; cursor: pointer; } .kw-stunden .frei-feld .fz { font-size: .55rem; } .kw-stunden .frei-feld .fa { font-size: .78rem; } .kw-stunden .frei-feld:hover, .kw-stunden .frei-feld:focus-visible { outline: 2px solid var(--blau); outline-offset: 0; } .kw-stunden .frei-feld.gewaehlt { outline: 2px solid var(--blau); outline-offset: 1px; } .kw-tag.vorbei, .kw-stunden .frei-feld.vorbei { opacity: .5; } /* Zustellfenster: Die Zahl zaehlt Monteure und sagt ueber eine Tour nichts - dort nur die offenen Stunden, ohne Farbe und ohne Zahl. */ .kw-ohne-zahl .frei-feld .fa { display: none; } .kw-ohne-zahl .frei-feld.frei, .kw-ohne-zahl .frei-feld.knapp, .kw-ohne-zahl .frei-feld.voll { background: var(--grund); border-color: var(--rand-hell); color: var(--text); } .kw-ohne-zahl .kw-stunden .frei-feld { display: flex; align-items: center; justify-content: center; } .kw-ohne-zahl .kw-stunden .frei-feld .fz { font-size: .78rem; font-weight: 700; opacity: 1; } .kw-fuss { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; } /* Die Stunden im Kalender sind seit 2.15.0.0 Links. */ a.frei-feld { text-decoration: none; cursor: pointer; } a.frei-feld:hover, a.frei-feld:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; } /* Neues oder vorhandenes Ticket */ .kt-wahl { display: flex; flex-wrap: wrap; gap: .5rem; } .kt-wahl .knopf { flex: 1 1 10rem; justify-content: center; text-align: center; min-height: 44px; } .kt-suche { display: flex; flex-direction: column; gap: .5rem; min-height: 0; } .kt-suche input { width: 100%; } .kt-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; } .kt-liste li { border-top: 1px solid var(--rand-hell); } .kt-liste li.klein { padding: .5rem 0; } .kt-liste a { display: grid; gap: .1rem; padding: .55rem .2rem; color: inherit; text-decoration: none; } .kt-liste a:hover, .kt-liste a:focus-visible { background: var(--grund); } .kt-dialog .kt-suche[hidden] { display: none; } /* Die Logo-Probe in den Betreiberangaben (2.14.0.0). Der dunkle Grund ist kein Schmuck: Das Logo steht in der Kopfzeile auf --dunkel, und ein freigestelltes PNG sieht auf weiss ganz anders aus als dort. Wer es hier auf hellem Grund prueft, laedt womoeglich eines mit weisser Schrift hoch und sieht es erst danach. */ .logo-probe { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--dunkel); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; } .logo-probe .klein { color: #d8d8d8; margin: 0; flex: 1 1 12rem; min-width: 0; } .logo-vorschau { height: 40px; width: auto; display: block; flex: 0 0 auto; } /* ========================================================================== Zum Anfang - der schwebende Knopf im Ticket (2.14.1.0) ========================================================================== Dieselbe Familie wie die Werkzeugleiste: 44 Punkte, Blau, weil er im Ticket bleibt. Der Schatten ist das Einzige, was ihn davon unterscheidet - er muss als UEBER dem Inhalt schwebend erkennbar sein, sonst liest er sich wie ein Knopf, der zu der Karte darunter gehoert. env(safe-area-inset-*): Auf Telefonen mit Gestenleiste laege er sonst auf der Leiste und liesse sich kaum treffen. SICHTBARKEIT UEBER [hidden], nicht ueber opacity. Ein nur durchsichtiger Knopf bleibt per Tabulator erreichbar und wird vorgelesen - man landet dann auf etwas, das man nicht sieht. ========================================================================== */ .zum-anfang { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 15; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--blau); border: 1px solid var(--blau); border-radius: var(--radius); color: #fff; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); } .zum-anfang:hover { background: var(--blau-tief); border-color: var(--blau-tief); } .zum-anfang:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .zum-anfang .sym { width: 22px; height: 22px; } /* Platz am Seitenende, damit die letzte Zeile - dort steht der Papierkorb-Knopf - unter dem schwebenden Knopf hervorgerollt werden kann. 44 Punkte Knopf + 1rem Abstand + etwas Luft. */ .zum-anfang-platz { height: 4.5rem; } .verweis-knopf { background: none; border: none; color: var(--text-leise); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; padding: .2rem; /* Auch dieser unscheinbare Verweis ist ein Tippziel - beim Nachmessen kam er auf 26px. Er öffnet allerdings nur eine Rückfrage und löscht nichts; deshalb reichen hier 36px statt der 44px der übrigen Schaltflächen, und die Anhangskachel bleibt kompakt. */ min-height: 36px; } .verweis-knopf:hover { color: var(--schlecht); } .karte.gefahr { border-color: #f0bcbc; } .gefahr-knopf { color: var(--schlecht); border-color: #f0bcbc; background: var(--schlecht-hell); display: inline-block; } .gefahr-knopf:hover { background: #ffe6e6; color: var(--schlecht); } /* --- Formulare ---------------------------------------------------------- */ .formular label { display: block; margin-bottom: .9rem; } .formular label > span:first-child { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; } .formular label em { color: var(--schlecht); font-style: normal; } .formular small { display: block; color: var(--text-leise); font-size: .8rem; margin-top: .25rem; } /* input[type=url] gehoert MIT in diese Liste. Es fehlte, seit public/installation.php das Feld base_url so ausgibt - ein Feld ohne diese Regel ist schmal, randlos und sieht auf einer Seite voller gestalteter Felder wie ein Fehler aus. Aufgefallen erst mit den Adressfeldern der Kopplung; am Code ist es nicht zu sehen, nur im Fenster. */ input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=number], input[type=datetime-local], input[type=url], select, textarea { width: 100%; padding: .6rem .7rem; border: 1px solid var(--rand); border-radius: var(--radius); font: inherit; /* 16px verhindert, dass iOS beim Antippen hineinzoomt. Bei kleinerer Schrift springt die Ansicht - und man tippt daneben. */ font-size: 16px; background: var(--flaeche); color: var(--text); min-height: 44px; } textarea { resize: vertical; min-height: 6rem; line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); } input[type=color] { width: 100%; height: 44px; padding: .2rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); } .feld-paar { display: grid; gap: 0; } label.haken { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .6rem; cursor: pointer; } label.haken input { /* Grössere Kästchen: mit dem Finger sonst kaum zu treffen. */ width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; } label.haken > span:first-child { font-weight: 400; } label.haken span { font-size: .9rem; } .datei-feld input[type=file] { width: 100%; padding: .6rem; border: 1px dashed var(--rand); border-radius: var(--radius); background: var(--grund); font-size: .9rem; } .eingerueckt { margin-top: .75rem; padding: .75rem; background: var(--grund); border-radius: var(--radius); } /* ========================================================================== Anmeldung und Einladung ========================================================================== */ body.schmal { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; /* Grauer statt schwarzer Grund: Das Logo steht auf der weissen Karte, und ein schwarzer Rand darum liess die Seite wie ein Fremdkoerper neben dem Rest der Anwendung wirken. */ background: var(--grund); } .karte-mitte { border-top: 3px solid var(--akzent); } .karte-mitte { background: var(--flaeche); border-radius: var(--radius); padding: 1.5rem; width: 100%; max-width: 26rem; } .karte-mitte h1 { font-size: 1.25rem; } .marke-gross { display: block; height: 50px; width: auto; margin-bottom: 1rem; } /* ========================================================================== Statusleiste (Zahlen + Filter) ========================================================================== */ .status-leiste { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .75rem; scrollbar-width: thin; } .status-kachel { flex: none; min-width: 5.5rem; background: var(--flaeche); border: 1px solid var(--rand-hell); border-bottom: 3px solid var(--rand); border-radius: var(--radius); padding: .5rem .7rem; text-decoration: none; color: var(--text); text-align: center; } .status-kachel:hover { background: var(--grund); color: var(--text); } .status-kachel.an { border-color: var(--akzent); background: var(--akzent-hell); } .status-kachel .zahl { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1.1; } .status-kachel .was { display: block; font-size: .75rem; color: var(--text-leise); } .filter-leiste { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .filter-leiste .suchfeld { flex: 1 1 100%; } .filter-leiste .filter-feld { flex: 1 1 10rem; min-width: 0; } .status-schild { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; } /* ========================================================================== Ticketliste ========================================================================== */ .ticket-liste { list-style: none; margin: 0; padding: 0; } .ticket-zeile { background: var(--flaeche); border: 1px solid var(--rand-hell); border-radius: var(--radius); margin-bottom: .6rem; } .ticket-zeile:hover { border-color: var(--akzent); } .ticket-zeile.erledigt { opacity: .72; } .ticket-link { display: block; padding: .8rem; text-decoration: none; color: inherit; } .zeile-kopf { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; } .nummer { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; color: var(--text-leise); } .nummer-gross { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--text-leise); font-size: .9em; } .zeile-titel { font-size: 1.02rem; margin: 0 0 .2rem; } .zeile-anriss { margin: 0 0 .5rem; color: var(--text-leise); font-size: .88rem; } .zeile-fuss { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .8rem; color: var(--text-leise); align-items: center; } .marke-kunde { background: var(--grund); border-radius: 4px; padding: .05rem .4rem; font-weight: 600; color: var(--text); } .zeile-fuss .zeit { margin-left: auto; } /* Betrag am Ticket (2.47.0.0), nur mit dem Recht rexla. Fett, damit er sich beim Ueberfliegen der Liste vom Rest der Fusszeile abhebt. */ .zeile-betrag { color: var(--text); font-variant-numeric: tabular-nums; } .zeile-betrag strong { white-space: nowrap; } .betrag-wahl { margin: 0 0 .2rem; } .betrag-kunde { display: flex; gap: .4rem; align-items: center; } .betrag-kunde select { max-width: 16rem; } .betrag-kunde.auto [type=submit] { display: none; } .betrag-summe { font-variant-numeric: tabular-nums; } .betrag-umfang { margin: 0 0 .6rem; color: var(--text-leise); } /* Knopf "Brutto -> Netto" am Betragsfeld (2.48.0.0), entsteht in app.js. */ .brutto-netto-knopf { margin-top: .35rem; align-self: flex-start; } .brutto-netto-hinweis:empty { display: none; } .blaettern { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 1rem 0; } .leer-hinweis { text-align: center; padding: 2rem 1rem; } /* ========================================================================== Ticketseite ========================================================================== */ .zwei-spalten { display: block; } .spalte-seite .karte { background: var(--flaeche); } .fliesstext p { margin: 0 0 .7rem; } .fliesstext ul { margin: 0 0 .7rem; padding-left: 1.2rem; } .fliesstext li { margin-bottom: .2rem; } .fliesstext:last-child p:last-child { margin-bottom: 0; } .fliesstext.alt { color: var(--text-leise); } dl.daten { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rand-hell); font-size: .9rem; } dl.daten dt { font-weight: 600; color: var(--text-leise); } dl.daten dd { margin: 0; } ul.schlicht { margin: 0; padding-left: 1.1rem; font-size: .9rem; } ul.schlicht li { margin-bottom: .35rem; } /* --- ursprüngliche Fassung ---------------------------------------------- */ details.original { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rand-hell); } details.original > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--akzent); } .original-feld { background: var(--grund); border-left: 3px solid var(--rand); padding: .6rem .8rem; margin-top: .6rem; border-radius: 0 var(--radius) var(--radius) 0; } .original-feld h4 { font-size: .85rem; color: var(--text-leise); margin-bottom: .3rem; } .original-feld .leer { color: var(--text-leise); font-style: italic; margin: 0; } /* --- Kommentare --------------------------------------------------------- */ .kommentare { list-style: none; margin: 0 0 1rem; padding: 0; } .kommentar { border-left: 3px solid var(--rand); padding: .1rem 0 .1rem .8rem; margin-bottom: 1rem; } .kommentar.intern { border-left-color: var(--intern); background: var(--warn-hell); border-radius: 0 var(--radius) var(--radius) 0; padding: .5rem .8rem; } .kommentar-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: .85rem; margin-bottom: .3rem; } .kommentar-kopf .zeit { color: var(--text-leise); font-size: .8rem; } .marke-intern { background: var(--intern); color: #fff; font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: 4px; text-transform: uppercase; } details.kommentar-aendern > summary { cursor: pointer; font-size: .8rem; color: var(--text-leise); margin-top: .3rem; } .neuer-kommentar { border-top: 1px solid var(--rand-hell); padding-top: 1rem; } /* --- Anhänge ------------------------------------------------------------ */ .anhang-liste { list-style: none; margin: .5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; } .anhang { border: 1px solid var(--rand-hell); border-radius: var(--radius); padding: .4rem; background: var(--flaeche); font-size: .8rem; } .anhang.intern { border-color: var(--intern); background: var(--warn-hell); } .anhang img { width: 100%; height: 6rem; object-fit: cover; border-radius: 4px; display: block; background: var(--grund); } .pdf-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 6rem; background: var(--grund); border-radius: 4px; text-decoration: none; color: var(--text); padding: .3rem; text-align: center; } .pdf-symbol { font-weight: 700; color: var(--schlecht); font-size: 1.1rem; letter-spacing: .05em; } .pdf-name { font-size: .7rem; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .anhang-fuss { display: flex; flex-wrap: wrap; gap: .2rem .4rem; align-items: center; margin-top: .3rem; } /* Umschalter "nur intern" / "für Kunden sichtbar". Steht bewusst über dem Löschen und ohne Rückfrage: Es geht nichts verloren, es wechselt nur die Seite des Vorhangs - und lässt sich sofort wieder zurückstellen. */ .anhang-sicht button, .kommentar-sicht button { text-align: left; padding-left: 0; } .kommentar-sicht { margin-top: .2rem; } .anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .anhang-weg { margin-top: .1rem; } .anhang-formular { border-top: 1px solid var(--rand-hell); padding-top: .8rem; margin-top: .8rem; } .anhang-formular label { display: block; margin-bottom: .6rem; } .anhang-formular label > span:first-child { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; } /* --- Änderungsverlauf --------------------------------------------------- */ .verlauf { list-style: none; margin: 0; padding: 0; font-size: .85rem; /* Bei einem lange laufenden Auftrag wird der Verlauf lang. Er soll die Seite nicht dominieren, aber vollständig erreichbar bleiben. */ max-height: 24rem; overflow-y: auto; } .verlauf li { padding: .5rem 0; border-bottom: 1px solid var(--rand-hell); } .verlauf li:last-child { border-bottom: none; } .verlauf li.intern { border-left: 3px solid var(--intern); padding-left: .5rem; } .verlauf-zeit { color: var(--text-leise); font-size: .75rem; } details.verlauf-werte > summary { cursor: pointer; color: var(--akzent); font-size: .8rem; margin-top: .2rem; } .verlauf-werte h5 { margin: .4rem 0 .1rem; font-size: .72rem; text-transform: uppercase; color: var(--text-leise); letter-spacing: .03em; } .verlauf-werte pre { margin: 0; padding: .4rem .5rem; background: var(--grund); border-radius: 4px; font-size: .78rem; /* Umbrechen statt waagrecht rollen: Ein alter Beschreibungstext ist lang, und in einer schmalen Spalte will ihn niemand seitlich schieben. */ white-space: pre-wrap; word-break: break-word; max-height: 12rem; overflow-y: auto; } .verlauf-werte .vorher pre { border-left: 3px solid var(--schlecht); } .verlauf-werte .nachher pre { border-left: 3px solid var(--gut); } /* ========================================================================== Verwaltung ========================================================================== */ .kachel-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1rem; } .kachel { text-decoration: none; color: inherit; margin: 0; } a.kachel:hover { border-color: var(--akzent); background: var(--akzent-hell); } .kachel.still { background: var(--grund); } .zahl-gross { font-size: 2rem; font-weight: 700; margin: 0 0 .2rem; line-height: 1; } .benutzer-liste { list-style: none; margin: 0; padding: 0; } .benutzer-liste > li { border-bottom: 1px solid var(--rand-hell); padding: .2rem 0; } .benutzer-liste > li:last-child { border-bottom: none; } .benutzer-liste > li.stillgelegt { opacity: .6; } .benutzer-liste summary { padding: .6rem .2rem; gap: .4rem .6rem; } .benutzer-liste summary:hover { background: var(--grund); } /* ZWEI BEDEUTUNGEN, EIN KLASSENNAME - und die obere gewann. `.marke` weiter oben (Zeile ~142) ist die MARKE IM SEITENKOPF: ein flex-Kasten fuer Logo und Zusatz. Diese Regel hier ist das ABZEICHEN ("fällt aus", "Teilbetankung", "offen") und setzte `display` nicht - also erbte jedes Abzeichen `display: flex` und lief ueber die ganze Zeile. Gemessen: 773 statt 89 Punkte breit, quer durch das ganze System. `inline-flex` statt `inline-block`, damit die obere Regel fuer das Logo unveraendert gilt: Als Flex-Element im Seitenkopf wird es ohnehin blockiert, das Logo aendert sich also nicht (nachgemessen). */ .marke { display: inline-flex; background: var(--grund); border: 1px solid var(--rand-hell); border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; color: var(--text-leise); white-space: nowrap; } .marke.aus { background: var(--schlecht-hell); border-color: #f0bcbc; color: var(--schlecht); } .marke.warn { background: var(--warn-hell); border-color: #fde68a; color: #92400e; } .link-kasten .link-feld { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .78rem; background: var(--flaeche); } /* ========================================================================== Breitere Fenster ========================================================================== */ @media (min-width: 40rem) { .inhalt { padding: 1.5rem 1rem; } h1 { font-size: 1.75rem; } /* Ab hier ist Platz für die ganze Leiste - der Knopf verschwindet, und das Menü steht offen da, unabhängig vom Kästchen. Deshalb steht die Regel NICHT unter `:checked`: Ein am Handy geöffnetes Menü darf am grossen Bildschirm nicht als "geschlossen" wieder zuklappen, nur weil jemand das Fenster grösser zieht. */ .menue-schalter, .menue-knopf, /* Am Rechner steht jeder Punkt ohnehin in der Leiste - drei Knoepfe daneben waeren dieselben Ziele ein zweites Mal. */ .schnellzugriff { display: none; } /* BENUTZER UND ABMELDEN GEHOEREN NACH OBEN RECHTS, auch im Querformat (Nutzerwunsch 2026-08-09). Vorher stand die Navigation in der ersten Zeile neben dem Logo und schob beides in eine zweite Zeile darunter - am Telefon quer sah der Kopf dadurch ganz anders aus als hochkant. Geloest ueber `order`, nicht ueber eine Umstellung im HTML: Die Reihenfolge im Quelltext bleibt die vorlesbare (Marke, Navigation, wer angemeldet ist, abmelden), und die Anzeige richtet sich danach, was oben stehen soll. */ .wer { order: 1; } .abmelden { order: 2; } /* DIE GLOCKE GEHOERT IN DIESELBE GRUPPE (2.24.0.1, Nutzermeldung 2026-09-22: "Die Benachrichtigungsglocke ist auf der Desktopversion mittig. Bitte nach rechts"). Sie hatte hier bisher gar kein `order` - also 0, und damit stand sie in der LINKEN Gruppe neben dem Logo. Nach rechts kam sie nur ueber ihren eigenen `margin-left: auto`, und genau das ging schief, sobald der feste Posteingang-Knopf (2.22.0.0) daneben dasselbe tat: Zwei automatische Aussenabstaende TEILEN SICH den freien Platz, sie verdoppeln ihn nicht. Ergebnis war eine Glocke in der Mitte. Jetzt gehoert sie zur rechten Gruppe und schiebt nur noch, wenn sie deren linkestes Stueck ist - steht der Posteingang-Knopf davor, schiebt ER. Dieselbe Regel wie bei Leiste und Hamburger darueber. Die Reihenfolge bleibt dabei die gewollte: Glocke LINKS vom Namen (so steht es in inc/layout.php begruendet). */ .glocke { order: 1; } .fix-zugriff ~ .glocke { margin-left: 0; } .nav { display: flex; flex-direction: row; /* Eigene Zeile unter Logo und Benutzer - damit steht die Kopfzeile in jeder Breite gleich. */ order: 3; width: 100%; margin-top: 0; padding-top: 0; border-top: 0; /* Der Deckel von oben gilt nur für die aufgeklappte Fassung. */ max-height: none; overflow: visible; /* UMBRECHEN STATT UEBERLAUFEN. Vor den Sinnbildern trug die Leiste `overflow-x: auto` und rollte notfalls waagrecht - und genau das war der Fehler, den das Hamburger-Menue behoben hat: Wer nicht wischt, sieht die hinteren Punkte nie. Mit Sinnbild ist jeder Punkt breiter; bei sieben Punkten (Admin) und einem schmalen Fenster passt die Zeile nicht mehr. Sie bricht dann um - zwei lesbare Zeilen sind besser als eine, deren Ende niemand findet. */ flex-wrap: wrap; } /* AM RECHNER OHNE SINNBILD. Gewuenscht waren sie fuer die drei Knoepfe am Handy; in der Leiste waren sie meine Zutat - und sie kosteten dort Breite: Mit Sinnbild brauchte die Leiste eines Admins (sieben Punkte) bis 1100 Punkte Fensterbreite ZWEI Zeilen, vorher genuegte eine ab 640. Nachgemessen bei 640/760/900/1100/1400. Im aufgeklappten Menue am Handy bleiben sie: Dort hat jeder Punkt ohnehin eine eigene Zeile, und das Sinnbild ist genau das, was den Knopf daneben wiedererkennbar macht. */ .nav a .sym { display: none; } .feld-paar { grid-template-columns: 1fr 1fr; gap: 0 1rem; } .filter-leiste .suchfeld { flex: 2 1 16rem; } .anhang-liste { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } .knopf.breit { width: auto; min-width: 12rem; } } @media (min-width: 62rem) { .zwei-spalten { display: grid; /* Der Auftrag bekommt den Platz, die Bearbeitung die Seitenspalte. */ grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); gap: 1rem; align-items: start; } } /* ========================================================================== Drucken ========================================================================== Ein Ticket wird durchaus ausgedruckt und auf die Baustelle mitgenommen. Ohne diese Regeln stünde die halbe Seite voller Schaltflächen, die auf Papier nichts tun. */ @media print { .kopf, .fuss, .filter-leiste, .status-leiste, .spalte-seite, form, .knopf, .zurueck, .anhang-weg, .zum-anfang, .zum-anfang-platz { display: none !important; } body { background: #fff; } .karte { border: none; padding: 0; margin-bottom: 1rem; } .zwei-spalten { display: block; } /* Aufgeklappt drucken: Sonst fehlt auf dem Ausdruck ausgerechnet das, was den Nachweis ausmacht. */ details { display: block; } details > summary { display: none; } .verlauf { max-height: none; overflow: visible; } a[href]::after { content: ""; } } /* Wer Bewegung im System abgeschaltet hat, bekommt keine. */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ========================================================================== Termine und Kalender ========================================================================== */ .termin-liste { list-style: none; margin: 0 0 .8rem; padding: 0; } .termin-liste > li { border-left: 3px solid var(--akzent); padding: .5rem 0 .5rem .8rem; margin-bottom: .8rem; } /* Vergangene Termine bleiben stehen - sie sind Teil des Nachweises -, treten aber zurück, damit der nächste anstehende ins Auge fällt. */ .termin-liste > li.vorbei { border-left-color: var(--rand); opacity: .65; } .termin-zeit { font-weight: 600; } .termin-leute { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .25rem; font-size: .85rem; } .termin-leute .person { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; } .mini-formular { margin-top: .5rem; } details.termin-neu > summary { display: inline-flex; } .wunsch-marke { background: var(--warn-hell); border: 1px solid #fde68a; color: #92400e; border-radius: 4px; padding: .05rem .4rem; } /* --- die Wochenansicht -------------------------------------------------- */ /* Am Handy untereinander, am breiten Fenster sieben Spalten. Ein echtes Stundenraster mit absolut platzierten Terminen wäre am Telefon nicht mehr zu treffen - deshalb je Tag eine Karte mit Leiste und Liste. */ .kalender { display: grid; gap: .6rem; margin-bottom: 1rem; } .ktag { background: var(--flaeche); border: 1px solid var(--rand-hell); border-radius: var(--radius); padding: .6rem .7rem; } .ktag.heute { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); } .ktag.wochenende { background: var(--grund); } .ktag-kopf { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .4rem; font-size: .95rem; } .ktag-name { font-weight: 700; } .ktag-datum { color: var(--text-leise); font-size: .85rem; } .ktag-leer { margin: .2rem 0 0; } .frei-leiste { display: flex; gap: 2px; margin-bottom: .5rem; /* Bei zehn Stunden und schmalem Telefon lieber rollen als quetschen. */ overflow-x: auto; scrollbar-width: thin; } .frei-feld { flex: 1 0 2.1rem; text-align: center; border-radius: 4px; padding: .15rem .1rem .2rem; line-height: 1.1; border: 1px solid transparent; } .frei-feld .fz { display: block; font-size: .6rem; color: var(--text-leise); } .frei-feld .fa { display: block; font-weight: 700; font-size: .95rem; } .frei-feld.frei { background: var(--gut-hell); border-color: #bbf7d0; color: var(--gut); } .frei-feld.knapp { background: var(--warn-hell); border-color: #fde68a; color: #92400e; } .frei-feld.voll { background: var(--schlecht-hell); border-color: #f0bcbc; color: var(--schlecht); } .frei-feld.voll .fz, .frei-feld.knapp .fz, .frei-feld.frei .fz { color: inherit; opacity: .75; } .ktermine { list-style: none; margin: 0; padding: 0; } .ktermine li { margin-bottom: .3rem; } /* NUR DER DIREKTE KIND-LINK - das ist die Terminkarte selbst. Vorher stand hier ".ktermine a", und das traf ab dem 2026-08-05 auch die Schaltflaeche "Anrufen" darunter: Sie bekam den Kartenrahmen mit border-radius 0 4px 4px 0 und eigenem Innenabstand und sah dadurch anders aus als "Anfahrt" (ein