/* ============================================================================
Kreatief Connect — Design-Optimierung (Override-Layer)
----------------------------------------------------------------------------
Additiv: NACH styles.css einbinden. Ändert nichts an deiner bestehenden
CSS/JS — nur Feinschliff für Typografie, Flächen, Hierarchie & Rhythmus.
Marke (Grün/Orange/Creme) bleibt unverändert.
Einbinden in static/index.html, direkt UNTER der styles.css-Zeile:
Jeder Block ist einzeln auskommentierbar, falls dir etwas zu weit geht.
============================================================================ */
/* ---------------------------------------------------------------------------
1) TOKENS — wärmere Flächen, feinere Linien, ruhigere Schatten
--------------------------------------------------------------------------- */
:root {
--bg: #f4efe4; /* etwas sattere Creme */
--card: #ffffff;
--card-2: #fbf8f1; /* warme Zweitfläche (Hero, Sidebar, Panels) */
--line: #ece5d6; /* wärmere Trennlinie */
--muted: #8a8474; /* wärmeres Grau statt Kaltblau */
--shadow: 0 1px 2px rgba(40,32,12,.04), 0 6px 18px rgba(40,32,12,.05);
--shadow-lg: 0 18px 40px -18px rgba(40,32,12,.22);
--font-head: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Marken-Alias: die selbst gezeichneten Trainer-Overlays nutzen var(--brand);
hier an die (per Einstellungen änderbare) Hauptfarbe koppeln, damit sie mit-thementhemen. */
--brand: var(--primary);
}
/* ---------------------------------------------------------------------------
2) TYPOGRAFIE — eigene, warme Stimme für Überschriften
--------------------------------------------------------------------------- */
.page-head h1,
.dash-hero-body h2,
.welcome h2,
.mission-title,
.dash-mission-title,
.news-card h3,
.news-item h3,
.event-main h3,
.profile-head .p-name,
.brand-name,
.stat .num,
.lb-me-rank,
.celebrate-title {
font-family: var(--font-head);
letter-spacing: -.015em;
}
.section-title { letter-spacing: -.01em; }
body { text-wrap: pretty; }
/* ---------------------------------------------------------------------------
3) SIDEBAR — ruhige, klare aktive-Pille
--------------------------------------------------------------------------- */
.sidebar { background: var(--card-2); border-right-color: var(--line); }
.nav-item { border-radius: 11px; }
.nav-item:hover { background: color-mix(in srgb, var(--primary), white 90%); }
.nav-item.active {
background: var(--primary);
color: #fff;
}
.nav-item.active svg { color: #fff; }
.brand-sub, .brand-name + .brand-sub { letter-spacing: .04em; }
/* ---------------------------------------------------------------------------
4) HERO — heller, freundlicher Kopf statt Verlauf + Riesen-Emoji
(Optional-Block: bei Bedarf komplett auskommentieren, dann bleibt dein
bisheriger grüner Verlaufs-Hero.)
--------------------------------------------------------------------------- */
.dash-hero {
background: var(--card-2);
color: var(--text);
border: 1px solid var(--line);
box-shadow: none;
}
.dash-hero::after { display: none; } /* 🎶-Wasserzeichen weg */
.dash-hero-body p { opacity: 1; color: var(--muted); }
.dash-hero-av .avatar { border-color: color-mix(in srgb, var(--primary), white 60%); box-shadow: var(--shadow); }
.dash-chip {
background: #fff;
border: 1px solid var(--line);
color: var(--text);
}
.dash-chip .dc-txt { opacity: 1; color: var(--muted); }
.dash-chip .dc-txt b { color: var(--text); }
/* Community-Hero (Leitung) bleibt im Look konsistent */
.welcome {
background: var(--card-2);
color: var(--text);
border: 1px solid var(--line);
box-shadow: none;
}
.welcome p { opacity: 1; color: var(--muted); }
.welcome::after { opacity: .10; }
/* ---------------------------------------------------------------------------
5) KARTEN & FLÄCHEN — konsistente Radien, wärmere Ränder
--------------------------------------------------------------------------- */
.card, .stat, .news-card, .member-card, .mission-card,
.classroom-card, .kid-card, .wl-card, .sp-card {
border-color: var(--line);
box-shadow: var(--shadow);
}
.stat .lbl, .cc-desc, .m-inst { color: var(--muted); }
/* Stat-Kacheln: kräftig gefülltes, rundes Icon-Kästchen (weißes Symbol,
Farbe kommt je Kachel per Inline-Style aus app.js). */
.stat { position: relative; }
.stat .ic-solid {
display: inline-grid; place-items: center;
width: 46px; height: 46px; border-radius: 50%;
color: #fff; margin-bottom: 12px;
}
.stat .ic-solid svg { width: 23px; height: 23px; }
/* ---------------------------------------------------------------------------
6) CHALLENGE-KACHEL — klare Fokus-Karte (dunkelgrün, weißer Text)
Hebt die wichtigste Handlung heraus. (Optional-Block.)
--------------------------------------------------------------------------- */
.dash-mission:not(.is-done) {
background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary), black 16%));
border-color: transparent;
color: #fff;
}
.dash-mission:not(.is-done) .section-title,
.dash-mission:not(.is-done) .dash-mission-title,
.dash-mission:not(.is-done) .dash-cta { color: #fff; }
.dash-mission:not(.is-done) .muted { color: color-mix(in srgb, #fff, transparent 25%) !important; }
.dash-mission:not(.is-done) .dash-mission-emoji { background: rgba(255,255,255,.15); }
.dash-mission:not(.is-done) .mission-progress-bar { background: rgba(255,255,255,.2); border-color: transparent; }
.dash-mission:not(.is-done) .mission-progress-fill { background: var(--accent); }
.dash-mission:not(.is-done) .mission-progress-text { color: color-mix(in srgb, #fff, transparent 20%); }
.dash-mission.dash-clickable:hover { box-shadow: var(--shadow-lg); }
/* ---------------------------------------------------------------------------
6b) LEITUNGS-STARTSEITE — grüne Fokus-Kacheln (Kennzahlen + Aktivitäts-Feed)
Nur im Leitungs-Dashboard aktiv (Klassen stat-grid-green / dash-feed.dash-green).
--------------------------------------------------------------------------- */
.stat-grid-green .stat {
background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary), black 16%));
border-color: transparent;
color: #fff;
}
.stat-grid-green .stat .num { color: #fff; }
.stat-grid-green .stat .lbl { color: color-mix(in srgb, #fff, transparent 28%); }
/* Icon-Plättchen einheitlich als zartes Weiß statt bunt (klar lesbar auf Grün) */
.stat-grid-green .stat .ic-solid { background: rgba(255,255,255,.16) !important; }
.dash-feed.dash-green {
background: linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary), black 16%));
border-color: transparent;
color: #fff;
}
.dash-feed.dash-green .feed-text,
.dash-feed.dash-green .feed-text strong { color: #fff; }
.dash-feed.dash-green .feed-time { color: color-mix(in srgb, #fff, transparent 35%); }
.dash-feed.dash-green .feed-arrow { color: color-mix(in srgb, #fff, transparent 25%); }
.dash-feed.dash-green .feed-item { border-bottom-color: rgba(255,255,255,.15); }
.dash-feed.dash-green .feed-item.dash-clickable:hover { background: rgba(255,255,255,.07); }
.dash-feed.dash-green .feed-emoji { border-color: transparent; }
/* ---------------------------------------------------------------------------
7) FORTSCHRITT & FEED — feinere Trennlinien, ruhige Radien
--------------------------------------------------------------------------- */
.level-ring .lr-track { stroke: color-mix(in srgb, var(--primary), white 86%); }
.feed-item, .dash-update, .notif-row { border-bottom-color: color-mix(in srgb, var(--line), white 30%); }
.feed-emoji { border-color: var(--card); box-shadow: 0 1px 4px rgba(40,32,12,.12); }
/* ---------------------------------------------------------------------------
8) BUTTONS & CHIPS — etwas ruhiger, konsistenter Radius
--------------------------------------------------------------------------- */
.btn { border-radius: 12px; }
.pill, .role-chip { border-radius: 999px; }
.set-tab.active, .wl-tab.active { box-shadow: var(--shadow); }
/* ---------------------------------------------------------------------------
9) NEWS — angepinnte Karte klarer, mit Akzent-Kante
--------------------------------------------------------------------------- */
.news-card.is-pinned {
background: #fff;
border-color: var(--line);
border-left: 3px solid var(--accent);
}
/* ---------------------------------------------------------------------------
10) WARTELISTE — nach Instrument gruppiert, kompakte Zeilen (2026-07-18)
Obere Zähler mit gefülltem rundem Icon; pro Instrument ein Block mit
Überschrift; kompakte Zeilen, Details klappen beim Klick auf.
Nur additiv – Struktur kommt aus app.js.
--------------------------------------------------------------------------- */
/* Obere vier Zähler-Kästchen: gefülltes rundes Icon, weißes Symbol */
.wl-stat .ic { border-radius: 50%; color: #fff; }
.wl-stat .ic svg { width: 19px; height: 19px; }
/* Instrument-Gruppe */
.wl-group { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow); }
.wl-group-head {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 12px 16px; background: var(--card-2); border: 0; border-bottom: 1px solid var(--line);
cursor: pointer; font-family: var(--font); text-align: left;
}
.wl-group.collapsed .wl-group-head { border-bottom-color: transparent; }
.wl-group-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
background: color-mix(in srgb, var(--primary), white 88%); color: var(--primary); }
.wl-group-ic svg { width: 17px; height: 17px; }
.wl-group-name { font-size: 15px; font-weight: 600; color: var(--text); }
.wl-group-cnt { font-size: 12.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.wl-group-chev { margin-left: auto; color: #b0a894; display: inline-flex; transition: transform .15s; }
.wl-group-chev svg { width: 18px; height: 18px; }
.wl-group.collapsed .wl-group-chev { transform: rotate(-90deg); }
.wl-group.collapsed .wl-group-body { display: none; }
/* Kompakte Zeile */
.wl-row { border-bottom: 1px solid color-mix(in srgb, var(--line), white 35%); }
.wl-row:last-child { border-bottom: 0; }
.wl-row-main { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; }
.wl-row-main:hover { background: color-mix(in srgb, var(--primary-50), white 55%); }
.wl-av { font-weight: 600; }
.wl-av.sm { width: 36px; height: 36px; font-size: 13.5px; }
.wl-row-info { flex: 1; min-width: 0; }
.wl-row-name { font-size: 15px; font-weight: 600; color: var(--text); }
.wl-row-name .wl-age { font-size: 12.5px; font-weight: 400; color: #a8a290; background: transparent; padding: 0; }
.wl-row-sub { font-size: 12.5px; color: #a8a290; margin-top: 2px; }
.wl-row-actions { display: flex; align-items: center; gap: 5px; flex: none; }
.wl-row-caret { color: #c3bcae; display: inline-flex; transition: transform .15s; }
.wl-row-caret svg { width: 16px; height: 16px; }
.wl-row.open .wl-row-caret { transform: rotate(180deg); }
.wl-row-details { padding: 2px 16px 14px 64px; }
.wl-row:not(.open) .wl-row-details { display: none; }
/* Kontakt-Details (aufgeklappt): feine Linien-Icons */
.wl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.wl-meta span { display: inline-flex; align-items: center; gap: 6px; }
.wl-meta a { color: var(--muted); text-decoration: none; }
.wl-meta a:hover { color: var(--primary); text-decoration: underline; }
.wl-meta svg { width: 15px; height: 15px; color: #b7b0a0; flex: none; }
.wl-note { font-size: 13px; color: #4b5563; margin-top: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; white-space: pre-wrap; }
/* Status als farbige Pille */
.wl-status-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; cursor: pointer; flex: none; }
.wl-status-pill .wl-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.wl-status-pill svg { width: 13px; height: 13px; opacity: .6; }
.wl-status-pill select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.wl-st-wartet .wl-status-pill { background:#fdf0d9; color:#9a6a12; } .wl-st-wartet .wl-dot { background:#e0a52b; }
.wl-st-kontaktiert .wl-status-pill { background:#e6f1fb; color:#185fa5; } .wl-st-kontaktiert .wl-dot { background:#3b82f6; }
.wl-st-aufgenommen .wl-status-pill { background:#e8f4e4; color:#2f6d1f; } .wl-st-aufgenommen .wl-dot { background:#3a8f6f; }
.wl-st-abgesagt .wl-status-pill { background:#edeae3; color:#6b6b66; } .wl-st-abgesagt .wl-dot { background:#9ca3af; }
.wl-row.wl-st-abgesagt { opacity: .72; }
/* Ruhige Aktions-Icons (nur Symbol) */
.wl-act { display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); color: #5c5c57; cursor: pointer; font-family: var(--font); transition: background .12s, border-color .12s, color .12s; }
.wl-act.wl-icon { width: 33px; height: 33px; border-radius: 9px; }
.wl-act svg { width: 15px; height: 15px; }
.wl-act:hover { background: var(--primary-50); border-color: color-mix(in srgb, var(--primary), white 60%); color: var(--text); }
/* Handy: Status-Pille + Aktionen in eine zweite Zeile umbrechen */
@media (max-width: 700px) {
.wl-row-main { flex-wrap: wrap; row-gap: 10px; }
.wl-row-info { flex: 1 1 140px; }
.wl-status-pill { margin-left: 48px; }
.wl-row-actions { margin-left: auto; }
.wl-row-details { padding-left: 16px; }
}
/* ===========================================================================
11) REFRESH 2026-08 — Start-Screen als Leitbild (warm weiterentwickelt)
Sichtbarer, aber markentreuer Feinschliff. Grün/Orange/Creme bleibt,
bekommt aber mehr Wärme, Tiefe und Rhythmus.
=========================================================================== */
/* Hintergrund: zarter warmer Verlauf statt flacher Fläche (mehr Tiefe) */
body {
background:
radial-gradient(120% 80% at 100% -10%, color-mix(in srgb, var(--accent), white 90%) 0%, transparent 55%),
linear-gradient(180deg, #f8f3e9 0%, var(--bg) 34%);
background-attachment: fixed;
}
/* HERO — warmer Sonnen-Schimmer oben rechts + zarte Akzentkante */
.dash-hero, .welcome {
background:
radial-gradient(115% 130% at 100% 0%, color-mix(in srgb, var(--accent), white 80%) 0%, transparent 46%),
linear-gradient(176deg, #fffdf9 0%, var(--card-2) 100%);
border-color: color-mix(in srgb, var(--accent), white 74%);
box-shadow: var(--shadow);
}
.dash-hero-body h2, .welcome h2 { font-size: clamp(1.55rem, 4.2vw, 2.05rem); }
.dash-hero-av .avatar {
border-color: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), white 62%), var(--shadow);
}
/* KARTEN — einheitlicher Radius, sanftes Anheben beim Überfahren */
.card, .stat, .news-card, .member-card, .mission-card,
.classroom-card, .kid-card, .wl-card, .sp-card {
border-radius: var(--radius);
}
.stat, .classroom-card, .kid-card, .mission-card {
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.stat:hover, .classroom-card:hover, .kid-card:hover, .mission-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: color-mix(in srgb, var(--accent), white 66%);
}
/* Stat-Kacheln: zarter Tint in Kachelfarbe (--sc kommt aus app.js), farbige Zahl,
Icon mit weichem farbigem Schimmer – lebendig, aber warm gedämpft. */
.stat {
background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--sc, var(--primary)), white 95%) 100%);
border-color: color-mix(in srgb, var(--sc, var(--line)), white 80%);
}
.stat .ic-solid {
box-shadow: inset 0 0 0 3px rgba(255,255,255,.24), 0 9px 18px -8px var(--sc, transparent);
}
.stat .num {
font-size: clamp(1.9rem, 5vw, 2.3rem); line-height: 1.05;
color: color-mix(in srgb, var(--sc, var(--text)), black 12%);
}
/* SEKTIONS-ÜBERSCHRIFTEN — warme Akzent-Marke davor, klare Hierarchie */
.section-title {
display: inline-flex; align-items: center; gap: 9px;
font-weight: 700;
}
.section-title::before {
content: ""; flex: none;
width: 4px; height: 1.05em; border-radius: 3px;
background: linear-gradient(var(--accent), var(--accent-deep));
}
/* Startseiten-Spalten (Dein nächster Termin / Neueste News): mehr Luft zwischen
Überschrift und Kachel – vorher wirkte es zu gedrängt. */
.dash-cols .section-title { margin-bottom: 18px; }
/* GEBURTSTAGS-HINWEIS — warmer, freundlicher statt grau */
.bday-remind {
background: color-mix(in srgb, var(--accent), white 88%);
border: 1px solid color-mix(in srgb, var(--accent), white 70%);
border-radius: var(--radius);
color: var(--text);
}
/* „Startseite anpassen"-Zeile etwas ruhiger einbetten */
.dash-cust-row { margin-top: 4px; }
/* Aktive Bottom-Nav (Handy): Symbol in Akzentfarbe, klarer Fokus */
.bottom-nav button.active { color: var(--primary); }
.bottom-nav button.active svg { color: var(--primary); }
/* ===========================================================================
12) GEMEINSAME BAUSTEINE — wirken auf allen Screens (Konsistenz-Fundament)
=========================================================================== */
/* Pills: warmes Neutral statt kühlem Blaugrau (#eef0f6/#4b5168) */
.pill {
background: var(--card-2);
color: var(--muted);
border: 1px solid var(--line);
}
/* Restliche kühle Blaugrau-Neutrale (#eef0f6/#4b5168) auf warm angleichen */
.btn.ghost:hover, .view-toggle { background: var(--card-2); }
.sess-status, .type-sonstiges { background: var(--card-2); color: var(--muted); }
/* Eingaben: klarer, warmer Fokus-Ring in Marken-Grün (statt Browser-Default) */
.field input:focus, .field textarea:focus, .field select:focus,
.filter-bar input:focus, .filter-bar select:focus,
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), white 84%);
}
/* Empty-States: unterschiedliche Varianten auf einen ruhigen, warmen Look angleichen */
.sub-empty, .comments-empty, .dash-empty {
text-align: center;
color: var(--muted);
padding: 30px 16px;
}
.empty .ic, .dash-empty .ic { opacity: .8; }
/* Seitenkopf: Überschrift kräftiger, Beschreibung ruhiger — klare Hierarchie */
.page-head h1 { letter-spacing: -.015em; }
.page-head .desc { max-width: 62ch; }
/* Karten-Titel/Listen: sanfte Hover-Reaktion auf klickbaren Karten */
.classroom-card, .kid-card, .mission-card, .news-card[role="button"],
.member-card[data-go], .sp-card[data-go] { cursor: pointer; }
/* Übe-Ziel-Aufgaben (haken sich automatisch übers Übe-Tagebuch ab) – mit Fortschrittsbalken */
.challenge.auto { align-items: flex-start; }
.challenge.auto .ch-check { font-size: 1.1rem; line-height: 1.2; }
.ch-auto { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.ch-auto-bar { flex: 1; height: 7px; max-width: 220px; border-radius: 99px; overflow: hidden;
background: color-mix(in srgb, var(--primary), white 86%); }
.ch-auto-bar > span { display: block; height: 100%; border-radius: 99px;
background: linear-gradient(var(--accent), var(--accent-deep)); transition: width .35s ease; }
.ch-auto-num { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.challenge.auto.done .ch-auto-num { color: var(--primary); }
.challenge.auto.done .ch-auto-bar > span { background: var(--primary); }
/* Konfetti-Feier, wenn ein Übe-Ziel automatisch erreicht wird */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 12000; overflow: hidden; }
.confetti-layer span { position: absolute; top: -40px; will-change: transform;
animation-name: confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards; }
@keyframes confetti-fall {
0% { transform: translateY(-40px) rotate(0deg); opacity: 0; }
12% { opacity: 1; }
100% { transform: translateY(106vh) rotate(420deg); opacity: .9; }
}
/* ====================================================================== */
/* ERSTE SCHRITTE (Onboarding: Modal-Checkliste + Dashboard-Karte) */
/* ====================================================================== */
.ob-intro { font-size: 14.5px; line-height: 1.5; color: var(--text); margin: 0 0 16px; }
.ob-prog { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.ob-prog-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ob-prog-bar > span { display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--primary), var(--green)); transition: width .5s cubic-bezier(.4,0,.2,1); }
.ob-prog-bar.sm { height: 6px; margin-top: 8px; }
.ob-prog-txt { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ob-steps { display: flex; flex-direction: column; gap: 10px; }
.ob-step { display: flex; align-items: center; gap: 12px; padding: 13px 14px;
border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
transition: border-color .2s, background .2s; }
.ob-step.done { background: color-mix(in srgb, var(--green-soft), white 30%); border-color: transparent; }
.ob-check { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
border: 2px solid var(--line); display: grid; place-items: center;
font-size: 14px; font-weight: 800; color: #fff; }
.ob-step.done .ob-check { background: var(--green); border-color: var(--green); }
.ob-ico { flex: 0 0 auto; font-size: 22px; line-height: 1; }
.ob-main { flex: 1; min-width: 0; }
.ob-t { font-weight: 700; font-size: 14.5px; color: var(--text); }
.ob-step.done .ob-t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--green), transparent 40%); }
.ob-x { font-size: 12.8px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.ob-badge { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--green);
background: var(--green-soft); padding: 4px 10px; border-radius: 999px; }
.ob-go { flex: 0 0 auto; white-space: nowrap; }
.ob-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.ob-alldone { font-weight: 800; color: var(--primary); }
/* Dashboard-Erinnerungskarte */
.ob-card { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px;
padding: 14px 16px; border-radius: var(--radius);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary), white 86%), var(--card));
border: 1px solid color-mix(in srgb, var(--primary), transparent 78%); box-shadow: var(--shadow); position: relative; }
.ob-card-ico { flex: 0 0 auto; font-size: 26px; line-height: 1; }
.ob-card-main { flex: 1; min-width: 0; }
.ob-card-t { font-weight: 800; font-size: 15px; color: var(--text); }
.ob-card-sub { font-size: 12.8px; color: var(--muted); margin-top: 1px; }
.ob-card-open { flex: 0 0 auto; }
.ob-card-x { flex: 0 0 auto; width: 26px; height: 26px; border: none; background: transparent;
color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; }
.ob-card-x:hover { background: rgba(0,0,0,.06); color: var(--text); }
@media (max-width: 560px) {
.ob-card { flex-wrap: wrap; }
.ob-card-main { flex: 1 1 100%; order: 2; }
.ob-card-open { order: 3; }
.ob-card-x { position: absolute; top: 8px; right: 8px; }
/* Schritt: Button/Badge rutscht unter den Text, damit dieser breit bleibt */
.ob-step { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; }
.ob-check, .ob-ico { margin-top: 1px; }
.ob-main { flex: 1 1 55%; }
.ob-go, .ob-badge { flex: 0 0 auto; margin: 2px 0 0 48px; }
}
/* ====================================================================== */
/* COCKPIT: Backup-/Datensicherungs-Status */
/* ====================================================================== */
.ck-backup { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
border-radius: 14px; margin: 0 0 18px; border: 1px solid var(--line); background: var(--card); }
.ck-backup.ok { background: color-mix(in srgb, var(--green-soft), white 45%); border-color: transparent; }
.ck-backup.warn { background: #fff4e5; border-color: #f6d9a8; }
.ck-backup-ic { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.ck-backup-main { min-width: 0; }
.ck-backup-t { font-weight: 800; font-size: 14px; color: var(--text); }
.ck-backup-s { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ck-backup.warn .ck-backup-s { color: #8a5a12; }
/* ====================================================================== */
/* CLASSROOM: neutraler Feed – Badge für Beiträge */
/* ====================================================================== */
.kind-feed { background: color-mix(in srgb, var(--primary), white 86%); color: var(--primary-ink, #24402c); }
/* Pinnwand-Karten: Reaktionen/Kommentare direkt inline – dezent abgesetzt */
.post-card-feed .ix-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* ====================================================================== */
/* COCKPIT-CHECKLISTEN: erledigte Aufgaben ausblenden */
/* ====================================================================== */
.lc-donetoggle {
display: inline-flex; align-items: center; gap: 6px;
margin: 4px 2px 2px; padding: 4px 8px; border: none; background: none;
font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.lc-donetoggle:hover { background: rgba(0,0,0,.05); color: var(--text); }
.lc-done-items { margin-top: 2px; opacity: .7; }
/* ====================================================================== */
/* ÜBE-TAGEBUCH-STREIFEN (Startseite) — ansprechender, klarer */
/* ====================================================================== */
.dps-rich { flex-direction: row; align-items: center; gap: 15px; padding: 16px 18px; }
.dps-rich .dps-icon {
flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px;
display: grid; place-items: center; color: var(--primary);
background: color-mix(in srgb, var(--primary), white 84%);
}
.dps-rich .dps-icon svg { width: 25px; height: 25px; }
.dps-rich .dps-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.dps-rich .dps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dps-rich .dps-title { font-weight: 800; font-size: 15.5px; color: var(--text); }
.dps-rich .dps-streak { font-size: 12px; font-weight: 700; color: var(--muted); }
.dps-rich .dps-streak.on { color: #b45309; background: #fff1de; padding: 3px 10px; border-radius: 999px; }
.dps-rich .dps-goalrow { display: flex; align-items: center; gap: 11px; }
.dps-rich .dps-bar2 {
flex: 1; max-width: 170px; height: 10px; border-radius: 999px;
background: var(--line); overflow: hidden;
}
.dps-rich .dps-bar2 > span {
display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--primary), var(--green, #16a34a));
}
.dps-rich .dps-goalnum { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dps-rich .dps-goalnum strong { color: var(--text); font-weight: 800; }
.dps-rich .dps-btn {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
font-weight: 700; font-size: 13.5px; color: #fff; background: var(--primary);
padding: 9px 15px; border-radius: 12px;
}
.dps-rich .dps-btn svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
.dps-rich { gap: 12px; padding: 14px; }
.dps-rich .dps-goalrow { flex-wrap: wrap; }
.dps-rich .dps-bar2 { max-width: none; flex: 1 1 100%; }
.dps-rich .dps-btn { padding: 8px 12px; }
}
/* ====================================================================== */
/* STARTSEITE — großzügigere Abstände über den Abschnitts-Überschriften */
/* ====================================================================== */
.dps { margin-top: 24px; }
.dash-feed-title { margin-top: 34px !important; }
.dash-cols { margin-top: 16px; }
.dash-cols .section-title { margin-bottom: 20px; }
@media (max-width: 760px) { .dash-cols { gap: 30px; } }