/* lab.boothtml.com — eine Datei fuer die oeffentliche Seite und den
Produktionsbereich. Dunkel, ruhig, hoher Kontrast. Zustaende tragen ihre
Bedeutung nie allein in der Farbe (Haken, Rahmen, Wortmarke), damit die
Seite auch auf einer Schwarzweissanzeige lesbar bleibt. */
/* Dunkel ist die Vorgabe. Hell kommt entweder aus der Systemeinstellung
oder aus der Wahl des Lesers (data-thema am -Element, gemerkt in
localStorage). Beide Paletten halten den Kontrast hoch genug, dass die
Seite auch auf einer Schwarzweissanzeige lesbar bleibt. */
:root {
--grund: #0b1220;
--flaeche: #131c2e;
--flaeche2: #1a2540;
--rand: #26334f;
--text: #e6ecfa;
--gedaempft: #9aabc9;
--akzent: #4f8cff;
--warm: #f5a623;
--gut: #35c48a;
--kopfgrund: #101a2b;
--schatten: none;
--radius: 10px;
color-scheme: dark;
}
:root[data-thema="hell"] {
--grund: #ffffff;
--flaeche: #f5f7fc;
--flaeche2: #e9eef8;
--rand: #ccd6e8;
--text: #101828;
--gedaempft: #4d5b78;
--akzent: #1b56c4;
--warm: #9a5b00;
--gut: #12704a;
--kopfgrund: #f5f7fc;
--schatten: 0 1px 2px rgba(16, 24, 40, .06);
color-scheme: light;
}
@media (prefers-color-scheme: light) {
:root:not([data-thema="dunkel"]) {
--grund: #ffffff;
--flaeche: #f5f7fc;
--flaeche2: #e9eef8;
--rand: #ccd6e8;
--text: #101828;
--gedaempft: #4d5b78;
--akzent: #1b56c4;
--warm: #9a5b00;
--gut: #12704a;
--kopfgrund: #f5f7fc;
--schatten: 0 1px 2px rgba(16, 24, 40, .06);
color-scheme: light;
}
}
/* Umschalter im Kopf */
.thema {
background: var(--flaeche2); color: var(--text); border: 1px solid var(--rand);
border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .85rem;
cursor: pointer; line-height: 1;
}
.thema:hover { border-color: var(--akzent); }
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--grund);
color: var(--text);
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
line-height: 1.6;
-webkit-text-size-adjust: 100%;
}
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .fest { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; }
/* --- Kopf und Fuss --- */
.kopf {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .9rem clamp(1rem, 4vw, 3rem);
border-bottom: 1px solid var(--rand);
background: var(--kopfgrund);
position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px);
}
.marke { color: var(--text); font-weight: 700; letter-spacing: -.01em; }
.marke .rad { color: var(--akzent); }
.kopf nav { display: flex; gap: 1.2rem; font-size: .95rem; }
.fuss {
margin-top: 4rem; padding: 2rem clamp(1rem, 4vw, 3rem);
border-top: 1px solid var(--rand); color: var(--gedaempft); font-size: .9rem;
}
.klein { font-size: .85em; color: var(--gedaempft); }
/* --- Grundraster --- */
.huelle { max-width: 62rem; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem); }
.huelle.schmal { max-width: 46rem; }
.huelle.breit { max-width: 92rem; }
.held { max-width: 62rem; margin: 0 auto; padding: 3.5rem clamp(1rem, 4vw, 3rem) 1rem; }
.held h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 .4rem; letter-spacing: -.02em; }
.held .unter { font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--gedaempft); margin: 0 0 1.4rem; }
.stand {
display: inline-block; padding: .45rem .8rem; border: 1px solid var(--rand);
border-radius: 999px; background: var(--flaeche); font-size: .9rem;
}
/* --- Module und Folgenliste --- */
.modul { max-width: 62rem; margin: 2.5rem auto 0; padding: 0 clamp(1rem, 4vw, 3rem); }
.modul h2 { font-size: 1.35rem; margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .7rem; }
.modulnr {
font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--akzent); border: 1px solid var(--rand); border-radius: 999px; padding: .15rem .6rem;
}
.modulkurz { color: var(--gedaempft); margin: 0 0 1rem; }
.folgenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.folgenliste a {
display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 1rem;
padding: .8rem 1rem; background: var(--flaeche); border: 1px solid var(--rand);
border-radius: var(--radius); color: var(--text);
}
.folgenliste a:hover { background: var(--flaeche2); text-decoration: none; border-color: var(--akzent); }
.folgenliste .nr { font-family: monospace; color: var(--gedaempft); font-size: 1.05rem; }
.folgenliste .titelzeile { display: flex; flex-direction: column; }
.folgentitel { font-weight: 600; }
.folgenkurz { color: var(--gedaempft); font-size: .9rem; }
.folgenliste .marker { font-size: .8rem; color: var(--gedaempft); white-space: nowrap; }
.folgenliste li.fertig .marker { color: var(--gut); font-weight: 600; }
.folgenliste li.offen a { border-style: dashed; }
/* --- Folgenseite --- */
.brotkrumen { color: var(--gedaempft); font-size: .9rem; margin: 0 0 .5rem; }
article h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 .3rem; letter-spacing: -.02em; }
article .unter { color: var(--gedaempft); margin: 0 0 1.5rem; font-size: 1.05rem; }
.video { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rand); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hinweis {
padding: .9rem 1.1rem; border-left: 4px solid var(--warm); background: var(--flaeche);
border-radius: 0 var(--radius) var(--radius) 0; color: var(--gedaempft);
}
.kasten {
margin: 1.6rem 0; padding: 1.1rem 1.3rem; background: var(--flaeche);
border: 1px solid var(--rand); border-radius: var(--radius);
}
.kasten h2 { font-size: 1.05rem; margin: 0 0 .7rem; letter-spacing: .02em; }
.haken { list-style: none; padding: 0; margin: 0; }
.haken li { padding-left: 1.6rem; position: relative; margin: .35rem 0; }
.haken li::before { content: "✓"; position: absolute; left: 0; color: var(--gut); font-weight: 700; }
.befehle { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.befehle li { display: flex; gap: .6rem; align-items: center; justify-content: space-between; background: var(--grund); border: 1px solid var(--rand); border-radius: 6px; padding: .45rem .6rem; }
.befehle code { font-size: .88rem; overflow-x: auto; white-space: pre; }
.kopieren {
background: var(--flaeche2); color: var(--text); border: 1px solid var(--rand);
border-radius: 6px; padding: .25rem .6rem; font-size: .78rem; cursor: pointer; white-space: nowrap;
}
.kopieren:hover { border-color: var(--akzent); }
.kopieren.fertig::after { content: " ✓"; color: var(--gut); }
.kasten.uebung { border-left: 4px solid var(--warm); }
.kasten.uebung h2 { color: var(--warm); }
.begriffe { margin: 0; }
.begriffe dt { font-weight: 600; color: var(--akzent); margin-top: .6rem; }
.begriffe dd { margin: 0 0 .2rem; color: var(--text); }
.kapitel { list-style: none; padding: 0; margin: 0; font-family: monospace; font-size: .9rem; }
.folienlink { margin: 2rem 0; }
.blaettern { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rand); font-size: .95rem; }
.blaettern.prod { max-width: 92rem; margin: 1rem auto 3rem; padding: 1.2rem clamp(1rem, 4vw, 3rem) 0; }
/* --- Fliesstext aus Markdown --- */
.fliesstext h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
.fliesstext h3 { font-size: 1.08rem; margin: 1.5rem 0 .4rem; color: var(--akzent); }
.fliesstext p { margin: .8rem 0; }
.fliesstext ul, .fliesstext ol { padding-left: 1.3rem; }
.fliesstext li { margin: .3rem 0; }
.fliesstext code { background: var(--flaeche2); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.fliesstext pre { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; overflow-x: auto; }
.fliesstext pre code { background: none; padding: 0; }
.fliesstext blockquote { margin: 1rem 0; padding: .1rem 1rem; border-left: 4px solid var(--akzent); background: var(--flaeche); color: var(--gedaempft); }
.fliesstext table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .93rem; }
.fliesstext th, .fliesstext td { border: 1px solid var(--rand); padding: .45rem .6rem; text-align: left; }
.fliesstext th { background: var(--flaeche); }
.knopf {
display: inline-block; background: var(--akzent); color: #06101f; font-weight: 600;
border: 0; border-radius: 8px; padding: .55rem 1.1rem; cursor: pointer; font-size: .95rem;
}
.knopf:hover { text-decoration: none; filter: brightness(1.08); }
/* ====================== Produktionsbereich ====================== */
.prod .kopf { background: var(--kopfgrund); }
.board { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 62rem) { .board { grid-template-columns: 1fr; } }
.fortschrittkarte, .notizkarten {
background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.2rem 1.4rem;
}
.fortschrittkarte h1 { font-size: 1.5rem; margin: 0 0 .8rem; }
.balken { height: 8px; background: var(--grund); border: 1px solid var(--rand); border-radius: 999px; overflow: hidden; min-width: 90px; }
.balken.gross { height: 14px; }
.balken i { display: block; height: 100%; background: var(--akzent); }
.zaehler { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .9rem; padding: 0; margin: 1rem 0 0; font-size: .85rem; color: var(--gedaempft); }
.zaehler b { color: var(--text); font-size: 1rem; }
.notizkarten h2 { font-size: .95rem; margin: 0 0 .5rem; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .1em; }
.notizkarten h2 + ul { margin-bottom: 1.2rem; }
.kachelliste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.kachelliste a { display: inline-block; padding: .35rem .7rem; background: var(--flaeche2); border: 1px solid var(--rand); border-radius: 999px; font-size: .85rem; }
.modulblock { margin-top: 2rem; }
.modulblock h2 { font-size: 1.05rem; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .08em; }
.tafel { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tafel th { text-align: left; font-weight: 500; color: var(--gedaempft); font-size: .8rem; padding: .3rem .5rem; border-bottom: 1px solid var(--rand); }
.tafel td { padding: .5rem; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.tafel td.nr { font-family: monospace; color: var(--gedaempft); }
.tafel td.mitte { text-align: center; }
.zeilentitel { display: block; font-weight: 600; }
.tafel .klein { display: block; }
.statuswahl, .prod select, .prod input, .prod textarea {
background: var(--grund); color: var(--text); border: 1px solid var(--rand);
border-radius: 6px; padding: .4rem .5rem; font-size: .9rem; font-family: inherit; width: 100%;
}
.statuswahl { min-width: 9rem; }
.prod textarea { line-height: 1.5; resize: vertical; }
.prod textarea.fest { font-family: "JetBrains Mono", Consolas, monospace; font-size: .86rem; }
.prod input:focus, .prod textarea:focus, .prod select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.neuefolge { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rand); }
.reihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
.reihe label { flex: 1 1 10rem; }
.prod label { display: block; margin: .7rem 0; font-size: .85rem; color: var(--gedaempft); }
.prod label input, .prod label textarea, .prod label select { margin-top: .25rem; color: var(--text); }
.hilfe { font-size: .8rem; color: var(--gedaempft); font-weight: 400; }
.meldung { min-height: 1.4rem; font-size: .9rem; }
.meldung.fehler { color: var(--warm); }
/* Editor */
.editorkopf {
position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between;
align-items: center; gap: 1rem; flex-wrap: wrap;
padding: .7rem clamp(1rem, 3vw, 2rem); background: var(--kopfgrund); border-bottom: 1px solid var(--rand);
}
.editorkopf .links, .editorkopf .rechts { display: flex; align-items: center; gap: 1rem; }
.editorkopf .nr { font-family: monospace; color: var(--gedaempft); }
.editorkopf .stand { border: 0; background: none; color: var(--gedaempft); font-size: .85rem; padding: 0; }
.editorkopf .stand.geaendert { color: var(--warm); }
.editorkopf .stand.gesichert { color: var(--gut); }
.editorgitter {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
max-width: 100rem; margin: 0 auto; padding: 1.2rem clamp(1rem, 3vw, 2rem);
}
@media (max-width: 68rem) { .editorgitter { grid-template-columns: 1fr; } }
.spalte { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.feldkasten { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.2rem; }
.feldkasten h2 { font-size: .95rem; margin: 1.1rem 0 .3rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gedaempft); }
.feldkasten h2:first-child { margin-top: 0; }
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .8rem; }
button.mini {
background: var(--flaeche2); color: var(--text); border: 1px solid var(--rand);
border-radius: 6px; padding: .3rem .7rem; font-size: .8rem; cursor: pointer;
}
button.mini:hover { border-color: var(--akzent); }
.zaehler[data-fuer] { float: right; font-family: monospace; }
.zaehler.zuviel { color: var(--warm); font-weight: 700; }
textarea.gross { min-height: 30rem; }
.checkliste { margin-top: .8rem; font-size: .88rem; }
.checkliste summary { cursor: pointer; color: var(--akzent); }
.checkliste ul { padding-left: 1.2rem; color: var(--gedaempft); }
.notizgitter { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 68rem) { .notizgitter { grid-template-columns: 1fr; } }
.vorschau { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.3rem; overflow-x: auto; }