DogFatherGitandClaude Opus 5
233cd76d78
Filipe: "ich will dass du die komplette seite auf dem handy abcheckst.
ich will dass alles perfekt aussieht und bedienbar ist."
DER SCHWERSTE FUND: Auf ZWOELF Seiten war der "Meine Sicht"-Umschalter
nicht bedienbar -- wer darauf tippte, landete im Chat.
Bei 412 px (der haeufigsten Android-Breite ueberhaupt) brach die
Kopfleiste nicht um, der Umschalter wurde auf 50 px zusammengedrueckt,
sein Knopf behielt aber seine 104 px Mindestbreite und lag damit quer
ueber dem Chat-Knopf. Sichtbar war davon nichts.
Und die Ursache steht seit dem 05.09. woertlich im Kommentar daneben:
"Die Rechnung ging genau auf, solange rechts VIER Dinge standen. Mit der
Glocke sind es FUENF, und bei 320 px passte es nicht mehr." Am 06.09.
habe ich den Chat-Knopf dazugesetzt -- SECHS -- und die Schwelle bei 380
gelassen. Derselbe Fehler, eine Position weiter.
Die Lehre ist nicht "380 auf 430 erhoehen"; das waere er ein drittes
Mal, nur mit einer anderen Zahl. Eine feste Schwelle ist eine Rechnung,
die jemand einmal aufgestellt hat und die beim naechsten Knopf still
falsch wird. `flex-wrap: wrap` OHNE Schwelle rechnet nicht, sondern
misst -- es bricht genau dann um, wenn der Platz nicht reicht.
DASSELBE NOCH EINMAL, am anderen Ende: Bei 1280 px brauchte die Leiste
1235 px (Marke 375 + Bedienelemente 844 + Abstand 16) und hatte 1200.
Auch hier war der Chat-Knopf der Tropfen. Sie brach um, sobald das
Skript die Bedienelemente eingehaengt hatte, und schob die ganze Seite
52 px nach unten -- CLS 0,94. Jetzt gibt die MARKE nach (sie darf
gekuerzt werden, ein Knopf nicht), und umgebrochen wird nur noch auf
sehr schmalen Geraeten.
WEITERE ECHTE FUNDE:
* /workspace/api/chat/ungelesen wurde auf JEDER Seite ZWEIMAL geholt:
einmal beim Laden, einmal Millisekunden spaeter beim Aufgehen des
Ereignisstroms. Der 'open'-Zuhoerer war fuer Wiederverbindungen
gedacht und feuerte auch beim ersten Mal.
* Drei Kacheln teilten sich einen Farbton mit einer anderen (18 Farben
auf 21 Kacheln). Filipe wollte ausdruecklich, dass jede ihre eigene
hat. Nicht eine Farbe dazuerfunden -- der ganze Farbkreis ist mit
tools/kachel-farben.mjs neu in 21 geteilt; kleinster Abstand zweier
Nachbarn jetzt 120 Grad (vorher 106). Dabei fiel eine feste 16 in
der Mischschleife auf: Bei 18 Kacheln wurden die letzten beiden nie
mitgemischt.
* Der Agentur-Untertitel wurde auf dem Handy abgeschnitten.
* Ein zugeklappter <details>-Kasten (Kalender-Abo) verdeckte einen
Filter-Chip: Chromium versteckt dessen Inhalt ueber
`content-visibility`, nicht ueber `display` -- die Kaesten behalten
eine Groesse. Dieselbe Falle wie bei den Zeitbloecken, dieselbe
Loesung.
UND DREI PRUEFUNGEN, DIE SELBST FALSCH LAGEN:
* "achtzehn Kacheln" stand als feste Zahl im Test. Eine Pruefung, die
bei jeder neuen Kachel rot wird, erzieht dazu, ihr Rotwerden zu
ignorieren. Sie zaehlt jetzt aus bereiche.js.
* "das Licht der Kalender-Kachel (tuerkis) muss mehr Blau als Rot
haben" -- Wissen von aussen, und nach dem Neurechnen war der
Kalender rosa. Gemessen wird jetzt gegen den Ton der Kachel selbst.
* pruef-workspace-umzug meldete sein Ergebnis in eigenen Worten. Der
Gesamtlauf las daraus NULL Pruefungen und schrieb bei JEDEM Lauf ein
FEHL, obwohl alle 31 Punkte bestanden. Ein Fehlalarm, der immer
kommt, macht den einen echten unsichtbar.
Und weil "BUTTON 'Meine Sicht' verdeckt" mich eine Stunde gekostet hat,
sagen pruef-handy und pruef-tempo jetzt DAZU, was verdeckt und was
springt -- mit Elternkette und Koordinaten. Ein Befund, den man nicht
verorten kann, ist ein halber.
NEU: der Kalender zum Abonnieren (Stufe 3.2). Persoenlicher, jederzeit
widerrufbarer Link fuer Google, Apple und Outlook. 36 Pruefungen, die
das ICS ZURUECKLESEN statt es anzusehen -- entfaltet, entschluesselt,
verglichen. Wichtigster Punkt: Der Weg ohne Anmeldung darf nichts
zeigen, was der Weg mit Anmeldung nicht zeigt.
Co-Authored-By: Claude Opus 5 <[email protected]>
897 lines
33 KiB
CSS
897 lines
33 KiB
CSS
/* ===================================================================
|
|
Kalender
|
|
|
|
Gebaut nach demselben Grundsatz wie die Kacheln auf der Startseite:
|
|
Die Farbe gehört zur SACHE, nicht zum Rang. Ein Call ist überall
|
|
blau, ein Review überall grün, eine Frist überall orange -- in der
|
|
Pille im Raster, in der Zeile in der Liste, im Filterknopf und im
|
|
Balken des Zeitstrahls. Wer die Farbe einmal gelernt hat, muss die
|
|
Beschriftung nicht mehr lesen.
|
|
|
|
Augenschonend: gedeckte Töne, keine Signalfarben, kein Blinken. Der
|
|
einzige laute Punkt ist "heute" -- und der darf laut sein, weil man
|
|
ihn sucht.
|
|
=================================================================== */
|
|
|
|
/* ---------- Kopf: der Zeitraum als Überschrift --------------------------
|
|
Man liest zuerst, WO man ist, und bewegt sich dann. Deshalb steht der
|
|
Monat groß und die Navigation daneben, nicht umgekehrt. */
|
|
.k-kopf {
|
|
position: relative; overflow: hidden;
|
|
display: flex; align-items: flex-end; justify-content: space-between;
|
|
flex-wrap: wrap; gap: 16px;
|
|
margin-bottom: 22px; padding-bottom: 18px;
|
|
/* Dieselbe auslaufende Trennlinie wie auf allen anderen Seiten -- der
|
|
Kalender hat zwar einen eigenen Kopf, gehört aber zur selben
|
|
Familie. Die Farbe kommt aus data-ton am body (kopf.js). */
|
|
border-bottom: 1px solid transparent;
|
|
border-image: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 40%, var(--rand-hell)),
|
|
transparent 62%) 1;
|
|
}
|
|
/* Zeichen und Zeitraum nebeneinander (die Plakette setzt kopf.js). */
|
|
.k-kopf .kopf-zeile__marke { align-items: center; }
|
|
.k-kopf .k-kopf__titel { min-width: 0; }
|
|
.k-zeitraum {
|
|
margin: 0;
|
|
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
|
|
letter-spacing: -.025em;
|
|
color: #f2f7fd;
|
|
text-shadow: 0 2px 26px rgba(63, 189, 245, .16);
|
|
/* Der Monatsname wechselt beim Blättern die Länge. Ohne feste
|
|
Zeichenbreite für die Jahreszahl springt die Zeile dabei. */
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-kopf__unter {
|
|
margin: 5px 0 0;
|
|
font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.k-pfeil {
|
|
min-width: 38px; padding-left: 0; padding-right: 0;
|
|
font-size: 1.15rem; line-height: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ---------- Die beiden Anlassreihen ------------------------------------
|
|
Oben "Als Nächstes" (blickt ab heute nach vorn, ändert sich beim
|
|
Blättern NICHT), darunter die Anlässe des angezeigten Zeitraums. Sie
|
|
sehen absichtlich gleich aus -- es sind dieselben Dinge, nur zu einer
|
|
anderen Frage. Die Überschriften sagen, welche. */
|
|
.k-leiste { margin-bottom: 20px; }
|
|
.k-leiste .feldschild { display: flex; align-items: center; gap: 9px; }
|
|
.k-leiste .feldschild::before {
|
|
content: "";
|
|
width: 18px; height: 2px; border-radius: 2px;
|
|
background: linear-gradient(90deg, var(--akzent), transparent);
|
|
opacity: .8;
|
|
}
|
|
.k-anlassreihe {
|
|
display: grid; gap: 9px;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.k-anlasskarte {
|
|
--afarbe: var(--akzent);
|
|
position: relative; overflow: hidden;
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 11px 14px 11px 16px;
|
|
border: 1px solid color-mix(in srgb, var(--afarbe) 26%, var(--rand));
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(90deg, color-mix(in srgb, var(--afarbe) 11%, transparent), transparent 58%),
|
|
var(--flaeche);
|
|
cursor: pointer;
|
|
transition: border-color .18s ease, background .18s ease, transform .18s ease;
|
|
}
|
|
.k-anlasskarte::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--afarbe),
|
|
color-mix(in srgb, var(--afarbe) 35%, transparent));
|
|
}
|
|
.k-anlasskarte:hover, .k-anlasskarte:focus-visible {
|
|
border-color: color-mix(in srgb, var(--afarbe) 46%, var(--rand));
|
|
transform: translateY(-1px);
|
|
}
|
|
/* Vorbei heißt: steht noch da, aber leiser. Ganz wegzulassen wäre
|
|
falsch -- man will sehen, dass der Tag gewesen ist. */
|
|
.k-anlasskarte.vorbei { opacity: .5; }
|
|
.k-anlasskarte__sym { font-size: 1.3rem; line-height: 1; flex: none; }
|
|
.k-anlasskarte__txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
|
|
/* Der Name darf umbrechen statt abzubrechen. Vorher stand hier
|
|
"Tag der Deutsc…" -- abgeschnittener Text sieht auf den ersten Blick
|
|
nach Absicht aus und ist deshalb der teuerste stille Fehler in einer
|
|
Karte. Zwei Zeilen kosten nichts, ein verlorener Name schon. */
|
|
.k-anlasskarte__name {
|
|
font-weight: 650; color: var(--text);
|
|
line-height: 1.25;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.k-anlasskarte__wann { font-size: .78rem; color: var(--text-leise); }
|
|
.k-anlasskarte__rest {
|
|
flex: none; text-align: right;
|
|
font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--afarbe);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-anlasskarte__rest small {
|
|
display: block; margin-top: 2px;
|
|
font-size: .64rem; letter-spacing: .06em;
|
|
color: var(--text-still); text-transform: none;
|
|
}
|
|
.k-anlassleer {
|
|
grid-column: 1 / -1;
|
|
margin: 0; padding: 13px 16px;
|
|
font-size: .88rem; color: var(--text-still);
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
|
|
/* ---------- Werkzeugleiste: Ansicht und Filter -------------------------- */
|
|
.k-werkzeuge {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
flex-wrap: wrap; gap: 12px;
|
|
margin: 4px 0 16px;
|
|
}
|
|
.k-ansichten { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.k-ansicht {
|
|
padding: 8px 15px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: var(--flaeche);
|
|
color: var(--text-leise);
|
|
font: inherit; font-size: .86rem;
|
|
cursor: pointer;
|
|
transition: border-color .18s ease, background .18s ease, color .18s ease;
|
|
}
|
|
.k-ansicht:hover { color: var(--text); border-color: var(--rand-hell); }
|
|
.k-ansicht[aria-pressed="true"] {
|
|
color: #eaf4fd;
|
|
border-color: color-mix(in srgb, var(--akzent) 46%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 15%, transparent);
|
|
}
|
|
|
|
.k-filter { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.k-chip {
|
|
--cfarbe: var(--akzent);
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 8px 14px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: var(--flaeche);
|
|
color: var(--text-still);
|
|
font: inherit; font-size: .84rem;
|
|
cursor: pointer;
|
|
font-variant-numeric: tabular-nums;
|
|
transition: border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
|
|
}
|
|
.k-chip__punkt {
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--cfarbe);
|
|
transition: opacity .18s ease, box-shadow .18s ease;
|
|
}
|
|
.k-chip[aria-pressed="true"] {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--cfarbe) 40%, transparent);
|
|
background: color-mix(in srgb, var(--cfarbe) 11%, transparent);
|
|
}
|
|
.k-chip[aria-pressed="true"] .k-chip__punkt {
|
|
box-shadow: 0 0 8px color-mix(in srgb, var(--cfarbe) 70%, transparent);
|
|
}
|
|
/* Ausgeschaltet: der Punkt wird hohl. Nur die Deckkraft zu senken wäre
|
|
im Kontrastmodus nicht zu unterscheiden. */
|
|
.k-chip[aria-pressed="false"] .k-chip__punkt {
|
|
background: transparent;
|
|
box-shadow: inset 0 0 0 1.5px var(--cfarbe);
|
|
opacity: .55;
|
|
}
|
|
|
|
/* ---------- Monatsraster ------------------------------------------------
|
|
Eine Spalte für die Kalenderwoche, dann die sieben Tage. Die
|
|
KW-Spalte ist kein Schmuck: In Absprachen ("machen wir in KW 42")
|
|
ist sie die übliche Währung. */
|
|
.k-raster {
|
|
display: grid;
|
|
grid-template-columns: 46px repeat(7, minmax(0, 1fr));
|
|
gap: 1px;
|
|
background: var(--rand);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
overflow: hidden;
|
|
}
|
|
.k-spaltenkopf {
|
|
padding: 11px 10px;
|
|
background: rgba(12, 17, 28, .82);
|
|
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
|
|
color: var(--text-leise);
|
|
}
|
|
.k-spaltenkopf--kw { color: var(--text-still); }
|
|
|
|
.k-kw {
|
|
display: flex; align-items: flex-start; justify-content: center;
|
|
padding: 10px 4px;
|
|
background: rgba(9, 13, 22, .78);
|
|
font-size: .78rem; font-weight: 600;
|
|
color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Die laufende Woche wird in der KW-Spalte markiert -- dadurch findet
|
|
man sich beim Blättern sofort zurecht. */
|
|
.k-kw[data-jetzt="ja"] {
|
|
color: var(--akzent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, rgba(9, 13, 22, .78));
|
|
}
|
|
|
|
.k-tag {
|
|
min-height: 108px;
|
|
padding: 8px 9px 10px;
|
|
background: rgba(11, 15, 25, .74);
|
|
display: flex; flex-direction: column; gap: 4px;
|
|
cursor: pointer;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-tag:hover { background: rgba(20, 27, 42, .85); }
|
|
.k-tag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
/* Tage des Nachbarmonats: da, aber deutlich zurückgenommen. Sie ganz
|
|
wegzulassen würde das Raster zerreißen. */
|
|
.k-tag[data-fremd="ja"] { background: rgba(7, 10, 17, .72); }
|
|
.k-tag[data-fremd="ja"] .k-tag__zahl { color: var(--text-still); opacity: .6; }
|
|
.k-tag[data-wochenende="ja"] { background: rgba(9, 12, 20, .8); }
|
|
/* Gesetzlicher Feiertag: ein Hauch Rosé. Kein Signal, nur eine andere
|
|
Fläche -- man sieht ihn, ohne dass er ruft. */
|
|
.k-tag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 9%, rgba(11, 15, 25, .74)); }
|
|
.k-tag[data-feiertag="ja"]:hover { background: color-mix(in srgb, #ff9aa2 14%, rgba(11, 15, 25, .74)); }
|
|
.k-tag[data-heute="ja"] {
|
|
background: color-mix(in srgb, var(--akzent) 13%, rgba(11, 15, 25, .74));
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
}
|
|
|
|
.k-tag__kopf { display: flex; align-items: baseline; gap: 6px; }
|
|
.k-tag__zahl {
|
|
font-size: .95rem; font-weight: 650; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Am Monatsersten steht der Monatsname dabei -- sonst weiß man in der
|
|
letzten Rasterzeile nicht, ob die 1 schon zum nächsten Monat gehört.
|
|
|
|
Bewusst --text-leise statt --text-still: Wenn der Monatserste
|
|
zufällig HEUTE ist, liegt der Text auf der aufgehellten Heute-Zelle,
|
|
und dort kam der leiseste Grauton nur noch auf 3,96:1. Gemessen an
|
|
echten Bildpunkten, nicht an der Farbangabe -- die weiß nichts davon,
|
|
was hinter ihr liegt. Jetzt 5,9:1. */
|
|
.k-tag__monat { font-size: .7rem; color: var(--text-leise); }
|
|
/* 0,7 rem statt 0,62 (9,9 px). Gesperrt und in Grossbuchstaben liest
|
|
sich ohnehin schwerer als normaler Text -- da sind zehn Pixel die
|
|
Untergrenze, nicht der Richtwert. */
|
|
.k-tag__heute {
|
|
margin-left: auto;
|
|
font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--akzent);
|
|
}
|
|
|
|
/* ---------- Anlassmarke im Raster --------------------------------------- */
|
|
.k-anlass {
|
|
--afarbe: var(--akzent);
|
|
display: block;
|
|
padding: 2px 6px;
|
|
border-radius: 5px;
|
|
border-left: 2px solid var(--afarbe);
|
|
background: color-mix(in srgb, var(--afarbe) 13%, transparent);
|
|
color: color-mix(in srgb, var(--afarbe) 70%, #ffffff);
|
|
font-size: .68rem; line-height: 1.35;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
/* Feiertage sind lauter als Anlässe: Sie sind eine Tatsache, kein
|
|
Vorschlag. */
|
|
.k-anlass.feiertag {
|
|
background: color-mix(in srgb, var(--afarbe) 20%, transparent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------- Pille: ein Eintrag im Raster -------------------------------- */
|
|
.k-pille {
|
|
--pfarbe: var(--akzent);
|
|
display: block;
|
|
padding: 3px 7px;
|
|
border-radius: 5px;
|
|
border-left: 2px solid var(--pfarbe);
|
|
background: color-mix(in srgb, var(--pfarbe) 16%, transparent);
|
|
color: var(--text);
|
|
font-size: .72rem; line-height: 1.4;
|
|
text-decoration: none;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-pille:hover { background: color-mix(in srgb, var(--pfarbe) 26%, transparent); }
|
|
.k-pille__zeit {
|
|
color: var(--pfarbe); font-weight: 650; margin-right: 5px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Erledigt: durchgestrichen UND blasser. Nur blasser wäre im
|
|
Kontrastmodus nicht zu erkennen. */
|
|
.k-pille.erledigt { opacity: .5; text-decoration: line-through; }
|
|
|
|
/* ---------- Wochenansicht ----------------------------------------------- */
|
|
.k-woche {
|
|
display: grid; gap: 1px;
|
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
background: var(--rand);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
overflow: hidden;
|
|
}
|
|
.k-wochentag {
|
|
min-height: 190px;
|
|
padding: 10px;
|
|
background: rgba(11, 15, 25, .74);
|
|
display: flex; flex-direction: column; gap: 5px;
|
|
cursor: pointer;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-wochentag:hover { background: rgba(20, 27, 42, .85); }
|
|
.k-wochentag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
.k-wochentag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 9%, rgba(11, 15, 25, .74)); }
|
|
.k-wochentag[data-heute="ja"] {
|
|
background: color-mix(in srgb, var(--akzent) 13%, rgba(11, 15, 25, .74));
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
}
|
|
.k-wochentag__kopf {
|
|
display: flex; align-items: baseline; gap: 7px;
|
|
padding-bottom: 7px; margin-bottom: 3px;
|
|
border-bottom: 1px solid var(--rand);
|
|
}
|
|
.k-wochentag__name {
|
|
font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.k-wochentag__zahl {
|
|
font-size: 1.25rem; font-weight: 700; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-wochentag__leer { margin: auto 0; color: var(--text-still); font-size: .8rem; }
|
|
|
|
/* ---------- Listenansicht ----------------------------------------------- */
|
|
.k-liste { display: grid; gap: 12px; }
|
|
.k-listentag {
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
display: grid; gap: 7px;
|
|
}
|
|
.k-listentag[data-vergangen="ja"] { opacity: .62; }
|
|
.k-listentag[data-heute="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 40%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche));
|
|
}
|
|
.k-listentag__kopf { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
|
|
.k-listentag__datum { font-weight: 650; color: var(--text); }
|
|
.k-listentag__kw {
|
|
font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still); font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-listentag__marke {
|
|
margin-left: auto; padding: 2px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 34%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 13%, transparent);
|
|
color: var(--akzent);
|
|
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
|
|
}
|
|
|
|
/* ---------- Eine ausführliche Zeile ------------------------------------- */
|
|
.k-zeile {
|
|
--zfarbe: var(--akzent);
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center; gap: 12px;
|
|
padding: 9px 12px 9px 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--rand);
|
|
background:
|
|
linear-gradient(90deg, color-mix(in srgb, var(--zfarbe) 8%, transparent), transparent 50%),
|
|
var(--flaeche);
|
|
}
|
|
.k-zeile::before {
|
|
content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
|
|
border-radius: 0 3px 3px 0;
|
|
background: var(--zfarbe);
|
|
}
|
|
.k-zeile[data-erledigt="ja"] { opacity: .55; }
|
|
.k-zeile[data-erledigt="ja"] .k-zeile__titel { text-decoration: line-through; }
|
|
.k-zeile__zeit {
|
|
font-size: .82rem; font-weight: 650; color: var(--zfarbe);
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 5.5ch;
|
|
}
|
|
.k-zeile__titel { color: var(--text); min-width: 0; }
|
|
.k-zeile__knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.k-zeile__art {
|
|
padding: 2px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--zfarbe) 32%, transparent);
|
|
color: var(--zfarbe);
|
|
font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
|
|
}
|
|
.k-zeile__zusatz {
|
|
grid-column: 1 / -1;
|
|
display: flex; flex-wrap: wrap; gap: 4px 10px;
|
|
font-size: .78rem; color: var(--text-leise);
|
|
}
|
|
.k-zeile__zusatz a { color: var(--akzent); }
|
|
|
|
/* ---------- Zeitstrahl ---------------------------------------------------
|
|
Sechs Wochen auf einer Achse. Die Höhe eines Strichs ist die Menge
|
|
des Tages -- man sieht Ballungen und Lücken, ohne zu zählen. */
|
|
.k-strahl-rahmen {
|
|
padding: 20px 18px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.k-strahl {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
align-items: end;
|
|
gap: 2px;
|
|
height: 150px;
|
|
}
|
|
.k-strahl__tag {
|
|
--menge: 0;
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
|
|
gap: 3px;
|
|
padding-bottom: 16px;
|
|
border-radius: 4px 4px 0 0;
|
|
cursor: pointer;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-strahl__tag:hover { background: rgba(255, 255, 255, .05); }
|
|
.k-strahl__tag:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
|
|
.k-strahl__tag[data-wochenende="ja"] { background: var(--flaeche); }
|
|
.k-strahl__tag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 10%, transparent); }
|
|
.k-strahl__tag[data-heute="ja"] { background: color-mix(in srgb, var(--akzent) 15%, transparent); }
|
|
.k-strahl__saeule {
|
|
--sfarbe: var(--akzent);
|
|
width: 100%;
|
|
/* Ein leerer Tag bekommt einen Sockel von 3 px statt gar nichts --
|
|
sonst sähe die Achse an ruhigen Stellen kaputt aus. */
|
|
height: calc(3px + var(--menge) * 20px);
|
|
border-radius: 3px 3px 0 0;
|
|
background: linear-gradient(180deg, var(--sfarbe),
|
|
color-mix(in srgb, var(--sfarbe) 30%, transparent));
|
|
opacity: .92;
|
|
}
|
|
.k-strahl__tag[style*="--menge: 0"] .k-strahl__saeule { opacity: .3; }
|
|
.k-strahl__sym { position: absolute; top: 2px; font-size: .8rem; }
|
|
.k-strahl__kw {
|
|
position: absolute; bottom: 0;
|
|
font-size: .62rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-strahl__fuss {
|
|
margin: 14px 0 0;
|
|
font-size: .76rem; color: var(--text-still);
|
|
}
|
|
|
|
/* ---------- Leerer Zeitraum --------------------------------------------- */
|
|
.k-leer {
|
|
padding: 26px 22px;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
text-align: center;
|
|
}
|
|
.k-leer__satz { margin: 0 0 6px; color: var(--text-leise); }
|
|
.k-leer__tipp { margin: 0; font-size: .82rem; color: var(--text-still); }
|
|
|
|
/* ---------- Tagesdialog -------------------------------------------------- */
|
|
.k-dialog {
|
|
width: min(560px, calc(100vw - 32px));
|
|
padding: 20px 22px;
|
|
border: 1px solid var(--rand-hell);
|
|
border-radius: var(--radius);
|
|
background: var(--glas-tief);
|
|
color: var(--text);
|
|
box-shadow: var(--schatten);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
.k-dialog::backdrop { background: rgba(3, 5, 10, .72); backdrop-filter: blur(3px); }
|
|
.k-dialog__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.k-dialog__titel { display: block; font-size: 1.1rem; color: #eaf2fb; }
|
|
.k-dialog__unter {
|
|
display: block; margin-top: 3px;
|
|
font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.k-dialog__anlaesse { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
|
|
.k-dialog__anlaesse:empty { display: none; }
|
|
.k-dialog__anlaesse .k-anlass { font-size: .76rem; padding: 4px 9px; }
|
|
.k-dialog__liste { display: grid; gap: 8px; margin-bottom: 16px; }
|
|
.k-dialog__fuss {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.k-dialog__tipp { font-size: .74rem; color: var(--text-still); }
|
|
|
|
/* ---------- Kleinere Bildschirme ----------------------------------------
|
|
Das Monatsraster ist auf einem Handy nicht sinnvoll zu quetschen: Bei
|
|
390 px wären die Zellen 46 px breit, und in einer 46-px-Zelle steht
|
|
kein Termin. Statt zu schrumpfen wird deshalb umgebaut -- die
|
|
KW-Spalte fällt weg, die Zellen werden flacher, und die Pillen zeigen
|
|
nur noch die Uhrzeit als Punkt. */
|
|
@media (max-width: 860px) {
|
|
.k-raster { grid-template-columns: 32px repeat(7, minmax(0, 1fr)); }
|
|
.k-tag { min-height: 76px; padding: 6px 5px 7px; }
|
|
.k-tag__monat, .k-tag__heute { display: none; }
|
|
.k-anlass, .k-pille {
|
|
font-size: .6rem; padding: 1px 4px;
|
|
border-left-width: 2px;
|
|
}
|
|
.k-pille__zeit { margin-right: 3px; }
|
|
.k-spaltenkopf { padding: 8px 4px; font-size: .66rem; letter-spacing: .06em; }
|
|
.k-kw { font-size: .66rem; padding: 7px 2px; }
|
|
.k-woche { grid-template-columns: 1fr; }
|
|
.k-wochentag { min-height: 0; }
|
|
.k-strahl { height: 110px; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.k-kopf { align-items: flex-start; }
|
|
.k-nav { width: 100%; }
|
|
.k-zeile { grid-template-columns: auto 1fr; }
|
|
.k-zeile__knoepfe { grid-column: 1 / -1; }
|
|
.k-anlassreihe { grid-template-columns: 1fr; }
|
|
.k-wdh { grid-template-columns: 1fr; }
|
|
.k-serienliste { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ===================================================================
|
|
WIEDERHOLUNGEN (02.09.2026)
|
|
|
|
Termine, die von allein weiterlaufen. Zwei Stellen:
|
|
* die Ende-Zeile im Formular samt Vorschausatz
|
|
* die Liste "Läuft von allein" über dem Kalender
|
|
|
|
Gedeckt gehalten wie alles andere hier. Eine Automatik darf nicht
|
|
lauter sein als das, was ein Mensch eingetragen hat -- sie soll
|
|
auffindbar sein, nicht auffällig.
|
|
=================================================================== */
|
|
|
|
.k-wdh {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 260px) 1fr;
|
|
align-items: end;
|
|
gap: 10px 18px;
|
|
}
|
|
.k-wdh__satz {
|
|
margin: 0 0 4px;
|
|
font-size: .84rem; line-height: 1.5;
|
|
color: var(--text-leise);
|
|
}
|
|
.k-wdh__satz:not(:empty)::before {
|
|
content: "↻";
|
|
margin-right: 7px;
|
|
color: var(--akzent);
|
|
}
|
|
|
|
/* Das Zeichen an einem einzelnen Termin. Klein, gedeckt, ohne eigenen
|
|
Platzanspruch -- der Titel bleibt die Hauptsache. */
|
|
.k-wdh-zeichen {
|
|
margin-left: 5px;
|
|
font-size: .78em;
|
|
opacity: .65;
|
|
vertical-align: baseline;
|
|
}
|
|
/* In der Pille steht es VOR dem Titel (sonst schneidet die schmale
|
|
Monatszelle es ab) -- dort gehört der Abstand entsprechend nach
|
|
rechts. Die Pille kürzt mit text-overflow, nicht als Flexbox: Was
|
|
links steht, bleibt sichtbar. */
|
|
.k-pille .k-wdh-zeichen { margin: 0 4px 0 0; }
|
|
|
|
.k-serienliste {
|
|
display: grid; gap: 9px;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.k-serie {
|
|
--sfarbe: var(--akzent);
|
|
position: relative; overflow: hidden;
|
|
padding: 13px 15px 12px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
/* Der Farbstreifen links ist derselbe Gedanke wie in der Liste: Die
|
|
Farbe gehört zur Art des Termins, nicht zum Rang der Serie. */
|
|
.k-serie::before {
|
|
content: "";
|
|
position: absolute; inset: 0 auto 0 0; width: 3px;
|
|
background: var(--sfarbe);
|
|
opacity: .75;
|
|
}
|
|
/* Pausiert: blasser UND gestrichelt. Nur blasser wäre im Kontrastmodus
|
|
nicht von "läuft" zu unterscheiden. */
|
|
.k-serie[data-aktiv="nein"] { opacity: .72; border-style: dashed; }
|
|
.k-serie[data-aktiv="nein"]::before { opacity: .35; }
|
|
|
|
.k-serie__kopf {
|
|
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.k-serie__titel { font-weight: 600; color: var(--text); }
|
|
.k-serie__art {
|
|
padding: 2px 9px; border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--sfarbe) 32%, transparent);
|
|
color: var(--sfarbe);
|
|
/* .78rem = 12,48 px. Auf dem Handy sind 11,5 px die Untergrenze
|
|
(pruef-grosscheck.mjs); .68rem wären 10,88 px. Aufgefallen ist es
|
|
an derselben Stelle im Call-Raum -- hier wäre es erst aufgefallen,
|
|
sobald jemand eine Wiederholung anlegt. */
|
|
font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
|
|
}
|
|
.k-serie__zustand {
|
|
margin-left: auto;
|
|
font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.k-serie[data-aktiv="ja"] .k-serie__zustand { color: #6fbf7a; }
|
|
|
|
.k-serie__satz {
|
|
margin: 0;
|
|
font-size: .86rem; line-height: 1.5;
|
|
color: var(--text-leise);
|
|
}
|
|
.k-serie__naechster {
|
|
margin: 4px 0 0;
|
|
font-size: .78rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-serie__knoepfe {
|
|
display: flex; flex-wrap: wrap; gap: 7px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.k-anlasskarte, .k-tag, .k-wochentag, .k-pille, .k-chip,
|
|
.k-ansicht, .k-strahl__tag { transition: none; }
|
|
.k-anlasskarte:hover { transform: none; }
|
|
}
|
|
|
|
/* Ohne Farbverläufe (Kontrastmodus, Druck) müssen Kante und Schrift
|
|
allein tragen -- deshalb bleiben die Ränder erhalten. */
|
|
@media (forced-colors: active) {
|
|
.k-zeile::before, .k-anlasskarte::before { background: CanvasText; }
|
|
.k-pille, .k-anlass { border: 1px solid CanvasText; }
|
|
.k-strahl__saeule { background: CanvasText; }
|
|
.k-serie::before { background: CanvasText; }
|
|
.k-serie { border: 1px solid CanvasText; }
|
|
/* Deckkraft trägt im Kontrastmodus nicht -- der gestrichelte Rand
|
|
bleibt das Unterscheidungsmerkmal einer pausierten Serie. */
|
|
.k-serie[data-aktiv="nein"] { opacity: 1; border-style: dashed; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
WER IST NOCH DABEI — die Teilnehmerwahl
|
|
=====================================================================
|
|
|
|
Vorgeschichte (05.09.2026, Filipe mit Bildschirmfoto): *"das soll
|
|
viel besser aussehen bitte und dass soll für jeden verfügbar sein."*
|
|
|
|
Auf dem Bild klebten die Namen aneinander -- "DogfatherDogFather",
|
|
"CigdemManager", "BananaStiftScout". Zwei Fehler auf einmal:
|
|
|
|
1. DAS CSS WAR GAR NICHT DA. Die Wahl benutzte `.wahl__knopf` aus
|
|
dateien.css -- und kalender.html bindet dateien.css nicht ein.
|
|
Ohne `display:inline-flex` und `gap` stehen zwei <span> eben
|
|
direkt nebeneinander. Vierzig grüne Prüfungen zur Teilnehmerwahl
|
|
hatten das nicht gemerkt: Keine davon hat je gemessen, ob es auch
|
|
AUSSIEHT wie gedacht. Deshalb gibt es jetzt eigene Klassen im
|
|
eigenen Stylesheet -- eine Seite, die ihr CSS selbst mitbringt,
|
|
kann es nicht verlieren.
|
|
|
|
2. DIE ROLLE STAND AN JEDEM NAMEN. Auch mit Abstand bliebe es eine
|
|
lange graue Wurst, in der man niemanden findet. Jetzt tragen die
|
|
GRUPPEN die Rolle ("Manager", "Scouts"), die Namen darunter nur
|
|
noch den Namen. Das Wort steht einmal statt neunmal, und man
|
|
sucht nicht mehr, sondern springt zur richtigen Gruppe.
|
|
|
|
AUGENSCHONEND (Projektregel): gedeckte Rollentöne, kein Neon, keine
|
|
harten Weißflächen. Ausgewählt wird über Rand, Häkchen UND Schrift
|
|
erkennbar -- nicht über Farbe allein, sonst ist es für
|
|
Farbfehlsichtige nicht zu unterscheiden. */
|
|
|
|
.k-dabei { margin-top: 6px; }
|
|
|
|
.k-dabei__gruppe + .k-dabei__gruppe { margin-top: 12px; }
|
|
|
|
.k-dabei__titel {
|
|
margin: 0 0 6px;
|
|
font-size: .68rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
display: flex; align-items: center; gap: 7px;
|
|
}
|
|
/* Der Punkt trägt die Rollenfarbe -- ein ruhiger Anker fürs Auge,
|
|
ohne die ganze Überschrift einzufärben. */
|
|
.k-dabei__punkt {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--r, var(--text-still)); flex: none;
|
|
}
|
|
|
|
.k-dabei__liste { display: flex; flex-wrap: wrap; gap: 7px; }
|
|
|
|
.k-dabei__knopf {
|
|
--r: rgba(255, 255, 255, .5);
|
|
display: inline-flex; align-items: center; gap: 9px;
|
|
/* 40px Mindesthöhe: am Handy mit dem Daumen sicher zu treffen. */
|
|
min-height: 40px;
|
|
padding: 5px 14px 5px 6px;
|
|
cursor: pointer; font: inherit;
|
|
color: var(--text-leise);
|
|
background: rgba(255, 255, 255, .035);
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
|
}
|
|
.k-dabei__knopf:hover {
|
|
color: var(--text);
|
|
border-color: rgba(255, 255, 255, .24);
|
|
background: rgba(255, 255, 255, .06);
|
|
}
|
|
.k-dabei__knopf:focus-visible {
|
|
outline: 2px solid var(--r); outline-offset: 2px;
|
|
}
|
|
|
|
/* Die Initiale. Ersetzt ein Bild, das es hier nicht gibt, und macht
|
|
aus einer Textzeile ein Gesicht, das man wiedererkennt. */
|
|
.k-dabei__zeichen {
|
|
flex: none;
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
display: grid; place-items: center;
|
|
font-size: .76rem; font-weight: 700; line-height: 1;
|
|
color: var(--r);
|
|
background: color-mix(in srgb, var(--r) 14%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
|
|
}
|
|
.k-dabei__name { font-size: .86rem; font-weight: 550; }
|
|
|
|
/* Das Häkchen steht NEBEN der Farbe, nicht statt ihr. Wer Farben
|
|
schlecht unterscheidet, sieht trotzdem sofort, wer dabei ist. */
|
|
.k-dabei__haken {
|
|
flex: none; width: 14px; height: 14px;
|
|
opacity: 0; transform: scale(.7);
|
|
transition: opacity .16s ease, transform .16s ease;
|
|
}
|
|
.k-dabei__haken path { stroke: var(--r); stroke-width: 2.4; fill: none;
|
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
|
|
.k-dabei__knopf[data-an="ja"] {
|
|
color: var(--text); font-weight: 600;
|
|
border-color: color-mix(in srgb, var(--r) 55%, transparent);
|
|
background: color-mix(in srgb, var(--r) 13%, transparent);
|
|
}
|
|
.k-dabei__knopf[data-an="ja"] .k-dabei__zeichen {
|
|
color: #12151b;
|
|
background: var(--r);
|
|
border-color: var(--r);
|
|
}
|
|
.k-dabei__knopf[data-an="ja"] .k-dabei__haken { opacity: 1; transform: none; }
|
|
|
|
/* Rollentöne. Dieselben wie in personen.css -- eine Farbe pro Rolle im
|
|
ganzen Workspace, sonst muss man sie auf jeder Seite neu lernen. */
|
|
.k-dabei__gruppe[data-rolle="admin"],
|
|
.k-dabei__knopf[data-rolle="admin"] { --r: #e8c07d; }
|
|
.k-dabei__gruppe[data-rolle="manager"],
|
|
.k-dabei__knopf[data-rolle="manager"] { --r: #8a76ff; }
|
|
.k-dabei__gruppe[data-rolle="scout"],
|
|
.k-dabei__knopf[data-rolle="scout"] { --r: #5fc99a; }
|
|
.k-dabei__gruppe[data-rolle="creator"],
|
|
.k-dabei__knopf[data-rolle="creator"] { --r: #3fbdf5; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.k-dabei__knopf, .k-dabei__haken { transition: none; }
|
|
}
|
|
|
|
/* Ohne Farbverläufe trägt die Kante allein -- und das Häkchen, das
|
|
hier zum eigentlichen Merkmal wird. */
|
|
@media (forced-colors: active) {
|
|
.k-dabei__knopf { border: 1px solid CanvasText; }
|
|
.k-dabei__knopf[data-an="ja"] { border-width: 2px; }
|
|
.k-dabei__zeichen { border: 1px solid CanvasText; }
|
|
.k-dabei__haken path { stroke: CanvasText; }
|
|
}
|
|
|
|
/* ---------- Kalender abonnieren (06.09.2026) -----------------------------
|
|
|
|
Zugeklappt und unauffaellig: Man richtet die Sache EINMAL ein und
|
|
sieht sie danach nie wieder an. Ein dauerhaft offener Kasten draengte
|
|
sich vor die Termine, um die es hier geht. */
|
|
.k-abo {
|
|
margin: 0 0 22px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
overflow: hidden;
|
|
}
|
|
.k-abo__kopf {
|
|
display: grid; gap: 2px;
|
|
padding: 13px 16px; cursor: pointer;
|
|
list-style: none;
|
|
transition: background var(--tempo);
|
|
}
|
|
.k-abo__kopf::-webkit-details-marker { display: none; }
|
|
.k-abo__kopf:hover, .k-abo__kopf:focus-visible { background: rgba(150, 186, 220, .05); }
|
|
.k-abo__titel { font-size: .95rem; color: var(--text); }
|
|
.k-abo__unter { font-size: .8rem; color: var(--text-still); }
|
|
|
|
/* Ein Pfeil, der sich dreht -- das einzige Zeichen, das sagt "hier ist
|
|
mehr". Ohne ihn sieht die Zeile aus wie eine Ueberschrift. */
|
|
.k-abo__kopf::after {
|
|
content: ''; position: absolute; right: 18px; margin-top: 6px;
|
|
width: 8px; height: 8px;
|
|
border-right: 2px solid var(--text-still);
|
|
border-bottom: 2px solid var(--text-still);
|
|
transform: rotate(45deg);
|
|
transition: transform var(--tempo);
|
|
}
|
|
.k-abo { position: relative; }
|
|
.k-abo[open] .k-abo__kopf::after { transform: rotate(-135deg); }
|
|
|
|
/* ZUGEKLAPPT HEISST WEG -- ausdruecklich, nicht nur laut Browser.
|
|
|
|
Dasselbe wie bei den Zeitbloecken in calls.css, und aus demselben
|
|
Grund: Chromium versteckt den Inhalt eines geschlossenen <details>
|
|
ueber `content-visibility`, nicht ueber `display`. Die Kaesten
|
|
behalten dabei eine Groesse -- gemessen von pruef-breiten: Der Knopf
|
|
"Link erzeugen" lag bei 768 px unter einem Filter-Chip, obwohl der
|
|
Kasten zugeklappt war. Fuer das Auge unsichtbar, fuer jede Messung
|
|
(und fuer die Suchfunktion des Browsers) vorhanden. */
|
|
.k-abo:not([open]) .k-abo__inhalt { display: none; }
|
|
|
|
.k-abo__inhalt {
|
|
padding: 0 16px 16px;
|
|
border-top: 1px solid var(--rand);
|
|
padding-top: 14px;
|
|
}
|
|
.k-abo__satz {
|
|
margin: 0 0 14px; font-size: .85rem; line-height: 1.65; color: var(--text-leise);
|
|
}
|
|
|
|
.k-abo__zeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
|
|
.k-abo__feld {
|
|
flex: 1 1 320px; min-width: 0; height: 42px;
|
|
padding: 0 12px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: .8rem; color: var(--text-leise);
|
|
background: rgba(0, 0, 0, .25);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
|
|
.k-abo__stand {
|
|
margin: 0 0 14px; font-size: .8rem; color: var(--text-still);
|
|
}
|
|
/* Solange noch nie abgeholt wurde, ist das eine offene Frage -- kein
|
|
Fehler, aber auch keine Bestaetigung. */
|
|
.k-abo__stand[data-warten="ja"] { color: #d9a441; }
|
|
|
|
.k-abo__knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
|
|
|
|
.k-abo__hilfe {
|
|
margin: 16px 0 0; padding-top: 14px;
|
|
border-top: 1px solid var(--rand);
|
|
display: grid; gap: 8px;
|
|
font-size: .82rem; line-height: 1.6; color: var(--text-leise);
|
|
}
|
|
.k-abo__weg { display: block; }
|
|
|
|
@media (max-width: 640px) {
|
|
.k-abo__feld { flex: 1 1 100%; }
|
|
.k-abo__knoepfe > * { flex: 1 1 auto; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.k-abo__kopf, .k-abo__kopf::after { transition: none; }
|
|
}
|