/* =========================================================================== MH Betriebsportal — gemeinsames Aussehen =========================================================================== Eine Datei für alle Module. Wer eine neue Seite anlegt, bindet diese hier und portal.js ein und bekommt Palette, Kopfzeile und Anmeldung mitgeliefert. Die Farben stammen aus dem Störungsportal und damit aus der Hausmarke: Sand #D5C893 und Warmgrau #8C8171 sind die Farben des Logos. Für das helle Schema sind die Akzente abgedunkelt — das Sand des Logos ist auf Weiß nicht lesbar. Im Logo selbst bleiben die Originalfarben. Die Variablennamen (--braun, --messing, --papier …) sind aus der ersten Fassung übernommen und bewusst nicht umbenannt: sie stecken an rund achtzig Stellen in index.html. Umgehängt wurde, worauf sie zeigen, nicht wie sie heißen. Keine externen Schriften. Das Störungsportal lädt Outfit und JetBrains Mono von Google — hier ist das nach Regel 5 nicht zulässig, also stehen Systemschriften darin. Wer die Hausschriften will, legt die woff2-Dateien nach web/schriften/ und ergänzt zwei @font-face-Regeln; ausliefern würde sie dann der eigene Server. =========================================================================== */ :root { /* Helles Schema — fürs Büro. Voreinstellung folgt dem Betriebssystem. */ --tinte: #2A2521; /* Fließtext */ /* NACHGEZOGEN AN DIE NEUE WEBSITE (mh-haustechnik.de, Stand 08.08.2026). Das helle Schema fuehrt jetzt deren Gold #C9A063 und deren Creme #F6F2EA — ein Betrieb, ein Erscheinungsbild. Wer vom Angebot auf das Portal wechselt, soll nicht das Gefuehl haben, das Haus gewechselt zu haben. AM PRINZIP AENDERT SICH NICHTS, nur am Ton: Gold traegt weiterhin als FLAECHE mit dunkler Schrift, nicht als Schrift auf hell. Gemessen: Tinte auf Gold 7,79:1 ✓ (AAA) Gold auf Creme 2,16:1 ✗ — als Schrift unbrauchbar, auch gross Der bisherige Sand lag bei 11,22:1 als Flaeche, also hoeher. Beide bestehen AA und AAA deutlich; den Ausschlag gibt die Marke. Im DUNKLEN Schema bleibt der Originalsand #D5C893 (9,68:1 als Schrift). Dort ist er lesbar, und dort ist er die Farbe des Logos. DIE DREI FARBEN DES LOGOS, unveraendert: Sand #D5C893 · Warmgrau #8C8171 · Tinte #131110 Frueher standen hier abgedunkelte Ableitungen (#8A6F33), weil das Sand als TEXT auf hellem Grund nur 1,57:1 ergibt — unlesbar. Gemessen, nicht geschaetzt. Die Loesung ist nicht, die Farbe zu veraendern, sondern sie richtig zu verwenden: Sand traegt als FLAECHE mit Tinte darauf 11,22:1. Knoepfe und Hervorhebungen sind deshalb sandfarben mit dunkler Schrift, nicht sandfarbene Schrift auf Weiss. Wo ein farbiger TEXT noetig waere (Verweise), steht Tinte mit Unterstreichung. Eine vierte Farbe kommt nicht dazu. */ --braun: #C9A063; /* Gold der Website — Flaeche fuer Knoepfe */ --messing: #C9A063; /* Gold — Hervorhebung */ --kupfer: #B03F2C; /* Fehler, Abbruch */ --gruen: #4A7A34; /* Erfolg */ --bernstein: #A66F22; /* Warnung */ --papier: #F6F2EA; /* Creme der Website */ --karte: #FFFFFF; /* Kartengrund */ --grund-alt: #EFE9DD; /* abgesetzte Fläche */ --linie: #E3DACA; --linie-weich:#EEE7DA; --grau: #6B6156; /* Beschriftungen */ --grau-fein: #9A9086; /* Nebensächliches */ --auf-akzent: #131110; /* Tinte auf Sand — 11,22:1 */ --verweis: #131110; /* Sand waere hier 1,57:1 */ /* AKZENT ALS SCHRIFT — eigener Ton, und zwar aus Notwendigkeit. Ueber zwanzig Stellen im Portal setzen den Akzent als Schriftfarbe: aktive Reiter, Absatzkoepfe, Codenummern, Uhrzeiten. Im hellen Schema war das mit dem Sand 1,50:1 und damit unlesbar — die Regel "Sand traegt als Flaeche, nicht als Schrift" stand in der Datei, aber niemand hat sie an diesen zwanzig Stellen durchgesetzt. Gemessen auf Creme / Karte / abgesetzter Flaeche: 5,47 / 6,11 / 5,05. Im dunklen Schema bleibt der Originalsand (9,68:1) — dort ist er lesbar und dort ist er die Farbe des Logos. */ --akzent-text:#7D5C2A; /* DIESELBE UNTERSCHEIDUNG WIE BEIM AKZENT, und aus demselben Grund. `--bernstein` und `--kupfer` sind FLAECHEN — sie tragen `--auf-akzent` als Schrift. Als Schriftfarbe auf hellem Grund sind sie zu schwach: gemessen `--bernstein` 4,27 / 3,82 / 3,53 auf Karte, Papier und abgesetzter Flaeche, noetig sind 4,5. Den Flaechenton dafuer abzudunkeln waere falsch herum — dann sinkt der Kontrast der dunklen Schrift DARAUF. Also ein eigener Ton, wie `--akzent-text` einer ist. Betroffen war unter anderem die Bindefristwarnung „heute" in der Angebotsliste und der Schweregrad am Stoerungscode. */ --bernstein-text:#8F5F1C; /* 5,50 / 4,92 / 4,55 */ --kupfer-text:#B03F2C; /* 5,84 / 5,23 / 4,83 — hell schon in Ordnung */ --schleier: rgba(38,33,28,.45); /* Der Anmeldekopf hat KEINE eigene Flaeche mehr. Erst war er braun (sah olivfarben aus), dann tintenschwarz — und das Schwarz gehoert gar nicht zum Logo, es war beim Ableiten des App-Symbols hinzugekommen. Das Zeichen steht jetzt frei auf dem Kartengrund, wie im Original. Getrennt wird mit einer Haarlinie, nicht mit Farbe. */ --marke-leise:#8C8171; /* Warmgrau des Zeichens, fuer Nebensaechliches */ --schrift: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --schrift-kopf: Lora, Georgia, "Times New Roman", serif; --schrift-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace; /* EINE Rundung fuer das ganze Portal. Die Website rundet grosszuegig; das Portal stand auf 3px und wirkte daneben kantig. Ein Wert und keine Skala: gemischte Radien (runde Knoepfe in eckigen Karten) sehen nach Versehen aus, und der Unterschied zwischen 8 und 10 Pixeln traegt keine Bedeutung. Listenzeilen bleiben ausdruecklich eckig — sie sind Tabellenzeilen, und eine gerundete Zeile in einer Liste bricht die Kante, an der das Auge entlangliest. */ --rundung: 10px; color-scheme: light; } /* Dunkles Schema — fürs Handy im Heizungskeller und für den Abend. Hier stehen die Originaltöne des Logos: auf dunklem Grund sind sie lesbar. Der Block steht zweimal, einmal am Attribut und einmal an der Medienabfrage. Zusammenfassen ließe sich das nur mit @media in einer Selektorliste, und das gibt es in CSS nicht. Wer die Werte ändert, muss beide Stellen anfassen — deshalb stehen sie direkt untereinander. */ :root[data-schema="dunkel"] { --tinte: #F5F1E9; --braun: #D5C893; --messing: #D5C893; --kupfer: #D9705C; --gruen: #96BE7E; --bernstein: #E4B36B; --papier: #22201D; --karte: #332E2A; --grund-alt: #2B2724; --linie: #463F38; --linie-weich:#3B352F; --grau: #B5ABA0; --grau-fein: #867C71; --auf-akzent: #1F1B17; --verweis: #D5C893; /* Sand, 9,68:1 auf dunklem Grund */ --akzent-text:#D5C893; /* Sand — auf dunkel lesbar */ --bernstein-text:#E4B36B; /* 7,00 / 8,48 — als Schrift schon gut */ /* GEMESSEN 4,10 auf --karte. Das traegt die Marke „kritisch" am Stoerungscode — die Angabe mit der hoechsten Folgenschwere im Portal, auf dem Geraet und im Schema, in dem ein Monteur sie liest. */ --kupfer-text:#E28271; /* 4,90 / 5,93 */ --schleier: rgba(12,10,9,.88); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-schema="hell"]) { --tinte: #F5F1E9; --braun: #D5C893; --messing: #D5C893; --kupfer: #D9705C; --gruen: #96BE7E; --bernstein: #E4B36B; --papier: #22201D; --karte: #332E2A; --grund-alt: #2B2724; --linie: #463F38; --linie-weich:#3B352F; --grau: #B5ABA0; --grau-fein: #867C71; --auf-akzent: #1F1B17; --verweis: #D5C893; /* Sand, 9,68:1 auf dunklem Grund */ --akzent-text:#D5C893; /* Sand — auf dunkel lesbar */ --bernstein-text:#E4B36B; /* 7,00 / 8,48 — als Schrift schon gut */ /* GEMESSEN 4,10 auf --karte. Das traegt die Marke „kritisch" am Stoerungscode — die Angabe mit der hoechsten Folgenschwere im Portal, auf dem Geraet und im Schema, in dem ein Monteur sie liest. */ --kupfer-text:#E28271; /* 4,90 / 5,93 */ --schleier: rgba(12,10,9,.88); } } /* --- Grundgerüst --------------------------------------------------------- */ *{box-sizing:border-box} body{margin:0;background:var(--papier);color:var(--tinte); font-family:var(--schrift);font-size:16px;-webkit-text-size-adjust:100%} /* ÜBERSCHRIFTEN IM WERKZEUG SIND SANS, NICHT SERIF. Hier stand Lora, und auf der Website ist das richtig: dort wird gelesen. Im Portal wird gearbeitet, acht Stunden am Tag — und eine Serifenschrift über einer Terminliste sagt "Dokument", nicht "Anwendung". Kein Werkzeug, das eine Warenwirtschaft ablöst, setzt seine Spaltenköpfe in Georgia. DIE MARKE BEHÄLT DIE SERIFE. `.anmeldetitel` auf dem Anmeldebildschirm bleibt Lora: das ist der eine Moment, in dem das Portal sich vorstellt statt zu arbeiten. Genau diese Trennung machen Produkte, die beides haben — Anzeigeschrift fürs Auftreten, Oberflächenschrift fürs Bedienen. */ h1,h2,h3{font-family:var(--schrift);font-weight:600;margin:0; letter-spacing:-.01em} /* Verweise tragen Tinte und eine Unterstreichung, keine Akzentfarbe: das Sand des Logos ergibt als Text auf hellem Grund 1,57:1. Im dunklen Schema ist Sand lesbar (9,68:1) und wird dort als Verweisfarbe gesetzt. */ a{color:var(--verweis);text-decoration-thickness:1px;text-underline-offset:2px} .huelle{max-width:1180px;margin:0 auto; padding:0 16px calc(56px + env(safe-area-inset-bottom))} /* Zwei Spalten ab 1100px: links die Modulwahl, rechts alles andere. Darunter bleibt es einspaltig, die Regeln dafür stehen im @media weiter unten. */ /* ANWENDUNG STATT DOKUMENT — ab 1101px. * * Bis hierher war die Hülle eine zentrierte Spalte von 1320px, und die Seite * scrollte als Ganzes: die Kopfzeile mit Marke, Rolle und Abmeldeknopf fuhr * nach oben weg, die Modulwahl mit ihr. Das ist Zeitschriftenlayout. Ein * Werkzeug, das acht Stunden am Tag offen ist und TAIFUN ablösen soll, hält * seine Bedienelemente an Ort und Stelle und scrollt nur den Inhalt. * * Drei Dinge machen den Unterschied, und alle drei stehen hier: * 1. Die Schale ist genau so hoch wie das Fenster (100dvh, nicht 100vh — * auf iOS wandert die Adressleiste und vh springt). * 2. Kopf und Leiste stehen fest, `.inhalt` bekommt den Rest und scrollt * für sich. * 3. Volle Fensterbreite statt zentrierter Spalte. Eine Terminwoche mit * sechs Tagen und eine Nachkalkulation brauchen den Platz; auf einem * 1600px-Schirm 280px links und rechts zu verschenken ist Verschwendung. * * UNTER 1101px BLEIBT ES BEIM DOKUMENTSCROLL. Am Handy ist das die native * Bewegung; eine feste Schale mit innerem Scrollbereich kämpft dort mit der * Adressleiste und dem Gummiband-Effekt. Der Monteur soll wischen können. */ /* `.huelle.schmal` stand hier und ist ersatzlos entfallen. Sie begrenzte auf 640px und war richtig, solange das Portal keine Menüleiste hatte: eine einzelne Spalte mittig liest sich besser als eine über den ganzen Schirm gezogene Zeile. Mit der Leiste war sie falsch. Von den 640px gingen 216 an die Leiste und 28 an den Abstand — der Inhalt bekam knapp 400px, mitten in einem 1600px breiten Fenster. Auf dem Schirm sah es aus, als zeige der Rechner die Handyansicht. Die beiden Seiten, die sie trugen (Störungscodes, Zeiterfassung), regeln ihre Breite jetzt selbst und dort, wo sie entsteht: die Codeliste über `auto-fill`, der Stempelbereich über eine eigene Spaltenbreite. Damit bleibt keine Regel übrig, die von einer Annahme über das Gerüst lebt. */ /* --- Kopfzeile mit Wortmarke und Modulwahl -------------------------------- */ .kopf{display:flex;flex-wrap:wrap;gap:12px;align-items:center; justify-content:space-between;padding:16px 0 12px} .kopf-marke{display:flex;align-items:center;gap:12px;min-width:0} /* Nur das Zeichen, nahezu quadratisch — deshalb über die Höhe bemessen. Die volle Wortmarke wäre 1650:649 und nähme auf einem Handy die halbe Zeile. */ .wortmarke{height:46px;width:auto;flex-shrink:0} /* Die Marke ist ein Verweis auf die Startseite. Als erbt sie sonst Unterstreichung und Verweisfarbe; beides hat an einem Logo nichts zu suchen. Der sichtbare Fokusrahmen bleibt — er ist der einzige Hinweis für jemanden, der mit der Tastatur bedient. */ /* Mindestens 44×44. Sobald die Marke anklickbar ist, ist sie kein Bild mehr, sondern ein Bedienelement — und dafür gilt im Portal überall dasselbe Maß. Das Zeichen allein misst 39×40 und läge darunter. Der Innenabstand kostet in der Kopfzeile sechs Pixel Breite. */ .markenweg{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 3px; text-decoration:none;border-radius:var(--rundung);flex-shrink:0} .markenweg:hover{opacity:.82} /* DER FOKUSRAHMEN TRUG --messing, ALSO GOLD ALS KANTE AUF HELL. Gemessen 2,42 auf --karte, 2,16 auf --papier, 2,00 auf --grund-alt; WCAG 1.4.11 und 2.4.11 verlangen 3,0. Im dunklen Schema war alles in Ordnung — der Fehler war rein hell, und genau dort arbeitet die Sachbearbeitung acht Stunden am Formular. Wer mit Tabulator arbeitet, sah nicht, wo er steht. Der Satz „Sand traegt als Flaeche, nicht als Schrift" stand in dieser Datei seit Langem — auf eine KANTE ist er nie angewendet worden. --akzent-text liefert 6,11 / 5,47 / 5,05 und ist keine vierte Farbe. */ .markenweg:focus-visible{outline:2px solid var(--akzent-text);outline-offset:3px} /* Klappknopf. Erscheint erst, wenn die Kopfzeile eng wird. */ .menuknopf{display:none;width:44px;height:44px;min-height:0;padding:0; font-size:20px;line-height:1;background:var(--grund-alt);color:var(--akzent-text); border:1px solid var(--linie);flex-shrink:0} .kopf-titel{font-family:var(--schrift);font-size:20px;font-weight:600; color:var(--akzent-text);white-space:nowrap} .kopf-strich{width:1px;height:34px;background:var(--linie);flex-shrink:0} .kopf-rechts{display:flex;align-items:center;gap:9px;flex-wrap:wrap; justify-content:flex-end;min-width:0} /* Die Benutzerkennung ist das einzige Stück hier, dessen Breite vom Inhalt abhängt — "M. HUBER · SACHBEARBEITER" sind über 200 px. Sie darf deshalb schrumpfen und abschneiden; die Knöpfe daneben dürfen es nicht, die muss man treffen können. */ .wer{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600; padding:5px 10px;border:1px solid var(--linie);color:var(--grau); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; min-width:0;max-width:46vw} .wer.an{border-color:var(--gruen);color:var(--gruen)} /* Netzanzeige. Nur sichtbar, wenn nichts geht — eine Marke, die dauernd "online" meldet, liest nach dem zweiten Tag niemand mehr. Kupfer und nicht Rot: es ist kein Fehler, sondern der Regelfall im Heizungskeller. */ .netzweg{font-size:10px;letter-spacing:.13em;text-transform:uppercase; font-weight:700;padding:5px 9px;white-space:nowrap;flex-shrink:0; background:var(--kupfer);color:var(--auf-akzent)} /* --- Modulwahl als linke Leiste ------------------------------------------ Zehn Module passen in keine Kopfzeile. Vorher lief die waagerechte Leiste bei 1280px um 136px über, danach brach sie auf zwei Zeilen um — beides liest sich wie ein Fehler. Senkrecht wächst eine Liste dagegen, ohne dass die Gestaltung dagegen arbeitet, und russische Beschriftungen brauchen dort Höhe statt Breite. Umgesetzt als Raster auf der Hülle, nicht als eigenes Gerüst: die Reihenfolge im Dokument bleibt Kopf → Leiste → Inhalt, also ändert sich an keiner der zehn Modulseiten etwas, und ohne Anmeldung (Leiste verborgen) fällt die Spalte einfach weg. Keine Sinnbilder neben den Einträgen. Eine Bildzeichensammlung ist hier nicht ladbar (keine externen Skripte, Datenschutzauflage), und selbst gezeichnete Zeichen sehen selbst gezeichnet aus. Text mit ordentlichem Abstand liest sich besser als zehn schiefe Piktogramme. */ .module{align-self:start;position:sticky;top:16px; display:flex;flex-direction:column;gap:1px;padding:6px 0 10px} /* Gruppenüberschrift. Bei zehn Einträgen ist die Bündelung kein Zierrat — sie halbiert die Suchzeit, weil man erst den Bereich und dann den Eintrag sucht. */ /* --grau, nicht --grau-fein: gemessen kam das feine Grau im hellen Schema auf 2,93:1 gegen den Seitengrund und im dunklen auf 3,97:1. Nötig sind 4,5:1 (WCAG AA, kleiner Text). Mit --grau sind es 5,66:1 bzw. 7,19:1. */ .module .gruppe{font-size:10px;letter-spacing:.14em;text-transform:uppercase; font-weight:600;color:var(--grau);padding:14px 12px 6px} .module .gruppe:first-child{padding-top:2px} /* 12px oben und unten plus Zeilenhöhe ergibt 45px — knapp über der Vorgabe von 44px. Bei 11px waren es 43, gemessen. */ .module a{display:block;padding:12px;text-decoration:none;color:var(--grau); font-weight:500;border-radius:8px;line-height:1.3; border-left:3px solid transparent; transition:background-color .12s ease, color .12s ease} .module a:hover{background:var(--grund-alt);color:var(--tinte)} .module a:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px} /* Der offene Eintrag trägt Farbe UND einen Balken. Farbe allein genügt nicht: wer sie nicht unterscheidet, sieht sonst zehn gleiche Zeilen. */ /* Der offene Eintrag trägt Tinte, nicht Messing. Messing auf der abgesetzten Fläche ergab im hellen Schema 4,02:1 — zu wenig für 16px fett. Den Akzent trägt jetzt der Balken links, und der muss keinen Text lesbar halten. Drei Merkmale bleiben: Balken, Fläche, Fettung. */ .module a[aria-current="page"]{color:var(--tinte);font-weight:600; background:var(--grund-alt);border-left-color:var(--messing); border-radius:0 8px 8px 0} @media (prefers-reduced-motion:reduce){.module a{transition:none}} /* Ab hier wird es eng: die Leiste fährt hinter den Klappknopf. Ein Handy im Heizungskeller hat keinen Platz für eine feste Spalte. */ @media (max-width: 1100px) { .kopf{padding:12px 0 8px} /* KEIN Umbruch mehr in der rechten Gruppe. Gemessen auf einem 375px-Gerät: Kennung 143 + Sprachwahl 58 + Schema 42 + Abmelden 101 + drei Abstände = 371px bei 343px Platz. Es fehlten 28, also brach die Gruppe um — und die Kopfzeile war 161px hoch. Drei Zeilen, bevor überhaupt Inhalt kam; auf einem Handy im Heizungskeller ein Fünftel des Schirms für nichts. Statt an Breiten zu drehen, bis es bei 375px gerade passt und bei 360px wieder nicht: die Kennung bekommt den Rest. Sie ist das einzige Stück hier, das schrumpfen DARF — sie schneidet mit Auslassungspunkten ab und bleibt lesbar. Die Knöpfe daneben dürfen es nicht, die muss man mit Arbeitshandschuhen treffen. So passt es bei jeder Breite, ohne dass irgendwo eine Zahl steht, die zu einem bestimmten Gerät gehört. */ .kopf-rechts{flex-wrap:nowrap} .wer{max-width:none;flex:1 1 auto} .kopf-rechts > *:not(.wer){flex-shrink:0} .kopf-titel, .kopf-strich{display:none} .wortmarke{height:40px} .menuknopf{display:grid;place-items:center} .module{position:absolute;left:0;right:0;z-index:150;flex-direction:column; background:var(--karte);border:1px solid var(--linie); border-top:none;padding:4px;gap:0;display:none;position:absolute; box-shadow:0 8px 24px rgba(0,0,0,.22)} body.menu-offen .module{display:flex} /* 15px hoch mal zwei plus Zeilenhöhe ergibt gut 46px Trefferfläche — die Vorgabe für ein Handy mit Handschuhen. */ .module a{padding:15px 16px;border-radius:0; border-bottom:1px solid var(--linie-weich); border-left:3px solid transparent} .module a:last-child{border-bottom:none} .module a[aria-current="page"]{border-radius:0; border-bottom-color:var(--linie-weich); border-left-color:var(--messing);background:var(--grund-alt)} /* Im Klappmenü trennt die Gruppenüberschrift sichtbar, statt nur zu beschriften — hier stehen die Einträge dichter beieinander. */ .module .gruppe{padding:12px 16px 6px;background:var(--grund-alt); border-bottom:1px solid var(--linie-weich)} .module .gruppe:first-child{padding-top:12px} body.menu-offen .menuknopf{background:var(--braun);color:var(--auf-akzent); border-color:var(--braun)} } /* --- Anmeldekarte --------------------------------------------------------- Vorbild war der Anmeldebildschirm eines anderen Betriebsportals: farbig hinterlegter Kopf mit Marke und Fassung, darunter die Felder, darunter ein ruhiger Fuss. Der Aufbau ist übernommen, die Farben nicht — die gehören dem anderen Haus. Hier steht das Braun der MH-Hausfarben. Nicht übernommen: "Passwort vergessen?" und "Zugang beantragen". Beide führen hier nirgendwohin — Zugänge legt das Büro an, ein Kennwort setzt es neu. Ein Verweis, der nichts tut, ist schlimmer als keiner. An ihre Stelle tritt der Satz, der die Frage tatsächlich beantwortet. */ .anmeldekarte{max-width:430px;margin:24px auto;background:var(--karte); border:1px solid var(--linie);border-radius:14px;overflow:hidden; padding:0;box-shadow:0 10px 34px rgba(38,33,28,.10)} .anmeldekopf{display:flex;align-items:center;gap:14px;padding:20px 22px; border-bottom:1px solid var(--linie-weich)} .anmeldemarke{height:38px;width:auto;flex-shrink:0} .anmeldetitel{font-family:var(--schrift-kopf);font-size:19px;font-weight:600; line-height:1.2} /* Weiss auf dem Hausbraun ergibt 4,77:1 — knapp ueber der Schwelle. Deshalb steht hier nirgends eine Deckkraft unter 1: schon 95 % fallen auf 4,49:1 und damit durch. */ /* Die Fassung rutscht nach rechts und bleibt klein. Sie ist für den Anruf beim Büro da, nicht zum Lesen. */ /* Warmgrau ergibt auf hellem Grund nur 3,57:1 — zu wenig fuer 11px. Auf dem Kartengrund traegt --grau (5,66:1 hell, 7,19:1 dunkel). Die Farbe des Zeichens bleibt dem Zeichen. */ .anmeldefassung{margin-left:auto;align-self:flex-start;font-size:11px; letter-spacing:.04em;color:var(--grau)} .anmeldeleib{display:grid;gap:14px;padding:22px} .anmeldeleib button{width:100%;margin-top:2px} /* Erscheint nur, wenn der Server unter der geratenen Adresse schweigt. Dann ist es kein Beiwerk mehr, sondern das Einzige, was hilft — deshalb in Warnfarbe und nicht als kleingedruckte Klappe. */ .anmeldewarnung{font-size:11.5px;color:var(--bernstein-text);margin-top:6px; line-height:1.4} #serverbereich input{border-color:var(--bernstein)} @media (max-width: 480px) { /* Auf dem Handy schluckt der abgerundete Rahmen Breite, die der Inhalt braucht. Die Karte legt sich dort über die volle Breite. */ .anmeldekarte{margin:12px 0;border-radius:var(--rundung)} .anmeldekopf{padding:16px 18px;gap:11px} .anmeldeleib{padding-left:18px;padding-right:18px} } /* --- Bausteine ------------------------------------------------------------ */ /* GEMEINSAME BAUSTEINE, die vorher in jeder Modulseite noch einmal standen. Gemessen: `.leer` in 10 Seiten und 3 Fassungen, `.reiter` in 9 und 3, `.schleier` und `.eintrag` je dreimal WORTGLEICH kopiert. Dieselbe Reihe wie bei `alsDatum` (8 Fassungen) und dem Escaper (16 Definitionen) — nur fällt es hier nicht auf, weil ein leicht anderer Innenabstand immer noch wie Gestaltung aussieht. */ /* Der Leerzustand. Grundform: eine stille Zeile INNERHALB einer Karte. `.frei` ist die freistehende Fassung, die selbst eine Karte bildet — sie ersetzt eine Liste, statt in ihr zu stehen. Der Unterschied ist echt und heißt deshalb jetzt so; 22px gegen 24px Innenabstand war es nicht. */ .leer{padding:14px;color:var(--grau);font-size:14px} .leer.frei{padding:24px 18px;background:var(--karte); border:1px solid var(--linie);border-radius:var(--rundung); font-size:inherit;line-height:1.55} /* Reiterleiste. Die drei Fassungen unterschieden sich in `gap` (4 gegen 2) und `margin-top` (10 gegen 4) — Zahlen, die niemand entschieden hat. `-webkit-overflow-scrolling` stand nur auf einer Seite und gehört auf alle: die Leiste rollt am Handy waagerecht. */ .reiter{display:flex;gap:4px;border-bottom:1px solid var(--linie); margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch} /* Ein anklickbarer Listeneintrag — dreimal wortgleich kopiert. `font-weight:400` und `color:var(--tinte)` sind kein Feinschliff: das ist oft ein