DogFatherGitandClaude Opus 5
ca10479909
Der Wunsch stand an fuenf Stellen gleichlautend: "ich will dass da schon fertige Sachen stehen". Eine leere Seite mit einem Knopf "Neuer Eintrag" verlangt vom Creator genau das, was er noch nicht kann -- zu wissen, was ueberhaupt hineingehoert. WARUM VORLAGEN UND KEINE VORAUSGEFUELLTEN DATEN. Man koennte beim Anlegen eines Creators dreissig Eintraege in seine Datenbank schreiben. Das waere falsch: Sie waeren ab dem ersten Tag "seine" Eintraege und damit Altlast; aendert Filipe spaeter eine Formulierung, gilt sie nur fuer neue Creator; und die Liste saehe voll aus, obwohl noch nichts geschehen ist -- das Gegenteil einer ehrlichen Uebersicht. Vorlagen bleiben deshalb VORSCHLAEGE, bis jemand sie uebernimmt. Sie stehen im Code, gelten fuer alle sofort, und werden erst dann zu Daten, wenn sie gebraucht werden. Was uebernommen ist, ist ein ganz normaler Eintrag -- aenderbar, loeschbar, und von spaeteren Aenderungen an der Vorlage unberuehrt. INHALTE, fachlich begruendet: 13 Content-Ideen, jede mit AUSFORMULIERTEM Aufhaenger und Format. Die ersten ein bis drei Sekunden entscheiden ueber die Verbreitung -- "mach was Persoenliches" hilft niemandem, "Das haette ich am Anfang gern gewusst" kann man sagen. Verteilt nach 70/20/10 (Wert, Community, Eigenwerbung). 21 LIVE-Punkte in drei Abschnitten. Der mittlere ist der wichtigste und gibt es sonst nirgends: Was WAEHREND der Sendung auffaellt, ist am naechsten Tag weg. Diese Punkte sind so formuliert, dass man sie in einem Moment anklicken kann, in dem man eigentlich keine Zeit hat. Die Vorbereitung ist die laengste Liste, weil ein LIVE dort steht und faellt. Ton zuerst -- der Grund Nummer eins, warum Leute wieder gehen. "ICH BRAUCHE HILFE" wird eine AUFGABE, keine Nachricht. Eine Nachricht ist gelesen und dann weg; eine Aufgabe bleibt stehen, bis sie jemand erledigt, geht an den zustaendigen Betreuer (ohne Betreuer an die Leitung -- eine Bitte um Hilfe darf nicht ins Leere laufen), traegt hohe Prioritaet und eine Frist von drei Tagen. Ohne Frist bleibt sie liegen; das ist der Unterschied zwischen einer Aufgabe und einem Zettel. "CONTENT-PLANUNG" HEISST JETZT "CONTENT-IDEEN". "Planung" klang nach Terminen und Tabellen; was dort wirklich passiert, ist das Sammeln und Weiterentwickeln von Ideen. Der Kalender daneben plant. EIN CREATOR DARF SEINE EIGENEN EINTRAEGE AENDERN -- aber nur im Bereich Content. Wenn er sich eine Idee uebernimmt, ist das SEINE Idee; sie danach nicht umbenennen zu duerfen waere absurd. LIVE, Technik, Community und Schutz bleiben die Betreuungsakte, dort aendert er nichts. Ein erster Anlauf hatte die Ausnahme fuer alle Bereiche erlaubt -- die Pruefung pruef-bereiche-lesend hat das sofort gemeldet. DREI EIGENE FEHLER, VON DEN PRUEFUNGEN GEFUNDEN: - Der Vorlagenblock vergass nach dem Uebernehmen, was schon geholt war: Die Liste wird neu geladen, der Block neu gebaut, und die Markierung am Element war jedes Mal weg. Jetzt merkt sich das Modul die Auswahl. - Die Regel fuer eigene Eintraege war zu breit (siehe oben). - Die Marken im Vorlagenblock waren auf dem Handy 10,2 px klein. Co-Authored-By: Claude Opus 5 <[email protected]>
432 lines
17 KiB
CSS
432 lines
17 KiB
CSS
/* ===================================================================
|
|
Content-Planung.
|
|
|
|
Zwei Dinge bestimmen die Gestaltung:
|
|
|
|
1. Es ist eine STRECKE. Die Spalten stehen für Fortschritt von links
|
|
nach rechts, deshalb wird die Farbe der Spaltenköpfe von kühl
|
|
(Idee) nach warm-hell (draußen) heller — man sieht die Richtung,
|
|
ohne sie zu lesen.
|
|
|
|
2. Die Säulenfarben sind DATEN, keine Dekoration. Sie stammen aus
|
|
einer geprüften Palette und wurden gegen genau diesen Hintergrund
|
|
(#0a0d13) gerechnet: Helligkeitsband, Farbstärke, Abstand bei
|
|
Farbfehlsichtigkeit (schlechtestes Paar ΔE 8.4), Normalsicht-
|
|
Abstand (19.3) und Kontrast — alle Prüfungen bestanden. Deshalb
|
|
wird an diesen fünf Werten nichts „nachgebessert": Jede Änderung
|
|
macht die Prüfung ungültig.
|
|
|
|
Augenschonend bleibt alles: gedeckte Töne, keine Leuchtflächen, keine
|
|
Bewegung außer weichen Übergängen.
|
|
=================================================================== */
|
|
|
|
.content-wurzel,
|
|
body.start {
|
|
/* Fünf Plätze für Content-Säulen. Die Zuordnung folgt dem Platz
|
|
(slot), nicht dem Rang -- sonst wechselt eine Säule die Farbe,
|
|
sobald eine andere sie überholt. */
|
|
--saeule-1: #3987e5; /* Blau */
|
|
--saeule-2: #d95926; /* Orange */
|
|
--saeule-3: #199e70; /* Türkis */
|
|
--saeule-4: #c98500; /* Gelb */
|
|
--saeule-5: #d55181; /* Magenta */
|
|
--saeule-0: #56657a; /* ohne Säule -- bewusst grau, keine sechste Farbe */
|
|
}
|
|
|
|
/* ---------- Kennzahlen ---------------------------------------------------- */
|
|
|
|
.kennzahlen {
|
|
display: grid; gap: 10px; margin-bottom: 26px;
|
|
grid-template-columns: 1.4fr repeat(4, 1fr);
|
|
}
|
|
.kachel {
|
|
display: grid; gap: 2px; align-content: start;
|
|
padding: 15px 17px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
.kachel[data-gross="ja"] { padding: 17px 20px; }
|
|
.kachel[data-stufe="warn"] {
|
|
border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .05);
|
|
}
|
|
.kachel__wert {
|
|
font-size: 1.7rem; font-weight: 700; line-height: 1.05;
|
|
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
|
|
}
|
|
.kachel[data-gross="ja"] .kachel__wert { font-size: 2.6rem; }
|
|
.kachel[data-stufe="warn"] .kachel__wert { color: var(--warn); }
|
|
.kachel__name {
|
|
font-size: .72rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-leise);
|
|
}
|
|
.kachel__zusatz { font-size: .76rem; color: var(--text-still); }
|
|
|
|
/* ---------- Säulen-Balance ------------------------------------------------ */
|
|
|
|
.balance {
|
|
margin-bottom: 26px; padding: 16px 18px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
|
|
/* Ein 2px-Spalt zwischen den Stücken statt einer Trennlinie: Die Lücke
|
|
zeigt die Grenze, ohne eine weitere Farbe einzuführen. */
|
|
.balance__balken {
|
|
display: flex; gap: 2px; height: 30px; margin: 4px 0 12px;
|
|
border-radius: 6px; overflow: hidden;
|
|
}
|
|
.balance__stueck {
|
|
display: flex; align-items: center; justify-content: center;
|
|
min-width: 3px; transition: filter var(--tempo);
|
|
}
|
|
.balance__stueck:hover { filter: brightness(1.15); }
|
|
.balance__stueck[data-slot="1"] { background: var(--saeule-1); }
|
|
.balance__stueck[data-slot="2"] { background: var(--saeule-2); }
|
|
.balance__stueck[data-slot="3"] { background: var(--saeule-3); }
|
|
.balance__stueck[data-slot="4"] { background: var(--saeule-4); }
|
|
.balance__stueck[data-slot="5"] { background: var(--saeule-5); }
|
|
.balance__stueck[data-slot="0"] { background: var(--saeule-0); }
|
|
/* Die Zahl im Balken trägt Text-Tinte, nicht die Säulenfarbe -- Text in
|
|
der Serienfarbe ist auf jedem Untergrund ein Kontrastproblem. Auf
|
|
diesen fünf Flächen ist Dunkel der sichere Wert. */
|
|
.balance__zahl {
|
|
font-size: .72rem; font-weight: 700; color: #06090f;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
|
|
.legende__punkt { display: flex; align-items: center; gap: 7px; font-size: .82rem; }
|
|
.legende__farbe {
|
|
width: 10px; height: 10px; flex: none; border-radius: 3px;
|
|
background: var(--saeule-0);
|
|
}
|
|
.legende__farbe[data-slot="1"] { background: var(--saeule-1); }
|
|
.legende__farbe[data-slot="2"] { background: var(--saeule-2); }
|
|
.legende__farbe[data-slot="3"] { background: var(--saeule-3); }
|
|
.legende__farbe[data-slot="4"] { background: var(--saeule-4); }
|
|
.legende__farbe[data-slot="5"] { background: var(--saeule-5); }
|
|
.legende__name { color: var(--text); }
|
|
.legende__wert { color: var(--text-leise); font-variant-numeric: tabular-nums; }
|
|
.legende__ziel { color: var(--text-still); font-size: .76rem; }
|
|
.legende__ziel[data-warn="ja"] { color: var(--warn); }
|
|
|
|
.balance__hinweis { margin: 10px 0 0; font-size: .78rem; color: var(--text-still); }
|
|
|
|
/* ---------- Säulen verwalten ---------------------------------------------- */
|
|
|
|
.saeulen-kasten {
|
|
margin-bottom: 26px; padding: 18px 20px;
|
|
border: 1px solid var(--rand-hell); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
.saeule {
|
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
padding: 9px 4px; border-bottom: 1px solid var(--rand);
|
|
font-size: .86rem;
|
|
}
|
|
.saeule:last-of-type { border-bottom: 0; }
|
|
.saeule__name { font-weight: 650; }
|
|
.saeule__wer, .saeule__zahl, .saeule__ziel { color: var(--text-still); font-size: .79rem; }
|
|
.saeule__zahl { margin-left: auto; }
|
|
|
|
.saeule-neu {
|
|
display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
|
|
margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rand);
|
|
}
|
|
.saeule-neu .feld { flex: 1 1 200px; min-width: 0; }
|
|
.saeule-neu .feld--schmal { flex: 0 1 130px; }
|
|
|
|
/* ---------- Filterzeile --------------------------------------------------- */
|
|
|
|
.filterzeile { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
|
|
.filtergruppe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
|
|
.filtergruppe__schild {
|
|
font-size: .68rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still); margin-right: 2px;
|
|
}
|
|
|
|
/* ---------- Die Strecke --------------------------------------------------- */
|
|
|
|
.strecke {
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
align-items: start;
|
|
}
|
|
|
|
.spalte {
|
|
min-width: 0; padding: 12px 12px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
/* Die Richtung der Strecke, ohne ein Wort: Der Streifen über der Spalte
|
|
wird von links nach rechts heller und wärmer. */
|
|
.spalte::before {
|
|
content: ""; display: block; height: 2px; margin: -4px -4px 12px;
|
|
border-radius: 2px; opacity: .55;
|
|
}
|
|
.spalte[data-stufe="idee"]::before { background: #2c4a6b; opacity: .8; }
|
|
.spalte[data-stufe="skript"]::before { background: #2f6a97; opacity: .8; }
|
|
.spalte[data-stufe="gedreht"]::before { background: #3987e5; opacity: .7; }
|
|
.spalte[data-stufe="fertig"]::before { background: #4fb3d9; opacity: .7; }
|
|
.spalte[data-stufe="veroeffentlicht"]::before { background: #7fd4c1; opacity: .7; }
|
|
|
|
.spalte__kopf {
|
|
display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
|
|
}
|
|
.spalte__name {
|
|
margin: 0; font-size: .74rem; font-weight: 700;
|
|
letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
|
|
}
|
|
.spalte__zahl {
|
|
margin-left: auto; min-width: 20px; padding: 1px 7px; text-align: center;
|
|
font-size: .72rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.spalte__leer { margin: 6px 0 0; text-align: center; color: var(--text-still); opacity: .5; }
|
|
|
|
/* ---------- Eine Video-Karte ---------------------------------------------- */
|
|
|
|
.video {
|
|
position: relative; overflow: hidden;
|
|
margin-bottom: 8px; padding: 11px 13px 10px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .035);
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.video:last-child { margin-bottom: 0; }
|
|
.video:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .055); }
|
|
|
|
/* Die Säulenfarbe als schmale Kante links -- die Karte selbst bleibt
|
|
ruhig. Fünf eingefärbte Karten nebeneinander wären ein Bonbonglas. */
|
|
.video[data-slot]::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: var(--saeule-0);
|
|
}
|
|
.video[data-slot="1"]::before { background: var(--saeule-1); }
|
|
.video[data-slot="2"]::before { background: var(--saeule-2); }
|
|
.video[data-slot="3"]::before { background: var(--saeule-3); }
|
|
.video[data-slot="4"]::before { background: var(--saeule-4); }
|
|
.video[data-slot="5"]::before { background: var(--saeule-5); }
|
|
|
|
.video__titel { margin: 0 0 4px; font-size: .93rem; font-weight: 650; line-height: 1.35; }
|
|
|
|
/* Der Hook ist gesprochener Text -- kursiv und in Anführungszeichen
|
|
liest er sich als das, was er ist. */
|
|
.video__hook {
|
|
margin: 0 0 7px; font-size: .82rem; font-style: italic;
|
|
color: var(--text-leise); line-height: 1.45;
|
|
}
|
|
.video__hook--fehlt {
|
|
font-style: normal; font-size: .74rem; color: var(--warn); opacity: .75;
|
|
}
|
|
|
|
.video__marken { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
|
|
.marke-saeule, .marke-still {
|
|
padding: 1px 8px; border-radius: 999px;
|
|
font-size: .69rem; font-weight: 600;
|
|
}
|
|
.marke-still {
|
|
color: var(--text-still); background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
/* Der Säulenname trägt seine Farbe als Rand und schwachen Grund, nicht
|
|
als Textfarbe -- farbiger Text auf dunklem Grund wird bei den
|
|
dunkleren Plätzen schwer lesbar. */
|
|
.marke-saeule { color: var(--text); border: 1px solid var(--saeule-0); background: rgba(255, 255, 255, .04); }
|
|
.marke-saeule[data-slot="1"] { border-color: var(--saeule-1); background: rgba(57, 135, 229, .14); }
|
|
.marke-saeule[data-slot="2"] { border-color: var(--saeule-2); background: rgba(217, 89, 38, .14); }
|
|
.marke-saeule[data-slot="3"] { border-color: var(--saeule-3); background: rgba(25, 158, 112, .14); }
|
|
.marke-saeule[data-slot="4"] { border-color: var(--saeule-4); background: rgba(201, 133, 0, .14); }
|
|
.marke-saeule[data-slot="5"] { border-color: var(--saeule-5); background: rgba(213, 81, 129, .14); }
|
|
|
|
.video__termin {
|
|
margin: 0 0 7px; font-size: .75rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.video__termin[data-warn="ja"] { color: var(--warn); }
|
|
|
|
.video__knoepfe {
|
|
display: flex; flex-wrap: wrap; gap: 4px;
|
|
padding-top: 8px; border-top: 1px solid var(--rand);
|
|
}
|
|
.tu-knopf {
|
|
padding: 3px 9px;
|
|
font: inherit; font-size: .72rem; font-weight: 600;
|
|
color: var(--text-still); cursor: pointer;
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.tu-knopf:hover:not(:disabled) {
|
|
color: var(--text); border-color: var(--rand-hell); background: rgba(255, 255, 255, .09);
|
|
}
|
|
.tu-knopf[data-haupt="ja"] {
|
|
color: var(--akzent); border-color: rgba(63, 189, 245, .35);
|
|
background: rgba(63, 189, 245, .08);
|
|
}
|
|
.tu-knopf[data-haupt="ja"]:hover:not(:disabled) {
|
|
color: #fff; border-color: rgba(63, 189, 245, .6); background: rgba(63, 189, 245, .16);
|
|
}
|
|
.tu-knopf:disabled { opacity: .45; cursor: default; }
|
|
.tu-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
/* ---------- Schmale Schirme ------------------------------------------------
|
|
|
|
Fünf Spalten nebeneinander sind auf einem Handy je 60px breit -- der
|
|
Titel bräche dann nach jedem zweiten Buchstaben um. Deshalb werden aus
|
|
den Spalten untereinander liegende Abschnitte. Die Strecke bleibt
|
|
lesbar, sie läuft nur von oben nach unten statt von links nach rechts.
|
|
--------------------------------------------------------------------------- */
|
|
|
|
@media (max-width: 1100px) {
|
|
.strecke { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.kachel[data-gross="ja"] { grid-column: span 3; }
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.strecke { grid-template-columns: 1fr; }
|
|
.kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.kachel[data-gross="ja"] { grid-column: span 2; }
|
|
.kachel[data-gross="ja"] .kachel__wert { font-size: 2.1rem; }
|
|
/* Leere Spalten kosten auf dem Handy nur Platz zum Scrollen. */
|
|
.spalte:has(.spalte__leer) { display: none; }
|
|
.balance__balken { height: 26px; }
|
|
.saeule__zahl { margin-left: 0; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.video, .tu-knopf, .balance__stueck { transition: none; }
|
|
}
|
|
|
|
/* Der Aufklapper am Fuß einer zu langen Spalte. Bewusst unauffällig --
|
|
er ist kein Ziel, sondern ein Ausweg. */
|
|
.spalte__mehr {
|
|
display: block; width: 100%; margin-top: 6px; padding: 6px;
|
|
font: inherit; font-size: .74rem; font-weight: 600;
|
|
color: var(--text-still); cursor: pointer;
|
|
background: transparent;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
transition: color var(--tempo), border-color var(--tempo);
|
|
}
|
|
.spalte__mehr:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
|
|
.spalte__mehr:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
@media (prefers-reduced-motion: reduce) { .spalte__mehr { transition: none; } }
|
|
|
|
/* =====================================================================
|
|
VORLAGEN — fertige Vorschlaege zum Uebernehmen
|
|
|
|
Sie sehen bewusst ANDERS aus als eigene Eintraege: heller Rand,
|
|
gestrichelte Kante, keine Statusfarbe. Man soll auf den ersten Blick
|
|
sehen, dass hier noch nichts "gehoert" -- es sind Angebote, keine
|
|
Arbeit. Sobald einer uebernommen ist, wird die Karte ruhig und traegt
|
|
einen Haken.
|
|
===================================================================== */
|
|
|
|
.vorlagen { margin: 22px 0 28px; }
|
|
.vorlagen__kopf {
|
|
display: flex; align-items: flex-end; justify-content: space-between;
|
|
gap: 16px; flex-wrap: wrap;
|
|
margin-bottom: 14px;
|
|
}
|
|
.vorlagen__unter {
|
|
margin: 4px 0 0;
|
|
font-size: .86rem; color: var(--text-leise);
|
|
}
|
|
.vorlagen__raster {
|
|
display: grid; gap: 11px;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
|
|
}
|
|
.vorlagen__raster[hidden] { display: none; }
|
|
|
|
.vorlage {
|
|
position: relative;
|
|
padding: 15px 16px 13px;
|
|
border: 1px dashed color-mix(in srgb, var(--ton, var(--akzent)) 30%, var(--rand));
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--ton, var(--akzent)) 6%, transparent), transparent 55%),
|
|
var(--flaeche);
|
|
transition: border-color .18s ease;
|
|
}
|
|
.vorlage:hover { border-color: color-mix(in srgb, var(--ton, var(--akzent)) 50%, var(--rand)); }
|
|
/* Uebernommen: durchgezogene Kante statt gestrichelter -- aus einem
|
|
Angebot ist etwas Wirkliches geworden. */
|
|
.vorlage[data-genommen="ja"] {
|
|
border-style: solid;
|
|
border-color: rgba(80, 167, 130, .4);
|
|
opacity: .72;
|
|
}
|
|
.vorlage[data-genommen="ja"]::after {
|
|
content: "✓";
|
|
position: absolute; top: 12px; right: 14px;
|
|
color: #6fbd95; font-weight: 700;
|
|
}
|
|
.vorlage__titel {
|
|
margin: 0 0 8px;
|
|
font-size: .96rem; font-weight: 650; line-height: 1.3; color: var(--text);
|
|
}
|
|
/* Der Aufhaenger ist der wichtigste Teil einer Content-Idee -- die
|
|
ersten ein bis drei Sekunden entscheiden ueber die Verbreitung.
|
|
Deshalb steht er hervorgehoben und nicht im Fliesstext. */
|
|
.vorlage__hook {
|
|
margin: 0 0 9px; padding: 9px 11px;
|
|
border-left: 2px solid var(--ton, var(--akzent));
|
|
border-radius: 0 6px 6px 0;
|
|
background: color-mix(in srgb, var(--ton, var(--akzent)) 9%, transparent);
|
|
font-size: .88rem; line-height: 1.5; color: var(--text);
|
|
}
|
|
.vorlage__hookschild {
|
|
display: block; margin-bottom: 3px;
|
|
font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
|
|
color: var(--ton, var(--akzent));
|
|
}
|
|
.vorlage__text {
|
|
margin: 0 0 12px;
|
|
font-size: .85rem; line-height: 1.55; color: var(--text-leise);
|
|
}
|
|
.vorlage__fuss { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
|
|
.vorlage__marke {
|
|
padding: 2px 9px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
font-size: .7rem; color: var(--text-still);
|
|
}
|
|
.vorlage__marke--saeule {
|
|
border-color: color-mix(in srgb, var(--ton, var(--akzent)) 32%, transparent);
|
|
color: var(--ton, var(--akzent));
|
|
}
|
|
.vorlage__marke--hilfe { border-color: rgba(216, 161, 58, .34); color: #d8a13a; }
|
|
.vorlage__fuss .schritt { margin-left: auto; }
|
|
|
|
.vorlagen__alle {
|
|
grid-column: 1 / -1;
|
|
display: flex; justify-content: center;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
/* Der Hilfe-Knopf ist bewusst auffaelliger als die uebrigen: Wer ihn
|
|
braucht, soll ihn finden, ohne zu suchen. */
|
|
.schritt--hilfe {
|
|
border-color: rgba(216, 161, 58, .4);
|
|
color: #e0b45c;
|
|
}
|
|
.schritt--hilfe[data-fertig="ja"] {
|
|
border-color: rgba(80, 167, 130, .45);
|
|
color: #6fbd95;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.vorlagen__kopf { flex-direction: column; align-items: stretch; }
|
|
.vorlagen__kopf .knopf { width: 100%; }
|
|
}
|
|
|
|
/* Auf dem Handy sind die kleinen Marken im Vorlagenblock zu klein --
|
|
gemeldet von der Geraetepruefung (10,24 px beim Aufhaenger-Schild,
|
|
11,2 px bei Format und Saeule). body.start davor, weil content.css
|
|
NACH start.css geladen wird und dort dieselbe Regel steht. */
|
|
@media (max-width: 760px) {
|
|
body.start .vorlage__hookschild { font-size: .72rem; }
|
|
body.start .vorlage__marke { font-size: .75rem; }
|
|
}
|