/* Copyright 2026 by Ulf Haueisen, Frankfurt am Main. All rights reserved. */
*,
*:before,
*:after { box-sizing: border-box; }
/* Fokus nur bei Tastaturbedienung zeigen (:focus-visible), dann aber deutlich (WCAG 2.4.7). Bis
2026-09-26 stand hier *:focus { outline-color: transparent }, das jeden Hinweis auf die Stelle
loeschte — per Tab verschwand man auf jeder Seite. Zwei Ringe, damit einer auf jedem Grund
sichtbar ist: der weisse innen (box-shadow) auf dem dunklen Kopf, der blaue aussen auf den
hellen Inhaltsflaechen. Mausklicks bleiben ohne Ring wie bisher. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid #0047a1; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
INPUT[type="text"],
INPUT[type="button"],
INPUT[type="search"],
INPUT[type="submit"],
BUTTON { -webkit-appearance: none; appearance: none; border-radius: 0; }
[hidden],
[v-cloak] { display: none; }
HTML { background-color: #002344; background-repeat: no-repeat; background-image: linear-gradient(to bottom, #0f5293 0px, #0f5293 150px, #002344 800px); min-height: 100vh; overflow-x: hidden; overflow-y: scroll; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; scrollbar-color: #ffffffa0 #0f5293; }
BODY,
BODY#body { height: auto; margin: 0; padding: 0px 6px 6px 6px; word-wrap: break-word; letter-spacing: normal; line-height: normal; scrollbar-color: auto; }
BODY.el-popup-parent--hidden { /* biome-ignore lint/complexity/noImportantStyles: Element Plus setzt body.style.width inline (use-lockscreen), nur !important kommt dagegen an */
width: 100% !important; }
BODY,
BODY#body,
INPUT,
BUTTON,
TD,
TH,
P { font-family: open_sans; font-size: 14px; font-weight: normal; color: black; }
IMG { max-width: none; }
TABLE { border-collapse: collapse; border-spacing: 0; }
VIDEO { display: block; }
TEXTAREA { resize: none; }
BUTTON.hkle,
INPUT[type="button"].hkle,
INPUT[type="submit"].hkle,
INPUT[type="search"].hkle,
INPUT[type="text"].hkle,
INPUT[type="password"].hkle,
INPUT[type="textarea"].hkle { border: 1px solid #57a3f3; border-radius: 4px; }
/* Der Fokus darf den hellblauen Rahmen nicht schlucken. Die Randfarbe steht deshalb hier noch
einmal ausdruecklich, und Eingabefelder zeigen ihren Ring auch nach Mausklick (:focus, nicht
nur :focus-visible wie oben) — wer tippt, soll sehen, wo. */
INPUT[type="search"].hkle:focus,
INPUT[type="text"].hkle:focus,
INPUT[type="password"].hkle:focus,
INPUT[type="textarea"].hkle:focus { border-color: #57a3f3; outline: 1px solid #57a3f3; outline-offset: 1px; box-shadow: none; }
H1,
H2,
H3,
H4 { line-height: normal; letter-spacing: normal; color: #000000; }
H1 { font-family: open_sans_light; font-size: 36px; font-weight: normal; margin: 6px 0px 6px -2px; }
H2 { font-family: open_sans_light; font-size: 26px; font-weight: normal; margin: 20px 0px 6px -1px; }
H3 { font-family: open_sans_light; font-size: 22px; font-weight: normal; margin: 18px 0px 6px 0px; }
H4 { font-family: open_sans_semibold; font-size: 14px; font-weight: bold; margin: 18px 0px 6px 0px; }
H1 + H2 { margin-top: 10px; }
H2 + H3 { margin-top: 10px; }
TD { vertical-align: top; }
UL { padding-left: 20px; list-style-type: square; }
ARTICLE P,
ARTICLE UL { line-height: 21px; margin: 0px 0px 10px 0px; }
ARTICLE P.small { font-size: 12px; line-height: normal; }
ARTICLE UL UL { margin-bottom: 0px; }
ARTICLE STRONG { font-family: open_sans_semibold; font-weight: normal; }
DIV.pagebox { margin: auto; max-width: 1080px; min-width: 240px; background: #f4f4f4; }
DIV.pagebox > HEADER { height: 180px; overflow: hidden; position: relative; }
DIV.pagebox > HEADER > #header-l { left: 0px; position: absolute; top: 0px; }
DIV.pagebox > HEADER > #header-r { position: absolute; right: 0px; top: 0px; }
DIV.pagebox > HEADER > #logo { position: absolute; display: block; right: 10px; bottom: 10px; width: 330px; height: 110px; }
DIV.pagebox > HEADER > DIV.buttons { position: absolute; right: 0px; top: 6px; display: flex; align-items: center; }
DIV.pagebox > HEADER > DIV.buttons > A.buttons__text { display: block; padding: 3px 8px; background-color: rgba(195, 209, 226, 0.2); color: #ffffff; font-family: open_sans_light; margin-left: 6px; }
DIV.pagebox > HEADER > DIV.buttons > A.buttons__text:hover { color: #ffffff; background-color: #383838; text-decoration: none; }
DIV.pagebox > HEADER > DIV.buttons > A.buttons__icon { display: block; padding: 1px 1px; font-family: open_sans_light; margin-left: 6px; }
DIV.pagebox > HEADER > DIV.buttons > A.buttons__icon:hover { text-decoration: none; }
/* Steht hier und nicht bei den uebrigen UL.gallery-Regeln weiter unten, weil die beiden
IMG-Regeln darunter spezifischer sind: stuende diese dahinter, fiele die Spezifitaet ab
(lint/style/noDescendingSpecificity). Wirkung hat die Reihenfolge nicht — ein IMG ist
entweder ein Knopfsymbol der pagebox oder ein Bild einer Galerie, nie beides. */
UL.gallery LI IMG { display: block; margin: 0; padding: 0; }
DIV.pagebox > HEADER > DIV.buttons > A.buttons__icon > IMG { display: block; width: 23px; height: 23px; filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); }
DIV.pagebox > HEADER > DIV.buttons > A.buttons__icon:hover > IMG { filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.7)); }
DIV.pagebox ARTICLE { padding: 10px 20px 20px 20px; min-height: 450px; z-index: 0; background-color: #f4f4f4; }
/* Links */
A { color: #0047a1; text-decoration: none; }
A:visited { color: #0047a1; }
A:hover { color: #1976d2; text-decoration: underline; }
A:active { color: #008000; }
/* Footer */
DIV.pagebox > FOOTER { background-color: #c0c0c0; line-height: 28px; padding: 0px 20px 0px 20px; text-align: right; font-family: open_sans; color: #484848; clear: both; position: relative; }
@media only screen and (max-width: 641px) { BODY,
BODY#body { padding: 0px 0px 0px 0px; }
DIV.pagebox ARTICLE { padding: 10px 10px 10px 10px; }
NAV { padding: 0px 74px 0px 10px; }
DIV.pagebox > HEADER { /* overflow und position stehen unveraendert im Regelsatz oben; hier nur die Hoehe. */
height: 90px; }
/* Bis zum 2026-08-27 zwei Regelsaetze mit demselben Selektor untereinander, hier zusammen-
gezogen, ohne einen Wert zu aendern. Der zweite war wortgleich mit dem #header-r der
Vollansicht und meinte vermutlich auch dieses Bild — #header-r kommt in dieser Media Query
sonst nicht vor. Wer das entscheidet, trennt right/height wieder ab und setzt sie auf
#header-r. */
DIV.pagebox > HEADER > #header-l { left: 0px; position: absolute; top: 0px; width: 90%; min-height: 90px; right: 0px; height: 100%; }
DIV.pagebox > HEADER > #logo { right: 4px; bottom: 5px; width: 150px; height: 50px; }
DIV.pagebox > HEADER > DIV.buttons { right: 6px; }
}
/* Sidebar */
.sidebar { float: right; width: 220px; margin: 20px 20px 5px 10px; position: relative; z-index: 1; }
.sidebar section { background-color: #e8e8e8; border: 1px solid #b0b0b0; border-radius: 5px; margin-bottom: 12px; padding: 6px 8px 2px 8px; overflow: hidden; }
.sidebar section header { color: #606060; display: block; font-family: open_sans_condensed_light; font-size: 22px; font-weight: normal; margin: 0px 0px 0px 0px; }
.sidebar section P { margin: 4px 0px 4px 0px; }
.sidebar section UL { list-style-type: square; margin: 4px 0px 0px 17px; padding: 0px 0px 0px 0px; }
.sidebar section LI { line-height: normal; margin: 1px 0px 6px 0px; padding: 2px 0px 1px 3px; }
.sidebar section LI:hover { background-color: #ffd65e; }
.sidebar section LI a { color: inherit; display: block; }
.sidebar section LI.selected { background-color: #d0d0d0; }
.sidebar section LI a:hover { text-decoration: none; }
@media only screen and (max-width: 641px) { .sidebar { float: none; width: 80%; margin: 12px auto 6px auto; }
}
/* Video */
DIV.video { width: 100%; padding: 0 0 56.25% 0; position: relative; height: 0; background-color: #404040; margin: 0px 0px 12px 0px; }
DIV.video.video32 { padding: 0 0 66.66%; }
DIV.video VIDEO,
DIV.video VIDEO OBJECT { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
/* Gallery */
UL.gallery { text-align: center; list-style-type: none; margin: 0; padding: 0; display: block; line-height: 0; }
UL.gallery LI { vertical-align: middle; text-align: center; display: inline-block; margin: 3px; padding: 0; }
UL.gallery LI A { display: block; border: 1px solid #c0c0c0; margin: 1px; }
UL.gallery LI A:hover { border: 2px solid #c0c0c0; margin: 0px; }
/* UL.gallery LI IMG steht weiter oben, vor den IMG-Regeln der pagebox — die Begruendung dort. */
/* Lightbox — das Fenster, das lib/js/lightbox.js zu den A.gallery einer Seite baut. Der Dialog
steht unter showModal() von sich aus fixiert und mittig, die Knoepfe darin haengen deshalb
einfach an seinen Raendern. */
DIALOG.lightbox { max-width: 94vw; max-height: 94vh; padding: 0; border: none; background: none; overflow: visible; }
DIALOG.lightbox::backdrop { background-color: rgba(0, 0, 0, 0.75); }
DIALOG.lightbox IMG.lightbox__bild { display: block; max-width: 94vw; max-height: 86vh; margin: 0 auto; border-radius: 4px; }
DIALOG.lightbox P.lightbox__zaehler { margin: 8px 0px 0px 0px; text-align: center; color: #ffffff; }
DIALOG.lightbox BUTTON.lightbox__knopf { position: absolute; width: 40px; height: 40px; padding: 0; border: none; background: none; cursor: pointer; opacity: 0.8; }
DIALOG.lightbox BUTTON.lightbox__knopf:hover { opacity: 1; }
DIALOG.lightbox BUTTON.lightbox__knopf SVG { display: block; width: 100%; height: 100%; fill: none; stroke: #ffffff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.8)); }
/* Senkrecht mittig zum Bild, nicht zum Dialog: die 30px unten sind der Zaehler, der sonst die
Mitte nach unten zoege. Das haelt auch bei Bildern, die nicht die volle Hoehe ausnutzen. */
DIALOG.lightbox BUTTON.lightbox__knopf--zurueck,
DIALOG.lightbox BUTTON.lightbox__knopf--vor { top: 0; bottom: 30px; margin: auto 0; }
DIALOG.lightbox BUTTON.lightbox__knopf--zurueck { left: 4px; }
DIALOG.lightbox BUTTON.lightbox__knopf--vor { right: 4px; }
DIALOG.lightbox BUTTON.lightbox__knopf--zu { top: 4px; right: 4px; }
/* Menüzeile */
NAV { background-color: #ffd65e; padding: 0px 74px 0px 12px; position: relative; display: flex; flex-wrap: wrap; -webkit-user-select: none; user-select: none; }
NAV > DIV { color: #000000; cursor: pointer; font-family: open_sans_light; font-size: 20px; padding: 0px 5px 3px 5px; position: relative; height: 28px; }
NAV > DIV:hover,
NAV > DIV.selected { color: white; background-color: #404040; }
/* Der Menütitel ist seit 2026-09-26 ein Knopf (per Tastatur erreichbar, aria-expanded), sieht
aber aus wie vorher der blosse Text im DIV: alles, was ein Knopf sonst mitbringt, zurueck auf
den umgebenden Menuepunkt. */
NAV > DIV > BUTTON.menutitle { background: none; border: 0; margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; cursor: pointer; }
/* "Zum Inhalt": erstes Element der Seite, nur mit Fokus sichtbar. */
A.skiplink { position: absolute; left: 8px; top: -100px; z-index: 20000; padding: 6px 12px; background-color: #404040; color: white; }
A.skiplink:focus { top: 8px; }
/* Das Sprungziel nimmt den Fokus nur, damit der naechste Tab im Inhalt weitergeht; ein Ring um
das leere Element hiesse nichts. */
#inhalt:focus { outline: none; box-shadow: none; }
/* Menü */
NAV > DIV .menu { background-color: #404040; color: white; cursor: default; font-family: open_sans; font-size: 14px; height: 0px; left: 0px; top: 28px; overflow: hidden; position: absolute; }
NAV > DIV .menu > DIV { height: auto; min-width: 100px; padding: 10px 10px 10px 10px; }
NAV > DIV .menu A { display: block; text-decoration: none; white-space: nowrap; padding: 1px 4px 1px 2px; }
NAV > DIV .menu A,
NAV > DIV .menu A:visited { color: white; }
NAV > DIV .menu UL { list-style-type: none; margin: 0; padding: 0; }
NAV > DIV .menu UL LI { margin: 0; padding: 0; line-height: normal; }
NAV > DIV .menu UL LI A:hover { color: #ffd65e; background-color: #303030; text-decoration: none; }
/* Menu big */
NAV > DIV .menu UL.big LI A { line-height: 29px; height: 28px; margin: 0; }
NAV > DIV .menu UL.big LI A:before { height: 28px; width: 28px; content: ""; display: inline-block; background-repeat: no-repeat; background-image: url("images/menuicons-v3-hd.png"); background-size: 56px 1008px; margin-right: 5px; background-position: 0px -1px; vertical-align: top; }
NAV > DIV .menu UL.big LI A:hover:before { background-position: -28px -1px; }
/* Menu small */
NAV > DIV .menu UL.small LI { text-indent: -17px; margin-left: 17px; }
NAV > DIV .menu UL.small LI A { margin: 0; vertical-align: top; }
NAV > DIV .menu UL.small LI A:before { height: 12px; width: 12px; content: ""; display: inline-block; background-repeat: no-repeat; background-image: url("images/menuicons-v3-hd.png"); background-size: 56px 1008px; margin-right: 5px; background-position: -8px -8px; }
NAV > DIV .menu UL.small LI A:hover:before { background-position: -36px -8px; }
/* Der Einloggen-/Ausloggen-Punkt.
Stand bis dahin oben zwischen dem Menue und "Menu big". Hier unten, weil seine beiden
DIV#menuitemlogin-Regeln spezifischer sind als die UL.big- und UL.small-Regeln darueber und
die Spezifitaet dort deshalb abfiel (lint/style/noDescendingSpecificity). Am Ergebnis aendert
die Reihenfolge nichts: der Punkt traegt kein UL, die Regeln dazwischen treffen ihn nicht, und
gegen die uebrigen Menueregeln gewinnt er ohnehin ueber die ID.
Alles darin sind Verweise in die App konto/ (anmelden, abmelden, Mein Konto). Ausloggen war bis
2026-10-12 ein Formular mit Knopf; das Abmelden fragt jetzt die Seite /konto/abmelden nach. */
NAV > #menuitemlogin { font-size: 14px; height: auto; padding: 0; position: absolute; right: 10px; /* Angemeldet stehen "Mein Konto" und "Ausloggen" nebeneinander. */
display: flex; align-items: baseline; gap: 8px; }
/* Die 74px rechts in NAV (auch in der Handy-Regel von styles.css) halten den Platz fuer einen
Verweis frei. Angemeldet sind es zwei, rund 160px; ohne mehr Platz lag "Mein Konto" auf
schmalen Schirmen ueber dem zweiten Menuepunkt. Die ID im :has() schlaegt beide NAV-Regeln. */
NAV:has(> #menuitemlogin > A + A) { padding-right: 180px; }
/* Auf dem Handy kostete der Rand jede Menuezeile 180px (vier statt zwei Zeilen). Dort bekommen
die beiden Verweise stattdessen eine eigene Zeile oben rechts. */
@media only screen and (max-width: 641px) { NAV:has(> #menuitemlogin > A + A) { padding-top: 28px; padding-right: 10px; }
NAV:has(> #menuitemlogin > A + A) > #menuitemlogin { top: 0; }
}
NAV > #menuitemlogin A { display: block; text-decoration: none; white-space: nowrap; padding: 4px 4px 5px 4px; }
NAV > DIV#menuitemlogin A,
NAV > DIV#menuitemlogin A:visited { color: black; }
/* Die dunkle Flaeche sitzt am einzelnen Verweis, nicht am ganzen Punkt wie bei den uebrigen
Menuepunkten (NAV > DIV:hover, .selected): angemeldet stehen "Mein Konto" und "Ausloggen" darin,
und eine Flaeche fuer beide liesse den nicht beruehrten schwarz auf dunkel stehen. Der Punkt hat
kein eigenes Padding, die Flaeche des einzelnen Verweises ist also dieselbe wie vorher. */
NAV > DIV#menuitemlogin:hover,
NAV > DIV#menuitemlogin.selected { background-color: transparent; }
NAV > DIV#menuitemlogin A:hover { background-color: #404040; color: white; text-decoration: none; }
/* Menü Icons */
NAV > DIV .menu UL.big LI.icon003 A:before { background-position: 0px -84px; }
NAV > DIV .menu UL.big LI.icon003 A:hover:before { background-position: -28px -84px; }
NAV > DIV .menu UL.big LI.icon004 A:before { background-position: 0px -112px; }
NAV > DIV .menu UL.big LI.icon004 A:hover:before { background-position: -28px -112px; }
NAV > DIV .menu UL.big LI.icon005 A:before { background-position: 0px -140px; }
NAV > DIV .menu UL.big LI.icon005 A:hover:before { background-position: -28px -140px; }
NAV > DIV .menu UL.big LI.icon006 A:before { background-position: 0px -168px; }
NAV > DIV .menu UL.big LI.icon006 A:hover:before { background-position: -28px -168px; }
NAV > DIV .menu UL.big LI.icon010 A:before { background-position: 0px -280px; }
NAV > DIV .menu UL.big LI.icon010 A:hover:before { background-position: -28px -280px; }
NAV > DIV .menu UL.big LI.icon012 A:before { background-position: 0px -336px; }
NAV > DIV .menu UL.big LI.icon012 A:hover:before { background-position: -28px -336px; }
NAV > DIV .menu UL.big LI.icon013 A:before { background-position: 0px -364px; }
NAV > DIV .menu UL.big LI.icon013 A:hover:before { background-position: -28px -364px; }
NAV > DIV .menu UL.big LI.icon014 A:before { background-position: 0px -392px; }
NAV > DIV .menu UL.big LI.icon014 A:hover:before { background-position: -28px -392px; }
NAV > DIV .menu UL.big LI.icon015 A:before { background-position: 0px -420px; }
NAV > DIV .menu UL.big LI.icon015 A:hover:before { background-position: -28px -420px; }
NAV > DIV .menu UL.big LI.icon020 A:before { background-position: 0px -560px; }
NAV > DIV .menu UL.big LI.icon020 A:hover:before { background-position: -28px -560px; }
NAV > DIV .menu UL.big LI.icon021 A:before { background-position: 0px -588px; }
NAV > DIV .menu UL.big LI.icon021 A:hover:before { background-position: -28px -588px; }
NAV > DIV .menu UL.big LI.icon023 A:before { background-position: 0px -644px; }
NAV > DIV .menu UL.big LI.icon023 A:hover:before { background-position: -28px -644px; }
NAV > DIV .menu UL.big LI.icon024 A:before { background-position: 0px -672px; }
NAV > DIV .menu UL.big LI.icon024 A:hover:before { background-position: -28px -672px; }
NAV > DIV .menu UL.big LI.icon025 A:before { background-position: 0px -700px; }
NAV > DIV .menu UL.big LI.icon025 A:hover:before { background-position: -28px -700px; }
NAV > DIV .menu UL.big LI.icon033 A:before { background-position: 0px -924px; }
NAV > DIV .menu UL.big LI.icon033 A:hover:before { background-position: -28px -924px; }
NAV > DIV .menu UL.big LI.icon034 A:before { background-position: 0px -952px; }
NAV > DIV .menu UL.big LI.icon034 A:hover:before { background-position: -28px -952px; }
NAV > DIV .menu UL.big LI.icon035 A:before { background-position: 0px -980px; }
NAV > DIV .menu UL.big LI.icon035 A:hover:before { background-position: -28px -980px; }
/* Menü Table */
NAV > DIV #menu2 > DIV { display: flex; flex-direction: row; }
/* Stand bis dahin oben bei NAV > DIV .menu > DIV, dessen padding es fuer menu2 uebersteuert.
Hier unten, weil es sonst vor der Regel darueber laege und die Spezifitaet damit abfiele
(lint/style/noDescendingSpecificity). Am Ergebnis aendert die Reihenfolge nichts: die beiden
setzen padding-top und display, und gegen das padding von .menu > DIV gewinnt es weiterhin. */
NAV > DIV .menu#menu2 > DIV { padding-top: 3px; }
@media only screen and (max-width: 641px) { NAV > DIV #menu2 > DIV { flex-direction: column; }
}
NAV > DIV .menu STRONG { color: #b0b0b0; display: block; font-family: open_sans_condensed_light; font-size: 20px; font-weight: normal; margin: 5px 0px 2px 0px; }
/* Copyright 2026 Ulf Haueisen, Heinrich-Kleyer-Schule, Frankfurt am Main. All rights reserved. */
/*
* Die Element-Plus-Farben aller SPAs, an einer Stelle.
*
* Bewusst BODY und nicht :root — lib/vite.php haengt das CSS einer SPA *hinter* dieses Buendel
* (siehe activate(), $page->stylesheet[]). Ein :root-Block hier verloere deshalb gegen das :root
* von Element Plus selbst. Auf BODY gesetzt gewinnen die Werte durch Vererbung, unabhaengig von der
* Reihenfolge der Stylesheets. Also nicht zu :root "vereinfachen". Element Plus haengt Dialoge,
* Popover und Meldungen per Teleport an den BODY, die erben also mit.
*
* Abgeleitet wird mit color-mix() aus einer einzigen Ausgangsfarbe je Rolle: wer das Blau
* austauscht, aendert eine Zeile statt elf.
*/
BODY { /* Das Blau des Seitenkopfs (vgl. lib/styles.css, linear-gradient auf #0f5293). */
--el-color-primary: hsl(210, 82%, 35%); --el-color-primary-light-1: color-mix(in hsl, var(--el-color-primary), white 10%); --el-color-primary-light-2: color-mix(in hsl, var(--el-color-primary), white 20%); --el-color-primary-light-3: color-mix(in hsl, var(--el-color-primary), white 30%); --el-color-primary-light-4: color-mix(in hsl, var(--el-color-primary), white 40%); --el-color-primary-light-5: color-mix(in hsl, var(--el-color-primary), white 50%); --el-color-primary-light-6: color-mix(in hsl, var(--el-color-primary), white 60%); --el-color-primary-light-7: color-mix(in hsl, var(--el-color-primary), white 70%); --el-color-primary-light-8: color-mix(in hsl, var(--el-color-primary), white 80%); --el-color-primary-light-9: color-mix(in hsl, var(--el-color-primary), white 90%); --el-color-primary-dark-2: color-mix(in hsl, var(--el-color-primary), black 20%); --el-color-info: hsl(210, 41%, 70%); --el-color-info-light-1: color-mix(in hsl, var(--el-color-info), white 10%); --el-color-info-light-2: color-mix(in hsl, var(--el-color-info), white 20%); --el-color-info-light-3: color-mix(in hsl, var(--el-color-info), white 30%); --el-color-info-light-4: color-mix(in hsl, var(--el-color-info), white 40%); --el-color-info-light-5: color-mix(in hsl, var(--el-color-info), white 50%); --el-color-info-light-6: color-mix(in hsl, var(--el-color-info), white 60%); --el-color-info-light-7: color-mix(in hsl, var(--el-color-info), white 70%); --el-color-info-light-8: color-mix(in hsl, var(--el-color-info), white 80%); --el-color-info-light-9: color-mix(in hsl, var(--el-color-info), white 90%); --el-color-info-dark-2: color-mix(in hsl, var(--el-color-info), black 20%); /*
* Schrift in einer Rollenfarbe auf hellem Grund, abgedunkelt auf mindestens 4,5:1: die Tags
* unten und App-Eigenes wie der Staerkehinweis in konto/. Die reinen Rollenfarben halten auf
* Weiss keine 4,5:1.
*/
--hks-text-primary: color-mix(in hsl, var(--el-color-primary), black 35%); --hks-text-success: color-mix(in hsl, var(--el-color-success), black 35%); --hks-text-warning: color-mix(in hsl, var(--el-color-warning), black 35%); --hks-text-danger: color-mix(in hsl, var(--el-color-danger), black 35%); --hks-text-info: color-mix(in hsl, var(--el-color-info), black 35%); }
/*
* Tags in der Vorgabe (effect light): Element Plus setzt die Schrift in der Rollenfarbe auf
* ihre light-9-Flaeche und den Rand in light-8 — ein Orange oder Gruen auf fast Weiss, Kontrast
* um 2:1, und der Rand ist kaum da. Hier wird die Schrift abgedunkelt (--hks-text-*) und der
* Rand auf light-3 gezogen. Mit BODY davor, weil die Variablen am Tag selbst stehen
* (.el-tag.el-tag--warning) und das Komponenten-CSS der App hinter diesem Buendel haengt: nur
* die hoehere Spezifitaet gewinnt. dark und plain bleiben, wie sie sind.
*/
BODY .el-tag--light.el-tag--primary { --el-tag-text-color: var(--hks-text-primary); --el-tag-border-color: var(--el-color-primary-light-3); }
BODY .el-tag--light.el-tag--success { --el-tag-text-color: var(--hks-text-success); --el-tag-border-color: var(--el-color-success-light-3); }
BODY .el-tag--light.el-tag--warning { --el-tag-text-color: var(--hks-text-warning); --el-tag-border-color: var(--el-color-warning-light-3); }
BODY .el-tag--light.el-tag--danger,
BODY .el-tag--light.el-tag--error { --el-tag-text-color: var(--hks-text-danger); --el-tag-border-color: var(--el-color-danger-light-3); }
BODY .el-tag--light.el-tag--info { --el-tag-text-color: var(--hks-text-info); --el-tag-border-color: var(--el-color-info-light-3); }
/* Ein Segmented ist ein Schalter: ein Klick waehlt, ein Doppelklick soll keinen Text markieren. */
.el-segmented { user-select: none; }
/*
* Bei diesen Feldern zeichnet nicht das <input> den Rahmen, sondern der Wrapper darum, als
* inset-Schatten (.el-input__wrapper, .el-select__wrapper, .el-range-editor). Der weisse
* Fokusring aus :focus-visible in lib/styles.css lag am inneren Feld und uebermalte ihn: Rahmen
* weg, sobald man hineinklickte (Chrome wertet ein Textfeld auch nach Mausklick als
* :focus-visible). Den Fokus zeigt Element Plus selbst, mit der Randfarbe des Wrappers.
* .el-textarea__inner braucht das nicht, dort setzt Element Plus den Schatten bei :focus selbst.
*/
.el-input__inner:focus-visible,
.el-select__input:focus-visible,
.el-range-input:focus-visible { box-shadow: none; }
/* font-display: swap in jedem Block: ohne die Angabe blockiert der Browser den Text rund drei
Sekunden lang (Vorgabewert auto). Mit swap steht er sofort in der Ersatzschrift und wechselt,
sobald die Datei da ist. */
/* open_sans */
@font-face { font-family: "open_sans"; src: url("/fonts/opensans/regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "open_sans"; src: url("/fonts/opensans/bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "open_sans"; src: url("/fonts/opensans/italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "open_sans"; src: url("/fonts/opensans/bolditalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; }
/* open_sans_light */
@font-face { font-family: "open_sans_light"; src: url("/fonts/opensans/light.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "open_sans_light"; src: url("/fonts/opensans/lightitalic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
/* open_sans_semibold */
@font-face { font-family: "open_sans_semibold"; src: url("/fonts/opensans/semibold.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "open_sans_semibold"; src: url("/fonts/opensans/semibolditalic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
/* open_sans_condensed */
@font-face { font-family: "open_sans_condensed"; src: url("/fonts/opensans-condensed/regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "open_sans_condensed"; src: url("/fonts/opensans-condensed/bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "open_sans_condensed"; src: url("/fonts/opensans-condensed/italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "open_sans_condensed"; src: url("/fonts/opensans-condensed/bolditalic.woff2") format("woff2"); font-weight: bold; font-style: italic; font-display: swap; }
/* open_sans_condensed_light */
@font-face { font-family: "open_sans_condensed_light"; src: url("/fonts/opensans-condensed/light.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "open_sans_condensed_light"; src: url("/fonts/opensans-condensed/lightitalic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
/* iosevka */
@font-face { font-family: "iosevka"; src: url("/fonts/iosevka/regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
/* robotomono */
@font-face { font-family: "robotomono"; src: url("/fonts/robotomono/robotomono-thin.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "robotomono"; src: url("/fonts/robotomono/robotomono-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "robotomono"; src: url("/fonts/robotomono/robotomono-regular.woff2") format("woff2"); font-weight: normal; /* 400 */
font-style: normal; font-display: swap; }
@font-face { font-family: "robotomono"; src: url("/fonts/robotomono/robotomono-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "robotomono"; src: url("/fonts/robotomono/robotomono-bold.woff2") format("woff2"); font-weight: bold; /* 700 */
font-style: normal; font-display: swap; }
/* eof */