`, nicht nur am Kreis darin.** Als Blockelement
hing das Menü in der Reihe fünf Pixel zu tief: seine Mitte lag bei 35, alle
anderen bei 30. Am 31.08.2026 gemessen. `position: relative` traegt die
Klappe darunter. */
.ichmenue {
position: relative;
display: flex; align-items: center; align-self: center;
/* **`margin: 0` ist der eigentliche Fund.** Eine allgemeine Regel fuer
`details` gab dem Menue 9,6 Pixel Abstand nach oben, und damit sass das
Profilbild fuenf Pixel tiefer als der Rest der Reihe. Am 31.08.2026
gemessen: Mitte 35 statt 30. `display:flex` allein half nicht, der Rand
blieb. */
margin: 0;
}
.ichmenue > summary { list-style: none; cursor: pointer; }
.ichmenue > summary::-webkit-details-marker { display: none; }
.ichklappe {
position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40;
min-width: 12rem; padding: .35rem;
background: var(--papier); color: var(--text);
border: 1px solid var(--linie); border-radius: 12px;
box-shadow: var(--schatten-m);
display: flex; flex-direction: column;
}
.ichklappe a {
padding: .5rem .6rem; border-radius: 8px;
color: var(--text); text-decoration: none; font-size: .92rem;
}
.ichklappe a:hover { background: var(--sand); }
/* 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. */
/* **Die Fußzeile wird abgezogen, seit dem 01.09.2026.** Vorher füllte der Rumpf
genau das Fenster, und die Rechtsfußzeile begann damit auf den Pixel genau an
der unteren Kante: auf jeder Seite, bei jeder Fensterhöhe, gleichgültig wie
wenig darin stand. Sie war da und niemand sah sie. Der Kommentar an
`.rechtsfuss` behauptete das Gegenteil, gemessen war es nie. */
.hubrumpf {
display: flex; align-items: flex-start;
min-height: calc(100vh - var(--kopfhoehe) - var(--fusshoehe));
}
.seite {
/* Spalte, damit der Meldeknopf mit `margin-top:auto` nach unten faellt.
Er ist die Rueckfallebene und gehoert in die Ecke, nicht mitten in die
Liste der Ziele. Seit dem 31.08.2026. */
display: flex; flex-direction: column;
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) - var(--fusshoehe));
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 .hubmarke img` steht weiter oben und ist genauer, deshalb hier
mit derselben Genauigkeit ausblenden. Sonst blieb das WissensHub-Zeichen
am Telefon stehen und lag ueber dem Suchfeld. Dieselbe Falle wie bei der
Hoehe, zwei Stunden vorher. */
.appkopf .by, .appkopf .produkt, .appkopf .teiler { display: none; }
.appkopf .hubmarke img.produktbild { display: none; }
/* Dieselbe Begruendung wie beim Zeichen: auf 375 Pixel passen Zeichen,
Suchknopf, zwei Kreise und das Profilbild nicht mit einem Wort dazwischen.
Die Herkunft steht dann im Fuss, und der ist am Telefon ohnehin naeher. */
.appkopf .produktmarke { display: none; }
/* Das Feld weicht dem Knopf. Beide fuehren auf `/suche`. */
.kw.feld { display: none; }
.kw.rund.nurschmal { display: flex; }
.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; }
/* Mit Bild fällt der Farbverlauf weg, sonst stünde er hinter einem Bild, das ihn
ohnehin verdeckt. `object-fit: cover` kommt aus `.mitbild` und schneidet das
Bannerbild auf dieses Format zu.
**Die KI-Ecke bleibt hier aus**, dieselbe Entscheidung wie bei `.fbild`: auf
92 Pixel Breite ist sie nicht zu lesen und nur Krach. Sichtbar ist sie
weiterhin dort, wo dasselbe Bild groß steht, in der Kurskachel und am
Modulkopf. */
.weiterband .bild.mitbild { display: block; background: none; }
.weiterband .bild.mitbild .kiecke { display: none; }
.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 ---------------------------------------------------------- */
/* 23rem bei 112rem Rahmen: auf einem breiten Bildschirm stehen vier nebeneinander,
auf einem schmalen bricht die Reihe von selbst um. */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr)); gap: 1.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 {
/* Bannerverhältnis wie bei Fokus und Kurskopf, damit das Kursbild nicht beschnitten wird. */
display: block; aspect-ratio: 2.36; height: auto;
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; }
/* Der Zugangshinweis, seit 01.09.2026 in der Kachel statt als Karte darunter.
Er steht unter dem Balken und ist leiser als alles darüber: er sagt nicht,
was zu tun ist, sondern bis wann es geht. Läuft ein Zugang nicht ab, steht
die Zeile gar nicht da. */
.kachel .zugang {
display: block; margin-top: .5rem;
color: var(--leise-2); font-size: .78rem;
}
.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);
}
/* 190 statt 118 Pixel, seit dem 31.08.2026. Bei 118 war der Titel im Bild
nicht zu lesen, und ein Bild, das man nicht lesen kann, ist ein Farbfleck. */
.kurskopf .kbild {
/* Dasselbe Format wie die Fokuskachel, aus demselben Grund. */
width: 320px; aspect-ratio: 2.36; height: auto; border-radius: 12px; flex: none;
background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
}
.kurskopf .ktext { flex: 2 1 18rem; min-width: min(14rem, 100%); }
.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: min(15rem, 100%);
}
.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;
}
/* Dasselbe Raster wie `.modul`: Nummer, Bild, Mitte, Knopf. Ein Fokusthema
ist eine Zeile derselben Liste, und was gleich aussieht, versteht man ohne
Erklaerung. Seit dem 31.08.2026. */
.fokus > summary {
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center; gap: 1rem;
padding: .7rem .75rem; cursor: pointer; list-style: none;
}
.fokus > summary::-webkit-details-marker { display: none; }
/* 64 statt 38: dieselbe Rechnung wie beim Kursbild. Der Titel im Bild soll
sich wenigstens erahnen lassen. */
/* Das Wort neben dem Pfeil. Ein Pfeil allein war zu leise, am 31.08.2026
gemeldet: „noch nicht klar, dass ich drauf klicken soll". */
/* **Zwei Handgriffe nebeneinander:** die Pille fuehrt hinein, der Pfeil klappt
auf. Bis zum 31.08.2026 stand auf der Pille „Aufklappen", und damit gab es
keinen Weg in das Fokusthema, sondern nur einen nach unten. */
.fhandgriffe { display: flex; align-items: center; gap: .5rem; flex: none; }
.fokus .mknopf { text-decoration: none; }
.fokus > summary:hover .mknopf {
background: var(--akzent); border-color: var(--akzent); color: #fff;
}
/* Der Anriss verschwindet, wenn das Thema offen ist: derselbe Satz stuende
sonst zweimal untereinander, einmal abgeschnitten und einmal ganz. */
.fokus[open] > summary .manriss { display: none; }
/* Der Einstieg im aufgeklappten Fokusthema steht schmaler als die Kacheln,
damit er als Text und nicht als weitere Zeile gelesen wird. */
.fbeschreibung { margin: .2rem .75rem 1rem; }
.fziel {
margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .07em;
text-transform: uppercase; color: var(--leise-2); font-weight: 600;
}
.fokus > summary:hover { background: var(--flaeche); }
.fokus > summary:hover .ftitel { color: var(--akzent); }
/* 132 x 84 wie die Modulkachel. Zwei Bildgroessen in einer Liste sehen aus
wie ein Versehen, am 31.08.2026 gemeldet. */
.fokus .fbild {
/* Bannerformat 2,36:1 statt 1,57:1. Die Fokusbilder tragen ihren Titel im Bild, und in
einer 132er Kachel wurde er mittig beschnitten: bei „Kundenbeziehung und Vertrauen"
fehlte die zweite Zeile. Am 31.08.2026 an Thomas' Bildschirm gesehen und gemessen. */
/* Feste Höhe statt aspect-ratio: Fokus- und Modulkachel sollen gleich hoch sein und
nur verschieden breit. 280 zu 119 ist das Bannerformat 2,36:1. */
width: 280px; height: 119px; border-radius: 11px; flex: none;
overflow: hidden;
background: var(--sand); color: var(--akzent);
display: flex; align-items: center; justify-content: center;
}
/* Genauso gross wie der Modultitel: beide sind Zeilen derselben Liste. Der
Unterschied steht im Vorsatz und nicht in der Schriftgroesse. */
/* Genauso gross wie der Modultitel: beide sind Zeilen derselben Liste, und der
Unterschied steht im Vorsatz, nicht in der Schriftgroesse. `inherit` und
nicht `1rem`: die Seite laeuft auf 17 Pixeln, `1rem` sind 16, und ein Pixel
Unterschied sieht man als Unsauberkeit, ohne ihn benennen zu koennen. Am
31.08.2026 nachgemessen. */
.fokus .ftitel { font-weight: 600; min-width: 0; font-size: 17px; }
/* Der Vorsatz steht leiser als der Name. Er ordnet ein, er ist nicht der
Titel: „Fokus: **Haltung und Selbstverstaendnis**". */
.fvorsatz { color: var(--leise-2); font-weight: 600; }
.fokus .fstand { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* Der Pfeil sagt, dass hier etwas aufgeht. Ohne ihn sieht ein zugeklapptes
Fokusthema aus wie eine Zeile, auf die man klicken kann, ohne zu wissen,
was dann passiert. */
/* Der Pfeil sitzt in einem Kreis, damit er wie ein Knopf aussieht und nicht
wie eine Verzierung. Er traegt das Winkelzeichen selbst als Rahmen: ein
Zeichen mehr zu laden lohnt dafuer nicht. */
.fokus .fpfeil {
width: 30px; height: 30px; flex: none; border-radius: 50%;
border: 1px solid var(--linie); background: var(--papier);
position: relative; transition: background .15s;
}
.fokus .fpfeil::after {
content: ""; position: absolute; inset: 0; margin: auto;
width: 8px; height: 8px; transform: translateY(-2px) rotate(45deg);
border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise);
transition: transform .18s;
}
.fokus[open] .fpfeil::after { transform: translateY(2px) rotate(-135deg); }
.fokus > summary:hover .fpfeil { background: var(--sand); }
/* Die Nummern der obersten Ebene. Die Reihenfolge im Kurs ist keine
Empfehlung, sondern gedacht, und das sieht man einer Kreisreihe nicht an. */
.fokus .fnr, .modul .mnr {
flex: none; width: 1.6rem; text-align: right;
color: var(--leise-2); font-size: .85rem; font-variant-numeric: tabular-nums;
}
/* Die alte Regel stand hier, als die Zahlen rechts aussen sassen. Seit dem
31.08.2026 stehen sie in der Mitte unter dem Anriss, deshalb kein `flex:none`
mehr: die Zeile darf umbrechen, wenn es eng wird. */
.fokus .fstand { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.fokus .fstand .spur { width: 5rem; }
.fokus.einzeln { padding: 0; }
.modulliste { border-top: 1px solid var(--linie); padding: .3rem .6rem .6rem; }
/* **Aus der Zeile wird eine Kachel**, seit dem 31.08.2026. Vorher stand links
ein Kreis und rechts ein Wort, und fuenfzig davon untereinander sahen aus
wie ein Inhaltsverzeichnis. Ein Bild und ein Satz machen daraus ein Regal,
in dem man etwas findet, statt eine Liste, die man abarbeitet. */
.modul {
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center; gap: 1rem;
padding: .7rem .75rem; border-radius: 14px;
text-decoration: none; color: var(--text);
}
/* **Der Zoom**, am 31.08.2026 bestellt, nach dem Vorbild von 360Learning. Er
sagt „hier passiert etwas, wenn du klickst", ohne ein Wort dafuer zu
brauchen. `will-change` bleibt weg: bei 62 Kacheln auf einer Seite kostet es
mehr, als es bringt. */
.modul:hover { background: var(--flaeche); }
/* Alle Bildflaechen fuellen ihren Kasten und schneiden ab, statt zu verzerren.
`bildflaeche()` legt das `![]()
` ohne Masse hinein, die Masse stehen hier. */
.mbild img, .fbild img, .kbild img, .nbild img, .mkbild img, .nkbild img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .45s ease;
}
.modul:hover .mbild img,
.fokus > summary:hover .fbild img,
.naechstes:hover .nbild img,
.merkkarte:hover .mkbild img { transform: scale(1.07); }
.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 .mbild {
/* Gleiche Höhe wie die Fokuskachel, nur schmaler: 178 zu 119 ist 3:2, das Verhältnis
der Modulbilder, und rund zwei Drittel der Fokusbreite. */
width: 178px; height: 119px; border-radius: 11px; flex: none;
overflow: hidden; position: relative; display: block; background: var(--sand);
}
.modul .mbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* **Ohne `.modul` davor.** Die Fokuszeile ist genauso gebaut, hing aber nicht
an diesem Vorfahren: dort liefen Titel und Anriss in einer Zeile ineinander,
„…erstaendnisWer dieses Fokusthema…". Am 31.08.2026 im Bild gesehen. Was
beide Zeilenarten gemeinsam haben, gehoert nicht unter den Namen einer von
beiden. Dieselbe Lektion wie bei `.mknopf` zwei Stunden vorher. */
.mmitte { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.mkopfzeile { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.mtitel { font-weight: 600; min-width: 0; }
/* Zwei Zeilen, dann Schluss. Ein Anriss, der laenger ist als der Titel, frisst
die Uebersicht, und genau das soll die Kachel geben. */
.manriss {
color: var(--leise); font-size: .88rem; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* **Kein Schleier auf fertigen Modulen.** Hier stand `opacity: .72`, damit ein
durchgearbeitetes Modul zurücktritt. Auf Platzhaltern fiel es nicht auf, auf
echten Fotos sofort: sie sahen milchig aus. Am 31.08.2026 von Thomas
gemeldet und herausgenommen. **Dass ein Modul durch ist, sagt der grüne
Haken am Titel**, und der sagt es genauer als eine Farbe, die man mit einem
schlechten Bild verwechseln kann. */
.modul .art {
display: flex; align-items: center; gap: .5rem;
color: var(--leise-2); font-size: .82rem;
}
.modul .art .z { width: 16px; height: 16px; }
/* Erst beim Ueberfahren farbig: fuenfzig Knoepfe in Navy untereinander waeren
eine Wand. Sichtbar ist er trotzdem immer, sonst waere er kein Angebot. */
/* Die Pille gilt fuer beide Zeilenarten: „Starten" am Modul, „Aufklappen" am
Fokusthema. Ein Knopf, der an zwei Stellen anders aussieht, ist zweimal ein
halber. */
.mknopf {
flex: none; padding: .3rem .75rem; border-radius: 20px;
border: 1px solid var(--linie); background: var(--papier);
color: var(--akzent); font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.modul:hover .mknopf { background: var(--akzent); border-color: var(--akzent); color: #fff; }
@media (max-width: 640px) {
.kurskopf { gap: .8rem; }
.kurskopf .kbild { width: 100%; aspect-ratio: 2.36; height: auto; }
/* Am Telefon über die ganze Breite, sonst wäre der Titel im Bild 3 Pixel hoch. */
.fokus .fbild { width: 100%; aspect-ratio: 2.36; height: auto; }
/* **Eine Spalte, und die Nummer sitzt im Bild.**
Zuerst stand sie in der zweiten Zeile neben dem Anriss: eine „1", die
nicht am Titel klebte, sondern irgendwo in der Mitte der Kachel schwebte.
Am 31.08.2026 mit echten Bildern gesehen. Als Plakette in der Bildecke
gehoert sie sichtbar zu dieser Kachel und stiehlt dem Titel keinen Platz. */
.modul, .fokus > summary {
position: relative;
grid-template-columns: 1fr; gap: .55rem;
}
.modul .mbild { width: 100%; height: 150px; }
.fokus .fbild { width: 100%; }
.modul .mnr, .fokus > summary .mnr {
position: absolute; top: .55rem; left: .55rem; z-index: 2;
width: auto; min-width: 1.6rem; height: 1.6rem;
display: flex; align-items: center; justify-content: center;
padding: 0 .4rem; border-radius: 999px;
background: rgba(15,32,50,.72); color: #fff;
font-size: .78rem; font-weight: 600; text-align: center;
}
/* Mit voller Breite ist wieder Platz fuer das Wort. Ohne es stand unter dem
Anriss ein einzelnes Dreieck ohne Erklaerung. */
.modul .art span { display: revert; }
.fhandgriffe { justify-content: flex-start; margin-top: .3rem; }
.modul .mknopf { display: none; } /* am Telefon ist die ganze Zeile der Knopf */
.kurskopf .kprozent { margin-left: auto; }
.fokus .fstand .spur { display: none; }
/* Das Wort bleibt: seit die Kachel eine Spalte ist, ist Platz dafuer. */
}
/* =============================================================================
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; }
/* Am 31.08.2026 von 52rem auf 68rem: im Modul stand der Text in einer schmalen Spalte,
während rechts und links Platz frei blieb. */
.linkespalte { flex: 1; min-width: 0; max-width: 68rem; }
/* --- Bausteine auf Karten ------------------------------------------------ */
/* Der Karmesinstrich links, seit dem 31.08.2026: die Kacheln standen in einem
hellen Grau auf einem hellen Grau und hoben sich kaum ab. Der gruene Strich
fuer „gelesen" sass vorher an derselben Kante und ist deshalb in den Kopf
der Kachel gewandert, wo er ohnehin besser steht: als Wort statt als Farbe,
die man kennen muss. */
.baustein {
background: var(--papier); border: 1px solid var(--linie);
border-left: 3px solid var(--karmesin);
border-radius: 16px; box-shadow: var(--schatten-s);
padding: 1.1rem 1.2rem; margin: 0 0 1rem;
}
.baustein.gesehen { border-left-color: var(--karmesin); }
.baustein.gesehen .bkopf::after {
content: "gelesen"; color: #1B7A4B; font-weight: 600; margin-left: auto;
}
.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 .6rem; font-size: 1.35rem; }
.baustein .clip {
width: 100%; aspect-ratio: 16 / 9; height: auto;
border-radius: 12px; display: block; background: var(--navy-tief);
}
.mvideo { position: relative; margin: 0 0 .2rem; }
.abspielen {
position: absolute; inset: 0; margin: auto;
width: 4.5rem; height: 4.5rem; border-radius: 50%;
border: 0; cursor: pointer;
background: rgba(15,32,50,.72);
display: flex; align-items: center; justify-content: center;
}
.abspielen:hover { background: var(--karmesin); }
/* Das Dreieck aus Rahmen gebaut: ein Zeichen mehr zu laden lohnt dafuer nicht,
und ein Emoji sieht auf jedem Gerät anders aus. */
.abspielen span {
display: block; margin-left: .35rem;
border-style: solid; border-width: .8rem 0 .8rem 1.35rem;
border-color: transparent transparent transparent #fff;
}
.mvideo.laeuft .abspielen { display: none; }
/* **Auf Geraeten mit Finger zeichnet der Browser seinen eigenen Knopf.** iOS
setzt vor dem ersten Abspielen einen grossen Pfeil in die Mitte des Videos,
Android ebenso. Unserer lag darueber, und dann standen zwei Pfeile
uebereinander. Am 31.08.2026 auf dem iPhone gesehen.
`hover: none` **und** `pointer: coarse` zusammen: einzeln erwischt man auch
Laptops mit Tastschirm, und dort gibt es den eigenen Knopf des Browsers
nicht. Am Schreibtisch bleibt unserer, denn Chrome zeigt dort nur die
Leiste am unteren Rand, und dort sucht niemand den Anfang eines Films. */
@media (hover: none) and (pointer: coarse) {
.abspielen { display: none; }
}
/* 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; }
/* Eine Zeile, seit dem 31.08.2026. Umgebrochen sahen die fuenf Knoepfe aus
wie zwei Gruppen, und die zweite wie ein Nachtrag. Auf schmalen Schirmen
schiebt sich die Reihe zur Seite, statt umzubrechen. */
.reakreihe { display: flex; flex-wrap: nowrap; gap: .4rem; overflow-x: auto; }
/* **Die zwei Meldeknöpfe stehen abgesetzt**, seit dem 02.09.2026. Sie sind
keine Note, sondern ein Zuruf an die Redaktion, und in derselben Reihe lasen
sie sich wie eine fünfte und sechste Stufe. */
.meldereihe {
display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--linie);
}
.meldereihe .reakreihe { flex: none; }
.meldereihe .reak { font-size: .82rem; padding: .35rem .7rem; }
.reakreihe .reak { flex: none; }
.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);
}
/* 112 statt 72 Pixel und mit Bild: die Karte ist die letzte Einladung im
Modul, und sie stand bis zum 31.08.2026 mit einem leeren blauen Kasten da. */
.naechstes .nbild {
width: 112px; height: 70px; border-radius: 10px; flex: none;
overflow: hidden; position: relative; display: block;
background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
}
.naechstes .nbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.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;
}
/* --- Die Kurse eines Mitglieds in der Verwaltung ------------------------- */
/* Seit dem 02.09.2026 steht in der Spalte nicht mehr „unbefristet", sondern
welcher Kurs es ist. Bei zweien untereinander, deshalb Block statt Zeile. */
.vkurs { display: block; }
.vkurs + .vkurs { margin-top: .25rem; }
.vkurs.warn { color: var(--karmesin); }
/* --- Das Antwortfeld im Auftrag ------------------------------------------ */
/* Gemeldet von Thomas am 02.09.2026: „Wenn es eine solche Aufgabe gibt, dann
braucht es ein Notizfeld direkt in dieser Aufgabe." Es sitzt im Baustein und
nicht darunter, deshalb erbt es dessen Rand und setzt sich nur leicht ab. */
.antwortfeld { margin: .2rem 0 0; }
.antwortfeld textarea {
width: 100%; box-sizing: border-box;
border: 1px solid var(--linie); border-radius: 10px;
padding: .6rem .7rem; font: inherit; font-size: .95rem;
background: var(--papier); color: var(--text); resize: vertical;
}
.antwortfeld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.antwortfeld .notizfuss {
display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .45rem;
}
.antwortfeld .notizfuss .klein { flex: 1; min-width: 10rem; }
.antwortfeld button {
border: 0; border-radius: 9px; padding: .45rem .95rem; cursor: pointer;
background: var(--akzent); color: #fff; font: inherit; font-weight: 600; font-size: .88rem;
}
/* --- Der Abschluss eines Fokusthemas ------------------------------------- */
/* Gemeldet von Thomas am 02.09.2026: „Fokusthema abschließen geht total unter.
Ich habe diesen Button selber nicht wahrgenommen." Er stand als kleine graue
Schaltfläche da, wo sonst eine Karte den Weg zeigt. Jetzt trägt der Abschluss
dieselbe Form wie „Als Nächstes", nur ist er ein Formular und kein Verweis,
denn er ändert etwas. */
.abschlusskarte {
display: flex; align-items: center; gap: .9rem;
margin: 1rem 0 1.4rem; padding: .8rem 1rem;
background: var(--papier); border: 1px solid var(--linie);
border-radius: 14px; box-shadow: var(--schatten-s);
}
.abschlusskarte .nbild {
width: 112px; height: 70px; border-radius: 10px; flex: none;
overflow: hidden; position: relative; display: block;
background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
}
.abschlusskarte .nbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abschlusskarte .ntext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.abschlusskarte .ober {
font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leise-2);
}
.abschlusskarte .titel { font-weight: 600; margin-top: .15rem; }
.abschlusskarte #fussstand { margin-top: .2rem; }
.abschlusskarte .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; border: 0; cursor: pointer; font-family: inherit;
}
.abschlusskarte .knopf.hell .z { width: 17px; height: 17px; }
/* Dieselbe Karte, aber oben auf der Fokusseite und als Wegweiser: sie sagt,
was nach dem abgeschlossenen Fokusthema kommt. */
.weiterkopf { margin: 0 0 1.2rem; }
.hinweis {
display: flex; align-items: center; gap: .5rem;
margin-top: .9rem; color: var(--leise-2); font-size: .82rem;
}
.hinweis .z { width: 15px; height: 15px; }
/* --- Am Telefon: die Karte stapelt sich ---------------------------------- */
/* Thomas am 02.09.2026: „Der Text ist kaum lesbar. Vielleicht das Bild oben.
Dann der Name und dann weiter?" Nachgemessen bei 375 Punkten: die Karte ist
343 breit und traegt Bild, Text und Knopf nebeneinander. Fuer den Titel
bleibt eine Spalte, in der „Was die anderen einge-baut ha-ben" ueber fuenf
Zeilen umbricht. Am Rechner bleibt alles, wie es ist. */
@media (max-width: 640px) {
.naechstes, .abschlusskarte {
flex-direction: column; align-items: stretch; gap: .7rem; padding: .8rem;
}
.naechstes .nbild, .abschlusskarte .nbild { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.naechstes .knopf.hell, .abschlusskarte .knopf.hell {
justify-content: center; padding: .7rem 1rem;
}
}
/* --- Die rechte Leiste --------------------------------------------------- */
/* **Der Rahmen sitzt an den Kacheln und nicht an der Leiste**, seit dem
02.09.2026 abends: es sind zwei Karten geworden, und eine Karte um zwei
Karten wäre ein Rahmen zu viel. Der Ausblendknopf steht darüber, er gilt für
beide. */
.rleiste {
width: 21rem; flex: none;
position: sticky; top: calc(var(--kopfhoehe) + 1rem);
}
.rkachel {
background: var(--papier); border: 1px solid var(--linie);
border-radius: 16px; box-shadow: var(--schatten-s); overflow: hidden;
}
.rleiste > .rkopfknopf { border-bottom: 0; padding-right: .2rem; }
/* Vier Reiter statt drei, seit die Abschnitte dazugekommen sind. Bei `flex:1`
quetschte der vierte die Woerter in zwei Zeilen: aus „Abschnitte" wurde
„Abschn itte". Jetzt behaelt jeder Reiter seine Breite, und wenn sie nicht
nebeneinander passen, schiebt sich die Reihe zur Seite. */
/* **Zwei Kacheln mit je zwei Reitern**, seit dem 02.09.2026 abends. Oben
Abschnitte und Transkript, darunter Notiz und Kommentare. Zwei Wörter je
Reihe lassen wieder Platz für das Zeichen davor; bei vier Reitern in einer
Reihe stand „Abschn itte" in zwei Zeilen. */
.rkachel + .rkachel { margin-top: .7rem; }
.rreiter {
display: flex; border-bottom: 1px solid var(--linie);
overflow-x: auto; scrollbar-width: none;
}
.rreiter::-webkit-scrollbar { display: none; }
.rreiter button {
flex: none; display: flex; align-items: center; justify-content: center; gap: .35rem;
padding: .75rem .7rem; border: 0; background: none; cursor: pointer;
white-space: nowrap;
color: var(--leise-2); font: inherit; font-size: .8rem;
}
.rreiter button.an { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); }
.rreiter button b { font-weight: 600; }
.rreiter .z { width: 15px; height: 15px; }
.rtafel { padding: .9rem 1rem 1rem; }
/* Das Transkript bekommt eine eigene Höhe: sonst schiebt es die zweite Kachel
so weit nach unten, dass niemand sie mehr sieht. */
.rtafel[data-tafel="transkript"] { max-height: 22rem; overflow-y: auto; }
.tsuchzeile { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.tsuchzeile input {
flex: 1; min-width: 0; border: 1px solid var(--linie); border-radius: 999px;
padding: .4rem .8rem; font: inherit; font-size: .85rem; background: #FCFDFE;
}
.tsuchzeile span { flex: none; white-space: nowrap; }
.transkripttext mark { background: #FDECC8; color: inherit; border-radius: 3px; }
.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;
}
/* Die Art unter dem Namen, leise. Sie sagt dem Schreiber, welcher seiner
beiden Kommentare welcher ist. */
.kommentar .kart, .rkomm .kart {
margin: -.15rem 0 .35rem; font-size: .75rem; color: var(--leise-2);
}
/* Freigabe der Kommentare, seit dem 01.09.2026. Der Knopf steht am Kommentar
selbst und nur in der Redaktionsansicht: wer liest, entscheidet an derselben
Stelle. Er ist bewusst klein und ruhig, er ist ein Handgriff und keine
Aufforderung. */
.kommentar .kfreiform { margin: .4rem 0 0; }
.kommentar .kfreiknopf {
font: inherit; font-size: .82rem; font-weight: 600;
padding: .25rem .7rem; border: 1px solid var(--navy);
border-radius: 999px; background: var(--navy); color: #fff; cursor: pointer;
}
.kommentar .kfreiknopf:hover { filter: brightness(1.1); }
/* Ist er schon frei, wird aus dem Knopf ein Rueckweg: gleiche Groesse, aber
ohne Fuellung, damit er nicht zum zweiten Mal zum Klicken einlaedt. */
.kommentar .kfreiknopf.ist-frei {
background: transparent; color: var(--leise); border-color: var(--linie);
}
.rkomm .kart { display: block; margin: 0 0 .15rem; }
/* Beide Handgriffe in einer Zeile: untereinander sahen sie aus wie zwei
getrennte Angebote. */
.kommentar .kaendern, .kommentar .wegform { display: inline-block; margin-right: .8rem; }
.kaendern[open] { display: block; margin-right: 0; }
.kaendern > summary {
list-style: none; cursor: pointer; display: inline-block;
font-size: .78rem; color: var(--leise-2); padding: .1rem 0;
}
.kaendern > summary::-webkit-details-marker { display: none; }
.kaendern > summary:hover { color: var(--akzent); }
.kaenderform { display: flex; flex-direction: column; gap: .4rem; margin: .3rem 0 .5rem; }
.kaenderform textarea {
width: 100%; border: 1px solid var(--linie); border-radius: 10px;
padding: .5rem .6rem; font: inherit; font-size: .9rem; background: #FCFDFE;
color: var(--text); resize: vertical;
}
.kaenderform button {
align-self: start; border: 0; border-radius: 9px; padding: .35rem .9rem;
background: var(--akzent); color: #fff; font: inherit; font-size: .8rem;
font-weight: 600; cursor: pointer;
}
/* --- Der Fuss des Moduls ------------------------------------------------- */
.modulfuss {
display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
margin: 1rem 0 1.4rem;
}
/* Das Formular um den Fertig-Knopf darf die Zeile nicht auseinanderziehen. */
.fertigform { margin: 0; display: inline-flex; }
.fertigform .knopf.rand { cursor: pointer; font: inherit; font-size: .9rem; }
#fussstand { max-width: 34rem; line-height: 1.5; }
/* --- Die Abschnitte in der rechten Leiste -------------------------------- */
/* **Jede Zeile traegt ihr Zeichen, auch die offene**, seit dem 02.09.2026.
Vorher stand der Haken nur an gelesenen Abschnitten, alle anderen begannen
an der Textkante: der Unterschied war da, aber er sah nicht nach Zustand
aus, sondern nach Einzug. Ein leerer Kreis sagt, dass hier etwas fehlt. */
.rabschnitt {
display: block; position: relative; padding: .5rem .1rem .5rem 1.45rem;
border-bottom: 1px solid var(--linie);
color: var(--text); text-decoration: none; font-size: .9rem;
}
.rabschnitt:last-child { border-bottom: 0; }
.rabschnitt:hover { color: var(--akzent); }
.rabschnitt::before {
content: "○"; position: absolute; left: 0; top: .5rem;
color: var(--leise-2); font-size: .95rem; line-height: 1.4;
}
.rabschnitt.gesehen::before { content: "✓"; color: #1B7A4B; }
.rabschnitt.gesehen { color: var(--leise); }
/* Der Zaehler ueber der Liste. Er ist kein Titel, er ist eine Auskunft. */
.rstand {
margin: 0 0 .6rem; font-size: .8rem; line-height: 1.5; color: var(--leise);
border-bottom: 1px solid var(--linie); padding-bottom: .6rem;
}
.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); }
/* Der Weg zurueck steht oben und sieht anders aus als die zwei Spruenge
darunter: er tut etwas mit der Leiste, sie fuehren in sie hinein. Die Linie
trennt beides, sonst waeren es drei gleiche Kreise. */
.randstreifen .zurueckkn {
background: var(--navy); color: #fff;
margin-bottom: .35rem; padding-bottom: 0;
}
.randstreifen .zurueckkn:hover { background: var(--akzent); color: #fff; }
@media (max-width: 900px) {
/* **`align-items: stretch` ist der eigentliche Fund.** Die Regel darueber
setzt `flex-start`, und in einer Spalte heisst das: jedes Kind wird so
breit wie sein Inhalt. Die Textspalte mass dann 413 Pixel in einem Kasten
von 343, und der Text stand rechts ausserhalb des Bildschirms. **Ohne
Querbalken**, weil weiter oben etwas abschneidet: der Inhalt war nicht
nur verschoben, er war unerreichbar. Am 31.08.2026 bei 375 Pixeln
gemessen. */
.zwei { flex-direction: column; align-items: stretch; }
.linkespalte { max-width: none; width: 100%; }
.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; }
/* Seit dem 31.08.2026 nur noch „KI" in einem kleinen Kreis. „KI-generiert"
war ein Wortband quer ueber der Bildecke und zog mehr Aufmerksamkeit auf
sich als das Bild. Der Hinweis muss da sein, nicht laut sein. */
.kiecke {
position: absolute; right: .25rem; bottom: .25rem;
width: 1rem; height: 1rem; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(15,32,50,.55); color: #fff;
font-size: .48rem; font-weight: 600; letter-spacing: .02em;
}
/* Der Platzhalter, solange kein Bild da ist. Er sieht absichtlich nicht wie
ein Foto aus: einer, den man fuer fertig halten kann, bleibt fuer immer. */
/* **Genau so genau wie `.modul .mbild`, sonst verliert die Regel.** `.modul
.mbild` setzt `display: block` und zaehlt zwei Klassen, `.platzhalter` nur
eine: die Buchstaben standen deshalb oben links statt in der Mitte. Am
31.08.2026 am Telefon gesehen, es galt am Schreibtisch genauso. */
.mbild.platzhalter, .fbild.platzhalter, .kbild.platzhalter,
.nbild.platzhalter, .mkbild.platzhalter, .nkbild.platzhalter {
display: flex; align-items: center; justify-content: center;
}
.phkurz {
color: rgba(255,255,255,.82); font-weight: 700;
letter-spacing: .08em; font-size: 1.05rem;
}
.nbild .phkurz, .mkbild .phkurz, .nkbild .phkurz { font-size: .8rem; }
.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: auto .75rem .2rem; 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; }
/* **Der Kreis schneidet links zu, nicht mittig.** Die Kursbilder folgen alle
demselben Muster: links etwa ein Drittel helles Foto, rechts die
abgedunkelte Flaeche mit „Kurs" und dem Titel. Mittig geschnitten traf der
32-Pixel-Kreis genau den Text, und den kann dort niemand lesen. Links trifft
er die Menschen. Am 31.08.2026 an `bild-kurs-bestandskunden.webp`
nachgesehen: 1200 x 509, die dunkle Flaeche beginnt bei etwa 420. */
.seite .bildkreis img {
width: 100%; height: 100%; object-fit: cover; object-position: left center;
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; }
/* Am Telefon klebt die Fußleiste fest unten. Zwei Sachen von heute stießen
dagegen: der Zugangshinweis klebte darunter und war verdeckt, und die
Rechtsfußzeile steht außerhalb von `.inhalt` und bekam deren Ausgleich
nicht ab. Beides am 31.08.2026 gefunden, bevor es jemand am Gerät sah. */
.angebote { position: static; background: none; padding-top: 0; }
/* 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); }
/* Die Schritte im Block „Auf den Startbildschirm", seit dem 01.09.2026. Eine
nummerierte Folge und keine Aufzaehlung: hier gilt die Reihenfolge, und wer
bei Schritt zwei anfaengt, findet den Punkt nicht. */
.pf-schritte { margin: .2rem 0 0; padding-left: 1.3rem; color: var(--text); font-size: .95rem; }
.pf-schritte li { margin: .35rem 0; }
.pf-schritte b { color: var(--navy); }
.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); }
/* Bei 380 Punkten und darunter weicht die kleine Zeile im Kopf. Sie ist der
Zusatz, nicht der Name, und der Platz gehoert dem Namen. */
@media (max-width: 380px) {
.appkopf .by,
.appkopf .teiler { display: none; }
/* Und das Zeichen selbst wird kleiner. Bei 320 Punkten ist es 91 breit und
hat 84 Platz, gemessen. Ein Bild mit fester Hoehe und `width:auto` kann
nicht schrumpfen, es schiebt stattdessen den Kopf auf. */
.appkopf .hubmarke img { height: 18px; }
}
/* =============================================================================
NOTIZEN, LESEZEICHEN, FOKUSTHEMA UND UNTERLAGEN
-----------------------------------------------------------------------------
Ergaenzt am 31.08.2026. Notizen und Lesezeichen standen bis dahin als zwei
Aufzaehlungen auf einer Seite. Eine Aufzaehlung ist die richtige Form fuer
ein Inhaltsverzeichnis und die falsche fuer etwas, das man selbst
geschrieben hat.
============================================================================= */
/* --- Lesezeichen ---------------------------------------------------------- */
.merkliste { display: grid; gap: .7rem; }
.merkkarte {
display: flex; align-items: center; gap: .9rem;
padding: .75rem .9rem; border-radius: 14px;
background: var(--papier); border: 1px solid var(--linie);
border-left: 3px solid var(--karmesin);
text-decoration: none; color: var(--text);
}
.merkkarte:hover { box-shadow: var(--schatten-s); }
.merkkarte .mkbild {
width: 56px; height: 56px; border-radius: 10px; flex: none;
background: var(--sand); overflow: hidden; position: relative; display: block;
}
.merkkarte .mkbild img { width: 100%; height: 100%; object-fit: cover; }
.merkkarte .mktext { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.merkkarte .mktitel { font-weight: 600; }
/* --- Notizen -------------------------------------------------------------- */
.notizfuhr { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.notizkarte {
display: flex; align-items: flex-start; gap: .9rem;
padding: .9rem 1rem; margin: 0 0 .7rem; border-radius: 14px;
background: var(--papier); border: 1px solid var(--linie);
border-left: 3px solid var(--karmesin);
cursor: pointer;
}
/* Das Haekchen steht vorn und ist gross genug fuer einen Daumen. */
.notizkarte > input[type="checkbox"] { width: 18px; height: 18px; margin-top: .25rem; flex: none; }
.notizkarte .nkbild {
width: 56px; height: 56px; border-radius: 10px; flex: none;
background: var(--sand); overflow: hidden; position: relative; display: block;
}
.notizkarte .nkbild img { width: 100%; height: 100%; object-fit: cover; }
.notizkarte .nktext { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; }
.notizkarte .nktitel { font-weight: 600; }
.notizkarte .nkwas { white-space: pre-wrap; margin: .2rem 0; }
/* --- Das Fokusthema als eigene Seite -------------------------------------- */
/* Den Verweis `.fseite` gab es bis zum 31.08.2026: ein Winkelzeichen neben dem
Titel, das auf die eigene Seite fuehrte. Es rutschte bei langen Titeln in die
naechste Zeile und stand dort allein herum. Seine Aufgabe hat die Pille
„Loslegen" uebernommen, die ohnehin dorthin fuehrt. */
.fokus.einzeln.offen { border: 0; background: none; box-shadow: none; padding: 0; }
/* --- Abschlüsse ----------------------------------------------------------- */
/* Das Offene steht leise unter den Zertifikaten. Es ist Arbeitsstand und kein
Ergebnis, und so soll es aussehen. */
.leiseblock { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.leiseblock h3 { font-size: 1rem; margin: 0 0 .5rem; color: var(--leise); }
.offenliste > summary {
list-style: none; cursor: pointer; display: inline-block;
font-size: .82rem; color: var(--leise-2); padding: .2rem 0;
}
.offenliste > summary::-webkit-details-marker { display: none; }
.offenliste > summary:hover { color: var(--akzent); }
/* --- Wissenswünsche ------------------------------------------------------- */
.wfrage { font-size: .8rem; color: var(--leise-2); margin: .7rem 0 -.5rem; font-weight: 600; }
/* --- Unterlagen ----------------------------------------------------------- */
.unterlagenkopf {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
flex-wrap: wrap; margin-bottom: 1rem;
}
.unterlagenkopf h1 { margin: .1rem 0; }
.unterlagenkopf .ober {
font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--leise-2);
}
.blattschau {
width: 100%; height: min(78vh, 900px); border: 1px solid var(--linie);
border-radius: 14px; background: var(--sand); display: block;
}
.blattschau.klein { height: 30rem; }
.unterlage { margin: .2rem 0 0; }
.unterlagenfuss {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem;
}
.unterlagenfuss span { flex: 1; min-width: 8rem; }
/* --- Die Übersicht der Unterlagen ---------------------------------------- */
/* Ergänzt am 02.09.2026. Sie ersetzt eine Tabelle mit drei Spalten, in der
jede Zeile gleich aussah und keine etwas zeigte. **Das Bild ist nicht
Schmuck, es ist die Wiedererkennung:** wer die Unterlage sucht, erinnert
sich an das Modul, in dem sie vorkam, und dessen Bild hat er schon zweimal
gesehen.
DREI SPALTEN AB 46rem, ZWEI DARUNTER, EINE AM TELEFON. `auto-fill` mit
`minmax` regelt das von selbst und braucht keine Abfrage je Breite.
DIE KACHEL IST EIN SPRUNG UND KEINE NEUE SEITE. Sie führt zu dem Baustein
weiter unten, in dem die Unterlage samt Beschreibung und Laden-Knopf steht.
Eine neue Seite wäre ein Ortswechsel für eine Sache, die schon da ist. */
.ukacheln {
display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: .9rem; margin: 1.1rem 0 .4rem;
}
.ukachel {
display: flex; flex-direction: column; text-decoration: none; color: var(--text);
background: var(--papier); border: 1px solid var(--linie);
border-radius: 14px; overflow: hidden; box-shadow: var(--schatten-s);
transition: box-shadow .15s, transform .15s, border-color .15s;
}
.ukachel:hover {
box-shadow: var(--schatten-m); transform: translateY(-2px);
border-color: #C8D4E4;
}
/* `aspect-ratio` hält den Platz frei, bevor das Bild da ist. Ohne sie springt
die ganze Kachelwand beim Laden, und zwar in der Reihenfolge, in der die
Bilder ankommen. Dieselbe Regel wie am Video, siehe `.mvideo`. */
.ukachel .ubild {
display: block; aspect-ratio: 16 / 9; width: 100%;
background: linear-gradient(140deg, var(--navy), var(--navy-tief));
}
.ukachel .ubild .kiecke { display: none; } /* zu klein, die Ecke wäre Krach */
.ukachel .urumpf {
display: flex; flex-direction: column; gap: .3rem;
padding: .75rem .85rem .85rem;
}
/* Der Name trägt kein „.pdf". Die Endung steht unten bei der Größe, dort ist
sie eine Auskunft, und oben wäre sie Rauschen. */
.ukachel .uname {
font-weight: 600; line-height: 1.3; font-size: .98rem;
/* Deutsche Komposita brechen sonst aus der Kachel heraus, gemessen bei
320 px. Siehe die Regel im Gedächtnis zu langen Wörtern. */
overflow-wrap: anywhere;
}
.ukachel .uwofuer {
font-size: .84rem; line-height: 1.4; color: var(--leise);
}
.ukachel .uher {
font-size: .76rem; color: var(--leise-2); margin-top: .15rem;
overflow-wrap: anywhere;
}
@media (prefers-color-scheme: dark) {
.ukachel { background: #16202C; border-color: #2A3846; }
.ukachel:hover { border-color: #3A4A5C; }
}
@media (max-width: 640px) {
.blattschau { height: 60vh; }
.blattschau.klein { height: 20rem; }
.notizkarte .nkbild, .merkkarte .mkbild { display: none; }
}
/* --- Die Marke auf der Anmeldeseite -------------------------------------- */
/* Ergaenzt am 31.08.2026. Links das Zeichen des Kunden, daneben das
WissensHub-Zeichen mit „by tkohns." darin. **Der Kunde steht vorn**, es ist
seine Akademie. Der Kasten ist dunkel, weil beide Zeichen im Hub nur in der
Fassung fuer dunklen Grund liegen: eine zweite Fassung je Kunde waere eine
Datei, die fast nie gebraucht wird. */
.anmeldemarke {
display: flex; align-items: center; gap: 1.2rem;
margin: 0 0 1.4rem; padding: 1.4rem 1.5rem;
background: var(--navy-tief, #16273D); border-radius: 14px;
}
/* **Der Kunde gross, wir klein.** Es ist der WissensHub seines Kunden, und auf
der Anmeldeseite ist das die erste Auskunft: hier bin ich richtig. Umgekehrt
zum Kopf hinter der Anmeldung, wo beide klein sind und der Platz dem Inhalt
gehoert. */
.anmeldemarke .kundenzeichen { display: block; height: 46px; width: auto; }
.anmeldemarke .produktbild { display: block; height: 26px; width: auto; opacity: .8; }
.anmeldemarke .teiler { width: 1px; height: 40px; background: rgba(255,255,255,.22); }
@media (max-width: 480px) {
.anmeldemarke { gap: .9rem; padding: 1.1rem; }
.anmeldemarke .kundenzeichen { height: 34px; }
.anmeldemarke .produktbild { height: 20px; }
.anmeldemarke .teiler { height: 30px; }
}
/* =============================================================================
Die Fußzeile mit den Pflichtangaben. Schmal und leise: sie ist eine Pflicht,
keine Einladung. Sie steht unter allem, auch unter der eingeklappten Leiste,
und bleibt am unteren Rand, wenn eine Seite kürzer ist als das Fenster.
**Das stimmt erst seit dem 01.09.2026.** Bis dahin füllte `.hubrumpf` das ganze
Fenster und schob sie um ihre eigene Höhe darunter. Der Satz stand hier trotzdem,
ein Jahr lang unbewiesen. Jetzt zieht `--fusshoehe` sie ab.
========================================================================== */
.rechtsfuss {
display: flex; flex-wrap: wrap; gap: 1.2rem;
justify-content: center; align-items: center;
padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--linie);
background: var(--papier);
font-size: .82rem;
}
.rechtsfuss a { color: var(--leise-2); text-decoration: none; }
.rechtsfuss a:hover, .rechtsfuss a:focus-visible { color: var(--akzent); text-decoration: underline; }
/* --- Nachtrag: die Rückmeldung am Telefon --------------------------------- */
/* **Steht hier am Ende und nicht oben im Telefonblock.** Dort stand sie
zuerst, und die allgemeine Regel `\.reakreihe { flex-wrap: nowrap }` kommt
im Stilblatt danach und gewann. Gemessen: 303 Pixel sichtbar, 712 Pixel
Inhalt, also zwei von fünf Knöpfen. Am 31.08.2026. */
@media (max-width: 640px) {
.reakreihe { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 860px) {
/* Die Fußleiste am Telefon steht fest über allem. Ohne diesen Ausgleich liegt die
Fußzeile genau darunter und ist unsichtbar: am 31.08.2026 gemessen, sie saß bei
746 bis 800, die Leiste begann bei 736. **Diese Regel muss hinter der Grundregel
stehen**, sonst gewinnt die spätere und der Ausgleich fällt still weg. Genau das
war der erste Versuch. */
.rechtsfuss { padding-bottom: calc(5.9rem + env(safe-area-inset-bottom)); }
/* Mit dem Ausgleich ist sie 132 px hoch statt 54. Wer die Zahl oben ändert und
diese vergisst, schiebt sie am Telefon wieder unter die Kante. */
:root { --fusshoehe: 134px; }
}
/* --- Der Weg nach draussen ----------------------------------------------- */
/* Seit dem 02.09.2026 fuehrt ein Verweis aus der Leiste erst auf eine Seite im
Hub. **Der Hinweis ist absichtlich gross**: der kleine Pfeil neben dem Wort
hat niemanden aufgehalten. */
.hinausseite { max-width: 54rem; }
.hkopf { margin-bottom: 1.4rem; }
.hueber {
margin: 0 0 .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--karmesin);
}
.hkopf h1 { margin-bottom: .4rem; }
/* Das Bild ist der Blickfang und führt selbst hinaus: wer auf eine Vorschau
klickt, will die Sache sehen und nicht den Knopf suchen. */
.hbild {
display: block; border-radius: var(--rundung); overflow: hidden;
border: 1px solid var(--linie); box-shadow: var(--schatten-m); margin-bottom: 1.4rem;
}
.hbild img { display: block; width: 100%; height: auto; }
.hbild:hover { box-shadow: 0 6px 12px rgba(20,41,63,.10), 0 26px 60px rgba(20,41,63,.14); }
.hpunkte {
display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: .8rem; margin-bottom: 1.6rem;
}
.hpunkt {
background: var(--papier); border: 1px solid var(--linie); border-left: 3px solid var(--karmesin);
border-radius: var(--rundung); padding: .85rem 1rem;
}
.hpunkt .hober {
display: block; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--leise-2); margin-bottom: .25rem;
}
.hpunkt b { display: block; font-size: .98rem; margin-bottom: .2rem; }
.hpunkt span:not(.hober) { display: block; font-size: .88rem; line-height: 1.55; color: var(--leise); }
.hraus { margin-bottom: 1.6rem; }
.hraus p { margin: .6rem 0 0; }
.quizknopf.gross { font-size: 1.05rem; padding: .95rem 1.6rem; }
.hinausbox { margin-bottom: 0; border-left-color: var(--karmesin); }
.hinausbox b { display: block; font-size: 1.15rem; margin-bottom: .35rem; color: var(--karmesin); }
.hinausbox p { margin: 0 0 .5rem; line-height: 1.6; }
.hinausziel {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .9rem; color: var(--leise); word-break: break-all;
}
.hinaustun { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
/* --- Die Begrüßung beim ersten Besuch ------------------------------------ */
/* Seit dem 02.09.2026. Sie nimmt dieselben Karten wie das Profil, damit
niemand zweimal dasselbe Formular in zwei Gestalten sieht. Neu ist nur die
Nummer vor der Überschrift und die Knopfzeile am Fuß. */
.willkommen { max-width: 52rem; }
.willkommen h1 { margin-bottom: .3rem; }
.willkommen .lead { margin-bottom: 1.6rem; }
.willkommen .pf-karte { margin-bottom: 1.2rem; }
.willkommen h2 { display: flex; align-items: center; gap: .6rem; }
.wnr {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; flex: none; border-radius: 50%;
background: var(--navy); color: #fff; font-size: .85rem; font-weight: 700;
}
/* Beide Knöpfe gleichwertig nebeneinander. „Später ausfüllen" ist kein
Ausweichen, sondern eine der zwei Antworten: die Angaben sind freiwillig,
und ein grauer Verweis darunter hätte das Gegenteil behauptet. */
.wtun { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.wtun .knopf.rand { cursor: pointer; font: inherit; font-size: .9rem; }
/* --- Die freie Notiz ------------------------------------------------------ */
/* Seit dem 02.09.2026. Sie gehört zu keinem Modul, trägt also kein Bild und
keinen Titel: dort steht ihr Text selbst, und ein Klick darauf macht ihn
änderbar. */
.neuenotiz {
background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rundung);
padding: .9rem 1rem; margin: 0 0 1.6rem; box-shadow: var(--schatten-s);
}
.neuenotiz label { display: block; margin-bottom: .35rem; }
.neuenotiz textarea,
.freiform textarea {
width: 100%; border: 1px solid var(--linie); border-radius: 11px;
padding: .7rem .8rem; font: inherit; font-size: .95rem; line-height: 1.6;
background: #FCFDFE; color: var(--text); resize: vertical;
}
.neuenotiz textarea::placeholder { color: var(--leise-2); font-style: italic; }
.nnfuss { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.nnfuss span { flex: 1; min-width: 12rem; }
.freiform { margin-top: .7rem; }
.freiform button {
border: 1px solid var(--linie); border-radius: 10px; background: var(--papier);
padding: .4rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; color: var(--text);
}
.freiform .wegknopf { color: var(--karmesin); border-color: transparent; }
.freiform .wegknopf:hover { border-color: var(--karmesin); }
.notizkarte.frei { align-items: flex-start; }
.freiaendern > summary { cursor: pointer; list-style: none; }
.freiaendern > summary::-webkit-details-marker { display: none; }
.freiaendern > summary:hover .nkwas { color: var(--akzent); }
.freiaendern[open] > summary .nkwas { color: var(--leise); }
.nkaendern { display: inline-block; margin-top: .35rem; text-decoration: underline; }
.freiaendern[open] .nkaendern { display: none; }
/* --- Zu viele Geräte gleichzeitig ---------------------------------------- */
/* Die Sperrseite steht ohne Rahmen, wie die Anmeldung: eine Seitenleiste voller
Verweise, die alle auf dieselbe Sperre führen, wäre ein Versprechen, das die
Seite nicht halten kann. */
.geraeteliste { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.geraeteliste li {
padding: .7rem .9rem; border: 1px solid var(--linie); border-radius: var(--rundung);
background: var(--papier); margin-bottom: .5rem;
}
.geraeteliste li span { display: block; margin-top: .15rem; }