/* ========================================================================== UKS-Material - Gestaltungsgrundlage der öffentlichen Website Leitprinzip (Konzept §2.1): ruhig, klar, reizarm. Wenig Animation, dafür eindeutige Zustände. Farben kommen aus der Datenbank, niemals von hier - dieses Blatt liefert nur Flächen, Abstände, Typografie und Zustände. ========================================================================== */ :root { /* Grundflächen nach der Designvorlage */ --uks-bg: #c8c2b7; --uks-surface: #f3f0ea; --uks-surface-strong: #ffffff; --uks-header-left: #e8791e; --uks-header-right: #d2551e; --uks-bar: #5b5247; --uks-logo: #d42b1e; /* Schrift */ --uks-text: #2b2723; --uks-text-muted: #5f584f; --uks-text-invers: #ffffff; /* Linien und Schatten */ --uks-line: #a9a294; --uks-shadow: 0 2px 4px rgba(0, 0, 0, .28); --uks-shadow-hoch: 0 8px 18px rgba(0, 0, 0, .34); /* Maße */ --uks-radius: 10px; --uks-radius-klein: 6px; --uks-gap: 1rem; --uks-breite: 1240px; --uks-fokus: #12395f; --uks-schrift: "Segoe UI", "Trebuchet MS", Verdana, system-ui, sans-serif; } /* Kontrastmodus (§17.10) - wird über data-kontrast am geschaltet. */ html[data-kontrast="hoch"] { --uks-bg: #ffffff; --uks-surface: #ffffff; --uks-text: #000000; --uks-text-muted: #1a1a1a; --uks-line: #000000; --uks-shadow: none; --uks-shadow-hoch: none; } html[data-kontrast="hoch"] .kachel { background: #ffffff !important; color: #000000 !important; border: 3px solid #000000 !important; } html[data-kontrast="hoch"] .kachel__stufe { border-color: #000000 !important; background: #ffffff !important; color: #000000 !important; } /* -------------------------------------------------------------------------- Grundlagen -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; } body { margin: 0; background: var(--uks-bg); color: var(--uks-text); font-family: var(--uks-schrift); font-size: 1rem; line-height: 1.55; -webkit-text-size-adjust: 100%; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; font-weight: 700; } h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); } h2 { font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } a { color: #0b4a7d; text-decoration: underline; text-underline-offset: 2px; } a:hover { color: #073352; } :focus-visible { outline: 3px solid var(--uks-fokus); outline-offset: 2px; border-radius: 3px; } img { max-width: 100%; height: auto; } .uks-verstecken { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .uks-sprunglink { position: absolute; left: -9999px; top: 0; background: var(--uks-surface-strong); color: var(--uks-text); padding: .6rem 1rem; z-index: 100; font-weight: 700; } .uks-sprunglink:focus { left: .5rem; top: .5rem; } .uks-inhalt { width: min(100% - 2rem, var(--uks-breite)); margin-inline: auto; } /* -------------------------------------------------------------------------- Kopfbereich nach der Designvorlage -------------------------------------------------------------------------- */ .uks-begruessung { text-align: center; font-size: clamp(1.05rem, .95rem + .6vw, 1.45rem); padding: .9rem 1rem .7rem; margin: 0; color: var(--uks-text); } .uks-kopfleiste { display: grid; grid-template-columns: 1fr 1fr; color: var(--uks-text-invers); font-weight: 700; text-align: center; box-shadow: var(--uks-shadow); } .uks-kopfleiste__teil { padding: .75rem 1rem; font-size: clamp(1.05rem, .85rem + .85vw, 1.65rem); letter-spacing: .01em; } .uks-kopfleiste__teil--links { background: var(--uks-header-left); } .uks-kopfleiste__teil--rechts { background: var(--uks-header-right); } .uks-hinweisbalken { background: var(--uks-bar); color: var(--uks-text-invers); font-weight: 700; text-align: center; padding: .6rem 1rem; font-size: clamp(.9rem, .82rem + .35vw, 1.1rem); } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ .uks-nav { background: var(--uks-surface); border-bottom: 1px solid var(--uks-line); } .uks-nav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; width: min(100% - 2rem, var(--uks-breite)); margin-inline: auto; padding: .4rem 0; } .uks-nav__link { display: inline-block; padding: .55rem .85rem; color: var(--uks-text); text-decoration: none; font-weight: 600; border-radius: var(--uks-radius-klein); } .uks-nav__link:hover { background: rgba(0, 0, 0, .07); color: var(--uks-text); } .uks-nav__link[aria-current="page"] { background: var(--uks-header-left); color: var(--uks-text-invers); } .uks-nav__rechts { margin-left: auto; display: flex; align-items: center; gap: .4rem; } /* -------------------------------------------------------------------------- Inhaltsflächen -------------------------------------------------------------------------- */ main { display: block; padding: 1.5rem 0 2.5rem; } .uks-karte { background: var(--uks-surface); border: 1px solid var(--uks-line); border-radius: var(--uks-radius); padding: 1.25rem; box-shadow: var(--uks-shadow); } .uks-karte + .uks-karte { margin-top: 1.25rem; } .uks-abschnitt { margin-bottom: 2rem; } .uks-hinweis { background: #fdf6e3; border-left: 6px solid var(--uks-header-left); border-radius: var(--uks-radius-klein); padding: .9rem 1rem; margin-bottom: 1rem; } /* Formatierter Text aus der Verwaltung. Nur wenige Auszeichnungen, die sich ruhig in die Seite einfügen - das Erscheinungsbild kommt aus der Website. */ .uks-fliesstext > :first-child { margin-top: 0; } .uks-fliesstext > :last-child { margin-bottom: 0; } .uks-fliesstext p { margin: 0 0 .8rem; } .uks-fliesstext h2 { font-size: 1.2rem; margin: 1.2rem 0 .4rem; } .uks-fliesstext h3 { font-size: 1.05rem; margin: 1rem 0 .35rem; } .uks-fliesstext ul, .uks-fliesstext ol { margin: 0 0 .8rem; padding-left: 1.4rem; } /* Textbild, über einen Marker im Fließtext platziert (siehe ContentPageBody). */ .uks-fliesstext figure.uks-textbild { margin: 0 0 .8rem; } .uks-fliesstext img { max-width: 100%; height: auto; border-radius: var(--uks-radius-klein); display: block; } .uks-fliesstext li { margin-bottom: .25rem; } .uks-fliesstext hr { border: none; border-top: 1px solid var(--uks-line); margin: 1.2rem 0; } /* Hauptbild einer Textseite (Pages/Seite/Index) - Größe optional per Inline-style. */ .uks-hauptbild { max-width: 100%; height: auto; border-radius: var(--uks-radius-klein); display: block; margin-bottom: 1.25rem; } .uks-hinweis--datenschutz { background: #eef4fa; border-left-color: #2f72b8; } .uks-meldung { padding: .85rem 1rem; border-radius: var(--uks-radius-klein); margin-bottom: 1rem; font-weight: 600; } .uks-meldung--erfolg { background: #e3f1e3; border-left: 6px solid #2f7d32; } .uks-meldung--fehler { background: #fbe6e4; border-left: 6px solid #b3261e; } /* -------------------------------------------------------------------------- Schaltflächen -------------------------------------------------------------------------- */ .uks-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem 1.1rem; border: 2px solid transparent; border-radius: var(--uks-radius-klein); background: var(--uks-header-left); color: var(--uks-text-invers); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: var(--uks-shadow); transition: transform .12s ease, filter .12s ease; } .uks-button:hover { filter: brightness(.94); color: var(--uks-text-invers); transform: translateY(-1px); } .uks-button:active { transform: translateY(0); } .uks-button--zweit { background: var(--uks-surface-strong); color: var(--uks-text); border-color: var(--uks-line); } .uks-button--zweit:hover { color: var(--uks-text); background: #ebe7e0; } .uks-button--dunkel { background: var(--uks-bar); } .uks-button--klein { padding: .35rem .65rem; font-size: .88rem; box-shadow: none; } .uks-buttonzeile { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; } /* -------------------------------------------------------------------------- Downloads eines Produkts (§9.3) Ein Material besteht oft aus mehreren Teilen - Heft, Kopiervorlagen, Lösungen. Jeder Teil bekommt eine eigene Zeile mit eigenem Knopf; Größe und Beschreibung stehen daneben, damit vor dem Klick klar ist, was kommt. -------------------------------------------------------------------------- */ .downloads { margin: 1rem 0; } .downloads__titel { font-size: 1rem; margin: 0 0 .5rem; } .downloads__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; } .downloads__eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding-bottom: .7rem; border-bottom: 1px solid var(--uks-line); } .downloads__eintrag:last-child { padding-bottom: 0; border-bottom: none; } .downloads__meta { font-size: .85rem; color: var(--uks-text-muted); } .downloads__text { font-size: .9rem; } /* -------------------------------------------------------------------------- Produktmatrix - Desktop (Konzept §4.2) Reihe = Zeile, Stufe = Spalte. Leere Zellen sind ausdrücklich erlaubt. -------------------------------------------------------------------------- */ .matrix { display: grid; gap: .9rem; align-items: stretch; } .matrix__kopfzelle { font-weight: 700; display: flex; align-items: center; padding: .3rem .2rem; color: var(--uks-text); } .matrix__kopfzelle--stufe { justify-content: center; text-align: center; } .matrix__reihenname { font-weight: 700; align-self: center; padding-right: .6rem; hyphens: auto; } .matrix__leer { border: 2px dashed rgba(0, 0, 0, .16); border-radius: var(--uks-radius); min-height: 78px; } /* Die Kachel selbst. Farben kommen als CSS-Variablen aus der Datenbank. */ .kachel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 78px; padding: .7rem .6rem; border: 3px solid var(--kachel-border, #fff); border-radius: var(--uks-radius); background: var(--kachel-bg, #8c8c8c); color: var(--kachel-fg, #fff); font-weight: 700; text-align: center; text-decoration: none; line-height: 1.2; box-shadow: var(--uks-shadow); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .kachel:hover, .kachel:focus-visible { transform: translateY(-3px); box-shadow: var(--uks-shadow-hoch); border-color: #fff; color: var(--kachel-fg, #fff); } .kachel__name { display: block; hyphens: auto; } /* Die Stufenzahl trägt die Bedeutung zusätzlich zur Farbe (§6.3). */ .kachel__stufe { display: block; font-size: 1.15em; font-weight: 700; } .kachel__status { font-size: .72rem; font-weight: 600; text-transform: none; opacity: .95; border: 1px solid currentColor; border-radius: 999px; padding: 0 .45rem; margin-top: .15rem; } .kachel__marker { position: absolute; top: .3rem; right: .4rem; font-size: .8rem; } .kachel--deaktiviert { opacity: .55; cursor: not-allowed; } /* Hover-Vorschaukarte (§7.3). Sichtbarkeit steuert das Skript, damit die Karte an Bildschirmrändern nach innen aufklappen kann (§7.4). */ .vorschau { position: absolute; z-index: 40; width: min(320px, 88vw); background: var(--uks-surface-strong); color: var(--uks-text); border: 1px solid var(--uks-line); border-radius: var(--uks-radius); box-shadow: var(--uks-shadow-hoch); padding: .85rem; font-weight: 400; text-align: left; display: none; } .vorschau[data-offen="true"] { display: block; } .vorschau__titel { font-weight: 700; margin-bottom: .2rem; } .vorschau__herkunft { font-size: .85rem; color: var(--uks-text-muted); margin-bottom: .5rem; } .vorschau__bild { border-radius: var(--uks-radius-klein); margin-bottom: .5rem; display: block; } .vorschau__text { font-size: .92rem; margin-bottom: .6rem; } .vorschau__aktionen { display: flex; flex-wrap: wrap; gap: .4rem; } /* -------------------------------------------------------------------------- Statuskennzeichnung (§5.3) - nie nur farbig, immer mit Text. -------------------------------------------------------------------------- */ .status { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; border: 1px solid; white-space: nowrap; } .status--verfuegbar { background: #e3f1e3; border-color: #2f7d32; color: #1e5b21; } .status--anfrage { background: #fdf1dd; border-color: #b8721a; color: #7d4b09; } .status--geplant { background: #eceff3; border-color: #5d6b7a; color: #3d4855; } .status--deaktiviert { background: #eeeeee; border-color: #8a8a8a; color: #545454; } .status--eduki { background: #e7effb; border-color: #2f5fb8; color: #1e3f7d; } .status--paket { background: #f2e9f7; border-color: #7e3fa0; color: #5a2a75; } /* -------------------------------------------------------------------------- Mobile Gruppen (Konzept §8) - eigenständige Darstellung, kein Umbruch der Matrix. -------------------------------------------------------------------------- */ .gruppen { display: none; } .sprungmenue { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; } .sprungmenue__link { padding: .4rem .7rem; border-radius: 999px; background: var(--uks-surface); border: 1px solid var(--uks-line); text-decoration: none; color: var(--uks-text); font-weight: 600; font-size: .9rem; } .gruppe { background: var(--uks-surface); border: 1px solid var(--uks-line); border-radius: var(--uks-radius); margin-bottom: .9rem; overflow: hidden; scroll-margin-top: 1rem; } .gruppe__kopf { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; background: var(--gruppe-bg, var(--uks-bar)); color: var(--gruppe-fg, #fff); border: 0; font: inherit; font-weight: 700; font-size: 1.05rem; text-align: left; cursor: pointer; } .gruppe__pfeil { transition: transform .15s ease; } .gruppe__kopf[aria-expanded="true"] .gruppe__pfeil { transform: rotate(180deg); } .gruppe__inhalt { padding: .6rem; display: grid; gap: .5rem; } .gruppe__inhalt[hidden] { display: none; } .umfrage-schalter { display: flex; align-items: center; gap: .5rem; width: 100%; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); color: inherit; text-align: left; cursor: pointer; } .umfrage-schalter[aria-expanded="true"] .gruppe__pfeil { transform: rotate(180deg); } .umfrage-inhalt { display: grid; gap: 1rem; margin-top: 1rem; } .umfrage-inhalt[hidden] { display: none; } .gruppeneintrag { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: var(--uks-radius-klein); background: var(--kachel-bg, #8c8c8c); color: var(--kachel-fg, #fff); border: 2px solid var(--kachel-border, #fff); } .gruppeneintrag__link { flex: 1; color: inherit; text-decoration: none; font-weight: 700; } .gruppeneintrag__status { font-size: .78rem; font-weight: 600; } /* -------------------------------------------------------------------------- Formulare -------------------------------------------------------------------------- */ .feld { margin-bottom: 1rem; } .feld > label { display: block; font-weight: 700; margin-bottom: .3rem; } .feld__hinweis { display: block; font-size: .85rem; color: var(--uks-text-muted); margin-top: .2rem; } input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], input[type="date"], select, textarea { width: 100%; padding: .55rem .65rem; border: 1px solid var(--uks-line); border-radius: var(--uks-radius-klein); background: var(--uks-surface-strong); color: var(--uks-text); font: inherit; } textarea { min-height: 8rem; resize: vertical; } .feld--auswahl { display: flex; align-items: flex-start; gap: .5rem; } .feld--auswahl label { font-weight: 400; } .validierung { color: #b3261e; font-size: .88rem; font-weight: 600; display: block; margin-top: .2rem; } /* Honigtopf des Spamschutzes: aus dem Sichtfeld geschoben statt ausgeblendet. Bewusst kein display:none und kein hidden - beides erkennen automatische Ausfüller. Für Menschen ist das Feld unerreichbar (tabindex="-1" im Formular), für Vorlesewerkzeuge über aria-hidden ausgenommen. */ .uks-honigtopf { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skala { display: flex; flex-wrap: wrap; gap: .5rem; } .skala__option { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .45rem .7rem; border: 1px solid var(--uks-line); border-radius: var(--uks-radius-klein); background: var(--uks-surface-strong); cursor: pointer; font-weight: 600; } .skala__option:has(input:checked) { background: var(--uks-header-left); color: #fff; border-color: var(--uks-header-left); } /* -------------------------------------------------------------------------- Listen, Tabellen, Karten -------------------------------------------------------------------------- */ .uks-tabelle { width: 100%; border-collapse: collapse; background: var(--uks-surface-strong); } .uks-tabelle th, .uks-tabelle td { border: 1px solid var(--uks-line); padding: .5rem .6rem; text-align: left; vertical-align: top; } .uks-tabelle th { background: #ece8e1; } .uks-tabellen-rahmen { overflow-x: auto; } .kartenraster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .erfahrung { background: var(--uks-surface-strong); border: 1px solid var(--uks-line); border-left: 6px solid var(--uks-header-left); border-radius: var(--uks-radius-klein); padding: .85rem 1rem; } .erfahrung__meta { font-size: .85rem; color: var(--uks-text-muted); margin-top: .4rem; } .brotkrumen { font-size: .9rem; margin-bottom: .8rem; color: var(--uks-text-muted); } .brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; } .brotkrumen li::after { content: " ›"; } .brotkrumen li:last-child::after { content: ""; } /* -------------------------------------------------------------------------- Fußbereich -------------------------------------------------------------------------- */ .uks-fuss { background: var(--uks-bg); border-top: 2px solid var(--uks-line); padding: 1.5rem 0 2.5rem; font-size: .95rem; } .uks-fuss__raster { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .uks-fuss a { color: #0b4a7d; } .uks-logo { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: var(--uks-logo); color: #fff; font-weight: 700; padding: .5rem .8rem; border-radius: var(--uks-radius-klein); line-height: 1.1; text-decoration: none; } /* -------------------------------------------------------------------------- Umschaltpunkt Desktop / Smartphone (§8) Es ist bewusst ein harter Wechsel zwischen zwei Darstellungen. -------------------------------------------------------------------------- */ @media (max-width: 860px) { .matrix-rahmen { display: none; } .gruppen { display: block; } .uks-kopfleiste { grid-template-columns: 1fr; } .uks-nav__inner { justify-content: center; } .uks-nav__rechts { margin-left: 0; } /* Eine im Marker angegebene Pixelgröße (siehe ContentPageBody) sowie eine feste Größe des Hauptbilds (Pages/Seite/Index) gelten nur am Desktop. Auf dem Smartphone bleibt es bei der gewohnten vollen Breite - eine dort feste Pixelgröße würde auf schmalen Bildschirmen abschneiden oder winzig wirken. !important überstimmt bewusst das Inline-style. */ .uks-fliesstext img, .uks-hauptbild { width: auto !important; height: auto !important; max-width: 100%; } } @media (min-width: 861px) { .gruppen { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Druck - u. a. für die druckbare Kursübersicht (§17.11) -------------------------------------------------------------------------- */ @media print { .uks-nav, .uks-sprunglink, .uks-buttonzeile, .vorschau, .sprungmenue { display: none !important; } body { background: #fff; } .kachel { box-shadow: none; border: 1px solid #333; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .matrix-rahmen { display: block !important; } .gruppen { display: none !important; } a[href]::after { content: ""; } }