/* =============================================================================
WissensHub, Grundgestalt
-----------------------------------------------------------------------------
Angelegt am 27.08.2026 fuer Etappe 1, Schritt 2.
Absichtlich klein. Das ist die Mechanik, nicht das Aussehen eines Kunden.
Je Hub kommt spaeter ein eigenes Thema darueber, so wie `112-thema.css` und
`simplex-thema.css` ueber `fundament.css` liegen. Deshalb stehen alle Farben
und Schriften hier als Variablen und nirgends fest im Regelwerk: ein Thema
ueberschreibt dann nur den `:root`-Block und nicht dreissig Regeln.
Fuers Handy gebaut und nicht handytauglich gemacht. Ein Lernender oeffnet
den Hub in der Bahn, nicht am Schreibtisch.
============================================================================= */
:root {
/* Ergaenzt am 28.08.2026, Etappe 5 Schritt 2. Die Werte kommen aus
`system/fundament.css` und sind nicht nachgemischt. `--navy` bleibt auf
dem alten Wert, damit nichts Bestehendes kippt; der dunklere Ton des
Rahmens heisst `--navy-tief`. */
--navy-tief: #0F2032;
--akzent: #2F6099;
--sand: #F1F4F9;
--sand-tief: #E8EDF4;
--papier: #FFFFFF;
--flaeche: #F3F6FB;
--leise-2: #8494A8;
--schatten-s: 0 1px 2px rgba(20,41,63,.04), 0 4px 16px rgba(20,41,63,.05);
--schatten-m: 0 2px 4px rgba(20,41,63,.04), 0 18px 44px rgba(20,41,63,.09);
--kopfhoehe: 60px;
--leistenbreite: 274px;
--navy: #1E3A5F;
--karmesin: #922B3E;
--grund: #FEFEFE;
--text: #1F2933;
--leise: #52637A;
--linie: #E2E8F0;
--schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--schrift-titel: "Literata", Georgia, "Times New Roman", serif;
--rundung: 10px;
/* Das Gruen der Erfolgsmeldungen. Es stand bis zum 29.08.2026 an vier
Stellen roh im Regelwerk und war damit im Dunkeln vergessen. Neue
Stellen nehmen die Variable. Die vier alten stehen auf der
Aufraeumliste, sie anzufassen gehoert nicht in diesen Schritt. */
--gruen: #2E7D5B;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem 1.25rem 4rem;
background: var(--grund);
color: var(--text);
font-family: var(--schrift);
font-size: 17px;
line-height: 1.6;
-webkit-text-size-adjust: 100%;
}
.blatt {
max-width: 34rem;
margin: 0 auto;
}
h1 {
color: var(--navy);
font-size: 1.6rem;
line-height: 1.25;
margin: 0 0 .75rem;
}
.lead {
color: var(--leise);
margin: 0 0 1.75rem;
}
/* --- Meldungen ------------------------------------------------------------ */
.meldung {
border-left: 3px solid var(--navy);
background: #F4F7FA;
border-radius: 0 var(--rundung) var(--rundung) 0;
padding: .85rem 1rem;
margin: 0 0 1.5rem;
}
.meldung.hinweis { border-left-color: var(--karmesin); }
/* --- Anmeldung ------------------------------------------------------------ */
.anmeldung { display: flex; flex-direction: column; gap: .5rem; }
.anmeldung label {
font-weight: 600;
font-size: .95rem;
color: var(--navy);
}
/* 17px und keinen Punkt weniger: unter 16px zoomt iOS beim Hineintippen in das
Feld hinein, die Seite springt, und es sieht aus, als sei sie kaputt.
Dieselbe Begruendung steht in 112-tuer.css. */
.anmeldung input[type="email"],
.anmeldung input[type="password"] {
font: inherit;
font-size: 17px;
padding: .8rem .9rem;
border: 1px solid var(--linie);
border-radius: var(--rundung);
background: #fff;
}
.anmeldung input[type="email"]:focus,
.anmeldung input[type="password"]:focus {
outline: 2px solid var(--navy);
outline-offset: 1px;
border-color: var(--navy);
}
.anmeldung button {
font: inherit;
font-weight: 600;
margin-top: .5rem;
padding: .85rem 1rem;
border: 0;
border-radius: var(--rundung);
background: var(--navy);
color: #fff;
cursor: pointer;
}
.anmeldung button:hover { background: #16304f; }
/* Der zweite Knopf ist ein gleichwertiger Weg und kein Notausgang, deshalb
sichtbar und nicht als kleiner Link versteckt. Ruhiger als der erste, damit
die Seite eine Empfehlung ausspricht, ohne den anderen Weg zu verbergen. */
.anmeldung button.zweitrangig {
margin-top: .15rem;
background: transparent;
color: var(--navy);
border: 1px solid var(--linie);
}
.anmeldung button.zweitrangig:hover { background: #F4F7FA; }
.leise { font-weight: 400; color: var(--leise); }
/* Zaehlt beim Tippen mit, statt nach dem Absenden abzulehnen. */
.zaehler {
margin: .1rem 0 0;
font-size: .88rem;
color: var(--leise);
}
.zaehler.kurz { color: var(--karmesin); }
.zaehler.gut { color: #1B7A4B; }
.meldung ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.meldung li { margin: .15rem 0; }
.meldung p { margin: 0; }
/* Die Falle fuer Maschinen. Nicht `display:none`: manche Ausfueller fuellen
auch verborgene Felder, aber viele ueberspringen ausgeblendete. So steht das
Feld im Baum, ist aber fuer Menschen unsichtbar und nicht erreichbar. */
.falle {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* --- Angebote ------------------------------------------------------------- */
.angebote { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.angebote li {
display: flex;
flex-direction: column;
gap: .15rem;
padding: .9rem 1rem;
border: 1px solid var(--linie);
border-radius: var(--rundung);
margin-bottom: .6rem;
}
.angebote span { color: var(--leise); font-size: .9rem; }
.angebote .zu { color: var(--karmesin); }
/* --- Verwaltung ----------------------------------------------------------- */
h2 {
color: var(--navy);
font-size: 1.15rem;
margin: 2.25rem 0 .75rem;
}
.anmeldung select,
.reihe select,
.reihe input {
font: inherit;
font-size: 17px;
padding: .7rem .8rem;
border: 1px solid var(--linie);
border-radius: var(--rundung);
background: #fff;
color: var(--text);
}
.ankreuz {
display: flex;
align-items: center;
gap: .5rem;
font-weight: 400;
color: var(--text);
margin-top: .4rem;
}
.ankreuz input { width: 1.1rem; height: 1.1rem; }
/* Eine Karte je Person. Keine Tabelle: auf dem Handy waere sie unlesbar, und
die Verwaltung wird unterwegs benutzt wie alles andere hier. */
.karte {
border: 1px solid var(--linie);
border-radius: var(--rundung);
padding: .9rem 1rem;
margin-bottom: .7rem;
}
.karte.gesperrt { border-color: var(--karmesin); }
.karte .kopf {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .5rem;
}
.karte .rolle {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--leise);
}
.klein { font-size: .85rem; }
.warn { color: var(--karmesin); }
.zugaenge { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .92rem; }
.zugaenge li { padding: .15rem 0; }
details { margin-top: .6rem; }
summary {
cursor: pointer;
color: var(--navy);
font-size: .9rem;
}
.werkzeuge { margin-top: .6rem; display: flex; flex-direction: column; gap: .5rem; }
/* Auf dem Handy untereinander, ab Tablet nebeneinander. */
.reihe { display: flex; flex-wrap: wrap; gap: .4rem; }
.reihe input, .reihe select { flex: 1 1 8rem; min-width: 0; }
.reihe button {
font: inherit;
font-size: .92rem;
padding: .7rem .9rem;
border: 1px solid var(--linie);
border-radius: var(--rundung);
background: transparent;
color: var(--navy);
cursor: pointer;
}
.reihe button:hover { background: #F4F7FA; }
.reihe button.warnknopf { color: var(--karmesin); border-color: var(--karmesin); }
/* --- Der Baum: Wege, Stationen, Nuggets ----------------------------------- */
.weg { margin-bottom: 2rem; }
.weg h2 { margin-top: 1.5rem; }
.station {
border: 1px solid var(--linie);
border-radius: var(--rundung);
padding: .7rem .9rem;
margin-bottom: .6rem;
}
.station > summary {
font-weight: 600;
color: var(--navy);
font-size: 1rem;
list-style: none;
}
.station > summary::-webkit-details-marker { display: none; }
.station > summary::before { content: "▸ "; color: var(--leise); }
.station[open] > summary::before { content: "▾ "; }
.nuggets { list-style: none; margin: .5rem 0 0; padding: 0; }
.nuggets li {
padding: .5rem 0;
border-top: 1px solid var(--linie);
display: flex;
flex-direction: column;
gap: .1rem;
}
.nuggets li:first-child { border-top: 0; }
.nuggets a { color: var(--text); text-decoration: none; font-weight: 500; }
.nuggets a:hover { color: var(--navy); text-decoration: underline; }
.nuggets .leise { font-size: .82rem; }
/* --- Ein Nugget ----------------------------------------------------------- */
.zurueck { margin: 0 0 1rem; font-size: .9rem; }
.zurueck a { color: var(--navy); }
.beschreibung {
color: var(--leise);
border-left: 3px solid var(--linie);
padding-left: .9rem;
margin-bottom: 1.75rem;
}
.baustein { margin-bottom: 2rem; }
/* Das Video steht vor dem Text des Bausteins: erst sehen, dann einordnen. */
.clip {
display: block;
width: 100%;
max-height: 70vh;
background: #000;
border-radius: var(--rundung);
margin: 0 0 1rem;
}
.baustein h3 {
color: var(--navy);
font-size: 1.1rem;
margin: 0 0 .6rem;
}
/* Der Rumpf traegt das HTML aus dem Material: Absaetze, Tabellen, Zitate. Es
ist dort ohne Klassen geschrieben, deshalb wird hier ueber die Elemente
gestaltet und nicht ueber Namen. */
.rumpf p { margin: 0 0 .9rem; }
.rumpf h3 { font-size: 1rem; margin: 1.4rem 0 .5rem; color: var(--text); }
.rumpf ul, .rumpf ol { margin: 0 0 .9rem; padding-left: 1.2rem; }
.rumpf li { margin: .25rem 0; }
.rumpf table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.1rem;
font-size: .93rem;
}
.rumpf td, .rumpf th {
border: 1px solid var(--linie);
padding: .55rem .7rem;
vertical-align: top;
text-align: left;
}
.rumpf tr:first-child td { background: #F4F7FA; font-weight: 600; }
.rumpf blockquote {
margin: 1.2rem 0;
padding: .2rem 0 .2rem 1rem;
border-left: 3px solid var(--karmesin);
}
.rumpf blockquote p { margin: 0 0 .3rem; }
/* Auftrag und Selbstprüfung setzen sich ab: sie verlangen etwas vom Leser,
der Rest erklärt. Bauregel fünf im Lerndesign. */
.baustein-auftrag .rumpf,
.baustein-selbstpruefung .rumpf {
background: #F4F7FA;
border-radius: var(--rundung);
padding: 1rem 1.1rem;
}
/* --- Fuss ----------------------------------------------------------------- */
.fussnote {
margin-top: 2.5rem;
padding-top: 1rem;
border-top: 1px solid var(--linie);
color: var(--leise);
font-size: .9rem;
}
.fussnote a { color: var(--navy); }
/* =============================================================================
Etappe 3: Fortschritt, Reaktionen, Kommentare, Notizen, Merkzettel, Suche
Angelegt am 27.08.2026.
============================================================================= */
/* --- Der Balken ----------------------------------------------------------- */
/* Orientierung, kein Antrieb. Keine Punkte, keine Abzeichen, keine Bestenliste,
so steht es in `_WISSENSHUB_PLATTFORM.md`. Deshalb ist er duenn und ruhig und
nicht das Erste, was ins Auge faellt. */
.balken {
height: 6px;
border-radius: 3px;
background: var(--linie);
overflow: hidden;
margin: 0 0 .3rem;
}
.balken span {
display: block;
height: 100%;
background: var(--navy);
border-radius: 3px;
}
.balkentext { margin: 0 0 1.25rem; }
/* --- Der Stand am Nugget -------------------------------------------------- */
/* Das Haekchen steht in einer eigenen Spalte fester Breite. Ohne sie ruecken
gelesene und ungelesene Zeilen unterschiedlich weit ein, und die Liste
flackert beim Lesen. */
.nuggets li {
display: grid;
grid-template-columns: 1.3rem 1fr;
grid-template-areas: "haken titel" ". stand";
column-gap: .1rem;
row-gap: .1rem;
}
.nuggets .haken { grid-area: haken; color: #1B7A4B; font-weight: 700; }
.nuggets a { grid-area: titel; }
.nuggets .leise { grid-area: stand; }
.nuggets li.fertig a { color: var(--leise); }
.station.fertig > summary { color: var(--leise); }
/* --- Ein gesehener Baustein ----------------------------------------------- */
/* Ein Strich am Rand und keine Farbe im Text: der Baustein soll nach dem
zweiten Besuch nicht anders zu lesen sein als beim ersten. */
.baustein {
border-left: 3px solid transparent;
padding-left: .9rem;
margin-left: -1.2rem;
}
.baustein.gesehen { border-left-color: #C9E0D2; }
/* --- Die Werkzeugleiste --------------------------------------------------- */
.werkzeugleiste {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin: 1rem 0 .5rem;
}
.werkzeugleiste button {
font: inherit;
font-size: .82rem;
line-height: 1.2;
padding: .45rem .7rem;
border: 1px solid var(--linie);
border-radius: 999px;
background: transparent;
color: var(--leise);
cursor: pointer;
}
.werkzeugleiste button:hover { background: #F4F7FA; color: var(--navy); }
.werkzeugleiste button.an {
border-color: var(--navy);
color: var(--navy);
background: #F4F7FA;
font-weight: 600;
}
.werkzeugleiste .zahl { color: var(--leise); font-weight: 400; }
.werkzeugleiste button.merken { margin-left: auto; }
/* --- Notiz ---------------------------------------------------------------- */
.notizfeld > summary,
.kommentare > summary {
font-size: .85rem;
color: var(--leise);
padding: .2rem 0;
}
.notizfeld textarea,
.kommentare textarea,
.kommentare input[type="text"] {
font: inherit;
font-size: 17px; /* unter 16px zoomt iOS beim Hineintippen hinein */
width: 100%;
padding: .6rem .7rem;
border: 1px solid var(--linie);
border-radius: var(--rundung);
background: #fff;
color: var(--text);
margin-top: .4rem;
resize: vertical;
}
.notizfeld button,
.kommentare button {
font: inherit;
font-size: .88rem;
margin-top: .4rem;
padding: .55rem .9rem;
border: 1px solid var(--linie);
border-radius: var(--rundung);
background: transparent;
color: var(--navy);
cursor: pointer;
}
.notizfeld button:hover,
.kommentare button:hover { background: #F4F7FA; }
/* --- Kommentare ----------------------------------------------------------- */
.kommentar {
border-left: 2px solid var(--linie);
padding: .1rem 0 .1rem .8rem;
margin: .6rem 0;
}
.kommentar.antwort { margin-left: 1.2rem; }
/* Der interne Kommentar traegt Karmesin, weil er nicht fuer alle ist. Die
Farbe steht hier fuer „Achtung, andere Sichtbarkeit" und nicht fuer Gefahr. */
.kommentar.intern { border-left-color: var(--karmesin); }
.kommentar .wer { margin: 0; font-size: .85rem; font-weight: 600; color: var(--navy); }
.kommentar .was { margin: .15rem 0 .2rem; }
.kommentar.weg { color: var(--leise); font-style: italic; font-size: .88rem; }
.marke {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--karmesin);
font-weight: 600;
}
.wegform { display: inline; }
/* Mit `.kommentare` davor, sonst gewinnt die Regel fuer alle Knoepfe darin und
das Zuruecknehmen sieht aus wie ein gleichwertiger Knopf. In der Vorschau am
27.08.2026 aufgefallen: Spezifitaet schlaegt Reihenfolge. */
.kommentare .wegknopf {
font: inherit;
font-size: .78rem;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: var(--leise);
text-decoration: underline;
cursor: pointer;
margin: 0;
}
.kommentare .wegknopf:hover { background: none; color: var(--karmesin); }
.antwortauf > summary {
font-size: .8rem;
color: var(--leise);
margin-left: 1.2rem;
padding: .2rem 0 .5rem;
}
.antwortform { display: flex; gap: .35rem; margin: .1rem 0 .9rem 1.2rem; }
.antwortform input[type="text"] { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.antwortform button { margin-top: 0; white-space: nowrap; }
/* --- Suche ---------------------------------------------------------------- */
.suchform { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.75rem; }
.suchform label { flex: 1 0 100%; }
.suchform input[type="search"] {
font: inherit;
font-size: 17px;
flex: 1 1 12rem;
min-width: 0;
padding: .7rem .8rem;
border: 1px solid var(--linie);
border-radius: var(--rundung);
background: #fff;
color: var(--text);
}
.suchform button {
font: inherit;
font-weight: 600;
padding: .7rem 1.1rem;
border: 0;
border-radius: var(--rundung);
background: var(--navy);
color: #fff;
cursor: pointer;
}
.treffer { margin-bottom: 1.6rem; }
.treffer h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.treffer h2 a { color: var(--navy); text-decoration: none; }
.treffer h2 a:hover { text-decoration: underline; }
.fundstelle {
border-left: 2px solid var(--linie);
padding-left: .8rem;
margin: .5rem 0;
}
.fundstelle > a { color: var(--text); font-size: .92rem; }
.fundstelle p { margin: .15rem 0 0; }
mark {
background: #FFF1A8;
color: inherit;
padding: 0 .1em;
border-radius: 2px;
}
/* =============================================================================
Etappe 4: Quiz und Nachweis. Angelegt am 27.08.2026.
============================================================================= */
/* --- Quiz ----------------------------------------------------------------- */
/* Der Quizteil setzt sich ab wie Auftrag und Selbstpruefung: er verlangt etwas
vom Leser, der Rest erklaert. Bauregel fuenf im Lerndesign. */
.quiz {
background: #F4F7FA;
border-radius: var(--rundung);
padding: 1rem 1.1rem;
margin: 1.2rem 0;
}
.quizstand { margin: 0 0 .8rem; font-size: .95rem; }
.quizknopf {
font: inherit;
font-weight: 600;
font-size: .95rem;
display: inline-block;
padding: .75rem 1.2rem;
border: 0;
border-radius: var(--rundung);
background: var(--navy);
color: #fff;
text-decoration: none;
cursor: pointer;
}
.quizknopf:hover { background: #16304f; }
.quiz fieldset.frage {
border: 0;
border-top: 1px solid var(--linie);
padding: .9rem 0 .3rem;
margin: 0;
}
.quiz fieldset.frage:first-of-type { border-top: 0; padding-top: 0; }
.quiz legend {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--leise);
padding: 0;
}
.quiz .wortlaut { margin: .2rem 0 .7rem; font-weight: 500; }
/* Die ganze Zeile ist anklickbar und nicht nur der Punkt. Auf dem Handy trifft
niemand einen 14 Punkt grossen Kreis. */
.quiz .antwort {
display: flex;
align-items: flex-start;
gap: .6rem;
padding: .55rem .7rem;
margin-bottom: .35rem;
border: 1px solid var(--linie);
border-radius: var(--rundung);
background: #fff;
cursor: pointer;
font-size: .95rem;
}
.quiz .antwort:hover { border-color: var(--navy); }
.quiz .antwort input { margin-top: .2rem; flex: 0 0 auto; }
.quiz.ergebnis .frage { border-top: 1px solid var(--linie); padding: .8rem 0 .2rem; }
.quiz.ergebnis .frage:first-of-type { border-top: 0; }
.quiz.ergebnis .stimmt .wortlaut { color: #1B7A4B; }
.quiz.ergebnis .stimmt-nicht .wortlaut { color: var(--karmesin); }
.quiz.ergebnis p { margin: .1rem 0; }
/* --- Nachweis ------------------------------------------------------------- */
.nachweis { margin-bottom: 2rem; }
.nachweiskarte { border-color: var(--navy); }
/* Der Satz „Geschafft" ist die Nachricht der Seite und darf nicht grau sein.
`.lead` ist sonst der ruhige Vorspann, hier ist er die Aussage. */
.nachweiskarte .lead {
color: var(--navy);
font-weight: 600;
font-size: 1.15rem;
margin-bottom: .6rem;
}
.nachweiskarte.gilt { border-left: 4px solid #1B7A4B; }
/* Eine Schreibmaschinenschrift, damit sich die Nummer abtippen laesst, ohne
dass jemand O und 0 verwechselt. Aus demselben Grund kommen beide im
Zufallsteil gar nicht erst vor, siehe nachweis.php. */
.nummer {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 1.05rem;
letter-spacing: .04em;
color: var(--navy);
word-break: break-all;
}
.pruefung { margin: .8rem 0 0; }
.pruefung dt {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--leise);
margin-top: .7rem;
}
.pruefung dd { margin: .1rem 0 0; }
@media (prefers-color-scheme: dark) {
:root {
--grund: #12181F;
--text: #E8EDF2;
--leise: #9AAABC;
--linie: #2A3542;
--navy: #7FA9D4;
/* AM 28.08.2026 NACHGETRAGEN, und der Fehler war ernst. Bis dahin drehte
der Dunkelmodus nur die fünf Werte darüber. Alles, was in Etappe 5
gebaut wurde, steht aber auf `--papier`, `--flaeche` und `--sand`, und
die blieben hell. Ergebnis: **helle Schrift auf heller Fläche**, der
ganze Hub praktisch unlesbar. Thomas hat es an seinem Laptop gesehen.
Die Lehre steht neben der aus Schritt 5: der Prüfstand prüft Verhalten
und nicht Aussehen, und er sieht ohnehin nur den hellen Modus. **Wer
eine Farbvariable einführt, dreht sie im selben Zug hier mit**, sonst
ist die Variable eine halbe. */
--papier: #1A222C;
--flaeche: #0F141A;
--sand: #232D3A;
--sand-tief: #2A3542;
--leise-2: #8A9BB0;
/* Der Akzent aus dem Hellen ist auf dunklem Grund zu dumpf, sowohl als
Fläche eines Knopfes als auch als Schrift. Derselbe Ton, aufgehellt. */
--akzent: #5C93D6;
/* Dasselbe Gruen, aufgehellt. Auf #12181F ist #2E7D5B fast schwarz. */
--gruen: #5FBF92;
}
/* Der gefüllte Knopf trägt im Hellen weiße Schrift. Auf dem aufgehellten
Akzent wäre sie zu schwach, dort steht die dunkle Fläche als Schrift. */
.weiterband .knopf, .knopf.voll, .wunschform button, .wunschredaktion button {
color: #10161C;
}
.kachel .deckel { background: linear-gradient(140deg, #26415F, #0F2032); }
.kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #2F6099, #1E3A5F); }
.meldung { background: #1A222C; }
.anmeldung input[type="email"],
.anmeldung input[type="password"] { background: #1A222C; color: var(--text); }
.anmeldung button { color: #10161C; }
.anmeldung button.zweitrangig { background: transparent; color: var(--navy); }
.anmeldung button.zweitrangig:hover { background: #1A222C; }
.anmeldung select,
.reihe select,
.reihe input { background: #1A222C; color: var(--text); }
.reihe button:hover { background: #1A222C; }
.zaehler.gut { color: #5FD19A; }
.rumpf tr:first-child td { background: #1A222C; }
.baustein-auftrag .rumpf,
.baustein-selbstpruefung .rumpf { background: #1A222C; }
/* Etappe 3 */
.balken { background: #2A3542; }
.baustein.gesehen { border-left-color: #2F5C46; }
.werkzeugleiste button:hover { background: #1A222C; }
.werkzeugleiste button.an { background: #1A222C; }
.notizfeld textarea,
.kommentare textarea,
.kommentare input[type="text"],
.suchform input[type="search"] { background: #1A222C; color: var(--text); }
.notizfeld button:hover,
.kommentare button:hover { background: #1A222C; }
.suchform button { color: #10161C; }
.nuggets .haken { color: #5FD19A; }
.marke { color: #E08A9B; }
.kommentar.intern { border-left-color: #E08A9B; }
mark { background: #55491C; color: #F6EFD5; }
/* Etappe 4 */
.quiz { background: #1A222C; }
.quiz .antwort { background: #12181F; }
.quizknopf { color: #10161C; }
.quiz.ergebnis .stimmt .wortlaut { color: #5FD19A; }
.quiz.ergebnis .stimmt-nicht .wortlaut { color: #E08A9B; }
.nachweiskarte.gilt { border-left-color: #5FD19A; }
}
/* =============================================================================
DIE SCHRIFTEN
-----------------------------------------------------------------------------
Ergaenzt am 28.08.2026, Etappe 5 Schritt 3.
SELBST AUSGELIEFERT, NIE VON GOOGLE EINGEBUNDEN. Ein `` auf
`fonts.googleapis.com` uebertraegt die IP-Adresse jedes Besuchers in die USA,
und genau das haben deutsche Gerichte als Verstoss gewertet. Die Dateien
liegen deshalb neben dieser Datei. Sie stammen aus `tkohns.de/system/schriften`
und sind dieselben, die die Website benutzt.
BEIDE SCHRIFTEN SIND VARIABEL, ihre Gewichtsachse laeuft durch. Deshalb steht
hier ein Bereich und keine 400: mit `font-weight: 400` benutzt der Browser das
Gewicht 400 und **rechnet sich das Fette selbst aus**, statt das echte zu
nehmen. Auf `tkohns.de` steht heute noch die feste 400, dort wird also
synthetisch gefettet. Nachgemessen mit fontTools am 28.08.2026: Inter laeuft
von 100 bis 900, Literata von 400 bis 900.
ZWEI SCHNITTE JE SCHRIFT, latin und latin-ext. Der `unicode-range` sorgt
dafuer, dass der zweite nur geladen wird, wenn ein Zeichen daraus vorkommt.
Deutsche Umlaute stehen in latin, im Regelfall laedt der Browser also zwei
Dateien und nicht acht.
============================================================================= */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(inter-latin-ext-normal.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(inter-latin-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;;
}
@font-face {
font-family: 'Literata';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(literata-latin-ext-normal.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;;
}
@font-face {
font-family: 'Literata';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(literata-latin-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(inter-latin-ext-italic.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;;
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(inter-latin-italic.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;;
}
@font-face {
font-family: 'Literata';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url(literata-latin-ext-italic.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;;
}
@font-face {
font-family: 'Literata';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url(literata-latin-italic.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;;
}
/* =============================================================================
DER RAHMEN
-----------------------------------------------------------------------------
Angelegt am 28.08.2026, Etappe 5 Schritt 2. Kopfleiste, Seitenleiste und die
Flaeche dazwischen. Der Bildstand dazu ist `entwurf-4.html`.
Zwei Zustaende am `body`: `mit-rahmen` hinter der Anmeldung, `schlicht` fuer
Anmeldeseite, Pruefseite und Transferfrage. Dazu `leiste-zu`, das aus einem
Keks kommt und deshalb schon beim ersten Aufbau richtig steht.
============================================================================= */
body.mit-rahmen { padding: 0; background: var(--flaeche); }
/* **Die Breite, am 28.08.2026 nach Thomas' Bild geändert.** Vorher standen hier
46rem, und das war die Leseweite eines Textes. Für den ganzen Inhaltsbereich
ist sie falsch: auf dem Laptop blieb rechts ein knappes Drittel leer, und im
Modul quetschte sie den Text neben der rechten Leiste auf ein schmales Band.
Jetzt trägt der Bereich 72rem, und die **Leseweite sitzt dort, wo sie
hingehört**: an der Textspalte selbst (`.linkespalte`, 52rem). Damit nutzt
die Seite die Breite, ohne dass eine Zeile über die Leseweite hinauswächst.
Eine Zeile mit 120 Zeichen liest niemand gern. */
body.mit-rahmen .blatt { max-width: 72rem; margin: 0; }
/* --- Kopfleiste ---------------------------------------------------------- */
.appkopf {
position: sticky; top: 0; z-index: 20;
height: var(--kopfhoehe);
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 0 1rem;
background: var(--navy-tief); color: #fff;
}
.appkopf .hubmarke { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.appkopf .hubmarke img { display: block; height: 22px; width: auto; }
.appkopf .teiler { width: 1px; height: 22px; background: rgba(255,255,255,.22); }
.appkopf .produkt { color: #fff; font-weight: 600; font-size: 15px; }
/* Der Anbieter steht klein. In der Kundenfassung steht links sein Zeichen. */
.appkopf .by { color: rgba(255,255,255,.45); font-size: 11px; }
.kopfwerkzeug { display: flex; align-items: center; gap: .35rem; }
.kw {
display: flex; align-items: center; gap: .5rem;
padding: .5rem .7rem; border-radius: 9px;
color: rgba(255,255,255,.85); text-decoration: none;
}
.kw.feld { background: rgba(255,255,255,.10); min-width: 14rem; flex: 0 1 24rem; }
.kw.feld input {
border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px;
width: 100%; outline: none;
}
.kw.feld input::placeholder { color: rgba(255,255,255,.55); }
.kw.rund { padding: .5rem; border-radius: 50%; background: rgba(255,255,255,.10); }
.kw .z, .avatar { flex: none; }
.avatar {
width: 30px; height: 30px; border-radius: 50%; margin-left: .3rem;
background: linear-gradient(140deg, #4A7FBF, #26507F);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 12px; font-weight: 600; text-decoration: none;
}
.leistenkippe { display: none; }
/* Ein Zeichen ist immer gleich gross und nimmt die Farbe seiner Umgebung. */
.z { width: 18px; height: 18px; flex: none; }
.z, .z * { stroke-linecap: round; }
/* --- Seitenleiste -------------------------------------------------------- */
/* Heisst `hubrumpf` und nicht `rumpf`: `.rumpf` gab es in dieser Datei schon
seit Etappe 2, dort ist es der Inhalt eines Bausteins. Die Regel hier gab
ihm eine Mindesthoehe ueber den ganzen Bildschirm, und jede Bausteinkarte
wurde 840 Pixel hoch. **Dritte Namenskollision an einem Tag**, nach `.marke`
und dieser hier: ein neuer Klassenname gehoert vorher gesucht. */
.hubrumpf { display: flex; align-items: flex-start; min-height: calc(100vh - var(--kopfhoehe)); }
.seite {
position: sticky; top: var(--kopfhoehe);
width: var(--leistenbreite); flex: none;
padding: 1rem .75rem; background: var(--papier);
border-right: 1px solid var(--linie);
min-height: calc(100vh - var(--kopfhoehe));
font-size: 15px;
}
.seite .nav {
display: flex; align-items: center; gap: .7rem;
padding: .45rem .55rem; border-radius: 10px;
color: var(--text); text-decoration: none;
}
.seite .nav:hover { background: var(--sand); }
.seite .nav.aktiv { background: var(--sand); font-weight: 600; }
.seite .kreis {
width: 32px; height: 32px; border-radius: 50%; flex: none;
background: var(--sand); color: var(--leise);
display: flex; align-items: center; justify-content: center;
}
.seite .nav.aktiv .kreis { background: var(--akzent); color: #fff; }
.seite .wort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gruppe {
font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
color: var(--leise-2); font-weight: 600; padding: 0 .6rem; margin: 1.2rem 0 .4rem;
}
.seitenfuss a { color: var(--leise); }
.seitenfuss {
margin-top: 1.2rem; padding: .8rem .6rem 0;
border-top: 1px solid var(--linie);
color: var(--leise-2); font-size: 13px; line-height: 1.5;
overflow-wrap: anywhere;
}
.einklappen {
display: flex; align-items: center; gap: .6rem;
margin-top: .4rem; padding: .5rem .55rem;
border: 0; background: none; border-radius: 9px;
color: var(--leise-2); font: inherit; font-size: 13px; cursor: pointer;
}
.einklappen:hover { background: var(--sand); }
.inhalt { flex: 1; min-width: 0; padding: 1.6rem 1.5rem 4rem; }
/* --- Eingeklappt --------------------------------------------------------- */
/* Uebrig bleiben die Zeichen. Jedes traegt ein `title`, damit der Zeiger es
verraet, denn hier steht ein Zeichen ausnahmsweise ohne sein Wort. */
body.leiste-zu .seite { width: 62px; padding: 1rem .5rem; }
body.leiste-zu .seite .nav { justify-content: center; padding: .45rem 0; }
body.leiste-zu .gruppe,
body.leiste-zu .seitenfuss,
body.leiste-zu .seite .wort,
body.leiste-zu .einklappen span { display: none; }
body.leiste-zu .seite .nav > *:not(.kreis) { display: none; }
body.leiste-zu .einklappen { justify-content: center; }
/* --- Am Telefon ---------------------------------------------------------- */
/* Die Leiste ist keine Spalte mehr, sondern eine Schicht ueber der Seite. Auf
dem Telefon zaehlt, was dauerhaft sichtbar bleibt, und das ist der Inhalt. */
@media (max-width: 860px) {
.appkopf { padding: 0 .7rem; gap: .5rem; }
.kw.feld { min-width: 0; }
.kw.feld input { display: none; }
.appkopf .by, .appkopf .produkt, .appkopf .teiler { display: none; }
.leistenkippe {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex: none; margin-right: .2rem;
border: 0; border-radius: 9px; background: rgba(255,255,255,.10);
color: #fff; cursor: pointer;
}
.seite {
position: fixed; top: var(--kopfhoehe); left: 0; bottom: 0; z-index: 15;
width: 82vw; max-width: 20rem;
transform: translateX(-102%); transition: transform .18s ease;
box-shadow: var(--schatten-m);
overflow-y: auto;
}
body.leiste-offen .seite { transform: none; }
body.leiste-zu .seite { width: 82vw; max-width: 20rem; padding: 1rem .75rem; }
body.leiste-zu .gruppe, body.leiste-zu .seitenfuss, body.leiste-zu .seite .wort,
body.leiste-zu .seite .nav > *:not(.kreis) { display: revert; }
body.leiste-zu .seite .nav { justify-content: flex-start; padding: .45rem .55rem; }
.einklappen { display: none; }
.inhalt { padding: 1.2rem 1rem 4rem; }
body.mit-rahmen .blatt { max-width: none; }
}
/* Die Ueberschriften stehen in der Serife. Das ist der zweite Ton, den keiner
der drei Wettbewerber hat: LinkedIn Learning, LearningSuite und 360Learning
setzen durchweg Grotesk. Er kostet nichts und ist sofort wiederzuerkennen. */
h1, h2, h3, .appkopf .produkt { font-family: var(--schrift-titel); }
.appkopf .produkt { font-weight: 600; letter-spacing: -.01em; }
/* =============================================================================
DIE STARTSEITE
-----------------------------------------------------------------------------
Ergaenzt am 28.08.2026, Etappe 5 Schritt 3.
============================================================================= */
.abschnitt {
display: flex; align-items: center; gap: .6rem;
margin: 2rem 0 .9rem; font-size: 1.2rem;
}
.abschnitt::before {
content: ""; width: 3px; height: 1.1em; border-radius: 2px;
background: var(--karmesin); flex: none;
}
/* --- Mach weiter, wo du warst -------------------------------------------- */
/* Heller Grund, Karmesin links und unten. Kein voller Rahmen: dunkler Grund
plus roter Rahmen ist die Bildsprache einer Fehlermeldung. */
.weiterband {
display: flex; align-items: center; gap: 1.1rem;
margin: 1.4rem 0 0; padding: 1rem 1.1rem;
background: var(--papier); color: var(--text); text-decoration: none;
border: 1px solid var(--linie);
border-left: 5px solid var(--karmesin);
border-bottom: 3px solid var(--karmesin);
border-radius: 14px; box-shadow: var(--schatten-m);
}
.weiterband .bild {
width: 92px; height: 56px; border-radius: 9px; flex: none;
background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
display: flex; align-items: center; justify-content: center; color: #fff;
}
.weiterband .bild .z { width: 20px; height: 20px; }
.weiterband .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.weiterband .ober {
font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--leise-2);
}
.weiterband .titel { font-family: var(--schrift-titel); font-size: 1.1rem; font-weight: 600; margin-top: .2rem; }
.weiterband .meta { color: var(--leise); font-size: .85rem; margin-top: .25rem; }
/* Der einzige gefuellte Knopf der Seite. Dorthin soll der Klick. */
.weiterband .knopf {
flex: none; display: flex; align-items: center; gap: .5rem;
padding: .65rem 1.1rem; border-radius: 10px;
background: var(--akzent); color: #fff; font-weight: 600; font-size: .95rem;
}
/* --- Deine Kurse ---------------------------------------------------------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.kachel {
display: block; text-decoration: none; color: var(--text);
background: var(--papier); border: 1px solid var(--linie);
border-radius: 14px; overflow: hidden; box-shadow: var(--schatten-s);
}
.kachel .deckel {
display: block; height: 96px;
background: linear-gradient(140deg, var(--navy), var(--navy-tief));
}
.kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, var(--akzent), var(--navy)); }
.kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #5C6B7E, #2A3A4C); }
.kachel .rumpf2 { display: block; padding: .8rem .9rem 1rem; }
.kachel .titel { display: block; font-weight: 600; line-height: 1.35; }
.kachel .dauer { display: block; color: var(--leise-2); font-size: .8rem; margin: .35rem 0 .7rem; }
.balkenzeile { display: flex; align-items: center; gap: .6rem; }
.spur { flex: 1; height: 6px; background: var(--sand-tief); border-radius: 4px; overflow: hidden; }
.spur i { display: block; height: 100%; background: var(--akzent); border-radius: 4px; }
.prozent { font-size: .8rem; font-weight: 600; color: var(--akzent); }
.prozent.aus { color: var(--leise-2); font-weight: 500; }
.prozent.fertig { color: #2E7D5B; }
.kachel .prozent.fertig ~ .spur i, .kachel .spur i { }
@media (max-width: 640px) {
.weiterband { flex-wrap: wrap; }
.weiterband .knopf { width: 100%; justify-content: center; }
}
/* =============================================================================
DIE KURSANSICHT
-----------------------------------------------------------------------------
Ergaenzt am 28.08.2026, Etappe 5 Schritt 4.
============================================================================= */
/* --- Brotkrume ----------------------------------------------------------- */
.pfad {
display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
font-size: .85rem; color: var(--leise-2); margin: 0 0 1rem;
}
.pfad .stufe {
display: inline-flex; align-items: center; gap: .35rem;
color: var(--leise); text-decoration: none;
}
.pfad .stufe.jetzt { color: var(--text); font-weight: 500; }
.pfad .stufe .z { width: 15px; height: 15px; color: var(--leise-2); }
.pfad .trenn .z { width: 13px; height: 13px; color: #B6C2D2; }
/* --- Der Kurskopf -------------------------------------------------------- */
/* Hell mit dem Karmesinstrich links. Bei LearningSuite ist jeder Kurskopf ein
dunkler Glanzblock, hier biegen wir sichtbar ab. */
.kurskopf {
display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
padding: 1.1rem 1.3rem; margin-bottom: 1.4rem;
background: var(--papier); border: 1px solid var(--linie);
border-left: 4px solid var(--karmesin);
border-radius: 14px; box-shadow: var(--schatten-m);
}
.kurskopf .kbild {
width: 118px; height: 74px; border-radius: 11px; flex: none;
background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
}
.kurskopf .ktext { flex: 2 1 18rem; min-width: 14rem; }
.kurskopf .ober {
display: block; font-size: .68rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--leise-2);
}
.kurskopf h1 { font-size: 1.45rem; margin: .15rem 0 .35rem; }
.kurskopf p { margin: 0; }
.kurskopf .krechts {
display: flex; align-items: center; gap: 1.1rem;
flex: 1 1 18rem; min-width: 15rem;
}
.kurskopf .kstand { flex: 1; min-width: 0; }
.kurskopf .kstand p { margin: .45rem 0 0; }
.kurskopf .kprozent {
font-family: var(--schrift-titel); font-size: 1.6rem; font-weight: 600; flex: none;
}
/* Ein Feld je Fokusthema. Der Segmentbalken sagt, wie weit und wovon. */
.segment { display: flex; gap: 4px; }
.segment i { flex: 1; height: 9px; border-radius: 3px; background: var(--sand-tief); display: block; }
.segment i.voll { background: var(--akzent); }
.segment i.halb { background: linear-gradient(90deg, var(--akzent) 50%, var(--sand-tief) 50%); }
/* --- Fokusthemen --------------------------------------------------------- */
.fokus {
background: var(--papier); border: 1px solid var(--linie);
border-radius: 14px; box-shadow: var(--schatten-s);
margin-bottom: .8rem; overflow: hidden;
}
.fokus > summary {
display: flex; align-items: center; gap: .9rem;
padding: .85rem 1rem; cursor: pointer; list-style: none;
}
.fokus > summary::-webkit-details-marker { display: none; }
.fokus .fbild {
width: 38px; height: 38px; border-radius: 11px; flex: none;
background: var(--sand); color: var(--akzent);
display: flex; align-items: center; justify-content: center;
}
.fokus .ftitel { font-weight: 600; flex: 1; min-width: 0; }
.fokus .fstand { display: flex; align-items: center; gap: .7rem; flex: none; }
.fokus .fstand .spur { width: 5rem; }
.fokus.einzeln { padding: 0; }
.modulliste { border-top: 1px solid var(--linie); padding: .3rem .6rem .6rem; }
.modul {
display: flex; align-items: center; gap: .8rem;
padding: .55rem .5rem; border-radius: 10px;
text-decoration: none; color: var(--text);
}
.modul:hover { background: var(--flaeche); }
.modul.aktiv { background: var(--sand); }
.modul .marke2 {
width: 26px; height: 26px; border-radius: 50%; flex: none;
border: 1.5px solid var(--linie); color: #B6C2D2;
display: flex; align-items: center; justify-content: center;
}
.modul .marke2 .z { width: 14px; height: 14px; }
.modul .marke2.fertig { border-color: #2E7D5B; background: rgba(46,125,91,.10); color: #2E7D5B; }
.modul .marke2.laeuft { border-color: var(--akzent); color: var(--akzent); }
.modul .mtitel { flex: 1; min-width: 0; }
.modul .art {
display: flex; align-items: center; gap: .5rem; flex: none;
color: var(--leise-2); font-size: .82rem;
}
.modul .art .z { width: 16px; height: 16px; }
@media (max-width: 640px) {
.kurskopf { gap: .8rem; }
.kurskopf .kbild { width: 100%; height: 96px; }
.kurskopf .kprozent { margin-left: auto; }
.fokus .fstand .spur { display: none; }
.modul .art span { display: none; }
}
/* =============================================================================
DIE MODULANSICHT
-----------------------------------------------------------------------------
Ergaenzt am 28.08.2026, Etappe 5 Schritt 5.
============================================================================= */
.modulkopf {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
margin-bottom: 1.1rem;
}
.modulkopf h1 { flex: 1; min-width: 12rem; margin: 0; }
.modulkopf .mstand { display: flex; align-items: center; gap: .8rem; flex: none; }
.modulkopf .mstand .spur { width: 6rem; }
.knopf.rand {
display: inline-flex; align-items: center; gap: .45rem;
padding: .5rem .85rem; border: 1px solid var(--linie); border-radius: 10px;
background: var(--papier); color: var(--text); text-decoration: none; font-size: .9rem;
}
/* --- Zwei Spalten -------------------------------------------------------- */
/* Die rechte Leiste sitzt am rechten Rand, die Textspalte behält ihre
Leseweite. Ohne `space-between` klebte die Leiste am Text und die Luft stünde
ganz rechts, und genau das sah nach Ausschnitt aus. */
.zwei { display: flex; align-items: flex-start; gap: 1.3rem; justify-content: space-between; }
.linkespalte { flex: 1; min-width: 0; max-width: 52rem; }
/* --- Bausteine auf Karten ------------------------------------------------ */
.baustein {
background: var(--papier); border: 1px solid var(--linie);
border-radius: 16px; box-shadow: var(--schatten-s);
padding: 1.1rem 1.2rem; margin: 0 0 1rem;
}
.baustein .bkopf {
display: flex; align-items: center; gap: .45rem;
font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
color: var(--leise-2); margin-bottom: .4rem;
}
.baustein .bkopf .z { width: 15px; height: 15px; }
.baustein h3 { margin: 0 0 .5rem; }
.baustein .clip { width: 100%; border-radius: 12px; display: block; background: var(--navy-tief); }
/* Der Fuss: Merken und der Hinweis auf die Kommentare. Mehr steht hier nicht,
die Reaktion kommt einmal am Ende des Moduls. */
.bfuss {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
margin-top: .7rem; color: var(--leise-2); font-size: .82rem;
}
.bfuss form { margin: 0; }
.bfuss .merken, .bfuss .kommentarzeile {
display: inline-flex; align-items: center; gap: .4rem;
border: 0; background: none; padding: 0; cursor: pointer;
color: var(--leise-2); font: inherit; font-size: .82rem; text-decoration: none;
}
.bfuss .merken.an { color: var(--akzent); font-weight: 600; }
.bfuss .z { width: 15px; height: 15px; }
/* --- Das Zitat ----------------------------------------------------------- */
.zitat {
display: flex; align-items: flex-start; gap: .9rem;
margin: .2rem 0; padding: .1rem 0 .1rem 1.1rem;
border-left: 3px solid var(--karmesin);
}
.zitat .gross {
font-family: var(--schrift-titel); font-size: 2.5rem; line-height: 1;
color: var(--karmesin); opacity: .34; flex: none; margin-top: -.5rem;
}
.zitat .ztext { flex: 1; min-width: 0; }
/* Heisst `zaussage` und nicht `z`: `.z` ist seit Schritt 2 die Klasse jedes
Zeichens und setzt Breite und Hoehe auf 18 Pixel. Der Zitattext stand
dadurch ein Wort je Zeile. **Vierte Namenskollision an einem Tag.** */
.zitat .zaussage { font-family: var(--schrift-titel); font-size: 1.15rem; line-height: 1.55; }
.zitat .zaussage p { margin: 0; }
.zitat .quelle { color: var(--leise-2); font-size: .85rem; margin-top: .5rem; }
/* --- Die Rueckmeldung am Ende -------------------------------------------- */
.rueckmeldung {
background: var(--papier); border: 1px solid var(--linie);
border-radius: 16px; box-shadow: var(--schatten-s);
padding: 1.1rem 1.2rem; margin: 1.4rem 0 0;
}
.rueckmeldung .frage { font-size: 1rem; font-family: var(--schrift); font-weight: 600; margin: 0 0 .8rem; }
.reakreihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.reak {
display: inline-flex; align-items: center; gap: .5rem;
padding: .5rem .9rem; border: 1px solid var(--linie); border-radius: 22px;
background: var(--papier); color: var(--leise); font: inherit; font-size: .9rem; cursor: pointer;
}
.reak.an { border-color: var(--akzent); color: var(--akzent); background: rgba(47,96,153,.07); font-weight: 600; }
.reak .em { font-size: 1.05rem; line-height: 1; }
/* Einen Daumen zur Seite gibt es als Emoji nicht. Der mittlere ist derselbe
wie der linke, gedreht und gespiegelt, damit alle drei dieselbe Hand sind. */
.reak .em.seit { display: inline-block; transform: rotate(-90deg) scaleY(-1); }
.reak .zaehler { color: var(--leise-2); font-size: .8rem; }
/* --- Als Naechstes ------------------------------------------------------- */
.naechstes {
display: flex; align-items: center; gap: .9rem;
margin-top: 1rem; padding: .8rem 1rem;
background: var(--papier); border: 1px solid var(--linie);
border-radius: 14px; box-shadow: var(--schatten-s);
text-decoration: none; color: var(--text);
}
.naechstes .nbild {
width: 72px; height: 44px; border-radius: 8px; flex: none;
background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
}
.naechstes .ntext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.naechstes .ober {
font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leise-2);
}
.naechstes .titel { font-weight: 600; margin-top: .15rem; }
.naechstes .knopf.hell {
display: inline-flex; align-items: center; gap: .4rem; flex: none;
padding: .55rem 1rem; border-radius: 10px; background: var(--akzent); color: #fff;
font-weight: 600; font-size: .9rem;
}
.hinweis {
display: flex; align-items: center; gap: .5rem;
margin-top: .9rem; color: var(--leise-2); font-size: .82rem;
}
.hinweis .z { width: 15px; height: 15px; }
/* --- Die rechte Leiste --------------------------------------------------- */
.rleiste {
width: 21rem; flex: none;
background: var(--papier); border: 1px solid var(--linie);
border-radius: 16px; box-shadow: var(--schatten-s); overflow: hidden;
position: sticky; top: calc(var(--kopfhoehe) + 1rem);
}
.rreiter { display: flex; border-bottom: 1px solid var(--linie); }
.rreiter button {
flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
padding: .75rem .3rem; border: 0; background: none; cursor: pointer;
color: var(--leise-2); font: inherit; font-size: .82rem;
}
.rreiter button.an { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); }
.rreiter .z { width: 16px; height: 16px; }
.rrumpf { padding: .9rem 1rem 1rem; }
.notizform textarea {
width: 100%; border: 1px solid var(--linie); border-radius: 11px;
padding: .7rem .8rem; font: inherit; font-size: .9rem; line-height: 1.6;
background: #FCFDFE; color: var(--text); resize: vertical;
}
/* Der Platzhalter steht kursiv und grau. Er ist ein Hinweis und kein Inhalt,
und das muss man ihm ansehen, sonst tippt jemand daneben. */
.notizform textarea::placeholder { color: var(--leise-2); font-style: italic; }
.notizfuss { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; }
.notizfuss span { flex: 1; }
.notizfuss button {
border: 0; border-radius: 9px; padding: .45rem .9rem;
background: var(--akzent); color: #fff; font: inherit; font-size: .85rem;
font-weight: 600; cursor: pointer;
}
.rkomm {
display: block; padding: .55rem 0; border-bottom: 1px solid var(--linie);
text-decoration: none; color: var(--text);
}
.rkomm:last-child { border-bottom: 0; }
.rkomm .wer { display: block; font-weight: 600; font-size: .82rem; }
.rkomm .was { display: block; color: var(--leise); font-size: .85rem; margin-top: .15rem; }
.transkripttext { font-size: .88rem; line-height: 1.65; color: var(--leise); margin: 0 0 .8rem; }
/* Oben statt unten, seit dem 28.08.2026. Rechtsbündig, damit er die Reiter
darunter nicht anführt: er gehört zur Kachel und nicht zum Inhalt. */
.rkopfknopf {
display: flex; align-items: center; justify-content: flex-end; gap: .5rem; width: 100%;
padding: .55rem 1rem; border: 0; border-bottom: 1px solid var(--linie);
background: none; color: var(--leise-2); font: inherit; font-size: .8rem; cursor: pointer;
}
.rkopfknopf:hover { color: var(--text); background: var(--sand); }
.rkopfknopf .z { width: 15px; height: 15px; }
/* Eingeklappt bleibt ein schmaler Streifen. Die drei Werkzeuge sind nicht weg,
sie sind schmal geworden, und ein Klick holt die Leiste mit dem richtigen
Reiter zurueck. */
/* `hidden` allein genuegt nicht: die Regel darunter setzt `display`, und eine
Regel aus dem Stilbogen schlaegt die des Browsers. Ohne diese Zeile stand der
Streifen als dritte Spalte neben der Leiste und quetschte den Text auf ein
Wort je Zeile. */
.randstreifen[hidden] { display: none; }
.randstreifen {
width: 52px; flex: none; display: flex; flex-direction: column; align-items: center; gap: .5rem;
padding: .6rem 0; background: var(--papier); border: 1px solid var(--linie);
border-radius: 16px; box-shadow: var(--schatten-s);
position: sticky; top: calc(var(--kopfhoehe) + 1rem);
}
.randstreifen .kn {
width: 34px; height: 34px; border: 0; border-radius: 50%;
background: var(--flaeche); color: var(--leise); cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.randstreifen .kn:hover { background: var(--sand); color: var(--akzent); }
@media (max-width: 900px) {
.zwei { flex-direction: column; }
.rleiste { width: 100%; position: static; }
.randstreifen { display: none; }
.rkopfknopf { display: none; }
.modulkopf .mstand .spur { display: none; }
}
/* =============================================================================
BILDER
-----------------------------------------------------------------------------
Ergaenzt am 28.08.2026, Etappe 5 Schritt 6. Bis dahin stand im ganzen Hub
kein einziges `![]()
`.
Die Kennzeichnung „KI-generiert" steht **nicht im Bild**, sondern wird
daneben gezeichnet. Sie kommt aus `medium.herkunft`. Ein eingebranntes
Wasserzeichen waere fuer immer drin.
============================================================================= */
.mitbild { position: relative; overflow: hidden; display: block; }
.mitbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kiecke {
position: absolute; right: .3rem; bottom: .3rem;
padding: .1rem .35rem; border-radius: 5px;
background: rgba(15,32,50,.55); color: #fff;
font-size: .6rem; letter-spacing: .03em; line-height: 1.5;
}
.fbild.mitbild { border-radius: 11px; }
.fbild.mitbild .kiecke { display: none; } /* zu klein, die Ecke waere Krach */
.bbild {
display: block; position: relative; overflow: hidden;
border-radius: 12px; margin-bottom: .8rem; max-height: 26rem;
}
.bbild img { width: 100%; height: auto; }
/* =============================================================================
DIE WISSENSWUENSCHE
-----------------------------------------------------------------------------
Ergaenzt am 28.08.2026, Etappe 5 Schritt 7. Der Bildstand steht als Tafel 5
in `entwurf-2.html`, die Farben und Abstaende kommen aus `entwurf-4.html`.
Alle Klassen dieses Abschnitts beginnen mit `wunsch` oder `stimm`. Das ist
kein Ordnungssinn, sondern die Lehre aus Schritt 5: `hub.css` hat einen
flachen Namensraum, und an einem Tag sind vier Namen kollidiert. Vorher
gesucht, nicht nachher.
============================================================================= */
.wunschliste { margin-top: 1.2rem; }
.wunsch {
display: flex; gap: 1.1rem;
background: var(--papier); border: 1px solid var(--linie);
border-radius: 14px; box-shadow: var(--schatten-s);
padding: 1.1rem 1.2rem; margin-bottom: .75rem;
}
/* Der geoeffnete Wunsch auf seiner eigenen Seite traegt keinen Rahmen: dort
ist er nicht eine Karte unter vielen, sondern der Gegenstand der Seite. */
.wunsch.offen {
border: 0; box-shadow: none; background: transparent;
padding: 0; margin-bottom: 1.4rem;
}
.wunschtext { flex: 1; min-width: 0; }
.wunschtext h1 { margin: 0 0 .3rem; }
.wunschtext h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.wunschtext h3 a { color: var(--text); text-decoration: none; }
.wunschtext h3 a:hover { color: var(--navy); text-decoration: underline; }
.wunschtext p { margin: 0 0 .6rem; color: var(--leise); }
/* --- Der Zustimmungsknopf ------------------------------------------------- */
/* Er ist selbst der Knopf und kein Knopf daneben. Ein Zaehler, neben dem ein
Knopf steht, laesst offen, ob die Zahl anklickbar ist. */
.stimmform { flex: none; margin: 0; }
.stimme {
font: inherit; cursor: pointer;
display: flex; flex-direction: column; align-items: center;
width: 4rem; padding: .55rem 0;
border: 1px solid var(--linie); border-radius: 12px;
background: var(--papier); color: var(--text);
}
.stimme .z { width: 18px; height: 18px; color: var(--akzent); }
.stimme .n { font-weight: 700; font-size: 1.05rem; margin-top: .1rem; }
.stimme .wort { font-size: .68rem; color: var(--leise-2); }
.stimme:hover { border-color: var(--akzent); }
.stimme.an { border-color: var(--akzent); background: rgba(47,96,153,.07); }
.stimme.an .wort { color: var(--akzent); }
/* --- Das Schild mit dem Zustand ------------------------------------------- */
.wunschmarker { margin: 0 0 .6rem; }
.wunschmarker .schild {
display: inline-block; padding: .2rem .6rem; border-radius: 20px;
font-size: .75rem; font-weight: 600;
background: var(--sand); color: var(--navy);
}
.wunschmarker.arbeit .schild { background: rgba(47,96,153,.12); color: var(--akzent); }
.wunschmarker.gebaut .schild { background: rgba(46,125,91,.14); color: #2E7D5B; }
.wunschmarker .dazu { font-size: .82rem; color: var(--leise); }
.wunschfuss {
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
color: var(--leise-2); font-size: .82rem;
}
.wunschfuss span { display: inline-flex; align-items: center; gap: .35rem; }
.wunschfuss .z { width: 15px; height: 15px; }
/* --- Aufschreiben und Zustand setzen -------------------------------------- */
/* Beide sind zugeklappt. Ein offenes Formular ueber der Liste macht aus der
Seite ein Eingabeblatt, und wer hierherkommt, will zuerst lesen. */
.wunschform > summary,
.wunschredaktion > summary {
display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
padding: .5rem .9rem; border: 1px solid var(--linie); border-radius: 10px;
background: var(--papier); color: var(--navy); font-size: .9rem; font-weight: 600;
}
.wunschform > summary:hover,
.wunschredaktion > summary:hover { background: #F4F7FA; }
.wunschform > summary::marker,
.wunschredaktion > summary::marker { content: ""; }
.wunschform form,
.wunschredaktion form {
margin-top: .8rem; padding: 1rem 1.1rem;
border: 1px solid var(--linie); border-radius: 12px; background: var(--papier);
}
.wunschform label,
.wunschredaktion label { display: block; font-size: .85rem; color: var(--leise); }
.wunschform label + label { margin-top: .8rem; }
.wunschform input[type="text"],
.wunschform textarea,
.wunschredaktion input[type="text"] {
font: inherit; font-size: 17px; /* unter 16px zoomt iOS beim Hineintippen hinein */
width: 100%; margin-top: .3rem; padding: .6rem .7rem;
border: 1px solid var(--linie); border-radius: var(--rundung);
background: #fff; color: var(--text); resize: vertical;
}
.wunschform button,
.wunschredaktion button {
font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
margin-top: .9rem; padding: .6rem 1.1rem; border: 0; border-radius: 10px;
background: var(--akzent); color: #fff;
}
.zustandswahl { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.zustandswahl label {
display: inline-flex; align-items: center; gap: .4rem;
color: var(--text); font-size: .92rem;
}
@media (max-width: 640px) {
.wunsch { gap: .8rem; padding: .9rem 1rem; }
.stimme { width: 3.4rem; }
/* Enger, sonst steht das Datum am Telefon allein in einer dritten Zeile und
sieht aus wie ein Rest. */
.wunschfuss { gap: .3rem .9rem; }
}
@media (prefers-color-scheme: dark) {
.wunschform input[type="text"],
.wunschform textarea,
.wunschredaktion input[type="text"] { background: #1A222C; color: var(--text); }
.wunschform > summary:hover,
.wunschredaktion > summary:hover { background: #1A222C; }
.wunschmarker.gebaut .schild { background: rgba(95,209,154,.16); color: #5FD19A; }
}
/* =============================================================================
„ETWAS FUNKTIONIERT NICHT"
-----------------------------------------------------------------------------
Ergaenzt am 28.08.2026, Etappe 5 Schritt 8. Bildstand ist Tafel 4c in
`entwurf-4.html`.
Alle Klassen beginnen mit `stoer`, `dialog` oder `bild`. Gesucht vor dem
Schreiben, keine war belegt.
============================================================================= */
/* --- Der Knopf unten links ------------------------------------------------ */
/* Dezent. Er ist eine Rueckfallebene und kein Angebot. */
.stoerknopf {
display: flex; align-items: center; gap: .6rem;
margin: .2rem .75rem .8rem; padding: .45rem .55rem;
border-radius: 8px; text-decoration: none;
color: var(--leise-2); font-size: .82rem;
}
.stoerknopf:hover { background: var(--sand); color: var(--karmesin); }
.stoerknopf .z { width: 16px; height: 16px; flex: none; }
body.leiste-zu .stoerknopf .wort { display: none; }
body.leiste-zu .stoerknopf { justify-content: center; }
/* --- Der Dialog ----------------------------------------------------------- */
.stoerdialog {
width: min(38rem, calc(100vw - 2rem));
padding: 0; border: 0; border-radius: 16px;
background: var(--papier); color: var(--text);
box-shadow: var(--schatten-m);
}
.stoerdialog::backdrop { background: rgba(15,32,50,.45); }
/* Der Dialog ist eine Spalte: Kopf und Fuss stehen fest, nur der Rumpf rollt.
**Die Spalte gehoert an den Dialog und nicht an das Formular darin.** Am
Formular begrenzt `max-height: 100%` nichts, weil die Hoehe des Dialogs
selbst `auto` ist; dann waechst der Dialog ueber den Bildschirm hinaus und
der Fuss mit „Absenden" steht ausserhalb. Zwei Bilder hintereinander haben
das gezeigt, erst der abgeschnittene Kasten, dann der fehlende Knopf.
**Und die Regel steht auf `[open]`.** Ohne den Zusatz schlaegt `display:flex`
die Regel des Browsers fuer den geschlossenen Dialog, und der Kasten stuende
immer da. Genau diese Kollision gab es am 28.08.2026 schon einmal, beim
eingeklappten Randstreifen. */
.stoerdialog[open] { display: flex; flex-direction: column; max-height: calc(100vh - 4rem); }
.stoerdialog form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dialogkopf { flex: none; padding: 1.3rem 1.4rem .2rem; }
.dialogkopf h3 { margin: 0; font-size: 1.2rem; }
.dialogkopf p { margin: .4rem 0 0; color: var(--leise); font-size: .9rem; }
.dialogrumpf { flex: 1; min-height: 0; padding: 1rem 1.4rem 1.2rem; overflow-y: auto; }
.dialogfuss {
flex: none;
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
padding: .9rem 1.4rem; border-top: 1px solid var(--linie); background: var(--flaeche);
border-radius: 0 0 16px 16px;
}
.dialogfuss .empfaenger { flex: 1; min-width: 10rem; color: var(--leise); font-size: .8rem; }
/* --- Die Felder, im Dialog wie auf der Seite ------------------------------ */
.dialogrumpf label,
.stoerform label { display: block; margin-top: .9rem; font-size: .85rem; color: var(--leise); }
.dialogrumpf label:first-child,
.stoerform label:first-child { margin-top: 0; }
.dialogrumpf textarea, .dialogrumpf input[type="url"],
.stoerform textarea, .stoerform input[type="url"] {
font: inherit; font-size: 17px; /* unter 16px zoomt iOS beim Hineintippen hinein */
width: 100%; margin-top: .3rem; padding: .6rem .7rem;
border: 1px solid var(--linie); border-radius: var(--rundung);
background: #fff; color: var(--text); resize: vertical;
}
.knopf.voll {
font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
display: inline-flex; align-items: center; gap: .45rem;
padding: .6rem 1.2rem; border: 0; border-radius: 10px;
background: var(--akzent); color: #fff;
}
.dialogfuss .knopf.rand { cursor: pointer; font: inherit; font-size: .92rem; }
.stoerform .knopf.voll { margin-top: 1.2rem; }
/* --- Die Ablage fuers Bildschirmfoto -------------------------------------- */
.bildablage {
margin-top: .35rem; padding: 1rem; text-align: center;
border: 1px dashed var(--linie); border-radius: 12px; background: var(--flaeche);
}
.bildablage.drueber { border-color: var(--akzent); background: rgba(47,96,153,.06); }
.bildablage .z { width: 22px; height: 22px; color: var(--leise-2); }
.bildablage b { display: block; margin: .3rem 0 .15rem; font-size: .9rem; }
/* Das Feld traegt nicht `display:none`: ein verborgenes Pflichtfeld waere fuer
die Tastatur nicht erreichbar. So bleibt es im Fluss und nur unsichtbar. */
/* AM 29.08.2026 AUFGEMACHT, und der Fehler ist lehrreich. Diese Regel hiess
`.bildablage .dateifeld`, war also an den Ort gebunden statt an die Sache.
Auf der Profilseite steht dasselbe Feld ohne `.bildablage` darum, und damit
zeichnete der Browser wieder seinen eigenen Knopf: **„Choose File / No file
chosen", mitten im deutschen Formular.** Genau der Fehler, der schon einmal
im Meldeformular stand und dort behoben wurde.
Die Lehre ist nicht „diese Regel war zu eng", sondern: **wer eine Klasse
erfindet, um etwas zu verbergen, bindet sie nicht an ihren ersten Fundort.**
Gesehen am Bild, nicht vermutet. Der Pruefstand haette es nie gemeldet. */
.dateifeld {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.dateiknopf {
display: inline-block; margin-top: .7rem; cursor: pointer;
padding: .4rem .8rem; border: 1px solid var(--linie); border-radius: 8px;
background: var(--papier); color: var(--navy); font-size: .82rem; font-weight: 600;
}
.dateiknopf:hover { background: #F4F7FA; }
.dateifeld:focus-visible + .dateiknopf { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bildablage .dabei { display: block; margin-top: .5rem; color: #2E7D5B; font-weight: 600; }
/* --- Was automatisch mitgeht ---------------------------------------------- */
/* Sichtbar, und das ist keine Hoeflichkeit: ein Formular, das im Verborgenen
Browser und Fenstermass mitschickt, ist genau das, wogegen der Hub antritt. */
.mitgeschickt {
margin-top: 1.1rem; padding: .8rem .9rem;
border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche);
}
.mitgeschickt .t {
display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem;
font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--leise-2);
}
.mitgeschickt .t .z { width: 15px; height: 15px; }
.mitgeschickt table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mitgeschickt td { padding: .18rem 0; vertical-align: top; word-break: break-word; }
.mitgeschickt td:first-child { width: 6.5rem; color: var(--leise-2); }
/* --- Die Liste in der Administration -------------------------------------- */
.stoerkarte.neu { border-left: 3px solid var(--karmesin); }
.stoerkarte.erledigt { opacity: .62; }
.stoerkarte p { margin: .4rem 0; }
/* Der Verweis aufs Bildschirmfoto stand als blauer Standardverweis mit einem
grossen Zeichen da und war das Lauteste auf der Seite. Am Bild gesehen. */
.stoerkarte a {
display: inline-flex; align-items: center; gap: .4rem;
color: var(--navy); font-size: .85rem; font-weight: 600;
}
.stoerkarte a .z { width: 15px; height: 15px; }
@media (max-width: 640px) {
.stoerdialog { width: 100vw; max-width: none; border-radius: 16px 16px 0 0; margin: auto 0 0; }
.dialogfuss { border-radius: 0; }
.dialogfuss .knopf.rand, .dialogfuss .knopf.voll { flex: 1; justify-content: center; }
}
@media (prefers-color-scheme: dark) {
/* **Die letzten weißen Flächen aus den Etappen 1 bis 4.** Sie stehen dort
als `#fff` fest im Regelwerk und nicht als Variable, deshalb hat sie der
Nachtrag der Flächenvariablen vom 28.08. nicht mitgenommen: das Notizfeld
blieb ein weißer Block im dunklen Modul. Am Bild gesehen, beim Durchmessen
der Etappe.
**Die Lehre steht damit zweimal am selben Tag:** eine Farbe, die fest im
Regelwerk steht statt in einer Variablen, wird beim nächsten Umschwenken
vergessen. Neue Regeln nehmen `var(--papier)`. */
.notizform textarea,
.suchform input[type="search"],
.anmeldung input[type="password"],
.reihe input,
.kommentare input[type="text"],
.quiz .antwort { background: #12181F; color: var(--text); }
.quiz .antwort:hover { background: #1A222C; }
.stoerdialog { background: #1A222C; }
.dateiknopf { background: transparent; }
.dateiknopf:hover { background: #12181F; }
.dialogrumpf textarea, .dialogrumpf input[type="url"],
.stoerform textarea, .stoerform input[type="url"] { background: #12181F; color: var(--text); }
.stoerknopf:hover { background: #1A222C; }
}
/* =============================================================================
ROLLEN UND ANSICHT
-----------------------------------------------------------------------------
Ergaenzt am 29.08.2026, Etappe 5 Schritt 9. Klassen mit `schalter`, `pflege`
und `mitglieds` — vorher gesucht, alle frei.
============================================================================= */
/* --- Der Umschalter im Kopf ---------------------------------------------- */
/* Er steht neben dem Profilzeichen und traegt sein Wort, anders als die runden
Knoepfe daneben: „Zur Lernansicht" ist eine Ansage und kein Werkzeug. */
.kw.schalter {
display: inline-flex; align-items: center; gap: .45rem;
padding: 0 .8rem; height: 38px; border-radius: 19px;
background: rgba(255,255,255,.08); color: #E8EDF2;
text-decoration: none; font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.kw.schalter:hover { background: rgba(255,255,255,.16); }
.kw.schalter .z { width: 16px; height: 16px; }
/* --- Mitglied und Rechte -------------------------------------------------- */
.mitgliedszeile { margin: -.4rem 0 1.1rem; color: var(--leise); font-size: .92rem; }
/* --- Die Pflegeliste ------------------------------------------------------ */
.pflege { list-style: none; margin: .6rem 0 0; padding: 0; }
.pflege li {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
padding: .7rem 0; border-top: 1px solid var(--linie);
}
.pflege li:first-child { border-top: 0; }
.pflege a { flex: 1; min-width: 12rem; color: var(--text); text-decoration: none; font-weight: 500; }
.pflege a:hover { color: var(--navy); text-decoration: underline; }
.pmarken { display: flex; gap: .5rem; flex-wrap: wrap; }
.pmarke {
display: inline-flex; align-items: center; gap: .35rem;
padding: .2rem .6rem; border-radius: 20px;
font-size: .78rem; background: var(--sand); color: var(--leise);
}
/* Veraltet trägt Karmesin, schlecht nicht. Ein Inhalt, der nicht mehr stimmt,
richtet mehr Schaden an als einer, der jemandem nicht gefällt. */
.pmarke.veraltet { background: rgba(146,43,62,.10); color: var(--karmesin); }
.pmarke b { font-weight: 700; }
@media (max-width: 860px) {
.kw.schalter .wort { display: none; }
.kw.schalter { padding: 0; width: 38px; justify-content: center; }
}
@media (prefers-color-scheme: dark) {
.pmarke.veraltet { background: rgba(224,138,155,.14); color: #E08A9B; }
}
/* =============================================================================
DIE LEISTE UNTER DEM VIDEO
-----------------------------------------------------------------------------
Ergaenzt am 29.08.2026, Etappe 5 Schritt 9b. Nach dem Vorbild von `.mtempo`
im Demo-Nugget (`system/modul.css`), gleiche Machart, eigener Namensraum.
============================================================================= */
.mvideo { margin: 0 0 .2rem; }
.vleiste {
display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
margin-top: .6rem;
}
.vleiste .tl {
margin-left: .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--leise-2);
}
.vleiste button {
font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
padding: .3rem .6rem; border: 1px solid var(--linie); border-radius: 8px;
background: var(--papier); color: var(--leise); white-space: nowrap;
}
.vleiste button:hover { background: var(--sand); color: var(--text); }
.vleiste button.an { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Die Sprungtasten stehen vorn und tragen keine Umrandung in der Farbe der
Tempostufen: sie schalten nichts um, sie tun etwas einmal. */
.vleiste .vsprung { color: var(--navy); }
/* Der Untertitelschalter rueckt nach rechts, weil er nicht zur Tempoleiter
gehoert. Am Telefon steht er wieder in der Reihe, dort ist kein Platz. */
.vleiste .ut { margin-left: auto; }
@media (max-width: 560px) { .vleiste .ut { margin-left: 0; } }
@media (prefers-color-scheme: dark) {
.vleiste button { background: transparent; }
.vleiste button:hover { background: #1A222C; }
.vleiste button.an { background: var(--akzent); border-color: var(--akzent); color: #10161C; }
}
/* --- Das Kachelbild in der Leiste ---------------------------------------- */
/* Ergaenzt am 29.08.2026, Schritt 9b. Es sitzt im selben Kreis wie das Zeichen
daneben, damit die Leiste eine Kante behaelt: ein Bild in anderer Form
brächte Unruhe in eine Liste, die von ihrer Ruhe lebt. */
.seite .bildkreis { padding: 0; overflow: hidden; }
.seite .bildkreis img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Die Kennzeichnung „KI-generiert" bleibt hier aus. Bei 28 Pixeln wäre sie
nicht lesbar, nur ein Fleck. Sie steht am Bild selbst, auf Kurs- und
Startseite. */
.seite .bildkreis .kiecke { display: none; }
/* --- Die Fußleiste am Telefon -------------------------------------------- */
/* Ergaenzt am 29.08.2026, Schritt 9b. Vier Ziele, mehr vertraegt der Daumen
nicht. Am Laptop gibt es sie nicht: dort steht die Seitenleiste dauerhaft,
und zwei Menues nebeneinander sind eines zu viel. */
.tfuss { display: none; }
@media (max-width: 860px) {
.tfuss {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
display: flex; justify-content: space-around;
padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom));
background: var(--papier); border-top: 1px solid var(--linie);
box-shadow: 0 -2px 14px rgba(20,41,63,.07);
}
.tfuss a {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
padding: .3rem 0; border-radius: 10px;
color: var(--leise-2); text-decoration: none; font-size: .66rem;
}
.tfuss a.an { color: var(--akzent); font-weight: 600; }
.tfuss .z { width: 21px; height: 21px; }
/* Platz fuer die Leiste, sonst steht der letzte Baustein darunter. */
body.mit-rahmen .inhalt { padding-bottom: 5.5rem; }
/* Der Meldedialog faehrt von unten herein und darf nicht darunter liegen. */
.stoerdialog { margin-bottom: 0; }
}
@media (prefers-color-scheme: dark) {
.tfuss { box-shadow: 0 -2px 14px rgba(0,0,0,.35); }
}
/* =============================================================================
DIE PROFILSEITE
-----------------------------------------------------------------------------
Angelegt am 29.08.2026. Alle Klassen mit Praefix `pf-`, alle neunzehn vorher
gegen diese Datei geprueft und frei. Der flache Namensraum hat am 28.08. vier
Kollisionen an einem Tag gekostet, keine davon hat eine Pruefung ausgeloest.
**Jede Farbe kommt aus einer Variablen.** Der Dunkelblock weiter unten dreht
`--papier`, `--flaeche`, `--sand-tief`, `--linie` und `--text` um. Ein fest
eingetragener Farbwert waere dort unsichtbar, und genau das ist am 28.08.
zweimal passiert. Deshalb steht hier unten auch kein eigener Dunkelblock: es
braucht keinen, wenn alles aus Variablen kommt.
============================================================================= */
.pf-karte {
background: var(--papier); border: 1px solid var(--linie);
border-radius: var(--rundung); padding: 1.4rem 1.5rem; margin: 0 0 1.1rem;
}
.pf-karte > h2 {
margin: 0 0 .3rem; font-family: var(--schrift-titel);
font-size: 1.22rem; color: var(--navy);
}
.pf-karte > .pf-unter { margin: 0 0 1.1rem; color: var(--leise); font-size: .93rem; }
/* --- Block 1: Bild links, Angaben rechts ---------------------------------- */
.pf-du { display: flex; gap: 1.6rem; align-items: flex-start; }
.pf-bildspalte { flex: 0 0 auto; text-align: center; }
.pf-bild {
width: 104px; height: 104px; border-radius: 50%;
background: var(--sand-tief); color: var(--navy);
display: flex; align-items: center; justify-content: center;
font-size: 2.1rem; font-weight: 600; letter-spacing: .02em;
border: 1px solid var(--linie); overflow: hidden;
}
.pf-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-bildwahl { margin: 0; }
.pf-felder { flex: 1 1 auto; min-width: 0; }
.pf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.pf-feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pf-feld label { font-weight: 600; font-size: .9rem; color: var(--navy); }
/* 17px und keinen Punkt weniger: unter 16px zoomt iOS beim Hineintippen in das
Feld hinein, die Seite springt, und es sieht aus, als sei sie kaputt.
Dieselbe Begruendung steht in `.anmeldung input` und in `112-tuer.css`. */
.pf-feld input {
font: inherit; font-size: 17px; padding: .7rem .8rem;
border: 1px solid var(--linie); border-radius: var(--rundung);
background: var(--papier); color: var(--text); width: 100%;
}
.pf-feld input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
/* Die Mailadresse ist der Zugang selbst und wird hier nicht geaendert. Sie
sieht deshalb anders aus als ein Feld, das man anfassen darf: gestrichelt,
ruhiger, ohne Rahmen zum Hineinklicken. */
.pf-fest {
font-size: 17px; padding: .7rem .8rem; border: 1px dashed var(--linie);
border-radius: var(--rundung); background: var(--flaeche); color: var(--leise);
overflow-wrap: anywhere;
}
.pf-hinweis { margin: .9rem 0 0; font-size: .88rem; color: var(--leise); }
.pf-hinweis.kurz { color: var(--karmesin); }
.pf-hinweis.gut { color: var(--gruen); }
.pf-tun { margin: 1.2rem 0 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.pf-tun button {
font: inherit; font-weight: 600; padding: .8rem 1.1rem; border: 0;
border-radius: var(--rundung); background: var(--navy); color: #fff; cursor: pointer;
}
.pf-tun button:hover { filter: brightness(1.1); }
/* Der zweite Knopf ist ein gleichwertiger Weg und kein Notausgang, deshalb
sichtbar und nicht als kleiner Link versteckt. Dieselbe Regel wie bei
`.anmeldung button.zweitrangig`. */
.pf-tun button.pf-ruhig {
background: transparent; color: var(--navy); border: 1px solid var(--linie);
}
/* --- Block 3: die Geraete -------------------------------------------------- */
/* Eine Zeile je Anmeldung und kein Kachelfeld: die Angaben sind kurz, und
Zeilen lassen sich untereinander vergleichen. Kacheln nicht. */
.pf-zeile {
display: flex; align-items: center; gap: 1rem;
padding: .85rem 0; border-top: 1px solid var(--linie);
}
.pf-zeile:first-of-type { border-top: 0; }
.pf-zeile .pf-was { flex: 1 1 auto; min-width: 0; }
.pf-zeile .pf-was b { display: block; font-weight: 600; }
.pf-zeile .pf-was span { color: var(--leise); font-size: .9rem; }
.pf-jetzt {
font-size: .78rem; font-weight: 600; color: var(--navy);
background: var(--sand-tief); border-radius: 99px;
padding: .15rem .55rem; margin-left: .4rem; white-space: nowrap;
}
.pf-weg {
font: inherit; font-size: .9rem; background: transparent;
border: 1px solid var(--linie); border-radius: var(--rundung);
padding: .45rem .8rem; color: var(--navy); cursor: pointer; white-space: nowrap;
}
.pf-weg:hover { background: var(--flaeche); }
/* --- Block 4: die Post ----------------------------------------------------- */
/* Ein Ankreuzfeld und kein Schieber: ein Schieber sagt nicht, welcher Zustand
gerade gilt, ohne dass man seine Farbe deutet. */
.pf-post {
display: flex; align-items: flex-start; gap: .8rem;
padding: .85rem 0; border-top: 1px solid var(--linie); cursor: pointer;
}
.pf-post:first-of-type { border-top: 0; }
.pf-post input { width: 20px; height: 20px; margin: .15rem 0 0; flex: 0 0 auto; accent-color: var(--navy); }
.pf-post .pf-was b { display: block; font-weight: 600; }
.pf-post .pf-was span { color: var(--leise); font-size: .9rem; }
.pf-weiss { margin: 0; padding-left: 1.1rem; color: var(--text); }
.pf-weiss li { margin: .3rem 0; }
@media (max-width: 760px) {
.pf-karte { padding: 1.15rem 1.1rem; }
/* Am Telefon untereinander, und das Bild wandert in die Mitte. In der Ecke
stuende es verloren, sobald die Felder darunter die ganze Breite haben. */
.pf-du { flex-direction: column; align-items: center; gap: 1.1rem; }
.pf-felder { width: 100%; }
.pf-zwei { grid-template-columns: 1fr; }
.pf-zeile { align-items: flex-start; gap: .7rem; }
.pf-tun button { flex: 1 1 auto; }
}
/* --- Die Art einer Meldung ------------------------------------------------ */
/* Ergaenzt am 29.08.2026. Thomas will beim Durchgang zweierlei zurueckmelden:
was nicht funktioniert und was nicht schoen ist. Die Trennung ist der Sinn,
denn was falsch ist, wird sofort ausgebessert, was schoener sein koennte,
wartet. Namen vorher geprueft, alle drei frei. */
.mldart { border: 0; padding: 0; margin: 0 0 1rem; }
.mldart legend {
padding: 0; margin: 0 0 .5rem; font-weight: 600; font-size: .95rem; color: var(--navy);
}
.mldwahl {
display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .7rem;
border: 1px solid var(--linie); border-radius: var(--rundung);
margin-bottom: .4rem; cursor: pointer; background: var(--papier);
}
.mldwahl:has(input:checked) { border-color: var(--navy); background: var(--flaeche); }
.mldwahl input { width: 20px; height: 20px; margin: .1rem 0 0; flex: 0 0 auto; accent-color: var(--navy); }
.mldwahl > span { display: block; min-width: 0; }
.mldwahl b { display: block; font-weight: 600; }
.mldschild {
display: inline-block; margin: 0 0 .5rem; padding: .15rem .6rem;
border-radius: 99px; font-size: .78rem; font-weight: 600;
background: var(--sand-tief); color: var(--navy);
}
/* Nicht schoen ist keine Stoerung, sondern ein Wunsch. Deshalb ruhiger als die
Funktionsmeldung und nicht in Karmesin: Karmesin heisst im Hub „hier stimmt
etwas nicht". */
.mldschild.schoenheit { background: transparent; border: 1px solid var(--linie); color: var(--leise); }