/* Schulportal-App — bewusst ohne Framework, damit der Upload zu IONOS aus reinem Kopieren besteht und nichts gebaut werden muss. Zielgeräte sind große iPhones (rund 400-440 CSS-Pixel Breite). Das Layout ist fließend und funktioniert auch deutlich darunter. */ :root { --bg: #f2f4f7; --surface: #ffffff; --surface-alt: #f7f9fc; --border: #dfe4ec; --border-strong: #c9d2e0; --text: #16202e; --text-muted: #64748b; --text-faint: #6c7787; --accent: #12253f; --accent-text: #ffffff; /* Kopfbereich: schwarz in beiden Modi. Damit sitzt die Statusleiste des Telefons auf derselben Fläche und der Übergang fällt nicht auf. */ --header-bg: #000000; --header-text: #ffffff; --header-quiet: rgba(255, 255, 255, .62); --header-fill: rgba(255, 255, 255, .14); --entfall: #d64545; --vertretung: #1f7a4d; --raum: #b7791f; --hinweis: #4a6fa5; --radius: 14px; --shadow: 0 1px 2px rgba(16, 32, 56, .06), 0 4px 16px rgba(16, 32, 56, .06); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Breite der Zeitspalte — bestimmt, dass Fach, Lehrkraft und Raum in allen Karten an derselben Stelle beginnen. */ --when-width: 58px; } /* Ohne ausdrücklich gewähltes Thema folgt die App dem Telefon. Die Einschränkung auf :not([data-theme]) ist wichtig: Sonst würde die Systemeinstellung eine Wahl aus den Einstellungen überstimmen. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg: #000000; --surface: #0e0f12; --surface-alt: #16171c; --border: #24262d; --border-strong: #34373f; --text: #f0f1f4; --text-muted: #9a9ea8; --text-faint: #777b84; --accent: #f0f1f4; --accent-text: #000000; --entfall: #ff7a7a; --vertretung: #55d08d; --raum: #e5b563; --hinweis: #8fb0e6; --shadow: none; --header-fill: rgba(255, 255, 255, .1); } } /* ---------- Farbthemen ---------- Auswahl in den Einstellungen. Ein gesetztes data-theme überstimmt die Systemeinstellung; ohne Auswahl greift der Block oben. Die Rollenfarben (entfall/vertretung/raum/hinweis) sind je Thema nachjustiert, damit der Kontrast auf der jeweiligen Fläche reicht. */ html[data-theme="papier"] { --bg: #f5f4f1; --surface: #ffffff; --surface-alt: #f8f7f4; --border: #e3e1dc; --border-strong: #cfccc4; --text: #1f1f1d; --text-muted: #6b6a64; --text-faint: #77766f; --accent: #2b2a27; --accent-text: #ffffff; --header-bg: #000000; --header-text: #ffffff; --entfall: #c53b3b; --vertretung: #257a4c; --raum: #9a6a15; --hinweis: #3f6ea6; --shadow: 0 1px 2px rgba(32, 30, 26, .05), 0 4px 14px rgba(32, 30, 26, .05); } html[data-theme="tiefschwarz"] { --bg: #000000; --surface: #121212; --surface-alt: #1a1a1a; --border: #262626; --border-strong: #3a3a3a; --text: #ececec; --text-muted: #a3a3a3; --text-faint: #7d7d7d; --accent: #e8e8e8; --accent-text: #111111; --header-bg: #000000; --header-text: #ffffff; --entfall: #ff7a76; --vertretung: #4fd08c; --raum: #e0b25c; --hinweis: #8ab4f8; /* Schatten sind auf Schwarz unsichtbar — die Ränder übernehmen. */ --shadow: none; --header-fill: rgba(255, 255, 255, .1); } html[data-theme="waldnacht"] { --bg: #0f1613; --surface: #16211c; --surface-alt: #1c2a23; --border: #29392f; --border-strong: #3b5244; --text: #e7efe9; --text-muted: #9db4a6; --text-faint: #758b7c; --accent: #245c43; --accent-text: #ffffff; --header-bg: #0b120e; --header-text: #ffffff; --entfall: #f28b82; --vertretung: #57c98c; --raum: #e3b75f; --hinweis: #7fb3d5; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .28); --header-fill: rgba(255, 255, 255, .12); } html[data-theme="pflaume"] { --bg: #171221; --surface: #201933; --surface-alt: #281f3f; --border: #362b52; --border-strong: #4a3d6b; --text: #ece7f5; --text-muted: #a99fc4; --text-faint: #8980a3; --accent: #5b46a8; --accent-text: #ffffff; --header-bg: #0f0a1a; --header-text: #ffffff; --entfall: #ff7b7b; --vertretung: #5bd096; --raum: #e5b566; --hinweis: #8fb4ee; --shadow: 0 1px 2px rgba(10, 5, 25, .4), 0 4px 16px rgba(10, 5, 25, .3); --header-fill: rgba(255, 255, 255, .12); } html[data-theme="sandstein"] { --bg: #f6efe4; --surface: #fffdf8; --surface-alt: #f9f3e8; --border: #e6dcc8; --border-strong: #d0c3a8; --text: #2b241a; --text-muted: #6e6353; --text-faint: #7f7465; --accent: #8a4b2e; --accent-text: #ffffff; --header-bg: #201812; --header-text: #ffffff; --entfall: #bf3f34; --vertretung: #256e46; --raum: #9c6410; --hinweis: #3e6796; --shadow: 0 1px 2px rgba(70, 55, 35, .07), 0 4px 16px rgba(70, 55, 35, .07); } html[data-theme="nordlicht"] { --bg: #eef4f4; --surface: #ffffff; --surface-alt: #f2f8f8; --border: #d7e3e3; --border-strong: #b9cccc; --text: #14262a; --text-muted: #52696e; --text-faint: #677a7e; --accent: #0e5f66; --accent-text: #ffffff; --header-bg: #0b2a2e; --header-text: #ffffff; --entfall: #c8453e; --vertretung: #1f7a4d; --raum: #a5731c; --hinweis: #2f6f9f; --shadow: 0 1px 2px rgba(15, 45, 50, .06), 0 4px 16px rgba(15, 45, 50, .07); } html[data-theme="dotter"] { --bg: #ffcf33; --surface: #fffdf2; --surface-alt: #fff3c9; --border: #e0b93e; --border-strong: #a88a1a; --text: #241c00; --text-muted: #6b5c14; --text-faint: #7d6b26; --accent: #241c00; --accent-text: #ffd84d; --header-bg: #1a1400; --header-text: #ffd84d; /* raum ist nach Braun abgedunkelt — reines Amber ertrinkt im gelben Grund. */ --entfall: #c22f22; --vertretung: #1d7a3f; --raum: #8a5a00; --hinweis: #2456a6; --shadow: 0 1px 2px rgba(90, 70, 0, .14), 0 4px 14px rgba(90, 70, 0, .12); } html[data-theme="tiefsee"] { --bg: #04252b; --surface: #073540; --surface-alt: #0a4250; --border: #10586a; --border-strong: #1a7286; --text: #e4f6f8; --text-muted: #9fd0d8; --text-faint: #74b2bd; --accent: #ff7a59; --accent-text: #2b0d02; --header-bg: #021a1f; --header-text: #e4f6f8; --entfall: #ff8577; --vertretung: #4ade80; --raum: #ffc266; --hinweis: #8fb9ff; --shadow: 0 1px 2px rgba(0, 10, 12, .5), 0 4px 16px rgba(0, 10, 12, .4); --header-fill: rgba(255, 255, 255, .14); } html[data-theme="minze"] { --bg: #e4f2ea; --surface: #ffffff; --surface-alt: #eff8f3; --border: #c9e2d5; --border-strong: #a4cab7; --text: #0f2619; --text-muted: #486255; --text-faint: #5d7668; --accent: #0c6a4d; --accent-text: #ffffff; --header-bg: #0a2a20; --header-text: #ffffff; /* vertretung ist deutlich abgedunkelt: Das übliche Grün liegt zu nah am Minzgrund und die Pille verschwände darin. Dunkelgrün trägt auch als Text auf der hellen Fläche. */ --entfall: #c4382c; --vertretung: #11663a; --raum: #96650f; --hinweis: #2a5fa8; --shadow: 0 1px 2px rgba(15, 60, 40, .07), 0 4px 16px rgba(15, 60, 40, .08); } html[data-theme="himmel"] { --bg: #e7f1fb; --surface: #ffffff; --surface-alt: #f1f7fd; --border: #cddfef; --border-strong: #a6c4e2; --text: #0f2137; --text-muted: #45607c; --text-faint: #5b748f; --accent: #0f5493; --accent-text: #ffffff; --header-bg: #0a2036; --header-text: #ffffff; /* hinweis wandert ins Indigo: Als Blau läge er auf dem blauen Grund und die getönten Flächen wären nicht mehr abzugrenzen. */ --entfall: #c33a2c; --vertretung: #146b3d; --raum: #93630e; --hinweis: #4340a8; --shadow: 0 1px 2px rgba(15, 40, 70, .07), 0 4px 16px rgba(15, 40, 70, .08); } /* ---------- Die drei dunklen Gegenstücke vom 12.09.2026 ---------- Seit die Themen Paare bilden (THEMEN_PAARE in app.js), braucht jedes helle Thema ein dunkles in derselben Farbfamilie. Drei hatten keins. Alle Werte gegen die Fläche gerechnet: text-faint über 5,5:1, die Rollenfarben über 7:1, Kopfzeile über 16:1. */ /* Mitternacht: das dunkle Gegenstück zu Himmel. Marineblau statt Hellblau, der Akzent ein helles Blau, das auf der Fläche als Text trägt (7,5:1). */ html[data-theme="mitternacht"] { --bg: #0b1626; --surface: #12203a; --surface-alt: #182a48; --border: #24395e; --border-strong: #35507f; --text: #e8eefb; --text-muted: #a9b8d6; --text-faint: #8497bb; --accent: #7fb2ff; --accent-text: #061225; --header-bg: #070f1d; --header-text: #e8eefb; --entfall: #ff8a80; --vertretung: #5fd39a; --raum: #f0c46c; --hinweis: #9ec1ff; --shadow: 0 1px 2px rgba(0, 5, 20, .5), 0 4px 16px rgba(0, 5, 20, .4); --header-fill: rgba(255, 255, 255, .14); } /* Rinde: das dunkle Gegenstück zu Sandstein. Warmes Braun, der Akzent ein Bernsteinorange. */ html[data-theme="rinde"] { --bg: #1b120c; --surface: #27190f; --surface-alt: #332214; --border: #4a3320; --border-strong: #654630; --text: #f6ebdf; --text-muted: #cdb59e; --text-faint: #a89079; --accent: #f0a35a; --accent-text: #241203; --header-bg: #120b06; --header-text: #f6ebdf; --entfall: #ff8d7a; --vertretung: #74cf8e; --raum: #ffcb6b; --hinweis: #9fbfff; --shadow: 0 1px 2px rgba(10, 4, 0, .5), 0 4px 16px rgba(10, 4, 0, .4); --header-fill: rgba(255, 255, 255, .14); } /* Bernstein: das dunkle Gegenstück zu Dotter. Dotter ist laut und gelb; nachts dreht sich das um — dunkler Grund, das Gelb bleibt als Akzent. raum ist bewusst gedämpfter als der Akzent, sonst wären zwei Gelbs auf einer Karte nicht auseinanderzuhalten. */ html[data-theme="bernstein"] { --bg: #171410; --surface: #221e16; --surface-alt: #2d281d; --border: #433c29; --border-strong: #5c5236; --text: #f7f1dc; --text-muted: #c9bf9f; --text-faint: #a39a7c; --accent: #ffcf33; --accent-text: #1a1400; --header-bg: #0f0d08; --header-text: #f7f1dc; --entfall: #ff8a7a; --vertretung: #6fd39a; --raum: #e0b25c; --hinweis: #98b8ff; --shadow: 0 1px 2px rgba(5, 4, 0, .5), 0 4px 16px rgba(5, 4, 0, .4); --header-fill: rgba(255, 255, 255, .14); } /* Das Hausthema. Warmes Dunkelgrau, waagerechte Schichten, eine kupferne Linie als Akzent — die Handschrift von taher.de. Die Streifen laufen nur über den Grund, nicht über die Karten: Dort steht Text, und eine Textur darunter macht ihn schwerer lesbar. So rahmt die Schichtung den Inhalt, statt mit ihm zu konkurrieren. */ html[data-theme="taher"] { --bg: #3a3937; --bg-bild: repeating-linear-gradient( to bottom, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 4px ); --surface: #46443f; --surface-alt: #403e3a; --border: #57544e; --border-strong: #706c65; --text: #f3f1ed; --text-muted: #b7b2aa; --text-faint: #b8b2a9; /* Das Kupfer der Linie aus der Vorlage, aufgehellt bis es als Text auf der Karte trägt: #c08f68 kam nur auf 3,4:1. Die anderen dunklen Themen liegen beim Akzent noch niedriger, weil er dort fast nur als Fläche vorkommt — an ein paar Stellen ist er aber Text ("Ganze Nachricht lesen", die Hausaufgabenmarke), und dort zählt es. */ --accent: #dcb18e; --accent-text: #241f1a; --header-bg: #2b2a28; --header-text: #f3f1ed; /* Auf warmem Grau brauchen die Statusfarben mehr Helligkeit als auf Schwarz — sonst sinken sie in den Grund ein. */ --entfall: #ff9384; --vertretung: #7ad9a4; --raum: #e8bc6b; --hinweis: #9cc2e8; --shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .24); } /* Dasselbe Haus bei Tageslicht. Warmes Papiergrau statt warmes Dunkelgrau, dieselbe Schichtung — nur als dunkle Linien auf hellem Grund statt umgekehrt. Das Kupfer geht hier in die andere Richtung als im dunklen Thema: Dort musste es aufgehellt werden (#dcb18e), hier abgedunkelt (#9a5a2f), damit es auf der Fläche trägt. Beides ist dieselbe Farbe der Vorlage, jeweils so weit gedreht, dass sie als Text lesbar bleibt. Die Kopfzeile bleibt das dunkle Warmgrau des Hausthemas. Sie ist das Wiedererkennungszeichen, und die anderen hellen Themen halten es genauso. */ html[data-theme="taher-hell"] { --bg: #e6e3dd; --bg-bild: repeating-linear-gradient( to bottom, rgba(0, 0, 0, .030) 0, rgba(0, 0, 0, .030) 1px, transparent 1px, transparent 4px ); --surface: #f7f5f1; --surface-alt: #efece6; --border: #d5d1c9; --border-strong: #b3aea4; --text: #2a2724; --text-muted: #5f5a53; --text-faint: #726c63; --accent: #9a5a2f; --accent-text: #ffffff; --header-bg: #2b2a28; --header-text: #f3f1ed; --entfall: #c03a2b; --vertretung: #1f7048; --raum: #8a5f0e; --hinweis: #2a6296; --shadow: 0 1px 2px rgba(58, 57, 55, .08), 0 4px 16px rgba(58, 57, 55, .09); } html[data-theme="beere"] { --bg: #f5cfe0; --surface: #fdf3f8; --surface-alt: #f9e4ee; --border: #e3aac6; --border-strong: #c97fa5; --text: #3a0f24; --text-muted: #82365a; --text-faint: #9a5274; --accent: #a81b5e; --accent-text: #ffffff; --header-bg: #2b0a1b; --header-text: #ffd9ea; /* entfall ist Zinnober statt Karmin — Karminrot verschwimmt mit Beere. */ --entfall: #c93a1d; --vertretung: #1e7a46; --raum: #96610d; --hinweis: #3757a8; --shadow: 0 1px 2px rgba(90, 20, 50, .12), 0 4px 16px rgba(90, 20, 50, .1); } * { box-sizing: border-box; } /* * Kein Doppeltipp-Zoom in der ganzen App. * * Zwei schnelle Berührungen versteht Safari als "heranzoomen". Beim * Abhaken, beim Blättern durch die Tage, beim Antippen zweier Karten kurz * nacheinander springt die Seite dann heran, und man tippt ins Leere. * Bisher stand das nur an der Fassungsnummer, wo es für das versteckte * Spiel gebraucht wurde; die Begründung gilt überall. * * Der Stern und nicht html/body: touch-action VERERBT SICH NICHT. Auf * body gesetzt bliebe auf jeder Karte und jedem Knopf "auto" stehen — * also genau dort, wo doppelt getippt wird. * * Ohne Klasse, damit jede benannte Regel gewinnt: Die Spielfläche * braucht "none" und behält es. * * "manipulation" schaltet GENAU den Doppeltipp ab. Wischen, Scrollen und * die Lupe mit zwei Fingern bleiben. Anders als user-scalable=no im Kopf * der Seite: Das nähme auch das Vergrössern, und wer schlecht sieht, soll * vergrössern können — Safari übergeht es seit iOS 10 ohnehin. */ * { touch-action: manipulation; } /* * Links im Fließtext. * * Ohne diese Regel nimmt der Browser sein eigenes Blau (#0000ee). Auf * hellem Grund geht das gerade noch; auf den dunklen Themen kam ein * Kontrast von 1,4:1 heraus — am 05.09.2026 gemessen, nötig sind 4,5:1. * Betroffen waren die Quellenangabe in "Über die App", die Anschriften * unter Impressum und Datenschutz, und jeder Link, den eine Lehrkraft in * einen Elternbrief schreibt. * * color: inherit statt einer eigenen Farbe: Die App hat dreizehn Themen, * und eine feste Linkfarbe wäre in mindestens einem davon wieder falsch. * Die Textfarbe stimmt in jedem, und der Unterstrich zeigt den Link. * * Nur der Elementselektor, damit jede Klasse mit eigener Farbe gewinnt — * die Knöpfe, die als gebaut sind, behalten ihr Aussehen. */ a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* * Formularelemente erben die Schrift der App. * * Ohne diese Regel nehmen button, input und select die Vorgabe des * Browsers — auf dem iPhone Arial statt San Francisco. Am 07.09.2026 * über die ganze App gemessen: alle Eingabefelder, alle Auswahlfelder, * das ×-Schliessen in achtzehn Blättern, der Zurück-Pfeil der * Einstellungen, das Auge am Passwortfeld und die ‹ › zum Blättern im * Tagesplan. Nur textarea war richtig gesetzt. * * Es ist dasselbe Versehen, das schon dreimal einzeln gemeldet und * dreimal einzeln repariert wurde — an der Terminzeile, am Portal-Knopf, * an den Kontakt-Wegen. Hier steht es jetzt an einer Stelle für alle. * * NUR font-family, nicht die Sammeleigenschaft font: Die Symbole sind * in rem bemessen (1,3rem für das ×, 1,6rem für den Pfeil) und tragen * ein eigenes line-height. "font: inherit" nähme beides mit. */ button, input, select, textarea { font-family: inherit; } /* * Und Eingabefelder nie unter 16 Pixel. * * Safari auf dem iPhone zoomt beim Antippen in jedes Feld hinein, das * kleiner gesetzt ist — die Seite springt, und der Nutzer muss sie von * Hand zurückziehen. Die Formularzeilen der Einstellungen laufen auf * 0,88rem; ein Feld, das das erbt, läge bei 14. */ input, select, textarea { font-size: max(16px, 1rem); } html, body { margin: 0; padding: 0; /* Zwei Angaben, nicht eine: Ein Thema darf über die Farbe hinaus eine Textur mitbringen. Gebraucht wird das für "taher.de", dessen Kennzeichen die waagerechten Schichten sind. Alle anderen Themen setzen --bg-bild nicht und bekommen über den Rückfall "none" genau das, was sie vorher hatten. */ background-color: var(--bg); background-image: var(--bg-bild, none); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; } [hidden] { display: none !important; } /* ---------- Anmeldung ---------- */ .login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .login__box { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px; } .login__title { margin: 0 0 4px; font-size: 1.4rem; } .login__hint { margin: 0 0 20px; color: var(--text-muted); font-size: .92rem; } .login__label { display: block; font-size: .85rem; color: var(--text-muted); margin-bottom: 6px; } .login__input, .login__button { width: 100%; font-size: 1rem; border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); } .login__input { background: var(--surface-alt); color: var(--text); margin-bottom: 16px; } .login__input:focus { outline: 2px solid var(--hinweis); outline-offset: 1px; } .login__button { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; cursor: pointer; } .login__error { margin: 14px 0 0; color: var(--entfall); font-size: .9rem; } /* ---------- Passwortfelder mit Auge ---------- */ /* Der Wrapper nimmt den Platz des Feldes ein — auch in den Zeilen der Formulare, die nebeneinander liegen. */ .pw { position: relative; display: block; flex: 1; min-width: 0; } /* Der Abstand wandert an den Wrapper, sonst säße das Auge zu hoch. */ .login__box .pw { margin-bottom: 16px; } .login__box .pw .login__input { margin-bottom: 0; } .pw input { width: 100%; padding-right: 46px; } .pw__eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--text-muted); cursor: pointer; } .pw__eye:hover { color: var(--text); } .pw__eye svg { width: 20px; height: 20px; display: block; } /* Safari blendet in Passwortfeldern selbst ein Symbol ein — das würde doppelt stehen. */ .pw input::-ms-reveal, .pw input::-webkit-credentials-auto-fill-button { display: none; } /* Da, aber unsichtbar: display:none oder visibility:hidden würde die Passwortverwaltung dazu bringen, das Feld zu übergehen. */ .login__ghost { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; } .login__remember { display: flex; align-items: center; gap: 10px; margin: -4px 0 18px; font-size: .88rem; color: var(--text-muted); cursor: pointer; } .login__remember input { width: 18px; height: 18px; flex: none; } /* Zweite Möglichkeit neben dem Passwort — sichtbar, aber nicht die Hauptsache. */ .login__button--ghost { margin-top: 12px; background: none; color: var(--text); border-color: var(--border-strong); } /* Zwischenüberschrift im Einrichtungsformular */ .login__section { margin: 22px 0 14px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .85rem; font-weight: 600; color: var(--text); } .login__link { display: block; width: 100%; margin-top: 16px; padding: 10px; background: none; border: 0; color: var(--hinweis); font-size: .9rem; text-decoration: underline; cursor: pointer; } /* * Impressum und Datenschutz unter dem Anmeldebildschirm. * * Kleiner und blasser als die Knöpfe darüber: Sie müssen zu finden sein, * aber niemand kommt hierher, um sie zu suchen. Die Fußzeile steht * außerhalb der Formulare und damit unter jedem von ihnen. */ .login__fuss { margin: 20px 0 0; text-align: center; color: var(--hinweis); font-size: .82rem; } .login__fuss-link, .ueber__link { padding: 6px 4px; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; } /* Etwas Luft nach oben: Die Zeile schließt "Über die App" ab. */ .ueber__zeile--recht { margin-top: 14px; } /* * Impressum und Datenschutz im Blatt. * * Fließtext, den jemand wirklich liest — also schmaler als das Blatt und * mit mehr Zeilenabstand als die Listen der App. Die Zwischentitel sind * die einzige Gliederung; sie tragen die Last, dass niemand so einen Text * von oben nach unten liest, sondern die Stelle sucht, die ihn angeht. */ .recht { padding: 0 4px 8px; line-height: 1.55; } .recht h3 { margin: 22px 0 6px; font-size: 1rem; } .recht p { margin: 0 0 10px; } .recht ul { margin: 0 0 12px; padding-left: 20px; } .recht li { margin-bottom: 6px; } .recht__klein { color: var(--hinweis); font-size: .85rem; } /* Eine Anschrift wird gelesen wie eine Anschrift, nicht wie ein Satz. */ .recht__adresse { line-height: 1.5; } /* Das Formular kann länger als der Bildschirm sein — dann oben beginnen statt mittig, sonst schneidet die Mitte-Ausrichtung den Anfang ab. */ .login--tall { align-items: start; } /* ---------- Der Start in der Handschrift von taher.de (12.09.2026) ---------- Nur, was VOR der Anmeldung zu sehen ist: Anmeldemaske, Einrichtungs- Assistent, Zurücksetzen. Alles hier hängt an #login und an sonst nichts. Drinnen gilt das Farbthema der Familie, und daran ändert dieser Block nichts — das war die Vorgabe. Die Palette ist die der Startseite taher.de: warmes Dunkelgrau, Cremeweiß, Lehm als Akzent, waagerechte Schichtlinien wie ein Druckbett. Bewusst unabhängig vom gewählten Thema: Der Start ist die Visitenkarte, nicht die Wohnung. Die Schriften liegen im Paket (assets/fonts), nicht bei Google: Die Inhaltsrichtlinie der App lässt nichts von außen zu, und das soll so bleiben. Archivo und IBM Plex stehen unter der SIL Open Font License. Variable Dateien: eine Datei trägt Archivo 600 und 700, eine Plex Sans 400 und 500. Geladen werden sie erst, wenn der Start sie braucht. Kontraste gerechnet: Text 8,6:1, gedämpfter Text 5,1:1, Verweise 5,1:1, Fehler 4,8:1 — alle auf dem Grund. Der Lehm selbst trägt keinen Text (3,8:1); er ist Rand und Fläche. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/archivo-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/ibm-plex-sans-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); } /* Der Grund UNTER dem Start: html und body tragen sonst das Farbthema, und das scheint oben hinter der Statusleiste (viewport-fit=cover) und unten beim Überziehen durch. Die Klasse setzt app.js, solange der Start offen ist. Die einzige Regel dieses Blocks, die nicht an #login hängt — sie muss darüber liegen, um darunter zu wirken. */ html.start-offen, html.start-offen body { background: #454340; background-image: none; } #login { --s-paper: #454340; --s-ink: #F0EFEB; --s-muted: #BDBAB3; --s-rule: #5C5955; --s-accent: #CE9468; --s-accent-text: #E3B08A; --s-feld: #524f4b; --s-fehler: #FF9A8A; --s-line: rgba(255, 255, 255, .05); --s-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; position: relative; background: var(--s-paper); color: var(--s-ink); color-scheme: dark; font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } /* Schichtlinien über der ganzen Fläche, wie auf taher.de. Fixiert, damit sie beim Scrollen eines langen Assistenten stehen bleiben; ohne Zeigerereignisse, damit kein Feld darunter verdeckt ist. */ #login::before { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient(to bottom, var(--s-line) 0 1px, transparent 1px 5px); pointer-events: none; z-index: 2; } /* Kein Kasten mehr: Die Startseite kennt keine Karten, nur Fläche, Linie und Schrift. */ #login .login__box { position: relative; z-index: 3; max-width: 440px; padding: 20px 6px 24px; background: none; border: 0; box-shadow: none; } #login .login__logo { height: 34px; margin: 0 0 22px; } #login .login__eyebrow, #login .login__label, #login .assistent__zaehler, #login .login__fuss { font-family: var(--s-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--s-muted); } #login .login__eyebrow { margin: 0 0 12px; } #login .login__label { margin-bottom: 8px; } #login .assistent__zaehler { color: var(--s-accent-text); } #login .login__title { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; } /* Der Schriftzug: baut sich einmal von unten auf, mit den feinen Schichtkanten darüber — die Handschrift der Startseite. */ #login .login__title--marke { position: relative; font-weight: 700; font-size: clamp(3rem, 16vw, 4.6rem); line-height: .9; letter-spacing: -.045em; margin: 0 0 18px; clip-path: inset(100% 0 0 0); animation: start-build 1.1s cubic-bezier(.2, .7, .2, 1) .15s forwards; } #login .login__title--marke::after { content: ""; position: absolute; inset: -2px; background: repeating-linear-gradient(to bottom, var(--s-paper) 0 1px, transparent 1px 4px); opacity: .55; pointer-events: none; } @keyframes start-build { to { clip-path: inset(0 0 0 0); } } /* Die Messlatte: ein Stück Lehm, dann die Linie. */ #login .login__rule { display: flex; height: 2px; margin: 0 0 22px; } #login .login__rule-accent { flex: none; width: 38%; background: var(--s-accent); } #login .login__rule-rest { flex: 1; background: var(--s-rule); } #login .login__hint { color: var(--s-muted); line-height: 1.55; } #login .login__hint strong { color: var(--s-ink); font-weight: 500; } #login .login__hint kbd { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); } #login .login__input { background: var(--s-feld); color: var(--s-ink); border: 1px solid var(--s-rule); border-radius: 8px; } #login .login__input::placeholder { color: #A7A49D; } #login .login__input:focus { outline: 2px solid var(--s-accent); outline-offset: 1px; } /* Knöpfe wie auf taher.de: Lehm als Rand und Hauch von Fläche, Pille. */ #login .login__button { background: rgba(206, 148, 104, .16); color: var(--s-ink); border: 2px solid var(--s-accent); border-radius: 30px; font-weight: 600; transition: background .25s ease; } #login .login__button:hover, #login .login__button:focus-visible { background: rgba(206, 148, 104, .36); } #login .login__button--ghost, #login .login__button--still { background: transparent; border-color: var(--s-rule); color: var(--s-ink); } #login .login__button--ghost:hover, #login .login__button--still:hover { background: rgba(255, 255, 255, .06); } #login .login__link, #login .login__fuss-link { color: var(--s-accent-text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s ease; } #login .login__link:hover, #login .login__link:focus-visible, #login .login__fuss-link:hover, #login .login__fuss-link:focus-visible { border-color: var(--s-accent); } #login .login__link { display: inline-block; width: auto; padding: 8px 0 3px; } #login .login__fuss { margin-top: 26px; } #login .login__fuss-link { font: inherit; letter-spacing: inherit; text-transform: inherit; } #login .login__error { color: var(--s-fehler); } #login .login__error--warten { color: var(--s-muted); border-left-color: var(--s-accent); } #login .login__hint--warnung { background: rgba(255, 154, 138, .12); border-left-color: var(--s-fehler); color: var(--s-ink); } #login .login__remember { color: var(--s-muted); } #login input[type="checkbox"], #login input[type="radio"] { accent-color: var(--s-accent); } #login .login__section { border-top-color: var(--s-rule); color: var(--s-ink); } #login .pw__eye { color: var(--s-muted); } #login .pw__eye:hover { color: var(--s-ink); } #login .druckwahl__knopf { background: var(--s-feld); border-color: var(--s-rule); color: var(--s-muted); } #login .druckwahl__knopf.is-aktiv { border-color: var(--s-accent); color: var(--s-ink); } #login :focus-visible { outline: 2px solid var(--s-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { #login .login__title--marke { clip-path: none; animation: none; } } /* ---------- Kopfbereich ---------- */ .header { position: sticky; top: 0; z-index: 10; background: var(--header-bg); color: var(--header-text); border-bottom: 1px solid rgba(255, 255, 255, .08); /* Seitlich keine Polsterung: Die tragen Zeile und Reiter selbst, damit sie auf dieselbe Spalte gehen wie der Inhalt. Die Fläche der Leiste soll aber über die ganze Breite laufen — sonst endet das Schwarz mitten im Bildschirm. */ padding: calc(var(--safe-top) + 14px) 0 0; } /* * Kopfzeile und Reiter auf derselben Spalte wie der Inhalt. * * Ohne das spannen sie über die ganze Breite, während .main bei 720 Punkten * zentriert steht — auf einem iPad quer saß das Zahnrad damit 180 Punkte * neben allem, worauf es sich bezieht. * * Bewusst keine Medienabfrage: Die Grenze ist nicht eine Gerätebreite, * sondern die Lesespalte. Auf einem Telefon (390 Punkte) tut die Regel * nichts, weil 390 kleiner als 720 ist. Deshalb dieselben 720 und dieselben * 16 Punkte Polsterung wie .main, samt border-box — sonst stünde die * Kopfzeile um genau diese 16 Punkte versetzt. */ .header__row, .tabs { box-sizing: border-box; max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } .header__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* Logo und Titel als Einheit. Der Titel darf schrumpfen, das Logo nicht. */ .header__brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .header__logo { flex: none; /* Die Marke ist quadratisch; Höhe festlegen genügt. 30px, weil das Raster darunter sonst zu einem Farbfleck zusammenläuft. */ height: 30px; width: auto; } .header__title { margin: 0; font-size: 1.02rem; font-weight: 650; line-height: 1.2; /* Hier steht der Name des Kindes. Kurz, aber nicht kalkulierbar — Doppelnamen kommen vor. Umbrechen ist besser, als die Knöpfe zu verdrängen. */ overflow-wrap: anywhere; } /* Gedämpft über die Farbe, nicht über opacity: Die Warnung zum Alter der Daten steht in derselben Zeile und darf nicht mitgedämpft werden. */ .header__subtitle { margin: 2px 0 0; font-size: .85rem; color: var(--header-quiet); } .header__actions { display: flex; align-items: center; gap: 8px; flex: none; } .header__icon { background: var(--header-fill); color: inherit; border: 0; border-radius: 10px; width: 40px; height: 40px; font-size: 1.2rem; line-height: 1; cursor: pointer; flex: none; /* Bezugspunkt für den Neuigkeiten-Punkt. */ position: relative; } /* Gezeichnete Symbole in der Kopfzeile: 20 Pixel, mittig, in der Farbe des Knopfs. Dieselbe Höhe, die die Schriftzeichen der Nachbarn einnehmen. */ .header__svg { display: block; width: 20px; height: 20px; margin: 0 auto; } .header__svg[hidden] { display: none; } /* Ein Punkt, keine Zahl: Wie viele Neuigkeiten es sind, hilft niemandem — dass es welche gibt, schon. Er sitzt am Rand des Zahnrads und nicht darauf, damit das Symbol lesbar bleibt. */ .header__punkt { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--entfall); } #refresh.is-busy { animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Reiter ---------- */ .tabs { display: flex; gap: 2px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs__tab { flex: 1 1 auto; min-width: 0; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--header-quiet); font: inherit; font-size: .85rem; padding: 10px 6px; cursor: pointer; white-space: nowrap; } .tabs__tab.is-active { color: var(--header-text); border-bottom-color: var(--header-text); font-weight: 600; } .badge { display: inline-block; min-width: 16px; margin-left: 1px; padding: 0 4px; border-radius: 9px; background: var(--entfall); color: #fff; font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; } /* ---------- Inhalt ---------- */ .main { padding: 16px 16px calc(var(--safe-bottom) + 16px); max-width: 720px; margin: 0 auto; } .panel { display: none; } .panel.is-active { display: block; } .notice { background: color-mix(in srgb, var(--raum) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--raum) 35%, var(--border)); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; font-size: .9rem; } /* "Im Schulportal als erledigt markiert." Steht anstelle des Knopfes — gedämpft, weil es eine Feststellung ist und keine Handlung. */ .card__note { margin: 10px 0 0; font-size: .85rem; color: var(--muted); } /* Der einmalige Hinweis auf Face ID. Bewusst in der Akzentfarbe und nicht in der Warnfarbe: Es ist ein Angebot, kein Problem. */ .hinweis-karte { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius); padding: 14px; margin: 0 0 16px; } /* * Die Karte, bei der jemand anderes wartet. * * Alle übrigen Karten sind Angebote an den Betrachter — diese ist eine * Bitte von jemandem, der ohne eine Antwort nicht weiterkommt. Deshalb * der Ton des Entfalls statt der ruhigen Akzentfarbe: dieselbe Farbe, * die in dieser App überall "hier musst du hinsehen" heisst. */ .hinweis-karte--wartet { background: color-mix(in srgb, var(--entfall) 10%, var(--surface)); border-color: color-mix(in srgb, var(--entfall) 40%, var(--border)); } .hinweis-karte__text { margin: 0 0 12px; font-size: .9rem; line-height: 1.45; } /* Die Schritte einer Anleitung — auf dem iPhone der einzige Weg zum Vollbild, weil Apple dafür keine Schnittstelle anbietet. Nummeriert, weil die Reihenfolge zählt, und mit Luft zwischen den Zeilen: Wer danebenher am Telefon hantiert, verliert sonst die Zeile. */ .hinweis-karte__schritte { margin: 0 0 12px; padding-left: 1.3em; font-size: .88rem; line-height: 1.5; color: var(--text-muted); } .hinweis-karte__schritte li { margin-bottom: 6px; } .hinweis-karte__schritte li:last-child { margin-bottom: 0; } .hinweis-karte__knoepfe { display: flex; gap: 10px; /* Auf einem schmalen Telefon nebeneinander, sonst umbrechen — zwei halbe Knöpfe sind schlechter zu treffen als zwei ganze. */ flex-wrap: wrap; } .hinweis-karte__ja, .hinweis-karte__nein { flex: 1 1 auto; min-height: 44px; padding: 10px 16px; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; } .hinweis-karte__ja { background: var(--accent); border: 0; color: var(--accent-text); } .hinweis-karte__nein { background: none; border: 1px solid var(--border); color: inherit; } .notice--inline { background: color-mix(in srgb, var(--entfall) 12%, var(--surface)); border-color: color-mix(in srgb, var(--entfall) 35%, var(--border)); margin-bottom: 12px; } .hint { margin: 10px 0 0; font-size: .78rem; color: var(--text-muted); } .hint--right { text-align: right; margin-top: 4px; } .section-title { margin: 24px 0 10px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .section-title:first-child { margin-top: 0; } /* Offene Fehlstunden in der Abschnittszeile: derselbe Ton wie beim Entfall — "hier musst du hinsehen". Ist nichts offen, bleibt die Zeile gedämpft wie jede andere Überschrift; die Entwarnung steht dann im Wortlaut ("alle entschuldigt") und braucht keine Farbe. */ .section-title--achtung { color: var(--entfall); } /* ---------- Tagesnavigation ---------- */ /* Datum, Schulschluss und Alter der Daten in einem Block: Es sind alles Aussagen über diesen Tag. Einzeln untereinander sah der Schulschluss aus, als hätte ihn jemand nachträglich zwischen die Stunden geschoben. */ .tagkopf { margin-bottom: 14px; padding: 12px 12px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .daynav { display: flex; align-items: center; gap: 8px; } /* Innerhalb des Kopfes tragen die Pfeile keinen eigenen Rahmen mehr — zwei Rahmen ineinander wirken unruhig. */ .tagkopf .daynav__step { background: var(--surface-alt); border-color: transparent; } .daynav__step { flex: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; } .daynav__step:disabled { opacity: .35; cursor: default; } .daynav__current { flex: 1; min-width: 0; text-align: center; } /* Nur sichtbar, wenn ein anderer Tag als heute angezeigt wird. Vorher war er durchsichtig, dünn umrandet und gedämpft — er sah aus wie eine Bemerkung, nicht wie etwas zum Drücken. Jetzt gefüllt in der Akzentfarbe, mit Pfeil und in Daumengröße. Er steht nur da, wenn man woanders ist, darf also deutlich sein. */ .daynav__heute { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; /* 32 px hoch und 12 px Innenabstand: Vorher waren es 2 px, und damit war der Knopf mit dem Daumen kaum zu treffen. */ min-height: 32px; padding: 0 13px; background: var(--accent); border: 0; border-radius: 999px; color: var(--accent-text); font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer; } .daynav__heute:active { transform: scale(.96); } .daynav__heute svg { width: 14px; height: 14px; flex: none; } .daynav__label { display: block; /* Ziffern gleich breit: Beim Blättern springen Datum und Pfeile sonst unter dem Daumen weg. */ font-variant-numeric: tabular-nums; font-weight: 650; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .daynav__meta { display: block; font-size: .78rem; color: var(--text-muted); } /* ---------- Anlagen an den Kursmappen ---------- */ /* Zeilen, keine Kacheln: Dateinamen sind lang und ungleich lang. Nebeneinander gesetzt bricht jeder zweite um, und die Reihe franst aus. */ .anlagen { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .anlage { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); color: var(--text); text-decoration: none; font-size: .84rem; } /* Die Endung als Marke — sie sagt in drei Zeichen, was einen erwartet, und erspart das Suchen im Dateinamen. */ .anlage__typ { flex: none; min-width: 2.6em; padding: 2px 5px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-align: center; } .anlage__name { flex: 1 1 auto; min-width: 0; /* Ein langer Name schiebt sonst den Pfeil aus der Zeile. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .anlage__pfeil { flex: none; color: var(--text-faint); } /* Im Blatt zur Stunde sitzen sie im Fussbereich, der schon eine eigene Fläche hat — dort wäre ein zweiter Rahmen einer zu viel. */ .sheet__aktion .anlagen { margin-top: 0; } /* ---------- Nachricht schreiben ---------- */ /* Der Knopf über der Nachrichtenliste. Er tut etwas, statt nur wohin zu führen — deshalb die Akzentkante. */ /* Eine Karte, die zu etwas auffordert — "Nachricht schreiben". Vorher nur ein drei Pixel schmaler Balken links: Zwischen einem Dutzend gleich aussehender Karten ging sie unter, und wer eine Lehrkraft anschreiben wollte, suchte danach. Jetzt trägt sie die Akzentfarbe im Rahmen, im Titel und im Pfeil, dazu einen Hauch davon im Hintergrund. Bewusst NICHT flächig gefüllt: Das ist in dieser App den grossen Entscheidungen vorbehalten ("Fach wählen", "Video ansehen"). Eine Karte, die immer dasteht, darf nicht so laut sein wie eine Frage, die beantwortet werden will. */ .menu--tun { border-color: var(--accent); border-left-width: 3px; background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)), var(--surface-alt); } .menu--tun .menu__titel { color: var(--accent); font-weight: 700; } .menu--tun .menu__pfeil { color: var(--accent); } .empfaenger { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; } .empfaenger__marke { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-alt); font: inherit; font-size: .84rem; color: var(--text); cursor: pointer; } .treffer { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; } .treffer__eintrag { padding: 10px 13px; background: var(--surface); border: 0; text-align: left; font: inherit; font-size: .9rem; color: var(--text); cursor: pointer; } .treffer__eintrag + .treffer__eintrag { border-top: 1px solid var(--border); } /* Der Knopf, der etwas auslöst, hebt sich von dem ab, der nur umschaltet. */ .sheet__knopf--tun { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; } /* ---------- Dokumente der Schule ---------- */ .dokumente { display: flex; flex-direction: column; } .dokument { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; } /* Die Endung als Etikett statt eines Symbols: Sie sagt genauer, was einen erwartet — eine docx will man am Telefon vielleicht gar nicht erst öffnen. */ .dokument__typ { flex: none; min-width: 42px; padding: 3px 6px; border-radius: 5px; background: var(--surface-alt); border: 1px solid var(--border); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-align: center; color: var(--text-muted); } .dokument__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dokument__name { font-size: .92rem; line-height: 1.3; } .dokument__meta { font-size: .78rem; color: var(--text-muted); } .dokument__pfeil { margin-left: auto; color: var(--text-faint); } /* ---------- Umschalten zwischen Kindern ---------- */ /* Der Name in der Kopfzeile wird zur Schaltfläche, sobald es ein zweites Kind gibt — vorher sieht und tut er nichts anderes als bisher. */ .header__title--wahl { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; } .header__title--wahl::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; } /* Hängt unter der Kopfzeile statt als eigenes Blatt: Umschalten ist ein Griff, keine Entscheidung, die eine ganze Fläche verdient. */ .kindwahl { position: absolute; z-index: 40; margin-top: 6px; min-width: 200px; max-width: min(88vw, 320px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); overflow: hidden; } .kindwahl__eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 11px 14px; background: none; border: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer; } .kindwahl__eintrag + .kindwahl__eintrag { border-top: 1px solid var(--border); } .kindwahl__eintrag--aktiv { background: var(--surface-alt); } .kindwahl__name { font-weight: 650; font-size: .95rem; } .kindwahl__login { font-size: .8rem; color: var(--text-muted); } /* Die Liste auf der Kinderseite. */ .kindzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .kindzeile__text { display: flex; flex-direction: column; gap: 2px; } .kindzeile__text small { color: var(--text-muted); font-size: .8rem; } .kindzeile__marke { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); } .kindzeile__weg { background: none; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem; color: var(--entfall); cursor: pointer; } /* ---------- Fehlzeiten ---------- */ /* Eine Liste zum Nachschlagen, kein Handlungsbedarf — deshalb Zeilen statt Karten. Nur die offenen Stunden treten hervor: Sie bedeuten, dass eine Entschuldigung fehlt. */ .fehlzeiten { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .fehlzeit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 13px; background: var(--surface); font-size: .88rem; } .fehlzeit + .fehlzeit { border-top: 1px solid var(--border); } .fehlzeit__fach { font-weight: 650; color: var(--fach, var(--text)); } .fehlzeit__zahlen { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; } .fehlzeit__zahlen b { color: var(--text); font-weight: 700; } /* Ohne Entschuldigung: dieselbe Farbe wie der Entfall, der Ton für "hier musst du hinsehen". */ .fehlzeit__offen { display: block; color: var(--entfall); font-weight: 650; } /* * Die offenen Stunden als grosse Zahl. * * Sie stehen dort, wo vorher die gefehlten standen — und übernehmen * deren Gewicht mitsamt der Warnfarbe. Grösser als der Rest der Zeile, * weil sie die einzige Zahl ist, auf die jemand reagieren muss: Für sie * fehlt noch eine Entschuldigung. * * Kein eigenes display: block wie bei .fehlzeit__offen — die Zahl steht * im Fluss der Zeile, direkt vor "ohne Entschuldigung". */ /* * Der Selektor nennt das b ausdrücklich mit. * * ".fehlzeit__zahlen b" setzt die Textfarbe und ist mit Klasse PLUS * Element spezifischer als eine Klasse allein — eine Regel nur auf * .fehlzeit__offen-zahl verlor deshalb, und die Zahl kam in der * gewöhnlichen Textfarbe heraus statt im Warnton. Am 05.09.2026 im * Browser gemessen: rgb(228,246,248) statt der Entfall-Farbe. Am * Quelltext war das nicht zu sehen. */ .fehlzeit__zahlen b.fehlzeit__offen-zahl { color: var(--entfall); font-weight: 700; font-size: 1.15em; } /* Die Schulveranstaltung ist keine Fehlstunde — sie steht nur da, damit der Vergleich mit dem Portal aufgeht. Also leise: kein Warnton. */ .fehlzeit__extra { display: block; color: var(--text-muted); font-weight: 500; } /* * Das Fehlerprotokoll in der Betreiberansicht. * * Bewusst nüchtern: Wer hier nachsieht, sucht eine Uhrzeit und will den * Wortlaut — nicht eine hübsche Aufbereitung, die etwas weglässt. Die * Meldung steht deshalb ungekürzt und darf umbrechen; Route und * Fundstelle sind klein daneben. */ /* Der Rückweg, wenn die Zwischenablage nicht will: Der Text steht in einem Feld und ist ausgewählt. Klein und einfarbig — er ist zum Kopieren da, nicht zum Lesen. */ .protokoll__roh { width: 100%; min-height: 120px; margin: 8px 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; font-size: .75rem; } /* * Der Kopier-Knopf je Eintrag. * * Rechts oben in der Zeile und blass: Meistens liest man das Protokoll, * ohne etwas weitergeben zu wollen — dann soll der Knopf nicht mitlesen. * Beim Zeigen wird er deutlich. * * Alle Knopf-Vorgaben zurückgesetzt, nicht nur der Rahmen: Hintergrund * und Textfarbe kommen sonst vom Browser. Genau daran ist am 06.09.2026 * die antippbare Terminzeile gescheitert — sie stand als weisser Kasten * zwischen dunklen Zeilen. */ .protokoll__kopie { float: right; margin-left: 8px; padding: 2px 6px; border: 0; background: none; color: var(--text-faint); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; opacity: .55; } .protokoll__kopie:hover, .protokoll__kopie:focus-visible { opacity: 1; color: var(--text); } /* Der Haken nach dem Kopieren — an der Stelle, an der getippt wurde. Er ersetzt die Meldung, die vorher zwei Bildschirmhöhen weiter oben erschien und dort drangeklatscht wirkte. */ .protokoll__kopie.is-kopiert { opacity: 1; /* --accent gibt es in jedem Farbschema; eine eigene "Erfolg"-Farbe nicht, und eine einzuführen wäre für 1,6 Sekunden Haken zu viel. */ color: var(--text); } /* * Die Kopfzeile über der Liste: wie viele Vorfälle, und der Knopf fürs * Ganze. * * Beide zurückhaltend. Hier stand ein grosser Hauptknopf "In die * Zwischenablage" — dabei ist der seltenere Fall, dass jemand wirklich * alles braucht. Die Knöpfe an den einzelnen Vorfällen sind die * wichtigeren, und die sind blass. */ .protokoll__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; color: var(--text-muted); font-size: .8rem; } .protokoll__alle { padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; text-decoration: underline; cursor: pointer; } .protokoll__alle:hover, .protokoll__alle:focus-visible { color: var(--text); } /* Wie oft und seit wann — die zwei Angaben, die aus einer Wiederholung eine Lage machen. "3× in einer Minute" ist etwas anderes als "40× seit gestern Abend". */ .protokoll__oft { margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-size: .78rem; font-variant-numeric: tabular-nums; } .protokoll__seit { margin-left: 6px; color: var(--text-faint); font-size: .78rem; } .protokoll__zeile { padding: 8px 10px; border-left: 3px solid var(--border-strong); background: var(--surface-alt); border-radius: 0 8px 8px 0; margin-bottom: 8px; font-size: .85rem; line-height: 1.45; } .protokoll__wann { color: var(--text-muted); font-variant-numeric: tabular-nums; } .protokoll__wo { margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: var(--accent); color: var(--accent-text); font-size: .78rem; } .protokoll__was { display: block; margin-top: 4px; color: var(--text); /* Lange Portalmeldungen dürfen umbrechen, aber nicht aus dem Kasten laufen — sie enthalten Adressen ohne Leerzeichen. */ overflow-wrap: anywhere; } .protokoll__quelle { display: block; margin-top: 3px; color: var(--text-faint); font-size: .78rem; overflow-wrap: anywhere; } /* * Der Hinweis, der beim Einrichten nach sechs Sekunden erscheint. * * Er sitzt in der Fehlerzeile, ist aber keiner — deshalb der ruhige Ton * statt der Warnfarbe. Wer hier liest, hat nichts falsch gemacht; er * wartet nur auf das Schulportal. */ .login__error--warten { color: var(--text-muted); border-left: 3px solid var(--hinweis); padding-left: 10px; text-align: left; } /* * Die anstehende Arbeit als Knopf. * * Sie sieht aus wie jede andere Terminzeile — bis auf den Pfeil rechts. * Mehr braucht es nicht: Wer die Zeile liest, sieht den Pfeil, und wer * ihn nicht sieht, verliert nichts. Ein hervorgehobener Knopf mitten in * der Terminliste hiesse dagegen, dass diese eine Zeile wichtiger ist * als der Termin, den sie beschreibt. */ /* Die Hausaufgabe unter dem Thema — leiser als das Thema selbst. */ .chronik__hausaufgabe { margin: 4px 0 0; color: var(--text-muted); font-size: .85rem; } /* ---------- Konten nach Schulen ---------- Mit vier Schulen in einer Reihe sucht man die Zeile, die einen angeht, und sieht nicht, wie sich die Nutzung verteilt. Die Überschrift trägt den Namen der Schule und rechts daneben, wie viele Konten dort hängen. Dieselbe Tonlage wie die übrigen Abschnittszeilen — es ist eine Gliederung, keine Meldung. */ .konten-gruppe { margin: 18px 0 8px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: baseline; gap: 8px; } .konten-gruppe:first-child { margin-top: 0; } .konten-gruppe__zahl { font-variant-numeric: tabular-nums; font-weight: 600; opacity: .75; } /* ---------- Der schwebende Knopf zum Schreiben ---------- Im Reiter "Nachrichten" stand "Nachricht schreiben" als Karte ganz oben. Wer die Liste herunterscrollte, verlor sie aus dem Blick — und wer eine neue Nachricht schreiben wollte, musste erst zurück nach oben. Jetzt bleibt der Knopf stehen. z-index 40: unter dem Blatt (50), über der Liste. Ausgeblendet wird er trotzdem, sobald ein Blatt offen ist — verdeckt genügt nicht, denn auf dem Weg zum "Schliessen" träfe der Daumen sonst genau ihn. */ .fab { position: fixed; right: 16px; /* Über der Fusszeile, und auf dem iPhone über dem Balken der Home-Geste: Ohne safe-area liegt der Knopf sonst darunter. */ bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); cursor: pointer; } .fab svg { width: 24px; height: 24px; } .fab:active { transform: translateY(1px); } /* Damit die letzte Nachricht nicht unter dem Knopf verschwindet. Der Platz steht nur da, wo der Knopf auch schwebt. */ .panel[data-panel="nachrichten"].is-active { padding-bottom: 84px; } /* ---------- Wie sich die Familien auf die Schulen verteilen ---------- Ein Kuchen aus einem einzigen Kreis: stroke-dasharray schneidet ihn in Stücke, und bei r = 15,9155 ist der Umfang genau 100 — jeder Anteil ist direkt sein Prozentwert. Keine Bogenrechnung, keine Bibliothek. */ .kuchen { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 14px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; } .kuchen__bild { flex: none; width: 104px; height: 104px; } /* Keine Drehung hier: Der Anfang wird über den dashoffset gesetzt (25 von 100 entspricht einer Vierteldrehung, also zwölf Uhr). Beides zusammen drehte den Ring um 90 Grad zu weit — der erste Anteil begann auf neun Uhr. Am 04.09.2026 im Bild gesehen. */ .kuchen__zahl { font-size: 6.5px; font-weight: 700; fill: var(--text); } .kuchen__wort { font-size: 2.8px; fill: var(--text-muted); } .kuchen__legende { flex: 1; min-width: 0; font-size: .82rem; } .kuchen__zeile { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; } .kuchen__zeile:last-child { margin-bottom: 0; } .kuchen__punkt { width: 10px; height: 10px; border-radius: 3px; flex: none; } /* Lange Schulnamen kürzen statt umbrechen: Eine Legende, in der jede Zeile zwei hoch ist, verliert ihren Zusammenhang. */ .kuchen__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kuchen__legende small { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* "Nie angemeldet" ist eine stille Gruppe — sie soll auffallen, ohne zu mahnen. */ .konten-gruppe--ruht { color: var(--text-faint); } /* ---------- Die eigene Kennung ---------- Sie steht ganz oben in den Einstellungen und ersetzt in der Übersicht des Betreibers den Familiennamen. Deshalb muss sie ablesbar sein wie eine Telefonnummer: gross, mit gleich breiten Ziffern, damit man sie am Telefon vorlesen kann, ohne sich zu verhaspeln. */ .kennung { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2, rgba(255, 255, 255, .04)); display: flex; flex-direction: column; gap: 3px; } .kennung__wort { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .kennung__wert { font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--text); } .kennung__hinweis { font-size: .82rem; line-height: 1.35; color: var(--text-muted); } /* In der Liste des Betreibers steht sie an der Stelle des Namens — dort kleiner, aber mit denselben gleich breiten Ziffern. */ .planner__name--kennung { font-variant-numeric: tabular-nums; letter-spacing: .04em; } /* Der Rahmentext der Betrachterzeile ("Nichts zu sehen? … die App bleibt offen.") ist Beiwerk — die Knöpfe daneben sind die Sache. Also gedämpft, damit "Öffnen oder sichern" sich davon abhebt. Er wird bei einer Word-Vorschau ausgeblendet, die Knöpfe bleiben stehen. */ .viewer__hint-text { color: var(--text-muted); } .fehlzeiten__leer { color: var(--text-muted); font-size: .88rem; padding: 2px 0 4px; } /* ---------- Abgaben mit Frist ---------- */ /* Karten wie die Kursmappen, aber mit einem Streifen, dessen Farbe die Dringlichkeit trägt. Die Fachfarbe steht als Punkt daneben — links ist hier die Frist wichtiger als das Fach, und zwei Bedeutungen an derselben Kante liest niemand auseinander. */ .abgaben { display: flex; flex-direction: column; gap: 8px; } .abgabe { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius); padding: 11px 13px; } /* Rot für überfällig und heute, Bernstein für bald. Nicht Grün: Das heißt in dieser App "Vertretung" und liest sich wie "alles in Ordnung" — an einer Frist, die morgen abläuft, wäre das die falsche Auskunft. */ .abgabe--vorbei { border-left-color: var(--entfall); } .abgabe--heute { border-left-color: var(--entfall); } .abgabe--bald { border-left-color: var(--raum); } /* Erledigtes tritt zurück, verschwindet aber nicht: Es steht nur noch da, wenn eine Rückmeldung dranhängt — und die will man lesen. */ .abgabe--fertig { background: var(--surface-alt); border-left-color: var(--border-strong); } .abgabe--fertig .abgabe__titel { color: var(--text-muted); } .abgabe__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; } .abgabe__fach { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fach, var(--text-muted)); } .abgabe__titel { font-size: .95rem; line-height: 1.35; } .abgabe__rueckmeldung { margin-top: 6px; padding-left: 9px; border-left: 2px solid var(--border); font-size: .85rem; color: var(--text-muted); } /* ---------- Ausblick auf die nächsten Tage ---------- */ /* Dezent, aber nicht zu übersehen: Der farbige Strich ist derselbe, den die Arbeit-Marke trägt, damit beide erkennbar dasselbe meinen. Kein eigener Kasten — die Zeile gehört zum Tageskopf und soll ihn nicht aufblähen. */ .ausblick { margin: 8px -12px 0; padding: 8px 12px 0; border-top: 1px solid var(--border); } .ausblick__zeile { display: flex; align-items: baseline; gap: 8px; padding-left: 11px; border-left: 3px solid var(--entfall); font-size: .82rem; line-height: 1.35; } .ausblick__zeile + .ausblick__zeile { margin-top: 5px; } /* Steht nur eine Lernkontrolle an, tritt die Zeile zurück. Sie soll erinnern, nicht alarmieren. */ .ausblick__zeile--lernkontrolle { border-left-color: color-mix(in srgb, var(--entfall) 45%, transparent); } .ausblick__zeile--lernkontrolle .ausblick__wann { font-weight: 600; color: color-mix(in srgb, var(--entfall) 75%, var(--text-muted)); } .ausblick__wann { flex: none; font-weight: 700; color: var(--entfall); } .ausblick__was { color: var(--text-muted); /* Drei Arbeiten an einem Tag sind selten, aber dann soll die Zeile umbrechen statt den Kopf zu sprengen. */ min-width: 0; } /* ---------- Schulschluss ---------- */ /* Kein weiterer Unterrichtsblock: keine Kartenfläche, kein Schatten, dafür ein Strich an der Kante und die Uhrzeit als das, was man sucht. Die Zeile beantwortet die Frage, wegen der man morgens in die App schaut. */ .schluss { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "zeit marke" "zeit wo"; align-items: baseline; column-gap: 12px; /* Sitzt im Tageskopf und teilt sich dessen Fläche — abgesetzt nur durch eine Linie, nicht durch einen eigenen Kasten. */ margin: 10px -12px 0; padding: 10px 12px 2px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; } /* Der farbige Strich sitzt links neben der Uhrzeit, nicht am Blockrand. */ .schluss__zeit { border-left: 3px solid var(--border-strong); padding-left: 11px; } .schluss--frueher .schluss__zeit { border-left-color: var(--vertretung); } .schluss--satz { border-left: 0; } .schluss__zeit { grid-area: zeit; align-self: center; font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; } .schluss__zeit small { font-size: .8rem; font-weight: 400; color: var(--text-muted); } .schluss__marke { grid-area: marke; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .schluss__wo { grid-area: wo; margin-top: 1px; font-size: .82rem; color: var(--text-muted); } /* Endet der Tag früher als geplant, ist das die Nachricht des Tages. */ .schluss--frueher { border-left-color: var(--vertretung); } .schluss--frueher .schluss__zeit, .schluss--frueher .schluss__marke { color: var(--vertretung); } /* Und beginnt er später, erst recht — morgens ist das die dringendere Auskunft. Dieselbe Form wie der Schluss, damit man beides mit einem Blick liest; die Farbe des Hinweises statt der der Vertretung, weil es eine Ansage ist und kein Ausfall. */ .schluss--spaeter { margin-bottom: 8px; border-left-color: var(--hinweis); } .schluss--spaeter .schluss__zeit, .schluss--spaeter .schluss__marke { color: var(--hinweis); } /* Fällt alles aus, gibt es keine Uhrzeit — dann bleibt es beim Satz. */ .schluss--satz { display: block; padding: 11px 13px; border-left-color: var(--entfall); font-size: .95rem; font-weight: 600; } /* ---------- Wetter im Tageskopf ---------- */ /* Eine ruhige Zeile unter dem Schulschluss, keine Karte: Das Wetter gehört zur selben Morgen-Frage (Regenjacke, Fahrrad oder Bus?), aber es ist eine Zugabe — es soll den Blick nicht vom Plan wegziehen. */ .tagwetter { display: flex; align-items: baseline; gap: 8px; /* Die negativen Ränder ziehen die Trennlinie über die volle Breite der Karte. Als Knopf braucht die Zeile die Breite ausdrücklich: Ein Absatz füllt von selbst, ein