/* Cockpit-Layout aus MomentsCount (Stand 13.11.2026) 1 Grundlayout + dunkles Thema, 2 helles Thema (html[data-thema=hell]), 3 Farbkonzept-Karten, 4 Heute-Kacheln und Kennzahlen, 5 Bearbeiten-Fenster (.bm). */ /* ── 1 Grundlayout, dunkel ── */ /* Dunkel, weil es ein Werkzeug ist und kein Produkt: es wird nebenher offen gelassen, oft abends, und soll nicht leuchten. Die Farben sind neutral gehalten und nicht die der App — wer beides offen hat, soll auf den ersten Blick wissen, worauf er sieht. Nur der Akzent ist die Markenfarbe. */ /* Farbkonzept (11.11.2026): vier Toene plus Abstufungen. Anthrazit als Grund, warmes Dunkelgrau fuer Flaechen, Warmweiss und Greige fuer Text, ein gedaempftes Rose als einziger Akzent, ein Rot nur fuer Warnungen. Vorher: Grau mit Salbei (#6D8C84). */ :root { --grund: #171717; --feld: #302D2C; --kante: #403B3A; --eingabe:#403B3A; --text: #E8E2DE; --leise: #A69D98; --marke: #B98288; --warn: #C46A5E; --rot: #C46A5E; --linie: rgba(232, 226, 222, 0.08); --streifen: #222020; /* undurchsichtiger Zeilenstreifen fuer haftende Spalten */ } /* Felder und Knoepfe im ganzen Cockpit wie im Farbkonzept */ input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { background: var(--eingabe); color: var(--text); border: 1px solid var(--linie); border-radius: 6px; } input::placeholder, textarea::placeholder { color: #B5ACA7; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marke); } * { box-sizing: border-box; } /* ── Keine senkrechte Rollleiste ─────────────────────────────────────── Gerollt wird weiter, nur sieht man den Balken nicht: er steht auf jeder Seite an derselben Stelle wie die letzte Spalte der Tabellen und zerschneidet sie optisch. Zwei Schreibweisen, weil es zwei Familien gibt — scrollbar-width kennen Firefox und die neueren, ::-webkit-scrollbar die aelteren Safaris und Chrome. Beide nur am Wurzelelement: die waagrechte Leiste unter den Tabellen bleibt, sie ist dort die einzige Auskunft, dass es rechts noch weitergeht. */ html { scrollbar-width: none; } html::-webkit-scrollbar { width: 0; height: 0; } body { margin: 0; padding: 28px 22px 80px; background: var(--grund); color: var(--text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Keine Obergrenze. Eine Textseite braucht eine, damit die Zeilen nicht ueber den ganzen Schirm laufen — hier stehen Tabellen mit elf Spalten, und die 1180 px zwangen sie in ihren eigenen Roller, waehrend rechts und links Platz leer blieb. Breit ist hier kein Fehler, sondern der Zweck. */ .mass { width: 100%; } /* ── Die Navigation steht links ──────────────────────────────────────── Ein Reiter fuehrt nur seine eigenen Abfragen aus (siehe $fuer weiter oben). Deshalb Links und keine Anker: bei fuenfzig Paaren mit je drei Geraeten waere eine Seite, die alles laedt, keine Seite mehr. sticky, damit sie beim Rollen stehenbleibt — die Tabellen darunter sind lang. */ .mass { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; } /* Die Farbe der Warnung, nicht die des Fehlers: es ist nichts kaputt, es ist etwas offen. */ .e2e-offen { grid-column: 2; margin: 0 0 18px; padding: 12px 16px; border: 1px solid rgba(200, 150, 60, 0.45); border-radius: 10px; background: rgba(200, 150, 60, 0.08); font-size: 13px; line-height: 1.5; } .e2e-offen code { font-size: 12px; opacity: 0.85; } .reiter { position: sticky; top: 28px; display: flex; flex-direction: column; gap: 2px; /* Eigenes Rollen (1.10.2026): Die Spalte klebt oben, und sobald sie hoeher wird als der Schirm — viele Reiter, kleines Fenster, ein Telefon quer —, war ihr Fuss nicht mehr zu erreichen: Datum und Abmelden lagen unterhalb der Kante, und die Seite daneben rollte weg, ohne die Spalte mitzunehmen. Das ist die Eigenart von sticky: es klebt, es rollt nicht. 28 px Abstand oben, 16 unten — macht 44, die hier abgezogen werden. overscroll-behavior haelt das Rollen in der Spalte, statt es beim Anschlag an die Seite dahinter weiterzureichen. */ max-height: calc(100dvh - 44px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* Der Balken nur so breit, wie er sein muss, und in der Farbe der Kante: Er steht neben der Navigation und soll sie nicht aufteilen. */ .reiter::-webkit-scrollbar { width: 6px; } .reiter::-webkit-scrollbar-thumb { background: var(--kante); border-radius: 3px; } .reiter::-webkit-scrollbar-track { background: transparent; } .reiter a { display: flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 8px; color: var(--leise); text-decoration: none; font-size: 16px; } /* Das Zeichen schrumpft nicht mit einem langen Wort daneben. */ .reiter svg { flex: 0 0 auto; opacity: 0.85; } .reiter a.hier svg { opacity: 1; } /* Der Fuss der Spalte: Datum und Abmelden, abgesetzt durch eine Linie und nach unten geschoben, damit er unten steht und nicht an den Reitern klebt. */ .reiter .stand { margin-top: 22px; padding: 0 12px 8px; border-top: 1px solid var(--kante); padding-top: 14px; font-size: 11px; color: var(--leise); } .reiter .raus { font-size: 16px; } /* Mehr Luft zwischen den Abschnitten (11.11.2026) */ .block + .block { margin-top: 28px; } .block h2 { margin-bottom: 14px; } .nav-block { margin: 16px 0 6px; padding: 8px 0 4px; border-top: 1px solid var(--kante); } .nav-klapp > summary { cursor: pointer; list-style: none; } .nav-klapp > summary::-webkit-details-marker { display: none; } .nav-klapp > summary::after { content: ' ▸'; } .nav-klapp[open] > summary::after { content: ' ▾'; } .nav-block-titel { padding: 2px 12px 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--marke); } .apk-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 14px; } .apk-qr img { background: #fff; } .apk-qr p { margin: 0; overflow-wrap: anywhere; } .tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; } .tool { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--kante); border-radius: 12px; background: var(--feld); color: var(--leise); text-decoration: none; font-size: 13px; line-height: 1.45; } .tool:hover { border-color: var(--leise); } .tool b { color: var(--text); font-size: 15px; font-weight: 500; } .tool i { font-style: normal; font-size: 11px; opacity: 0.7; } /* Der Schalter fuer die eigenen Konten: leise, aber jederzeit ablesbar — eine Zahl, die man fuer eine Tester-Zahl haelt, waere schlimmer als ein Wort zu viel in der Spalte. Ausgeblendet ist der Normalfall und steht deshalb ruhig; mitgezaehlt leuchtet, weil es die Ausnahme ist. */ .ledl-schalter { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 8px 12px; border: 1px solid var(--kante); border-radius: 8px; color: var(--leise); font-size: 11px; text-decoration: none; } .ledl-schalter:hover { color: var(--text); border-color: var(--marke); } .ledl-schalter.an { color: var(--marke); border-color: var(--marke); } .ledl-schalter i { margin-left: auto; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-style: normal; font-size: 10px; } @media (max-width: 800px) { .ledl-schalter { justify-content: center; padding: 8px 0; font-size: 0; } .ledl-schalter i { margin: 0; font-size: 10px; } .ledl-schalter { justify-content: flex-start; padding: 8px 12px; font-size: 11px; } .ledl-schalter i { margin-left: auto; } } .reiter a:hover { color: var(--text); background: var(--feld); } /* Der Reiter, auf dem man steht, wird ausgeblendet (1.10.2026): Die Spalte zeigt damit nur noch, wohin man gehen kann, und nicht mehr, wo man schon ist — das sagt die Ueberschrift der Seite ohnehin. Die Hervorhebung bleibt im Stylesheet stehen, nur eben hinter display: none; ein geloeschtes display holt sie zurueck. */ /* Der Reiter, auf dem man steht (1.10.2026): nicht mehr verborgen und auch nicht mehr unterlegt, sondern nur kraeftiger und weiss. Die Flaeche und der Markenstrich links machten aus der Markierung einen zweiten Knopf; Gewicht und Helligkeit genuegen, um zu sagen, wo man ist, ohne dass die Spalte dabei eine Stufe bekommt. */ .reiter a.hier { font-weight: 500; color: #ffffff; } /* Alles ausser der Navigation steht in der zweiten Spalte. */ .mass > *:not(.reiter) { grid-column: 2; } .reiter { grid-column: 1; grid-row: 1 / 99; } /* Am Telefon bleibt die Spalte links stehen und wird schmal: nur die Zeichen, das Wort faellt weg. Eine Zeile quer ueber den Kopf waere die uebliche Loesung und die schlechtere — sie schiebt den Inhalt nach unten, und die Tabellen darunter rollen ohnehin schon seitlich. */ /* ── Am Telefon nur quer ─────────────────────────────────────────────── Zwoelf Spalten in 390 px sind keine Tabelle, sondern ein Raetsel. Hoch gehalten steht deshalb nur die Aufforderung, das Geraet zu drehen. Die App macht es genau andersherum, und aus demselben Grund: dort ist die Karte hochkant gebaut, hier ist die Tabelle breit. */ .quer { display: none; } @media (max-width: 820px) and (orientation: portrait) { /* ── Eine Seite darf hochkant (24.9.2026) ────────────────────────── Die Sperre gilt den Tabellen, nicht der Seite: "Kurz" ist genau dafuer gebaut, am Telefon hochkant gelesen zu werden. Ohne diese Ausnahme stand dort die Aufforderung, das Geraet zu drehen — vor einer Liste mit fuenf schmalen Spalten. */ body:not(.hochkant) .mass { display: none; } body.hochkant .quer { display: none; } /* 132 statt 52 (1.10.2026): Seit der Knopf zum Aufklappen weg ist, stehen die Namen der Reiter immer da — in 52 px waeren sie abgeschnitten. Hochkant gilt dasselbe Mass wie quer. */ body.hochkant .mass { grid-template-columns: 132px 1fr; gap: 14px; } .quer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 80vh; padding: 0 32px; text-align: center; color: var(--leise); } .quer b { color: var(--text); font-size: 17px; font-weight: 600; } } /* ── Rand am Telefon (24.9.2026) ─────────────────────────────────────── Am Schreibtisch traegt die Navigationsspalte links einen Teil des Abstands mit; faellt sie auf 52 px zusammen, steht der Inhalt an der Kante. Beide Ausrichtungen, nicht nur hochkant. */ /* ══ Am Telefon ═══════════════════════════════════════════════════════ Das Cockpit ist am Schreibtisch gebaut. Hochkant faellt es ganz weg (siehe .quer), quer bleibt es lesbar — aber eng. Was hier steht, macht es enger sichtbar, ohne etwas wegzunehmen: Kein seitlicher Rand: der Schirm ist schmal genug, jede Spalte zaehlt. Die Zusammenfassung ans Ende: "12 Tester · 8 angeschrieben · 5 mit Konto …" stand zwischen Ueberschrift und Liste und schob das, wofuer man die Seite oeffnet, aus dem Bild. Sie ist die Summe der Liste und gehoert deshalb hinter sie. Umgehaengt wird mit der Reihenfolge des Flusses, nicht im Markup — am Schreibtisch bleibt alles, wie es war. Die Unterzeile der Ueberschrift faellt weg: "wer angeschrieben wurde — und wie weit jede Person gekommen ist" kostet hochkant zwei Zeilen ueber allem, jedes Mal. Und sie muss weg, damit die Ueberschrift eine Zeile bleibt — an ihrer Hoehe haengen die klebenden Kopfzeilen (top: 36px). Engere Zellen: 12 px Polsterung je Seite sind bei zehn Spalten 240 px, die niemand liest. */ @media (max-width: 820px) { body { padding: 14px 0 60px; } .block { display: flex; flex-direction: column; } .block > * { order: 1; } .block > h2 { order: 0; } .block > h2 + p.leise { order: 9; margin: 16px 0 0 !important; } h2 span { display: none; } th, td { padding: 7px 8px; } .zahlen { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } } /* ── Am Telefon mit Namen (1.10.2026) ───────────────────────────────── Der Knopf zum Auf- und Zuklappen ist weg. Mit ihm faellt auch die zugeklappte Form: Eine Spalte, die nur Zeichen zeigt und keinen Weg mehr hat, die Namen hervorzuholen, waere ein Raetsel ohne Aufloesung — "Geteilt" und "Geraete" sind beide ein Kreis mit Anhaengseln. Also stehen die Namen jetzt immer da, die Spalte ist dafuer 132 px breit statt 52. */ @media (max-width: 800px) { .mass { grid-template-columns: 132px 1fr; gap: 12px; } .reiter a { justify-content: flex-start; padding: 9px 10px; } .reiter .raus { font-size: 12px; } } /* 18pt sind rund 24 px. Die Sperrung faellt dabei von 0,12 auf 0,04 em: was bei 12 px die Zeile lesbar machte, zerreisst ein Wort bei 24. */ h2 { margin: 40px 0 14px; font-size: 18pt; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--marke); } h2 span { margin-left: 10px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--leise); } /* Die Kennzahlen: Zahl gross, Wort klein darunter. Mehr braucht eine Kennzahl nicht, und ein Rahmen um jede einzelne wäre Gitter statt Inhalt. */ /* ── Ein Rahmen fuer alle Kaesten ────────────────────────────────────── Kennzahlen, Tabellen, Diagramm und die beiden Bloecke oben trugen drei verschiedene Rahmen: einmal --kante mit 10 px Radius, einmal ohne, einmal #666 mit 20. Jetzt derselbe ueberall — was gleich aussieht, gehoert zusammen, und was verschieden aussieht, sollte es aus einem Grund tun. */ /* Ohne Rahmen. Er stand um jeden Block und hat die Seite in Kaesten zerlegt; was die Abschnitte trennt, ist jetzt der Abstand zwischen ihnen und ihre Ueberschrift. */ .block { } /* Die Ueberschrift steht im Rahmen, also oben darin und nicht darueber: ihr Aussenabstand von 40 px wuerde sie sonst vom Rand wegschieben. Nach unten bleibt er, er trennt sie vom Inhalt. */ /* Kein Abstand nach oben mehr (24.9.2026): der erste Block stand damit 34 px unter der Rumpfpolsterung, und am Telefon war das die Haelfte dessen, was ueberhaupt zu sehen war. */ .block { margin-top: 0; } /* ── Die Ueberschrift bleibt oben stehen (24.9.2026) ─────────────────── Die Listen sind lang; wer unten steht, sieht Zahlen ohne zu wissen, wovon. Die Zeile klebt deshalb am oberen Rand, mit dem Grund der Seite dahinter, damit nichts durchscheint. Der negative Aussenabstand oben und die gleich grosse Polsterung heben sich auf: sie ziehen den Grund bis unter die Rumpfpolsterung hinauf, sonst liefe der Inhalt in der Luecke darueber vorbei. Seitlich tut es der box-shadow, der den Grund ueber die Rumpfpolsterung hinauslegt — eine Flaeche, keine Kante. */ .block h2 { position: sticky; top: 0; z-index: 6; margin: 0 0 14px; padding: 0; background: var(--grund); box-shadow: -22px 0 0 var(--grund), 22px 0 0 var(--grund); } /* Die Kopfzeilen der Tabellen kleben schon an ihrem Roller — sie duerfen nicht vor der Ueberschrift liegen. */ .rolle th { z-index: 2; } .zwei > div > h2:first-child { margin-top: 0; } /* Kennzahlen, Tabellen und Diagramm tragen selbst keinen Rahmen mehr — den traegt der Abschnitt um sie herum. */ .zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Die Fuge zwischen den Kacheln zeichnet die Haarlinien: der Grund scheint durch die 1 px hindurch. Innen deshalb --kante und nicht die Fuellung — sonst waere die Fuge unsichtbar. */ gap: 1px; background: var(--kante); overflow: hidden; border-radius: 12px; } .zahlen div { padding: 14px 16px; background: var(--feld); text-align: right; } /* Zwei Bloecke nebeneinander. Auf schmalen Fenstern untereinander — bei zwei Rastern zu je vier Spalten waere alles darunter unlesbar. */ .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; } /* Jeder der beiden in seinem eigenen Rahmen. Damit tragen sie ihre Ueberschrift innen und nicht darueber — deshalb margin-top: 0 an der h2, sonst schoebe ihr Aussenabstand von 40 px sie vom Rahmen weg. */ @media (max-width: 1100px) { .zwei { grid-template-columns: 1fr; } } .zahlen b { display: block; font-size: 26px; font-weight: 300; letter-spacing: -0.02em; } .zahlen i { font-style: normal; font-size: 11px; color: var(--leise); letter-spacing: 0.04em; text-transform: uppercase; } .zahlen .achtung b { color: var(--warn); } table { width: 100%; border-collapse: collapse; font-size: 13px; } /* Breite Tabellen scrollen in ihrem eigenen Kasten — der Rumpf nie. */ /* ── Nichts ragt ueber den Schirm ────────────────────────────────────── Die Tabellen rollen in ihrem eigenen Kasten. Das allein genuegt aber nicht: ein Rasterfeld ist von Haus aus mindestens so breit wie sein Inhalt (min-width: auto), und eine Tabelle mit zwoelf Spalten hat damit die zweite Spalte des Rasters — und mit ihr die Seite — auseinander gezogen. min-width: 0 hebt das auf; erst dann greift das overflow. */ .mass > *:not(.reiter) { min-width: 0; } /* overflow-y ausdruecklich hidden: sobald eine Achse auf auto steht, setzt CSS die andere ebenfalls auf auto — und dann stand in jedem Tabellenkasten ein zweiter, senkrechter Balken. */ /* Die Tabelle rollt in ihrem Kasten (hoechstens Sichtfeld minus Kopf), damit die Kopfzeile oben kleben kann (17.9.2026). Feste Spalten links (fix1/fix2) bleiben, wie sie waren. */ /* ── Der Kasten rollt wieder selbst (24.9.2026) ──────────────────────── Kurz stand hier overflow-x: auto mit overflow-y: clip, damit die Kopfzeile am Schirm klebt statt am Kasten. Der Gedanke stimmte, das Ergebnis nicht: Mit waagrechtem Rollen und senkrechtem Clip geriet das Raster der breiten Tabellen (table-layout: fixed, klebende Zellen) durcheinander — die Konten-Liste stand verrutscht da. Also wieder wie vorher: Der Kasten rollt in beide Richtungen, und die Kopfzeile klebt an seinem oberen Rand. Das ist der Stand, der seit Wochen taugt. */ /* Ohne Hoehengrenze (24.9.2026): Der Kasten war auf Schirmhoehe minus 120 px gedeckelt und rollte dann selbst — zwei Roller uebereinander, der der Seite und seiner. Jetzt ist er so hoch wie seine Tabelle und nur die Seite rollt. Die Kopfzeile klebt damit an seinem oberen Rand, der mit nach oben wandert; beim langen Rollen ist sie also weg. Das ist der Handel, den Hannes gewaehlt hat. Waagrecht rollt er weiter. */ .rolle { overflow: auto; max-width: 100%; } /* Anregungen: die Zeilen sind hoch (fuenfzeilige Felder), und eine Liste, die in einem Kasten von 500 px rollt, laesst sich nicht ueberblicken. Hier rollt die Seite, nicht die Tabelle (22.9.2026). */ .anregungen-voll { overflow: visible; max-height: none; } /* Diese eine Tabelle rollt nicht selbst, die Seite rollt (22.9.2026) — ihre Kopfzeile klebt also am Schirm und nicht an einem Kasten. Seit die Ueberschrift darueber ebenfalls steht (24.9.2026), braucht sie deren Hoehe als Abstand: bei top: 0 verschwand sie darunter. 64 px sind die Zeile (18 pt) plus ihre Polsterung von 20 und 8. */ .anregungen-voll th { position: sticky; top: 36px; background: var(--grund); z-index: 3; } .rolle th { position: sticky; top: 0; z-index: 2; } .fix1 th:nth-child(1), .fix2 th:nth-child(1), .fix2 th:nth-child(2) { z-index: 4; } /* Sortierbar: ein Klick auf die Ueberschrift, ein zweiter kippt. */ .rolle th { cursor: pointer; user-select: none; } .rolle th.sort-auf::after { content: " \25B4"; opacity: 0.8; } .rolle th.sort-ab::after { content: " \25BE"; opacity: 0.8; } th, td { padding: 9px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--kante); } th { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); background: var(--feld); } tr:last-child td { border-bottom: 0; } /* ── Jede zweite Zeile dunkler ───────────────────────────────────────── Bei elf Spalten und zwei Zeilen Hoehe je Eintrag verliert das Auge sonst die Spur — man liest die Zahl aus einer Zeile und den Namen aus der naechsten. Zur Staerke: 0,022 Weiss ergaben gemessen 24 gegen 18 von 255 — sechs Stufen, und die sieht man auf keinem Bildschirm. 0,06 ergeben 32 gegen 18; das fuehrt die Zeile, ohne die Tabelle in Baender zu zerlegen. Nachgemessen und nicht geschaetzt: der erste Versuch sah im Quelltext richtig aus und war unsichtbar. nth-child(even) und nicht odd: die erste Zeile ist die Kopfzeile, die traegt ihre eigene Flaeche — der Streifen faengt damit bei der zweiten Datenzeile an. */ tbody tr:nth-child(even) td, table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.06); } /* ── Spalten, die stehenbleiben ──────────────────────────────────────── Beim seitlichen Rollen laeuft der Inhalt unter der ersten (fix1) oder den ersten beiden Spalten (fix2) durch. Ohne sie weiss man nach drei Spalten nicht mehr, in wessen Zeile man liest. DECKUNG Eine haftende Zelle ist durchsichtig, der Inhalt liefe darunter durch. Sie braucht eine undurchsichtige Farbe — und weil die Zeilen abwechselnd getoent sind, zwei: #121212 fuer die Seite, #202020 fuer den Streifen. Der Streifen selbst ist 6 % Weiss und damit durchsichtig, taugt hier also nicht. BREITE Die zweite Spalte muss wissen, wo die erste endet. Das rechnet CSS nicht aus; deshalb steht die Breite der ersten Spalte je Tabelle fest, und dieselbe Zahl steht im left der zweiten. */ .fix1 th:nth-child(1), .fix1 td:nth-child(1), .fix2 th:nth-child(1), .fix2 td:nth-child(1), .fix2 th:nth-child(2), .fix2 td:nth-child(2) { position: sticky; z-index: 2; background: var(--grund); } .fix1 tr:nth-child(even) > td:nth-child(1), .fix2 tr:nth-child(even) > td:nth-child(1), .fix2 tr:nth-child(even) > td:nth-child(2) { background: var(--streifen); } .fix1 th:nth-child(1), .fix2 th:nth-child(1), .fix2 th:nth-child(2) { background: var(--feld); z-index: 3; } .fix1 th:nth-child(1), .fix1 td:nth-child(1), .fix2 th:nth-child(1), .fix2 td:nth-child(1) { left: 0; } /* tr:not(.gruppe) — die zusammenfassende Kopfzeile bleibt aussen vor. Ihre erste Zelle spannt sich ueber neun Spalten; eine Breite von 76 px darauf zwaengt neun Spalten in 76 px und zerlegt die ganze Tabelle. Gesehen als leere Luecke hinter dem "#" und zwei Namen, die uebereinander lagen. */ /* width allein ist dem Browser nur ein Vorschlag: er verbreitert eine Spalte, wenn der Inhalt es verlangt, und dann stimmt das left der zweiten nicht mehr — zwischen den beiden haftenden Spalten klaffte eine Luecke, durch die der Rest der Zeile durchlief. Mit min und max zusammen steht die Zahl fest. */ .paare-tabelle tr:not(.gruppe) th:nth-child(1), .paare-tabelle td:nth-child(1) { width: 76px; min-width: 76px; max-width: 76px; } .paare-tabelle tr:not(.gruppe) th:nth-child(2), .paare-tabelle td:nth-child(2) { left: 76px; } .konten-tabelle td:nth-child(1), .konten-tabelle th:nth-child(1) { width: 130px; min-width: 130px; max-width: 130px; } .konten-tabelle td:nth-child(2), .konten-tabelle th:nth-child(2) { left: 130px; } .log-tabelle td:nth-child(1), .log-tabelle th:nth-child(1) { width: 92px; min-width: 92px; max-width: 92px; } .log-tabelle td:nth-child(2), .log-tabelle th:nth-child(2) { left: 92px; } .wochen .fix1 td:nth-child(1), .wochen .fix1 th:nth-child(1) { width: 150px; } /* Die zusammenfassende Kopfzeile der Paar-Tabelle haftet nicht: ihre erste Zelle spannt sich ueber neun Spalten, und eine haftende Zelle dieser Breite deckte beim Rollen die halbe Tabelle zu. */ .fix2 tr.gruppe th { position: static; } /* Die Ausrichtung gehoert der Spalte, nicht der Zelle: die Ueberschrift steht dort, wo die Zahlen darunter stehen. th blieb bisher immer links, auch ueber rechtsbuendigen Zahlen — das las sich wie zwei Spalten uebereinander. */ td.n, th.n { text-align: right; } td.n { font-variant-numeric: tabular-nums; } td.c, th.c { text-align: center; } /* Die zusammenfassende Kopfzeile. Sie traegt keine Linie unter sich — sonst stuenden zwei Striche uebereinander — und ihre Beschriftung ist kleiner als die der Spalten darunter: sie ordnet, sie benennt nicht. */ tr.gruppe th { padding-bottom: 2px; border-bottom: 0; font-size: 10px; letter-spacing: 0.14em; color: var(--marke); } /* Die Streifen zaehlen ab jetzt eine Zeile weiter — mit zwei Kopfzeilen faengt die erste Datenzeile ungerade an. */ .paare-tabelle tr:nth-child(even) td { background: none; } .paare-tabelle tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.06); } .paare-tabelle tr:nth-child(1) td, .paare-tabelle tr:nth-child(2) td { background: none; } /* Und die beiden haftenden Spalten decken auch hier. Die Streifenregel darueber ist durchsichtig (6 % Weiss) und wiegt mit drei Klassen und zwei Pseudoklassen schwerer als die Deckfarbe bei den fix-Regeln — der Inhalt lief deshalb durch die haftende Zelle hindurch, sichtbar als "8 / 0" mitten in der Spalte mit dem "#". Dieselben zwei Toene, nur undurchsichtig, und die Streifen bleiben, wie sie sind. */ .paare-tabelle tr:nth-child(odd) td:nth-child(1), .paare-tabelle tr:nth-child(odd) td:nth-child(2) { background: var(--streifen); } .paare-tabelle tr:nth-child(even) td:nth-child(1), .paare-tabelle tr:nth-child(even) td:nth-child(2) { background: var(--grund); } .leise { color: var(--leise); } .warn { color: var(--warn); } .rot { color: var(--rot); } /* Der Balken hinter der Aufteilung A/B: zwei Flächen, deren Verhältnis man sieht, ohne zwei Zahlen zu vergleichen. */ .ab { display: flex; width: 84px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--kante); } .ab i { display: block; height: 100%; } .ab i:first-child { background: var(--marke); } .ab i:last-child { background: #4A5F5A; } .hinweis { margin: 30px 0 0; padding: 12px 14px; border-left: 2px solid var(--kante); color: var(--leise); font-size: 12px; } /* ── Was etwas veraendert, sieht anders aus ──────────────────────────── Die ganze Seite zaehlt und zeigt; ein Knopf, der loescht, darf sich davon unterscheiden. Klein und ruhig im Ruhezustand, rot erst in der Rueckfrage: die Warnfarbe gehoert an die Stelle, an der die Entscheidung faellt, nicht an jede Zeile der Tabelle. */ form.inline { margin: 0; display: inline; } /* Die Tester-Formulare: Felder im Stil der Anmeldung, nur kleiner. */ .tester-neu { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } /* ── Die kurze Liste (24.9.2026) ─────────────────────────────────────── Fuenf Spalten, jede so schmal wie ihr Inhalt: Name links, der Rest rechtsbuendig. Sie steht auf ihrem eigenen Reiter und gilt dort auf jedem Schirm — die Tabelle unter 'user' bleibt, wie sie war. Warum nicht dieselbe Seite in zwei Gestalten: Nachsehen und Pflegen sind zwei Arbeiten. Wer am Telefon wissen will, was sich getan hat, soll das oeffnen koennen, ohne durch eine Werkbank zu muessen — und am Schreibtisch taugt derselbe Ueberblick genauso. */ /* ── Die Auswertung des Fragebogens ─────────────────────────────────── Wahlfragen als Balken, Textantworten als Zitate mit dem Vornamen darunter. Kein Raster: Die Antworten sind verschieden lang, und eine Tabelle zwaenge sie in Spalten, die niemand liest. */ .umfrage-frage { margin: 0 0 18px; padding: 0 0 0 14px; border-left: 2px solid var(--kante); } /* Abgeschaltete Fragen treten zurueck, verschwinden aber nicht: Ihre Antworten aus frueheren Runden bleiben lesbar. */ .umfrage-frage.aus { opacity: 0.5; border-left-style: dashed; } .umfrage-text { margin: 0 0 8px; font-size: 13px; color: var(--text); } /* Bleibt nur die Zahl uebrig, weil der Fragetext oben steht: dann rueckt sie an die Ueberschrift heran statt mit deren Abstand zu rechnen. */ .umfrage-text.nur-zahl { margin-top: -4px; } .umfrage-text span { margin-left: 8px; font-size: 11px; } .umfrage-balken { display: grid; grid-template-columns: 13em 1fr 2em; gap: 10px; align-items: center; margin: 3px 0; font-size: 12px; } .umfrage-balken i { display: block; height: 8px; border-radius: 4px; background: var(--marke); min-width: 2px; } .umfrage-balken b { text-align: right; font-variant-numeric: tabular-nums; } .umfrage-zitat { margin: 6px 0; padding: 9px 12px; background: var(--feld); border-radius: 8px; font-size: 13px; line-height: 1.55; color: var(--text); } .umfrage-zitat cite { display: block; margin-top: 5px; font-size: 11px; font-style: normal; color: var(--leise); } /* Die Ueberschrift eines Abschnitts traegt seit dem 30.9.2026 die Frage selbst, wenn der Bogen keinen eigenen Titel setzt — und Fragen sind laenger als Titel. Am Telefon wird sie deshalb duenn und klein: Sie ordnet nur noch, gelesen wird die Antwort darunter. */ .umfrage-ab { margin: 22px 0 8px; font-size: 14px; font-weight: 500; } .umfrage-ab.aus { opacity: 0.5; } @media (max-width: 800px) { .umfrage-balken { grid-template-columns: 8em 1fr 2em; } .umfrage-ab { font-size: 11px; font-weight: 100; } } .konten-kurz { margin: 0; padding: 0; list-style: none; } .konten-kurz li { display: grid; grid-template-columns: 1fr auto 2.5em 3.6em 3.6em; gap: 8px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--kante); font-size: 13px; } .konten-kurz .kk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .konten-kurz .kk-b, .konten-kurz .kk-zahl, .konten-kurz .kk-zeit { text-align: right; font-variant-numeric: tabular-nums; color: var(--leise); } .konten-kurz .kk-zahl { color: var(--text); } /* Die Beschriftung steht oben und bleibt stehen — dieselbe Ordnung wie die Kopfzeile einer Tabelle, mit denselben Spaltenbreiten, damit die Woerter ueber ihren Zahlen stehen. 64 px ist die Hoehe der Ueberschrift darueber. */ .konten-kurz-kopf { display: grid; grid-template-columns: 1fr auto 2.5em 3.6em 3.6em; gap: 8px; position: sticky; top: 36px; z-index: 2; margin: 0; padding: 6px 2px; background: var(--feld); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); } .konten-kurz-kopf span { text-align: right; } /* Die beiden Testlauf-Felder stehen als Paar unter einer Ueberschrift — sie gehoeren zusammen ("am Donnerstag, mit 0.2.1014") und sollen nicht wie zwei einzelne Angaben zwischen Notiz und Knoepfen haengen. */ /* Die beiden Testlauf-Felder: je 120 px, nebeneinander in der Reihe mit den uebrigen. !important, weil die allgemeine Feldregel der Tester-Tabelle ebenfalls mit !important arbeitet. */ .lauf-feld { flex: 0 0 120px; width: 120px !important; resize: vertical; vertical-align: top; } /* Feste 120 px, beide. Als Flex-Kinder schrumpfen sie sonst, sobald die Zelle eng wird — die Breite im style-Attribut ist dann nur noch ein Vorschlag. flex: 0 0 120px nimmt ihnen das Schrumpfen. */ .lauf-paar textarea { flex: 0 0 120px; width: 120px !important; } .tester-neu input, .tester-zeile input { padding: 5px 8px; background: var(--feld); border: 1px solid var(--kante); border-radius: 6px; color: var(--text); font: inherit; font-size: 12px; } .tester-neu input { flex: 1 1 140px; } /* Die Felder behalten ihre eigene Breite (23.9.2026): Name, Telefon und E-Mail sind 190 px — dieselbe Breite haben die zwei Knoepfe darunter, damit sie unter dem ersten Feld liegen. Nur der Kommentar ist breiter (260 px), weil dort Saetze stehen. */ .tester-zeile { display: grid; justify-items: start; gap: 4px; } .tester-zeile > input { width: 190px; box-sizing: border-box; } .tester-zeile > select { width: auto; } .tester-zeile > textarea { width: 260px; box-sizing: border-box; } table.tester td { vertical-align: top; } table.tester textarea, .tester-neu textarea { vertical-align: top; align-self: flex-start; } /* Untereinander, beide so breit wie die Felder darueber (23.9.2026). */ /* Als Knoepfe erkennbar (23.9.2026): gefuellt statt nur umrandet — Speichern in der Markenfarbe, Loeschen leise daneben. */ /* Feste Lage in der Zelle (23.9.2026, so gewuenscht): 60 px unter deren Oberkante, links bei 10 px. Die Zelle traegt dafuer position: relative, sonst bezoege sich "top" auf die Seite und alle Knoepfe laegen uebereinander. ACHTUNG: die Lage haengt nicht mehr am Inhalt — wird das Namensfeld hoeher oder kommt ein Feld dazu, muessen die 60 px mit. */ /* ── Der Tester als Block, nicht als Zeile (30.9.2026) ────────────────── Bisher lag alles in einer Reihe, und die Knoepfe klebten absolut auf 60 px unter der Zellenoberkante — eine Lage, die bei jedem neuen Feld von Hand nachzuziehen war. Jetzt traegt die Zelle ein Raster: der Name gross links ueber die volle Hoehe, daneben Telefon, Mail und Anrede untereinander, rechts der Kommentar, ganz rechts der Testlauf. Die Knoepfe stehen darunter und brauchen keine Koordinaten mehr. Das Formular wird dafuer zu display: contents — es bleibt ein Formular fuer den Server, verschwindet aber als Kasten, damit seine Felder und die Knoepfe daneben im selben Raster liegen. Formulare lassen sich nicht verschachteln; ohne diesen Kniff muessten die Knoepfe wieder absolut gesetzt werden. Alles unter table.tester, weil .tester-zeile auch die Anregungen benutzen — dort soll die Reihe bleiben, wie sie ist. */ table.tester td:first-child { display: grid; grid-template-columns: 240px 160px 260px 120px; gap: 6px 12px; align-items: start; } table.tester form.tester-zeile { display: contents; } /* Das Loesch-Formular traegt nur verborgene Felder — als Rasterkind risse es sonst eine leere Zelle auf. */ table.tester td:first-child > form[id^="tl"] { display: none; } table.tester .tester-zeile > input, table.tester .tester-zeile > select, table.tester .tester-zeile > textarea { width: 100% !important; box-sizing: border-box; } /* Der Name ist die Ueberschrift der Person: gross und ueber die ganze Hoehe der drei Felder daneben. */ table.tester .tester-zeile [name="name"] { grid-column: 1; grid-row: 1 / span 3; height: 100%; padding: 10px; font-size: 17px; } table.tester .tester-zeile [name="telefon"] { grid-column: 2; grid-row: 1; } table.tester .tester-zeile [name="email"] { grid-column: 2; grid-row: 2; } table.tester .tester-zeile [name="anrede"] { grid-column: 2; grid-row: 3; } table.tester .tester-zeile [name="notiz"] { grid-column: 3; grid-row: 1 / span 3; height: 100%; min-height: 108px; resize: vertical; } table.tester .tester-zeile .lauf-feld { grid-column: 4; flex: none; } table.tester .tester-zeile [name="lauf_datum"] { grid-row: 1; } table.tester .tester-zeile [name="lauf_version"] { grid-row: 2; } .tester-taten { grid-column: 1 / span 2; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: static; float: none; white-space: normal; margin: 0; } /* Am Telefon steht alles untereinander — vier Spalten sind dort nicht zu haben, und die Reihenfolge des Markups ist ohnehin die richtige. */ @media (max-width: 900px) { table.tester td:first-child { grid-template-columns: 1fr; } table.tester .tester-zeile > input, table.tester .tester-zeile > select, table.tester .tester-zeile > textarea, .tester-taten { grid-column: 1 !important; grid-row: auto !important; height: auto; } } .tester-taten .klein { padding: 8px 16px; border-radius: 6px; font-weight: 500; } /* Speichern und Loeschen tragen nur noch ihr Zeichen (24.9.2026): zwei Woerter, die in jeder Zeile dasselbe sagen, sind Rauschen — und die Zeile wird schmaler fuer die beiden Bausteine daneben. Der Name steht im title und im aria-label, sonst waere es ein Knopf ohne Auskunft. */ .tester-taten .klein.ikon { display: inline-flex; align-items: center; justify-content: center; padding: 8px; width: 34px; height: 34px; } .tester-taten .klein.ikon svg { display: block; } .tester-taten .klein:first-child { background: var(--marke); border-color: var(--marke); color: #14110F; } .tester-taten .klein:first-child:hover { background: var(--marke); border-color: var(--marke); color: #1d1717; } .tester-taten .loesch-knopf { background: rgba(255, 255, 255, 0.06); color: var(--leise); } .tester-taten .loesch-knopf:hover { background: rgba(222, 123, 123, 0.18); color: var(--rot); border-color: var(--rot); } /* Die Anregungen behalten ihren Fluss: dort stehen die Knoepfe unter den Feldern, nicht an fester Stelle (23.9.2026). */ /* Eine Zeile fuer alle vier Knoepfe (23.9.2026). */ .tester-texte { align-items: center; } .tester-texte .klein[data-baustein] { padding: 8px 14px; border-radius: 6px; } .bausteine { display: flex; flex-wrap: wrap; gap: 18px; } .baustein { display: flex; flex-direction: column; gap: 6px; flex: 1 1 380px; max-width: 520px; } .baustein label { font-size: 12px; color: var(--leise); } .baustein textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff !important; font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; } .baustein-taten { position: relative; top: auto; left: auto; float: none; display: flex; align-items: center; } .anregung-taten { position: relative; top: auto; left: auto; float: none; display: flex; margin-top: 8px; } /* Gilt nur noch fuer die Anregungen: In der Testertabelle bestimmt das Raster die Breite, dort stuende diese feste Zahl dagegen. */ .tester-zeile textarea { width: 260px !important; box-sizing: border-box; } table.tester .tester-zeile textarea { width: 100% !important; } table.tester select, table.tester input[type="date"] { padding: 5px 8px; background: var(--feld); border: 1px solid var(--kante); border-radius: 6px; color: var(--text); font: inherit; font-size: 12px; } .tester-neu select { padding: 5px 8px; background: var(--feld); border: 1px solid var(--kante); border-radius: 6px; color: var(--text); font: inherit; font-size: 12px; } /* Die Felder heller als der Grund, damit man sieht, wo man schreibt (22.9.2026): Eingaben sind keine Flaechen zum Lesen. */ .tester-neu input, .tester-neu select, .tester-neu textarea, table.tester input, table.tester select, table.tester textarea { padding: 9px 0 9px 4px !important; border-radius: 1px !important; background: rgba(255, 255, 255, 0.10) !important; /* Ohne Kante (24.9.2026): die hellere Flaeche sagt schon, wo man schreibt — ein Rahmen darum sagt es ein zweites Mal. Mit !important, weil die Regeln weiter oben (.tester-neu input, table.tester select) sonst ihre Kante behielten und die Felder verschieden aussaehen. */ border: 0 !important; color: #ffffff !important; } .tester-neu ::placeholder, table.tester ::placeholder { color: rgba(255, 255, 255, 0.45); } /* Der Fokus haengt jetzt an der Flaeche statt an der Kante — ohne Kante gaebe es sonst gar kein Zeichen, in welchem Feld man gerade steht. */ .tester-neu input:focus, .tester-neu select:focus, .tester-neu textarea:focus, table.tester input:focus, table.tester select:focus, table.tester textarea:focus { outline: none; background: rgba(255, 255, 255, 0.18) !important; } tr.neu-zeile td { border-bottom: 2px solid var(--kante); padding-bottom: 12px; } tr.art-fehler td:nth-child(2) select { border-color: rgba(222, 123, 123, 0.6); color: #E89A9A !important; } tr.art-todo td:nth-child(2) select { border-color: rgba(217, 164, 65, 0.6); } /* Erledigte bleiben lesbar (23.9.2026): sie rutschen ans Ende, das reicht — gedaempfter Text laesst sich nicht mehr ueberfliegen. */ tr.stapel-erledigt { opacity: 1; } tr.stapel-merke td:first-child + td select, tr.stapel-merke td:first-child select { opacity: 0.85; } tr.stapel-merke { opacity: 0.8; } tr.stapel-ja td:first-child select { border-color: rgba(120, 190, 140, 0.6); } tr.stapel-nein td:first-child select { opacity: 0.6; } tr.stapel-offen td:first-child select { border-color: var(--marke); } button.klein { padding: 4px 12px; background: var(--eingabe); border: 1px solid var(--linie); border-radius: 999px; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; } button.klein:hover { border-color: var(--leise); } button.klein[type=submit]:not([value=loeschen]):not([value=offen]):not([value=kanal_weg]) { background: var(--marke); color: #1d1717; border-color: var(--marke); font-weight: 600; } button.klein[value=loeschen] { background: none; color: var(--leise); } /* Gesperrt sieht gesperrt aus — auch wenn es ein Absende-Knopf ist. */ button.klein:disabled, button.klein[disabled] { background: none !important; color: var(--leise) !important; border-color: var(--linie) !important; font-weight: 400 !important; opacity: .55; cursor: not-allowed; } button.klein[value=loeschen]:hover { color: var(--rot); border-color: var(--rot); } .frage { margin: 0 0 16px; padding: 14px 16px; background: var(--feld); border: 1px solid var(--rot); border-radius: 10px; } /* Der Dialog liegt ueber der Seite, mittig, mit einer Decke darunter. */ .frage-decke { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.6); } .frage-dialog { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); margin: 0; padding: 20px 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); } .frage p { margin: 0 0 10px; } .frage .leise { font-size: 12px; } button.gefahr { padding: 9px 18px; background: var(--rot); border: 0; border-radius: 8px; color: #14110F; font: inherit; font-weight: 500; cursor: pointer; } .frage a { margin-left: 14px; color: var(--leise); font-size: 12px; } /* ── Der Verlauf ─────────────────────────────────────────────────────── Das SVG streckt sich ueber die Breite (preserveAspectRatio: none) und behaelt eine feste Hoehe — bei einem Diagramm ohne Bilder darin ist das richtig: die Linien duerfen sich strecken, die Schrift darin nicht, und deshalb steht sie in eigenen Elementen mit fester Groesse. */ .karte-verlauf { background: var(--feld); } /* Die Fussnote steht unter der Tabelle, nicht in der Ueberschrift: Sie erklaert ein Wort und wird einmal gelesen, nicht bei jedem Blick. */ .fussnote { max-width: 68ch; margin: 10px 0 0; font-size: 12px; line-height: 1.6; } .fussnote b { color: var(--text); font-weight: 500; } /* Die Zelle ueber zwei Haelften: mittig statt rechtsbuendig, damit man sieht, dass sie fuer beide Spalten gilt und nicht fuer die rechte. */ .ganztags { text-align: center !important; } /* Die gewoehnlichen Meldungen treten zurueck, damit error und warning in einer Liste von vierzig Zeilen auffallen, statt gesucht werden zu muessen. Lesbar bleiben sie — sie sind der Zusammenhang, in dem ein Fehler steht. */ .log-tabelle tr.nur-info td { opacity: 0.62; } .log-tabelle h2 b { font-weight: 500; } .verlauf { display: block; width: 100%; height: 400px; } .verlauf .gitter { stroke: var(--kante); stroke-width: 1; } .verlauf .achse { fill: var(--leise); font-size: 11px; text-anchor: end; } .verlauf .achse.mitte { text-anchor: middle; } .legende { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--leise); } .legende span { display: inline-flex; align-items: center; gap: 7px; } /* Die Wochenliste steht unter dem Bild und gehoert dazu. */ .wochen { margin-top: 14px; } .rest { margin: 10px 0 0; display: flex; align-items: center; gap: 12px; font-size: 12px; } .meldung { margin: 0 0 16px; padding: 10px 14px; background: var(--feld); border-left: 2px solid var(--marke); border-radius: 6px; font-size: 13px; } /* Anmeldung */ .tor { max-width: 300px; margin: 18vh auto 0; text-align: center; } .tor input { width: 100%; padding: 11px 12px; background: var(--feld); border: 1px solid var(--kante); border-radius: 8px; color: var(--text); font: inherit; } .tor button { width: 100%; margin-top: 10px; padding: 11px; background: var(--marke); border: 0; border-radius: 8px; color: #0E1412; font: inherit; font-weight: 500; cursor: pointer; } .tor p { margin: 10px 0 0; font-size: 12px; color: var(--rot); } /* ── 2 Helles Thema ── */ /* ── Helles Farbkonzept (11.11.2026) ────────────────────────────────── Aus denselben Toenen abgeleitet: Creme als Grund, weisse Flaechen mit weichem Schatten, warmes Dunkelbraun als Schrift, ein dunkleres Rose, damit der Akzent auf Hell lesbar bleibt. */ html[data-thema="hell"] { --grund: #F7F3F0; --feld: #FFFFFF; --kante: #E6DDD8; --eingabe: #F1ECE8; --text: #2E2725; --leise: #7A706B; --marke: #9C5F67; --warn: #B04A3E; --rot: #B04A3E; --linie: rgba(46, 39, 37, 0.10); --streifen: #F3EEEA; } html[data-thema="hell"] .farbkonzept { --fk-grund: #F7F3F0; --fk-spalte: #FFFFFF; --fk-feld: #F1ECE8; --fk-notiz: #F6F0EC; --fk-text: #2E2725; --fk-text2: #7A706B; --fk-platzhalter: #9A908B; --fk-akzent: #9C5F67; --fk-warn: #B04A3E; --fk-linie: rgba(46, 39, 37, .10); } html[data-thema="hell"] body { background: var(--grund); color: var(--text); } html[data-thema="hell"] table tr:nth-child(even) td, html[data-thema="hell"] .paare-tabelle tr:nth-child(odd) td { background: rgba(46, 39, 37, 0.035); } html[data-thema="hell"] .fix2 tr:nth-child(even) > td:nth-child(2), html[data-thema="hell"] .paare-tabelle tr:nth-child(odd) td:nth-child(2) { background: #F3EEEA; } html[data-thema="hell"] .block, html[data-thema="hell"] .heute-box { background: var(--feld); border-radius: 14px; box-shadow: 0 1px 2px rgba(46,39,37,.06), 0 6px 20px rgba(46,39,37,.06); } html[data-thema="hell"] .block { padding: 18px 20px; } html[data-thema="hell"] button.klein[type=submit]:not([value=loeschen]):not([value=offen]):not([value=kanal_weg]):not(.zweitknopf):not(:disabled), html[data-thema="hell"] .tester-taten .klein:first-child, html[data-thema="hell"] .farbkonzept button.klein[value="erledigt"], html[data-thema="hell"] .farbkonzept button.klein[value="speichern"], html[data-thema="hell"] .farbkonzept button.klein[value="neu"], html[data-thema="hell"] .farbkonzept button.klein[value="aendern"] { color: #FFFFFF !important; } html[data-thema="hell"] button.gefahr { color: #FFFFFF; } html[data-thema="hell"] .tester-neu input, html[data-thema="hell"] .tester-neu select, html[data-thema="hell"] .tester-neu textarea, html[data-thema="hell"] table.tester input, html[data-thema="hell"] table.tester select, html[data-thema="hell"] table.tester textarea { background: var(--eingabe) !important; color: var(--text) !important; border-color: var(--linie) !important; } html[data-thema="hell"] .tester-neu ::placeholder, html[data-thema="hell"] table.tester ::placeholder { color: #9A908B; } html[data-thema="hell"] .tester-taten .loesch-knopf { background: var(--eingabe); } html[data-thema="hell"] .reiter a:hover { background: #EFE8E3; } html[data-thema="hell"] .reiter a.hier { background: #EADFD9; color: var(--text); } html[data-thema="hell"] .zelle:has(.karte) { border-color: #E2D8D2; background: #FFFFFF; } html[data-thema="hell"] .karte textarea.notiz { background: var(--fk-notiz, #F6F0EC) !important; color: var(--text) !important; } html[data-thema="hell"] .zoom-overlay { background: rgba(46, 39, 37, .45); } html[data-thema="hell"] .karte.fertig .todo-nr, html[data-thema="hell"] .karte.fertig .haken { color: #4F8A55 !important; border-color: #4F8A55 !important; } html[data-thema="hell"] .todo-nr { border-color: #D9CCC6; } /* Social-Media-Plan: Karten mit zartem Grund; aktiv, sobald darin etwas angeklickt oder bearbeitet wird (11.11.2026). */ .zelle:has(.karte) { background: rgba(185, 130, 136, .06); transition: background .15s, border-color .15s, box-shadow .15s; } .zelle:has(.karte):focus-within { background: rgba(185, 130, 136, .14); border-color: var(--marke) !important; box-shadow: 0 0 0 3px rgba(185, 130, 136, .18); } html[data-thema="hell"] .zelle:has(.karte) { background: #FBF6F4 !important; } html[data-thema="hell"] .zelle:has(.karte):focus-within { background: #F6ECE9 !important; border-color: var(--marke) !important; box-shadow: 0 0 0 3px rgba(156, 95, 103, .15); } .nav-marke { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 12px 18px !important; color: var(--text) !important; background: none !important; } .nav-marke svg { width: 64px; height: auto; } .nav-marke span { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--text); } /* Warteliste: die E-Mail-Spalte ohne eigenen Grund (11.11.2026) */ table.warte-tabelle td, table.warte-tabelle tr:nth-child(even) td { background: none !important; } /* Zweitrangiger Knopf: neutral, mit Rand, kleiner — z. B. „nochmal senden“ */ button.klein.zweitknopf { background: transparent !important; color: var(--text) !important; border: 1px solid var(--kante) !important; font-weight: 400 !important; padding: 3px 10px; font-size: 12px; } html[data-thema="hell"] button.klein.zweitknopf { color: var(--text) !important; background: #FFFFFF !important; } button.klein.zweitknopf:hover { border-color: var(--marke) !important; color: var(--marke) !important; } .thema-schalter { margin: 10px 12px 0; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--kante); background: none; color: var(--leise); font: inherit; font-size: 13px; cursor: pointer; } .thema-schalter:hover { color: var(--text); border-color: var(--leise); } /* ── 3 Farbkonzept (Karten, Tabellen) ── */ /* ── Farbkonzept (11.11.2026) ───────────────────────────────────────────── Vier Toene plus Abstufungen, zuerst fuer Social-Media-Plan und Fehler & Updates. Rosé nur fuer Grosses (Haken, Nummern, Ueberschriften): auf den Feldern reicht der Kontrast fuer kleine Schrift nicht (3,5 : 1). Ein gedaempftes Rot bleibt als einziger Warnton (ueberfaellig, Fehler). */ .farbkonzept { --fk-grund: #171717; --fk-spalte: #302D2C; --fk-feld: #403B3A; --fk-notiz: #383332; --fk-text: #E8E2DE; --fk-text2: #A69D98; --fk-platzhalter: #B5ACA7; --fk-akzent: #B98288; --fk-warn: #C46A5E; --fk-linie: rgba(232,226,222,.08); color: var(--fk-text); } .farbkonzept h2 span, .farbkonzept .leise { color: var(--fk-text2) !important; } .farbkonzept a { color: var(--fk-akzent); } /* Plan: Kopf auf dem Grund, Spalten eine Stufe heller */ .farbkonzept table.plan thead th { background: var(--fk-grund); color: var(--fk-text2); box-shadow: 0 1px 0 var(--fk-linie); } .farbkonzept table.plan td { background: var(--fk-spalte); border-color: var(--fk-linie); } .farbkonzept table.plan td.tagzelle { background: var(--fk-grund); } .farbkonzept table.plan tr { background: none !important; } .farbkonzept .tag { color: var(--fk-text2); } .farbkonzept tr#heute .tag { color: var(--fk-akzent); } .farbkonzept .zelle .karte + .karte { border-top-color: var(--fk-linie); } .farbkonzept .heute-box { border-color: var(--fk-akzent); background: var(--fk-spalte); } /* Nummer und Haken: ein Rosé */ .farbkonzept .todo-nr { color: var(--fk-akzent); border-color: var(--fk-akzent); } .farbkonzept .haken { color: var(--fk-akzent); } /* Erledigt: Haken und Nummer in Salbeigruen (11.11.2026). */ .farbkonzept .karte.fertig .todo-nr, .farbkonzept .karte.fertig .haken { color: #BEDEBA; border-color: #BEDEBA; opacity: .5; } /* Felder */ .farbkonzept textarea, .farbkonzept input, .farbkonzept select { background: var(--fk-feld); color: var(--fk-text); border: 1px solid var(--fk-linie); border-radius: 6px; } .farbkonzept textarea::placeholder, .farbkonzept input::placeholder { color: var(--fk-platzhalter); } .farbkonzept textarea:focus, .farbkonzept input:focus, .farbkonzept select:focus { outline: none; border-color: var(--fk-akzent); } .farbkonzept .karte textarea.notiz { background: var(--fk-notiz); color: var(--fk-text); border: none; } .farbkonzept .karte.fertig textarea:not(.notiz) { background: transparent; color: var(--fk-text2); border: none; } /* Knoepfe: neutral als Pille; nur „Erledigt“ und „Speichern“ im Akzent */ .farbkonzept button.klein { background: var(--fk-feld); color: var(--fk-text); border: 1px solid var(--fk-linie); border-radius: 999px; padding: 4px 12px; } .farbkonzept button.klein:hover { border-color: var(--fk-text2); } .farbkonzept button.klein[value="erledigt"], .farbkonzept button.klein[value="speichern"], .farbkonzept button.klein[value="neu"], .farbkonzept button.klein[value="aendern"] { background: var(--fk-akzent); color: #1d1717; border-color: var(--fk-akzent); font-weight: 600; } .farbkonzept button.klein[value="loeschen"] { background: none; color: var(--fk-text2); } /* Fehler & Updates */ .farbkonzept table.af td { border-color: var(--fk-linie); background: var(--fk-spalte); } .farbkonzept table.af th { background: var(--fk-grund); color: var(--fk-text2); } .farbkonzept table.af tr.fertig td { color: var(--fk-text2); } /* ── 4 Heute: Kacheln ── */ .heute-seite h1 { font-size: 30px; font-weight: 600; margin: 4px 0 4px; } .heute-seite .unter { color: var(--leise); margin: 0 0 22px; } .kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .kachel { display: block; padding: 18px 20px; border-radius: 16px; background: var(--feld); border: 1px solid var(--linie); color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.05); } .kachel:hover { border-color: var(--marke); } .kachel .zahl { font-size: 38px; font-weight: 600; line-height: 1.1; color: var(--marke); } .kachel .zahl.ruhig { color: var(--leise); } .kachel .titel { font-weight: 600; margin-top: 4px; } .kachel .satz { color: var(--leise); font-size: 13px; margin-top: 6px; line-height: 1.45; } .kachel.gross { grid-column: span 2; } .kachel ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; } .kachel li + li { margin-top: 4px; } .balken { height: 8px; border-radius: 4px; background: var(--eingabe); margin-top: 10px; overflow: hidden; } .balken i { display: block; height: 100%; background: var(--marke); } @media (max-width: 700px) { .kachel.gross { grid-column: auto; } } /* ── 4b Kennzahlen, Ring, Trichter, Raster ── */ .h-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; } .h-kpi { display: block; padding: 16px 18px 10px; border-radius: 16px; background: var(--feld); border: 1px solid var(--linie); color: var(--text); text-decoration: none; overflow: hidden; } .h-kpi:hover { border-color: var(--marke); } .h-kpi .k-t { font-size: 13px; color: var(--leise); font-weight: 500; } .h-kpi .k-z { font-size: 44px; font-weight: 600; line-height: 1.05; } .h-kpi .k-d { font-size: 13px; font-weight: 600; margin-left: 8px; } .h-kpi .k-d.plus { color: #4F8A55; } .h-kpi .k-d.minus { color: #B5544F; } .h-kpi .k-d.null { color: var(--leise); } .h-kpi .k-s { font-size: 12px; color: var(--leise); } .h-spark { display: block; width: calc(100% + 36px); height: 44px; margin: 8px -18px -10px; } .h-linie { fill: none; stroke: var(--marke); stroke-width: 2; vector-effect: non-scaling-stroke; } .h-flaeche { fill: var(--marke); opacity: .14; } .h-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; } .h-box { display: block; padding: 18px 20px; border-radius: 16px; background: var(--feld); border: 1px solid var(--linie); color: var(--text); text-decoration: none; } a.h-box:hover { border-color: var(--marke); } .h-box h3 { margin: 0 0 12px; font-size: 15px; } .h-box h3 span { font-weight: 400; color: var(--leise); font-size: 12px; margin-left: 6px; } .h-ring { display: flex; gap: 18px; align-items: center; } .h-ring svg { width: 130px; height: 130px; flex: none; } .h-ring .bahn { fill: none; stroke: var(--eingabe); stroke-width: 12; } .h-ring .wert { fill: none; stroke: var(--marke); stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 65px 65px; } .h-ring .wert2 { fill: none; stroke: #8FB0A7; stroke-width: 7; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 65px 65px; } .h-ring text { fill: var(--text); font-weight: 600; } .h-tr { display: grid; grid-template-columns: 140px 1fr 46px; gap: 4px 8px; align-items: center; margin: 6px 0; font-size: 13px; } .h-tr .bar { height: 26px; border-radius: 7px; background: var(--marke); min-width: 3px; } .h-tr .pz { font-size: 11px; color: var(--leise); grid-column: 2 / 4; } .h-tr b { text-align: right; } .h-geraet { display: flex; height: 30px; border-radius: 9px; overflow: hidden; background: var(--eingabe); } .h-geraet i { display: block; height: 100%; } .h-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin-top: 10px; color: var(--leise); } .h-leg span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; background: var(--c); vertical-align: -1px; } .h-uhr { display: grid; grid-template-columns: 26px repeat(24, 1fr); gap: 2px; font-size: 10px; color: var(--leise); align-items: center; } .h-uhr i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--marke); } .h-zl { list-style: none; margin: 0; padding: 0; font-size: 13px; } .h-zl li { display: grid; grid-template-columns: 78px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--linie); } .h-zl li:first-child { border-top: 0; } .h-zl .zt { color: var(--leise); font-variant-numeric: tabular-nums; } .h-zl .wo { color: var(--leise); font-size: 12px; } /* ── 5 Fenster ── */ .zoom-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; overflow: auto; padding: 3vh 16px; } /* Beitrag bearbeiten (12.11.2026) */ .bm-hinter { align-items: center !important; padding: 2vh 16px !important; } .bm { background: var(--feld); color: #3B3B3B; border-radius: 22px; width: min(1400px, 94vw); max-height: 96vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; } html:not([data-thema="hell"]) .bm { color: var(--text); } .bm-kopf { display: flex; align-items: center; gap: 12px; padding: 18px 28px 14px; border-bottom: 1px solid var(--linie); } .bm-kopf h2 { font-family: Lora, Georgia, serif; font-weight: 500; font-size: 28px; margin: 0; flex: 1; color: inherit; } .bm-stand { padding: 6px 14px; border-radius: 10px; background: var(--eingabe); font-size: 13px; color: var(--leise); } .bm-stand.ok { background: rgba(79,138,85,.14); color: #3F7A47; } .bm-nr { padding: 6px 14px; border-radius: 10px; border: 1px solid var(--linie); font-size: 14px; font-weight: 600; } .bm-zu { border: 0; background: none; font-size: 24px; cursor: pointer; color: inherit; padding: 0 4px; } .bm-rumpf { display: grid; grid-template-columns: 1fr 340px; gap: 24px; padding: 18px 28px; overflow: auto; flex: 1; min-height: 0; } .bm-links { display: flex; flex-direction: column; min-height: 0; } .bm-ab { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); } .bm-ab:last-child { border-bottom: 0; } .bm-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--marke); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; } .bm-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .bm h3 { margin: 2px 0 2px; font-size: 18px; font-weight: 600; color: inherit; } .bm h3 small { font-weight: 400; font-size: 12px; color: var(--leise); margin-left: 6px; } .bm label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: inherit; } .bm-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .bm input:not([type=file]), .bm select, .bm textarea { font: inherit; font-size: 16px; color: #3B3B3B; background: var(--eingabe); border: 1px solid var(--linie); border-radius: 10px; padding: 9px 12px; width: 100%; box-sizing: border-box; } html:not([data-thema="hell"]) .bm input:not([type=file]), html:not([data-thema="hell"]) .bm select, html:not([data-thema="hell"]) .bm textarea { color: var(--text); } .bm-wachs { flex: 1; } .bm-wachs .bm-inhalt textarea[name="text"] { flex: 1; min-height: 180px; resize: vertical; } .bm textarea.bm-anleitung { font-style: italic; font-size: 14px; color: var(--leise) !important; background: none; border: 0; padding: 2px 0; resize: none; overflow: hidden; } .bm-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .bm-zeile .bm-ab { border-bottom: 0; } .bm textarea.bm-notiz { min-height: 120px; flex: 1; resize: vertical; background: var(--fk-notiz, #F6F0EC); } .bm-nstand { font-size: 11px; color: var(--leise); min-height: 14px; } .bm-datei { position: relative; align-items: center; text-align: center; border: 1.5px dashed var(--linie); border-radius: 10px; padding: 12px; cursor: pointer; } .bm-datei:hover { border-color: var(--marke); } .bm-datei input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .bm-datei b { font-weight: 500; font-size: 15px; } .bm-datei small { color: var(--leise); font-size: 12px; } .bm-vorschau { background: var(--eingabe); border: 1px solid var(--linie); border-radius: 16px; padding: 16px; align-self: start; position: sticky; top: 0; } .bm-vorschau h3 { margin-bottom: 12px; } .bm-bild { display: grid; place-items: center; } .bm-bild img, .bm-bild video { max-width: 100%; max-height: 46vh; border-radius: 12px; display: block; } .bm-leer { color: var(--leise); font-size: 13px; padding: 40px 0; } .bm-fuss { display: flex; align-items: center; gap: 12px; padding: 14px 28px; border-top: 1px solid var(--linie); } .bm-knoepfe { display: flex; gap: 12px; } .bm-fuss button { font: inherit; font-size: 16px; border-radius: 22px; padding: 10px 24px; cursor: pointer; border: 1px solid var(--linie); background: var(--feld); color: inherit; } .bm-fuss .bm-loeschen { color: var(--marke); } .bm-fuss .bm-erledigt { border-color: #4F8A55; color: #3F7A47; } .bm-fuss .bm-speichern { background: var(--marke); border-color: var(--marke); color: #fff; font-weight: 600; } @media (max-width: 900px) { .bm-rumpf { grid-template-columns: 1fr; } .bm-zeile, .bm-zwei { grid-template-columns: 1fr; } .bm-vorschau { position: static; } }