/* Loewenbande - Stylesheet. Reihenfolge: Tokens, Grundschrift, Geruest,
Bausteine, Bereiche, Druck. */
/* Hausschrift Outfit - lokal aus src/vendor/, nicht von fonts.googleapis.com.
Damit braucht die Content-Security-Policy keine Fremdhosts mehr, und es
gehen keine Besucher-IPs an Google. Die @font-face-Regeln samt
unicode-range stehen unveraendert in vendor/outfit.css. */
@import "vendor/outfit.css";
/* Der frühere Import von invoice.css ist entfallen: Die Datei wurde in be9814f
gelöscht, weil ihre Regeln längst in dieser Datei stehen (.invoice-* weiter
unten, @page im Druckabschnitt). Der Import blieb aber stehen und ließ jeden
Seitenaufruf eine Datei anfordern, die es nicht mehr gibt - die .htaccess
antwortet darauf mit index.html, und der Browser meldet einen MIME-Fehler. */
/* --------------------------------------------------------------------------
TOKENS - die einzige Stelle, an der Farbe, Mass und Ebene entschieden wird.
Jede Farbe hat hier eine Rolle, keine Dekoration (siehe DESIGN.md):
--primary ist die einzige Handlungsfarbe, --gold gehoert der Bildmarke,
--danger/--success/--warn/--info sagen etwas ueber den Zustand aus.
Darunter stehen die alten Namen als Alias. Sie werden NICHT geloescht:
admin.js allein setzt ueber 1.400 Inline-Stile, die auf ihnen aufbauen -
sie zeigen nur ab jetzt auf die neuen Werte.
-------------------------------------------------------------------------- */
:root {
/* Handlung, Auswahl, aktiver Reiter. Dunkler als frueher, damit Weiss
darauf WCAG AA besteht (das alte 58%-Pink tat das nicht). */
--primary: hsl(328, 52%, 48%);
--primary-soft: hsl(328, 60%, 95%);
--primary-ink: hsl(328, 50%, 34%);
--primary-hover: hsl(328, 52%, 42%);
/* Waerme und Marke. Nur fuer Bildmarken, "heute" und Leerzustaende -
NIE fuer Knoepfe, sonst konkurrieren zwei Handlungsfarben. */
--gold: hsl(44, 92%, 50%);
--gold-soft: hsl(44, 90%, 93%);
--danger: hsl(0, 60%, 48%);
--danger-soft: hsl(0, 70%, 95%);
--danger-ink: hsl(0, 60%, 34%);
--success: hsl(122, 35%, 38%);
--success-soft: hsl(120, 40%, 93%);
--success-ink: hsl(122, 45%, 24%);
--warn: hsl(36, 85%, 42%);
--warn-soft: hsl(40, 90%, 92%);
--warn-ink: hsl(35, 80%, 30%);
--info: hsl(200, 55%, 42%);
--info-soft: hsl(200, 60%, 94%);
--info-ink: hsl(200, 60%, 30%);
/* Grund und Linien - warmes Creme, wie bisher */
--bg: hsl(36, 40%, 98%);
--bg-2: hsl(36, 30%, 95%);
--surface: #ffffff;
--line: hsl(36, 20%, 88%);
--line-strong: hsl(36, 16%, 78%);
/* Schrift. --ink-3 nur fuer Nebentext ab 0.85rem, darunter reicht der
Kontrast nicht mehr. */
--ink: hsl(200, 20%, 20%);
--ink-2: hsl(200, 12%, 38%);
--ink-3: hsl(200, 10%, 50%);
/* Bereichsfarben: nur in der Navigation, nur als Tonung von Symbol und
Marker des aktiven Bereichs - nie als Flaeche. Sie zitieren den
Regenbogen des Logos und beantworten die Frage "wo bin ich gerade". */
--ton-primary: var(--primary);
--ton-blau: hsl(205, 55%, 45%);
--ton-gruen: hsl(122, 35%, 40%);
--ton-orange: hsl(28, 80%, 46%);
--ton-primary-soft: var(--primary-soft);
--ton-blau-soft: hsl(205, 60%, 94%);
--ton-gruen-soft: hsl(122, 40%, 93%);
--ton-orange-soft: hsl(28, 85%, 94%);
/* Radien. Vier Stufen statt der bisherigen zwoelf Freihandwerte. */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
--r-sm: var(--radius-sm);
--r-md: var(--radius-md);
--r-lg: var(--radius-lg);
--r-pill: var(--radius-pill);
/* Abstaende, 8er-Raster */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
/* Schriftskala. Sieben Stufen decken ab, wofuer die Datei frueher ueber
30 verschiedene rem-Werte hatte. */
--fs-xs: 0.75rem;
--fs-sm: 0.85rem;
--fs-md: 0.95rem;
--fs-lg: 1.05rem;
--fs-xl: 1.25rem;
--fs-2xl: 1.5rem;
--fs-3xl: 1.85rem;
/* Schatten. Karten springen bei Hover nicht mehr hoch, deshalb braucht
es keine zweite "Hover"-Stufe. */
--shadow-1: 0 1px 2px rgba(60, 40, 20, 0.06), 0 1px 3px rgba(60, 40, 20, 0.04);
--shadow-2: 0 6px 20px rgba(60, 40, 20, 0.10);
--shadow-3: 0 16px 40px rgba(60, 40, 20, 0.18);
/* Geruestmasse */
--header-h: 56px;
--sidebar-w: 248px;
--bottombar-h: 60px;
--inhalt-max: 1120px;
/* Z-Ebenen: bisher standen 100/1000/1200/2000/9999/99999 verstreut im
Code, ohne dass irgendwo die Reihenfolge aufgeschrieben war. */
--z-header: 100;
--z-sheet: 900;
--z-modal: 1000;
--z-dropdown: 1200;
--z-toast: 2000;
--z-overlay: 9999;
--transition-fast: 0.2s ease;
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Auszeichnung der Angebote. Stand frueher als eigener :root-Block mitten
im Angebote-Abschnitt (Z. ~7999) - Tokens gehoeren nach oben, sonst
sucht sie niemand. Premium heisst nicht "aufwendiger", sondern so tief
durchdacht, dass die Ausfuehrung einfach wird: ein ruhiger Bernsteinton.
--ans ist der Schieferton fuer Angebote ausserhalb von Montessori -
leise, weil sie nicht schlechter sind, sondern anders begruendet. */
--prem: hsl(38, 64%, 38%);
--prem-hell: hsl(40, 82%, 95%);
--prem-rand: hsl(38, 58%, 76%);
--ans: hsl(212, 26%, 40%);
--ans-hell: hsl(212, 38%, 96%);
--ans-rand: hsl(212, 26%, 78%);
/* ---- Alte Namen, neue Werte. Nicht loeschen: hunderte Verweise in JS. -- */
--bg-primary: var(--bg);
--bg-secondary: var(--bg-2);
--white: var(--surface);
--border-color: var(--line);
--text-main: var(--ink);
--text-muted: var(--ink-2);
--primary-light: var(--primary-soft);
--primary-dark: var(--primary-ink);
--primary-text: var(--primary-ink);
/* Terracotta ist keine Handlungsfarbe mehr. Der Token bleibt, zeigt aber
auf einen zurueckgenommenen Ton - so verlieren die vielen
Terracotta-Inline-Stile ihre Lautstaerke, ohne dass jemand sie anfasst. */
--accent: hsl(24, 45%, 52%);
--accent-light: hsl(24, 50%, 94%);
--accent-dark: hsl(24, 45%, 38%);
--accent-text: hsl(24, 50%, 32%);
--accent-blue: var(--info);
--accent-blue-light: var(--info-soft);
--danger-light: var(--danger-soft);
--danger-text: var(--danger-ink);
--success-light: var(--success-soft);
--success-text: var(--success-ink);
--border: var(--line);
--text: var(--ink);
--shadow-sm: var(--shadow-1);
--shadow-md: var(--shadow-1);
--shadow-lg: var(--shadow-3);
}
/* Global Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: var(--font-family);
font-size: var(--fs-md);
background-color: var(--bg);
color: var(--ink);
line-height: 1.5;
min-height: 100vh;
overflow-x: hidden;
}
/* Ueberschriften: eine Skala statt fuenf Freihandgroessen je Bereich. */
h1, h2, h3, h4 {
font-weight: 700;
line-height: 1.25;
color: var(--ink);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
/* Verweise ohne eigene Klasse waren nackte pinke Woerter - als
Bedienelement nicht erkennbar. Die Unterstreichung macht sie wieder zu
Verweisen, ohne dass jemand das Markup anfasst. */
a:not([class]) {
color: var(--primary-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* Auswahlkaestchen im Kind-Formular waren 13px gross - unter dem Finger
nicht zu treffen und kaum zu sehen, ob sie gesetzt sind. */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--primary);
width: 18px;
height: 18px;
/* Sitzt das Kaestchen in einem Flex-Label mit langem Text, darf es als
Flex-Element nicht schrumpfen - sonst wird aus 18px schnell 16px. */
flex-shrink: 0;
}
/* Sichtbarer Fokusring fuer Tastatur-Bedienung: greift ueberall, wo eine
Komponente keinen eigenen :focus-visible-Ring definiert. Nur bei
Tastatur-Fokus (nicht bei Maus-Klick), damit es optisch ruhig bleibt. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* App Container */
#app-root {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Alte Kopfzeile. Sie steht nur noch auf Fehlerseiten; das Geruest weiter
unten (.app-header) hat sie sonst abgeloest. Der Glaseffekt ist weg: eine
halbdurchsichtige, weichgezeichnete Leiste liess den Inhalt darunter
durchschimmern und machte Namen und Warnungen schlechter lesbar. */
.main-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--surface);
border-bottom: 1px solid var(--line);
min-height: var(--header-h);
padding: 0 var(--s-5);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
/* Darf nie horizontal ueberlaufen, auch wenn Name/Rolle in der Kopfzeile lang werden */
min-width: 0;
overflow-wrap: break-word;
}
.logo-container {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
}
/* Bildmarke in der Kopfzeile: weisser Kreis, damit der Löwe auch auf dem
farbigen Terminal-Kopf sauber steht. */
.logo-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.logo-icon img {
display: block;
width: 100%;
height: 100%;
padding: 3px;
box-sizing: border-box;
object-fit: contain;
}
.logo-text {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--ink);
}
.logo-text span {
color: var(--accent);
}
.user-nav-info {
display: flex;
align-items: center;
gap: 1rem;
}
/* Versalien und Sperrung sind weg: "TAGESPFLEGEPERSON" in Grossbuchstaben
war die lauteste Zeile der ganzen Kopfzeile, obwohl sie nichts zu tun gibt. */
.role-badge {
display: inline-flex;
align-items: center;
font-size: var(--fs-xs);
font-weight: 600;
padding: 2px var(--s-2);
border-radius: var(--radius-pill);
line-height: 1.6;
white-space: nowrap;
}
.role-badge.admin {
background-color: var(--primary-light);
color: var(--primary-text);
}
.role-badge.parent {
background-color: var(--accent-light);
color: var(--accent-text);
}
/* Layout-Strukturen. .main-content bleibt fuer die Fehlerseiten in
parent.js und bekommt dieselben Innenabstaende wie .app-main. */
.main-content {
flex: 1;
padding: var(--s-5);
max-width: var(--inhalt-max);
width: 100%;
margin: 0 auto;
}
@media (max-width: 768px) {
.main-content {
padding: var(--s-4);
}
.main-header {
padding: 0 var(--s-4);
}
/* Kopfzeile Verwaltung: Auf dem Handy bekommt das Logo die erste Zeile,
die Knoepfe (Rolle, Ein-/Auschecken, Glocke, Abmelden) die zweite - und
brechen dort weiter um, wenn es eng wird. Vorher standen alle vier
rechts neben dem Logo untereinander, die Kopfzeile war 213px hoch. */
.main-header {
flex-wrap: wrap;
row-gap: 0.5rem;
}
.user-nav-info {
width: 100%;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.5rem;
}
}
/* Raster in Modal-Formularen (Vertragsbeginn/-ende, Notfallkontakte ...):
Datumsfelder haben eine feste Mindestbreite, mit der zwei 1fr-Spalten auf
einem 375px-Handy ueber den Rand des Modals hinauslaufen und einen
waagerechten Rollbalken erzeugen. min-width: 0 laesst die Spalten
schrumpfen, das Feld selbst bleibt per width: 100% im Rahmen. */
#modal-wrapper [style*="grid-template-columns"] > * { min-width: 0; }
#modal-wrapper .modal-content { max-width: 100%; }
/* Karten. Kein Hover-Sprung mehr: die Karten dieser App tragen Tabellen,
Formulare und Kindernamen - sie sind kein Angebot zum Anklicken, und das
Hochhuepfen unter dem Mauszeiger versprach eine Aktion, die es nicht gibt. */
.card {
background-color: var(--surface);
border-radius: var(--radius-md);
border: 1px solid var(--line);
padding: var(--s-5);
box-shadow: var(--shadow-1);
}
/* Handy-Innenabstand der Karte: DESIGN.md schreibt s-4 am Handy vor (statt
s-5) - derselbe Breakpoint wie beim Dialog weiter unten. */
@media (max-width: 700px) {
.card {
padding: var(--s-4);
}
}
.card-title {
font-size: var(--fs-lg);
font-weight: 600;
margin-bottom: var(--s-4);
display: flex;
align-items: center;
gap: var(--s-2);
color: var(--ink);
}
.card-title i,
.card-title svg {
width: 18px;
height: 18px;
color: var(--ink-2);
}
/* Knoepfe. Vier Rollen, drei Groessen, ein Radius - vorher standen auf einer
Seite vier verschiedene Rundungen fuer gleichartige Knoepfe.
Der Uebergang laeuft nur noch ueber Farben statt ueber "all": sonst
animiert der Browser bei jeder Zustandsaenderung auch Groesse und
Position mit, was auf dem Handy sichtbar ruckelt. */
.btn {
font-family: var(--font-family);
font-size: var(--fs-md);
font-weight: 600;
line-height: 1.2;
min-height: 40px;
padding: 0 var(--s-4);
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
white-space: nowrap;
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
text-decoration: none;
}
.btn i,
.btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.btn[disabled],
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-primary {
background-color: var(--primary);
border-color: var(--primary);
color: var(--surface);
}
.btn-primary:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
}
.btn-secondary {
background-color: var(--surface);
color: var(--ink);
border-color: var(--line-strong);
}
.btn-secondary:hover {
background-color: var(--bg-2);
}
/* Der leise Knopf: fuer Nebenwege in der Kopfzeile und in Kartenkoepfen,
die erreichbar sein muessen, aber nicht um Aufmerksamkeit werben. */
.btn-ghost {
background-color: transparent;
color: var(--ink-2);
border-color: transparent;
}
.btn-ghost:hover {
background-color: var(--bg-2);
color: var(--ink);
}
/* Terracotta war eine zweite Handlungsfarbe neben Pink - zwei Farben, die
beide "hier klicken" sagen, heben sich gegenseitig auf. .btn-accent sieht
deshalb aus wie .btn-secondary; das JS muss dafuer nichts aendern. */
.btn-accent {
background-color: var(--surface);
color: var(--ink);
border-color: var(--line-strong);
}
.btn-accent:hover {
background-color: var(--bg-2);
}
.btn-danger {
background-color: var(--danger-soft);
color: var(--danger-ink);
border-color: var(--danger-soft);
}
.btn-danger:hover {
background-color: var(--danger);
border-color: var(--danger);
color: var(--surface);
}
.btn-sm {
min-height: 34px;
padding: 0 var(--s-3);
font-size: var(--fs-sm);
border-radius: var(--radius-sm);
}
.btn-xs {
min-height: 28px;
padding: 0 var(--s-2);
font-size: var(--fs-xs);
border-radius: var(--radius-sm);
}
/* Quadratischer Knopf fuer ein Symbol allein (Glocke, Menue, Schliessen). */
.btn-icon {
width: 40px;
padding: 0;
}
.btn-icon i,
.btn-icon svg {
width: 20px;
height: 20px;
}
.btn-icon.btn-sm {
width: 34px;
}
/* Ein Knopf, der wie ein Verweis aussieht - dann soll er auch unterstrichen
sein, sonst ist er ein pinkes Wort ohne erkennbare Funktion. */
.btn-link {
background: none;
border: none;
padding: 0;
min-height: 0;
color: var(--primary-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* Tippflaechen auf Touch-Geraeten: diese Knoepfe sind mit der Maus gut
klickbar, unter dem Finger auf dem Handy aber zu klein. Textgroesse
bleibt unveraendert - nur die klickbare Flaeche waechst. */
@media (hover: none) and (pointer: coarse) {
.btn-xs,
.btn-sm,
.poll-delete-btn,
.modal-close,
.rb-week-edit,
.eg-stufe,
.eg-tag-zeile,
.eg-aufgabe,
.eg-kind-zeile,
.print-single-story-btn,
.segment-btn,
.app-nav-item,
.app-bottombar-item,
.app-menu-item,
.btn-ghost,
.btn-icon,
.pedagogy-area-tab {
min-height: 44px;
min-width: 44px;
}
.btn-xs,
.btn-sm {
padding: 0 var(--s-3);
}
.btn-icon {
width: 44px;
padding: 0;
}
}
/* ==========================================================================
GERUEST UND GEMEINSAME BAUSTEINE (02.09.2026)
Alles, was auf jeder Seite gilt: der Seitenkopf, das Segment (ein einziges
Umschaltmuster fuer Tag/Woche/Monat, Plan/Bausteine, Bibliothek/Ziele),
Chips, Leerzustand, Hinweiskasten - und darunter das Seitengeruest aus
shell.js (Kopfzeile, Seitenleiste, untere Leiste, Sheet, Menue).
Die Bereichsabschnitte weiter unten fuehren ihre Sonderformen auf diese
Klassen zurueck; die alten Klassennamen stehen deshalb in denselben
Selektorlisten und sehen ab jetzt genauso aus.
========================================================================== */
/* --- Seitenkopf ---------------------------------------------------------
Steht an der Spitze jedes Reiters: Titel, optional ein Satz darunter,
rechts die Aktionen. .section-header/.section-title sind die alten Namen
und bleiben gueltig - admin.js schreibt sie an hunderten Stellen. */
.seite-kopf,
.section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s-4);
margin-bottom: var(--s-5);
}
.seite-titel,
.section-title {
margin: 0;
font-size: var(--fs-2xl);
font-weight: 700;
line-height: 1.25;
color: var(--ink);
}
.seite-untertitel {
margin: var(--s-1) 0 0;
font-size: var(--fs-md);
color: var(--ink-2);
}
.seite-aktionen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
}
/* --- Segment: der eine Umschalter ---------------------------------------
Bisher gab es drei byte-gleiche Pillenreihen (Speiseplan, Rueckblick,
Angebote) und dazu die Unterreiter. Sie sehen ab jetzt gleich aus, weil
sie dieselben Regeln benutzen. Die aktive Flaeche ist weiss auf grauem
Grund, nicht mehr voll pink: eine Ansicht zu waehlen ist keine Handlung,
die so laut sein muss wie "Speichern". */
.segment,
.meal-viewswitch,
.rb-viewswitch,
.ang-modus,
.nav-tabs {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--bg-2);
border-radius: var(--radius-pill);
max-width: 100%;
overflow-x: auto;
}
.segment-btn,
.meal-viewswitch-btn,
.rb-viewswitch-btn,
.ang-modus-knopf,
.nav-tab-link {
min-height: 36px;
padding: 0 var(--s-4);
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--ink-2);
font: inherit;
font-size: var(--fs-sm);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
text-decoration: none;
}
.segment-btn i, .segment-btn svg,
.meal-viewswitch-btn i, .meal-viewswitch-btn svg,
.rb-viewswitch-btn i, .rb-viewswitch-btn svg,
.ang-modus-knopf i, .ang-modus-knopf svg,
.nav-tab-link i, .nav-tab-link svg {
width: 16px;
height: 16px;
}
.segment-btn:hover,
.meal-viewswitch-btn:hover,
.rb-viewswitch-btn:hover,
.ang-modus-knopf:hover,
.nav-tab-link:hover {
color: var(--ink);
}
.segment-btn[aria-selected="true"],
.segment-btn[aria-pressed="true"],
.segment-btn.active,
.segment-btn.aktiv,
.meal-viewswitch-btn.active,
.rb-viewswitch-btn.active,
.ang-modus-knopf.aktiv,
.nav-tab-link.active {
background: var(--surface);
color: var(--primary-ink);
box-shadow: var(--shadow-1);
}
/* --- Chips: ein kleines farbiges Label --------------------------------
Vorher 14 eigene Klassen fuer dieselbe Sache. Versalien und Sperrung sind
weg - "ABGESCHLOSSEN" in Grossbuchstaben schreit lauter als der
Kindername daneben. */
.chip,
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-1);
padding: 2px var(--s-2);
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.6;
white-space: nowrap;
text-transform: none;
letter-spacing: 0;
}
.chip-primary, .badge-primary { background-color: var(--primary-soft); color: var(--primary-ink); }
.chip-success, .badge-success { background-color: var(--success-soft); color: var(--success-ink); }
.chip-warn, .badge-warning { background-color: var(--warn-soft); color: var(--warn-ink); }
.chip-danger, .badge-danger { background-color: var(--danger-soft); color: var(--danger-ink); }
.chip-info, .badge-info { background-color: var(--info-soft); color: var(--info-ink); }
.chip-neutral { background-color: var(--bg-2); color: var(--ink-2); }
/* --- Chip-Knoepfe: Filter und Umschalter, die keine Ansicht wechseln ----
Sechs Klassen mit demselben Grundmuster bekommen eine Sprache: Pille mit
Linie, aktiv als weiche Flaeche statt als voll gefuellter Farbklecks. */
.chip-btn,
.btn-filter,
.ang-schalter-knopf,
.rb-chip-btn,
.rb-quelle-btn,
.pedagogy-area-tab {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: 34px;
padding: 0 var(--s-3);
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--ink-2);
font-family: var(--font-family);
font-size: var(--fs-sm);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.chip-btn i, .chip-btn svg,
.btn-filter i, .btn-filter svg,
.ang-schalter-knopf i, .ang-schalter-knopf svg,
.rb-chip-btn i, .rb-chip-btn svg,
.rb-quelle-btn i, .rb-quelle-btn svg {
width: 16px;
height: 16px;
}
.chip-btn:hover,
.btn-filter:hover,
.ang-schalter-knopf:hover,
.rb-chip-btn:hover,
.rb-quelle-btn:hover,
.pedagogy-area-tab:hover {
background: var(--bg-2);
color: var(--ink);
}
.chip-btn.active,
.chip-btn.aktiv,
.btn-filter.active,
.ang-schalter-knopf.aktiv,
.rb-chip-btn.active,
.rb-quelle-btn.active,
.pedagogy-area-tab.btn-primary {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary-ink);
}
/* --- Leerzustand --------------------------------------------------------
Ersetzt die elf verschiedenen "Keine ... vorhanden"-Absaetze. Kursiv ist
weg: Kursivschrift liest sich als Zitat, nicht als Auskunft. */
.leer {
text-align: center;
padding: var(--s-6) var(--s-4);
color: var(--ink-2);
}
.leer-symbol {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--gold-soft);
color: var(--accent-text);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--s-3);
}
.leer-symbol i,
.leer-symbol svg {
width: 26px;
height: 26px;
}
.leer-titel {
font-weight: 600;
color: var(--ink);
margin-bottom: var(--s-1);
}
.leer .btn {
margin-top: var(--s-4);
}
/* --- Hinweiskasten ------------------------------------------------------ */
.hinweis {
display: flex;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-radius: var(--radius-md);
border-left: 3px solid var(--info);
background: var(--info-soft);
color: var(--ink);
font-size: var(--fs-sm);
}
.hinweis-warn { border-color: var(--warn); background: var(--warn-soft); }
.hinweis-danger { border-color: var(--danger); background: var(--danger-soft); }
.hinweis-success { border-color: var(--success); background: var(--success-soft); }
/* ==========================================================================
Das Seitengeruest (src/shell.js zeichnet dieses Markup)
Kopfzeile 56px, am Rechner eine Seitenleiste, am Handy eine untere Leiste
mit "Mehr"-Sheet. Vorher belegten Kopfzeile und Navigation auf dem Handy
560-610px, bevor der erste Inhalt kam.
========================================================================== */
.app-shell {
min-height: 100vh;
}
/* Das Raster gilt nur am Bildschirm. Auf Papier faellt .app-shell auf
display:block zurueck - sonst klebte der Inhalt in der zweiten Spalte
eines Rasters, dessen erste Spalte (die ausgeblendete Seitenleiste)
248px Papier verschenkt. Das kommt ohne einen weiteren @media
print-Block aus, der die 13 bestehenden Druckbloecke stoeren wuerde. */
@media screen {
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: var(--header-h) 1fr;
}
/* Anmelde-, Anfrage- und Fehlerseiten haben keine Bereiche - dort steht
nur die Kopfzeile ueber einer einzigen Spalte. */
.app-shell-ohne-nav {
grid-template-columns: 1fr;
}
}
.app-header {
grid-column: 1 / -1;
position: sticky;
top: 0;
z-index: var(--z-header);
height: var(--header-h);
display: flex;
align-items: center;
gap: var(--s-3);
padding: 0 var(--s-5);
background: var(--surface);
border-bottom: 1px solid var(--line);
min-width: 0;
}
.app-brand {
display: flex;
align-items: center;
gap: var(--s-2);
text-decoration: none;
min-width: 0;
}
/* Weisser Kreis mit Linie - derselbe Traeger wie in .logo-icon, damit der
Loewe auf jedem Grund sauber steht. */
.app-brand-mark {
width: 36px;
height: 36px;
flex-shrink: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.app-brand-mark img {
display: block;
width: 100%;
height: 100%;
padding: 3px;
object-fit: contain;
}
.app-brand-name {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--ink);
white-space: nowrap;
}
.app-header-actions {
display: flex;
align-items: center;
gap: var(--s-2);
margin-left: auto;
}
/* --- Seitenleiste (ab 1024px) ------------------------------------------- */
.app-sidebar {
grid-column: 1;
position: sticky;
top: var(--header-h);
height: calc(100vh - var(--header-h));
overflow-y: auto;
background: var(--bg);
border-right: 1px solid var(--line);
padding: var(--s-4) var(--s-3);
}
.app-nav-group + .app-nav-group {
margin-top: var(--s-5);
}
/* Kein Versalien-Label: die Gruppennamen sind Woerter, keine Ueberschriften
eines Beipackzettels. */
.app-nav-group-label {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-3);
padding: 0 var(--s-3) var(--s-2);
letter-spacing: 0;
}
.app-nav-item {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 10px var(--s-3);
border-radius: var(--radius-md);
font-size: var(--fs-md);
font-weight: 500;
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
}
.app-nav-item i,
.app-nav-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--ink-3);
}
.app-nav-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-nav-item:hover {
background: var(--bg-2);
color: var(--ink);
}
/* Der aktive Bereich: weiche Flaeche, dunkelpinke Schrift und links ein
3px-Balken als inset-Schatten - ein echter border-left wuerde alle
anderen Eintraege um 3px verschieben. */
.app-nav-item[aria-current="page"] {
background: var(--primary-soft);
color: var(--primary-ink);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--primary);
}
.app-nav-item[aria-current="page"] i,
.app-nav-item[aria-current="page"] svg {
color: var(--primary);
}
/* Bereichsfarben: nur Symbol und Balken, nie die Flaeche. */
[data-ton="blau"] .app-nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ton-blau); }
[data-ton="blau"] .app-nav-item[aria-current="page"] i,
[data-ton="blau"] .app-nav-item[aria-current="page"] svg { color: var(--ton-blau); }
[data-ton="gruen"] .app-nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ton-gruen); }
[data-ton="gruen"] .app-nav-item[aria-current="page"] i,
[data-ton="gruen"] .app-nav-item[aria-current="page"] svg { color: var(--ton-gruen); }
[data-ton="orange"] .app-nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ton-orange); }
[data-ton="orange"] .app-nav-item[aria-current="page"] i,
[data-ton="orange"] .app-nav-item[aria-current="page"] svg { color: var(--ton-orange); }
.app-nav-badge:not([hidden]) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
margin-left: auto;
padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--primary);
color: var(--surface);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1;
}
/* --- Inhaltsspalte ------------------------------------------------------ */
.app-main {
grid-column: 2;
padding: var(--s-5);
max-width: var(--inhalt-max);
width: 100%;
margin: 0 auto;
min-width: 0;
}
.app-shell-ohne-nav .app-main {
grid-column: 1;
}
/* --- Untere Leiste (unter 1024px) --------------------------------------- */
.app-bottombar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-header);
height: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: var(--surface);
border-top: 1px solid var(--line);
grid-template-columns: repeat(5, 1fr);
}
.app-bottombar-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
border: 0;
background: none;
font-family: var(--font-family);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
}
.app-bottombar-item i,
.app-bottombar-item svg {
width: 22px;
height: 22px;
}
.app-bottombar-item[aria-current="page"],
.app-bottombar-item.aktiv {
color: var(--primary);
font-weight: 600;
}
.app-bottombar-label {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* In der unteren Leiste sitzt die Zahl am Symbol, nicht am Zeilenende. */
.app-bottombar-item .app-nav-badge:not([hidden]) {
position: absolute;
top: 4px;
right: 50%;
margin-left: 0;
margin-right: -22px;
min-width: 16px;
height: 16px;
font-size: 10px;
}
/* --- Sheet von unten ("Mehr") ------------------------------------------- */
.app-sheet-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(30 20 10 / 0.35);
z-index: var(--z-sheet);
}
.app-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: calc(var(--z-sheet) + 1);
max-height: 85vh;
overflow-y: auto;
background: var(--surface);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: var(--shadow-2);
padding: var(--s-4) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
transform: translateY(0);
transition: transform var(--transition-normal);
}
/* [hidden] setzt display:none, also gibt es beim ersten Aufbau keine
Animation - das reicht: das Sheet ist ein Werkzeug, keine Vorstellung. */
.app-sheet[hidden] {
transform: translateY(100%);
}
.app-sheet-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
margin-bottom: var(--s-4);
}
.app-sheet-titel {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--ink);
}
.app-sheet .app-nav-group {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--s-2);
}
/* Auf sehr schmalen Handys reicht den zwei Spalten der Platz nicht ganz -
ein langer Name wie "Schwarzes Brett" wird abgeschnitten. Eine Spalte
gibt jedem Namen die volle Breite. */
@media (max-width: 400px) {
.app-sheet .app-nav-group {
grid-template-columns: 1fr;
}
}
.app-sheet .app-nav-group-label {
grid-column: 1 / -1;
}
.app-sheet .app-nav-item {
background: var(--bg);
}
.app-sheet .app-nav-item[aria-current="page"] {
background: var(--primary-soft);
}
/* Solange das Sheet offen ist, soll die Seite darunter nicht mitrollen. */
body.app-sheet-offen {
overflow: hidden;
}
/* --- Kopfzeilen-Menue (drei Punkte) und Glocke -------------------------- */
.app-menu-wrapper,
.notification-bell-wrapper {
position: relative;
}
.app-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 220px;
z-index: var(--z-dropdown);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2);
padding: var(--s-2);
}
.app-menu-rolle {
font-size: var(--fs-sm);
color: var(--ink-2);
padding: var(--s-2) var(--s-3);
border-bottom: 1px solid var(--line);
margin-bottom: var(--s-2);
}
.app-menu-item {
display: flex;
align-items: center;
gap: var(--s-2);
width: 100%;
padding: 10px var(--s-3);
border: 0;
border-radius: var(--radius-sm);
background: none;
font-family: var(--font-family);
font-size: var(--fs-md);
color: var(--ink);
text-align: left;
cursor: pointer;
}
.app-menu-item i,
.app-menu-item svg {
width: 18px;
height: 18px;
}
.app-menu-item:hover {
background: var(--bg-2);
}
/* --- Breakpoints des Geruests ------------------------------------------- */
/* Unter 1024px verschwindet die Seitenleiste, die untere Leiste uebernimmt. */
@media (max-width: 1024px) {
.app-shell {
grid-template-columns: 1fr;
}
.app-sidebar {
display: none;
}
.app-main {
grid-column: 1;
padding: var(--s-4);
padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + var(--s-5));
}
.app-bottombar {
display: grid;
}
}
@media (max-width: 700px) {
.app-header {
padding: 0 var(--s-4);
}
/* Der Terminal-Knopf behaelt sein Symbol, verliert aber die Beschriftung -
zwei Woerter in einer 56px-Leiste kosten die Haelfte der Breite. */
.app-header-cta-label {
display: none;
}
.app-header-actions .btn {
width: 40px;
padding: 0;
}
.seite-titel,
.section-title {
font-size: var(--fs-xl);
}
.seite-aktionen {
width: 100%;
}
.seite-aktionen > .btn:only-child {
width: 100%;
}
}
@media (max-width: 400px) {
.app-header {
padding: 0 var(--s-3);
}
/* Auf sehr schmalen Geraeten zaehlt der Loewe, nicht der Schriftzug. */
.app-brand-name {
display: none;
}
.app-main,
.main-content {
padding: var(--s-3);
}
.app-main {
padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + var(--s-5));
}
}
/* Sicherheitsnetz: [hidden] ist eine Autor-Regel des Browsers und verliert
gegen jede eigene display-Angabe. Diese Zeile steht bewusst NACH den
Bausteinen oben, damit versteckte Elemente auch dann verschwinden, wenn
ihre Klasse ein display mitbringt. */
[hidden] {
display: none;
}
/* Inputs & Formulare */
.form-group {
margin-bottom: var(--s-4);
}
.form-label {
display: block;
font-weight: 600;
font-size: var(--fs-sm);
margin-bottom: var(--s-1);
color: var(--ink-2);
}
.form-control {
width: 100%;
min-height: 44px;
padding: 0.6rem var(--s-3);
border-radius: var(--radius-sm);
border: 1px solid var(--line-strong);
font-family: var(--font-family);
font-size: var(--fs-md);
background-color: var(--surface);
color: var(--ink);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
/* Login-Layout */
.login-wrapper {
min-height: calc(100vh - 120px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.login-card {
width: 100%;
max-width: 440px;
background: var(--white);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
text-align: center;
}
/* Die beiden Verweise unter dem Anmeldeformular ("Unverbindlich anfragen",
"Wie die Eingewoehnung ablaeuft") standen ohne eigene Regel als Fliesstext
hintereinander - untereinander mit Abstand liest sich jeder als eigener
Verweis. */
.login-fuss {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-2);
margin-top: var(--s-4);
}
/* Rechtsseiten unter dem Anmeldeformular (Stufe 0): unauffaellig, aber
jede Tippflaeche mindestens 44 px hoch. */
.login-rechts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 var(--s-3);
margin-top: var(--s-3);
font-size: 0.85em;
}
.login-rechts a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--text-muted);
}
/* Breites Logo auf Anmelde- und Anfrageseite. Der Schriftzug steckt bereits im
Bild, deshalb steht darunter kein zusätzlicher Name. */
.login-header h1.brand-lockup {
margin: 0 0 1.1rem;
line-height: 0;
}
.brand-lockup-img {
display: block;
width: 100%;
max-width: 280px;
height: auto;
margin: 0 auto;
}
.login-header h1 {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-main);
margin-bottom: 0.5rem;
}
.login-header p {
color: var(--text-muted);
font-size: 0.95rem;
margin-bottom: 2rem;
}
/* Dashboard-Layouts */
.dashboard-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
@media (max-width: 992px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
}
/* .section-header und .section-title stehen jetzt oben beim Seitenkopf
(.seite-kopf/.seite-titel) - hier stuenden sonst zwei Wahrheiten. */
/* --------------------------------------------------------------------------
Tagesprotokoll: Kinderkarten
Eine Karte je Kind, drei Zonen, getrennt durch Linien statt durch
Kaesten-in-Kaesten (das Audit vom 03.09.2026 zaehlte 50 Rahmen in bis zu
3 Ebenen - hier bleibt nur eine Aussenkontur je Karte).
Kurzzeilen statt Laschen: vier Reiter nebeneinander ("Essen/Schlaf/
Wickeln/Notiz") haetten am Handy je nur neun Zeichen Platz gehabt und
nichts vom Inhalt verraten, bevor man tippt - eine Kurzzeile zeigt auf
einen Blick, was heute schon eingetragen ist, und die Karte bleibt
zugeklappt uebersichtlich. Die Werkzeugleiste ist leise (keine Rahmen,
keine Flaeche, ink-2 statt Primaerfarbe): Chat, Foto, Portfolio, Notfall,
Medikamente und Unfall sind Nebenwege, keine Hauptaktion der Karte - die
ist das Ausfuellen der Abschnitte selbst.
-------------------------------------------------------------------------- */
.kids-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: var(--s-4);
align-items: start;
}
/* Gleich hohe Karten je Reihe, solange keine Karte aufgeklappt ist:
Allergie-Chips (null bis zwei Zeilen) und umgebrochene Nachnamen liessen
die Karten sonst um 20-40px gegeneinander wackeln, obwohl alle Kinder im
selben Zustand sind. Sobald ein Abschnitt offen ist, faellt das Raster
zurueck auf Inhaltshoehe - sonst bekaemen die Nachbarkarten den ganzen
aufgeklappten Bereich als Leerraum dazu. */
.kids-grid:not(:has(.abschnitt-inhalt:not([hidden]))) {
align-items: stretch;
}
/* Ausnahme: Sind an einem Tag manche Kinder da und andere nicht, hat die
abwesende Karte nur zwei Zeilen, die anwesende vier Abschnitte. Die
abwesende auf deren Hoehe zu ziehen ergaebe 400px Leerraum - sie behaelt
deshalb ihre eigene Hoehe. Sind alle Kinder abwesend (keine Karte hat
Abschnitte), greift die Ausnahme nicht und alle bleiben gleich hoch. */
.kids-grid:has(.kind-abschnitte) .kind-karte:not(:has(.kind-abschnitte)) {
align-self: start;
}
@media (max-width: 420px) {
/* Bei 375px Breite wuerde minmax(340px, 1fr) sonst ueberlaufen. */
.kids-grid {
grid-template-columns: 1fr;
}
}
/* .status-dot wird von der Heute-Tabelle weiter benutzt (admin.js, Zeile
~3303 und ~9568, parent.js Zeile ~1461) - unveraendert aus dem alten
Block uebernommen. */
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.status-dot.present { background-color: var(--success); }
.status-dot.absent { background-color: var(--text-muted); }
.status-dot.sick { background-color: var(--danger); }
/* Urlaub ist eine Information, kein Terracotta-Sonderfall. */
.status-dot.vacation { background-color: var(--info); }
/* --- Zone 1: Kopf --------------------------------------------------------- */
.kind-karte {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
/* data-status auf .kind-karte steht nur fuer den Avatar-Punkt (siehe
.kind-avatar[data-status] unten) - die Karte selbst dunkelt bei Abwesenheit
nicht ab, sonst sind abwesende Kinder auf einen Blick schwerer zu finden,
nicht leichter. */
.kind-kopf {
display: flex;
align-items: center;
gap: var(--s-3);
}
.kind-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary-ink);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--fs-lg);
flex-shrink: 0;
position: relative;
}
/* Anwesenheits-Punkt am Avatar statt einer zweiten Avatarfarbe je Kind -
die alten nth-child-Farbvarianten sagten nichts ueber das Kind aus, nur
ueber seine Position im Raster. */
.kind-avatar::after {
content: '';
position: absolute;
right: -1px;
bottom: -1px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--surface);
background: var(--ink-3);
}
.kind-avatar[data-status="present"]::after { background: var(--success); }
.kind-avatar[data-status="sick"]::after { background: var(--danger); }
.kind-avatar[data-status="vacation"]::after { background: var(--info); }
.kind-titel {
flex: 1;
min-width: 0;
}
.kind-name {
font-size: var(--fs-lg);
font-weight: 600;
margin: 0;
line-height: 1.25;
color: var(--ink);
/* Der Name darf umbrechen: Bei drei Spalten am Rechner ist die Karte
~280px breit, und "Jonas Bergmann" wuerde sonst zu "Jonas Bergm..." -
der Nachname ist bei fuenf Kindern die Information, nicht die Zierde. */
overflow-wrap: anywhere;
}
.kind-chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-1);
margin-top: var(--s-1);
}
.kind-status {
width: auto;
flex-shrink: 0;
font-size: var(--fs-sm);
padding-left: var(--s-3);
}
.kind-zeiten {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
}
.kind-zeit .form-label {
margin-bottom: var(--s-1);
}
.kind-zeit .form-control {
width: 100%;
}
.kind-abwesend {
margin: 0;
font-size: var(--fs-sm);
color: var(--ink-2);
}
.kind-konflikt {
align-items: center;
}
.kind-konflikt i,
.kind-konflikt svg {
width: 18px;
height: 18px;
color: var(--danger);
flex-shrink: 0;
}
/* --- Zone 2: Abschnitte ---------------------------------------------------
Essen / Schlaf / Wickeln / Stimmung & Notiz als aufklappbare Zeilen,
getrennt nur durch eine Linie - keine eigene Flaeche, kein eigener
Rahmen je Abschnitt. */
.kind-abschnitte {
display: flex;
flex-direction: column;
border-top: 1px solid var(--line);
}
.abschnitt {
border-bottom: 1px solid var(--line);
}
.abschnitt:last-child {
border-bottom: 0;
}
.abschnitt-kopf {
display: flex;
align-items: center;
gap: var(--s-2);
}
.abschnitt-schalter {
flex: 1;
min-width: 0;
display: grid;
grid-template-columns: 18px 1fr 18px;
grid-template-rows: auto auto;
column-gap: var(--s-2);
row-gap: var(--s-1);
align-items: center;
min-height: 52px;
padding: var(--s-2) 0;
border: 0;
background: transparent;
text-align: left;
font: inherit;
color: var(--ink);
cursor: pointer;
}
.abschnitt-schalter > i:not(.abschnitt-pfeil),
.abschnitt-schalter > svg:not(.abschnitt-pfeil) {
grid-column: 1;
grid-row: 1;
width: 18px;
height: 18px;
color: var(--ink-2);
}
.abschnitt-titel {
grid-column: 2;
grid-row: 1;
font-size: var(--fs-md);
font-weight: 600;
}
.abschnitt-pfeil {
grid-column: 3;
grid-row: 1;
width: 18px;
height: 18px;
color: var(--ink-3);
transition: transform var(--transition-fast);
}
.abschnitt-schalter[aria-expanded="true"] .abschnitt-pfeil {
transform: rotate(180deg);
}
.abschnitt-kurz {
grid-column: 2 / -1;
grid-row: 2;
font-size: var(--fs-sm);
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
/* Der Uebergang steht auf der Grundregel, nicht auf .ist-frisch: sonst
springt die Farbe beim Entfernen der Klasse hart zurueck. */
transition: color var(--transition-fast);
}
.abschnitt-kurz.ist-leer {
color: var(--ink-3);
}
.abschnitt-kurz.ist-frisch {
color: var(--success-ink);
}
.abschnitt-schalter:hover .abschnitt-titel {
color: var(--primary-ink);
}
.abschnitt-schalter:focus-visible {
outline: 3px solid var(--primary-soft);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.abschnitt-aktion {
flex-shrink: 0;
}
/* Wichtig: display darf hier NICHT auf .abschnitt-inhalt ohne Weiteres
stehen - [hidden] und eine Klasse haben dieselbe Selektor-Spezifitaet,
und eine spaeter im Stylesheet stehende .abschnitt-inhalt{display:flex}
wuerde die [hidden]-Regel des Browsers aushebeln und den Abschnitt
sichtbar lassen, obwohl das JS ihn zugeklappt hat. Deshalb der Zusatz
:not([hidden]). */
.abschnitt-inhalt:not([hidden]) {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding: 0 0 var(--s-4) 26px;
}
@media (max-width: 420px) {
/* Gleiche Spezifitaet wie oben (:not([hidden]) zaehlt wie eine Klasse) -
sonst verliert diese Regel gegen die Kurzform padding oben und die
Einrueckung bleibt am Handy stehen. */
.abschnitt-inhalt:not([hidden]) {
padding-left: 0;
}
}
.abschnitt-inhalt .form-group {
margin: 0;
}
.abschnitt-hinweis,
.abschnitt-leer {
margin: 0;
font-size: var(--fs-sm);
color: var(--ink-2);
}
/* Schlaf-Kurzzeile mit laufender Stoppuhr */
.schlaf-laeuft {
display: inline-flex;
align-items: center;
gap: var(--s-2);
color: var(--info-ink);
font-weight: 600;
}
.schlaf-laeuft .pulse-dot {
width: 8px;
height: 8px;
background-color: var(--info);
}
/* Umschalter in voller Kartenbreite (Essverhalten, Stimmung): vier Woerter
wie "Fröhlich/Müde/Verspielt/Quengelig" muessen in rund 311px passen
(Karte 340px minus Innenabstand). */
.segment-voll {
display: flex;
width: 100%;
}
.segment-voll .segment-btn {
flex: 1;
min-width: 0;
padding: 0 var(--s-2);
}
@media (max-width: 420px) {
.segment-voll .segment-btn {
font-size: var(--fs-xs);
padding: 0 var(--s-1);
}
}
.wahl-chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin-bottom: var(--s-2);
}
.kind-karte .chip-btn[aria-pressed="true"] {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary-ink);
}
.wickel-liste {
list-style: none;
margin: 0;
padding: 0;
}
.wickel-eintrag {
display: flex;
align-items: center;
gap: var(--s-3);
min-height: 40px;
border-bottom: 1px dashed var(--line);
font-size: var(--fs-sm);
}
.wickel-eintrag:last-child {
border-bottom: 0;
}
.wickel-zeit {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.wickel-status {
flex: 1;
min-width: 0;
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wickel-neu {
display: grid;
grid-template-columns: auto 1fr 40px;
gap: var(--s-2);
align-items: center;
}
.wickel-neu input[type="time"] {
width: auto;
}
/* min-width:0 auf dem Textfeld: sonst zaehlt bei der intrinsischen Messung
der Spur die Eigenbreite des (Standard-size 20, ~178px min.) statt
width:100% aus .form-control - die 1fr-Spur koennte sonst nicht unter
diese Breite schrumpfen und die Zeile ragt aus der Karte. */
.wickel-neu .form-control {
min-width: 0;
}
.wickel-neu .btn-icon {
width: 40px;
/* min-width aus der generischen Touch-Regel (.btn-icon { min-width:44px })
gewinnt sonst immer gegen width - der Knopf waere auf Touch 44px in
einer 40px-Spur. */
min-width: 40px;
}
/* --- Zone 3: Werkzeuge -----------------------------------------------------
Sechs beschriftete, leise Knoepfe - keine Flaeche, kein Rahmen, ink-2
statt Primaerfarbe. Das sind Nebenwege (Chat, Foto, Portfolio, Notfall,
Medikamente, Unfall), keine Hauptaktion der Karte. */
.kind-werkzeuge {
display: grid;
/* minmax(0,1fr) statt 1fr: sonst kann die Spur nicht unter die
min-content-Breite ihres Inhalts schrumpfen und "Medikamente" reisst
die Zeile auf (Gegenprobe: scrollWidth > clientWidth auf jeder Karte). */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-1);
border-top: 1px solid var(--line);
padding-top: var(--s-3);
/* Sitzt bei gleich hohen Karten unten, damit auch die Trennlinien einer
Reihe auf einer Hoehe liegen - ohne das stuende die Werkzeugleiste je
nach Anzahl der Chips versetzt. */
margin-top: auto;
}
/* Symbol ueber der Beschriftung, nicht daneben: Eine Drittelspur ist bei
375px rund 100px breit, "Medikamente" mit Symbol daneben braucht 114px -
nebeneinander wuerde das Wort abgeschnitten ("Medikam..."), untereinander
passt es in jeder Kartenbreite ohne Kuerzung. */
.werkzeug-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 52px;
min-width: 0;
padding: var(--s-1);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink-2);
font-family: var(--font-family);
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
position: relative;
}
.werkzeug-btn:hover {
background: var(--bg-2);
color: var(--ink);
}
.werkzeug-btn i,
.werkzeug-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* .chat-badge sitzt absolut in der Ecke - hier oben rechts am Symbol, das
in der Zelle zentriert steht (Symbol 18px breit, also endet es bei 50% +
9px). So bleibt das Kennzeichen in der Rasterzelle statt herauszuragen
(Audit: "Chat-Knopf 67px in 61px"). */
.werkzeug-btn .chat-badge {
top: 2px;
right: auto;
left: calc(50% + 6px);
}
/* --- Seitenkopf/Tafel ------------------------------------------------------
.krank-tafel braucht keine eigene Regel - sie ist nur der Namens-Haken auf
.card (class="card u-mt-5 krank-tafel"), das Aussehen kommt vollstaendig
von dort. */
.protokoll-datum {
width: auto;
}
.krank-chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.krank-hinweis {
margin: var(--s-3) 0 0;
font-size: var(--fs-sm);
color: var(--ink-2);
}
/* --- Touch: Tippflaechen mindestens 44px auf dem Handy ---------------------
Die generische Touch-Liste bei ~578 wird nicht erweitert (dort arbeitet
eine andere Sitzung) - eigene Regel fuer die neuen Klassen dieser Karte.
.segment-btn und .btn-sm/.btn-icon stehen zwar schon in der generischen
Liste, werden hier trotzdem ueber die Kartenklassen mitgefuehrt, damit
diese Regel unabhaengig von der generischen Liste vollstaendig bleibt. */
@media (hover: none) and (pointer: coarse) {
.werkzeug-btn,
.abschnitt-schalter,
.kind-karte .chip-btn,
.kind-karte .segment-btn,
.abschnitt-aktion,
.wickel-eintrag .btn-icon {
min-height: 44px;
}
}
/* Alerts / Banners */
.alert {
padding: var(--s-3) var(--s-4);
border-radius: var(--radius-md);
margin-bottom: var(--s-4);
font-size: var(--fs-sm);
display: flex;
align-items: center;
gap: var(--s-3);
font-weight: 500;
border-left: 3px solid var(--info);
background-color: var(--info-soft);
color: var(--ink);
}
/* Feedback-Meldungen als Toast, damit sie auch über offenen Modals (.modal-overlay, z-index 1000) sichtbar sind */
#alert-box,
#parent-alert {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: var(--z-toast);
margin-bottom: 0;
max-width: min(560px, calc(100vw - 32px));
box-shadow: var(--shadow-2);
}
/* Dieselben Toene wie .hinweis - eine Meldung sieht ueberall gleich aus,
egal ob sie als Toast oben einschwebt oder im Text steht. */
.alert-success {
border-left-color: var(--success);
background-color: var(--success-soft);
color: var(--success-ink);
}
.alert-danger {
border-left-color: var(--danger);
background-color: var(--danger-soft);
color: var(--danger-ink);
}
.alert-warning {
border-left-color: var(--warn);
background-color: var(--warn-soft);
color: var(--warn-ink);
}
.alert-info {
border-left-color: var(--info);
background-color: var(--info-soft);
color: var(--info-ink);
}
/* Lade-Spinner Animation */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin {
animation: spin 1s linear infinite;
}
/* Modals */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(30 20 10 / 0.45);
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-normal);
overflow-y: auto;
padding: var(--s-6) var(--s-4);
}
.modal-overlay.open {
opacity: 1;
pointer-events: auto;
display: flex !important;
}
.modal-container {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--s-5);
width: 100%;
max-width: 500px;
margin: var(--s-5) auto;
box-shadow: var(--shadow-3);
border: 1px solid var(--line);
transform: scale(0.95);
transition: transform var(--transition-normal);
}
.modal-overlay.open .modal-container {
transform: scale(1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-5);
}
.modal-header h2,
.modal-header h3 {
font-size: var(--fs-xl);
margin: 0;
}
/* Am Handy kommt der Dialog als Blatt von unten und darf die volle Breite
nehmen. Vorher war das lange Kind-Formular eine 335px schmale Box mit
3.500px Rollhoehe mitten auf dem Bildschirm. */
@media (max-width: 700px) {
.modal-overlay {
padding: 0;
align-items: flex-end;
}
.modal-container {
margin: 0;
max-width: 100%;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
max-height: 92vh;
overflow-y: auto;
padding: var(--s-4);
}
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--ink-2);
/* 44px Tippflaeche, auch am Desktop - das Kreuz ist sonst die kleinste
klickbare Flaeche im ganzen Modal */
padding: 0.5rem;
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Unterreiter. Aussehen und Verhalten kommen jetzt vom .segment weiter oben
(dieselbe Selektorliste) - hier bleibt nur, was das Segment nicht regelt:
der Abstand nach unten und die Rollrichtung auf schmalen Bildschirmen. */
.nav-tabs {
display: inline-flex;
margin-bottom: var(--s-5);
border-bottom: 0;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.nav-tab-link {
padding: 0 var(--s-3);
}
}
/* Redesigned Grouped Navigation Menu */
.nav-menu-wrapper {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-bottom: 2rem;
background-color: var(--white);
padding: 1.2rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
}
.nav-main-groups {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
border-bottom: 1.5px solid var(--border-color);
padding-bottom: 1rem;
}
.nav-group-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.2rem;
font-family: var(--font-family);
font-size: 0.95rem;
font-weight: 600;
color: var(--ink-2);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.nav-group-btn i, .nav-group-btn svg {
width: 18px;
height: 18px;
}
/* Kein Hochspringen beim Ueberfahren mehr: Hover zeigt sich als Flaeche,
nicht als Bewegung - sonst wandert die ganze Reihe unter der Maus. */
.nav-group-btn:hover {
color: var(--ink);
background: var(--bg-2);
}
.nav-group-btn.active {
color: var(--primary-ink);
background: var(--primary-soft);
border-color: var(--primary);
}
.nav-sub-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding-top: 0.2rem;
}
.nav-sub-tab-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
text-decoration: none;
transition: all var(--transition-fast);
}
.nav-sub-tab-link i, .nav-sub-tab-link svg {
width: 16px;
height: 16px;
stroke-width: 2px;
}
/* Frueher Terracotta - die zweite "aktiv"-Farbe der App. Es gibt nur eine. */
.nav-sub-tab-link:hover {
color: var(--ink);
background: var(--bg-2);
}
.nav-sub-tab-link.active {
color: var(--primary-ink);
background: var(--primary-soft);
font-weight: 600;
border-color: var(--primary);
}
/* Schwarzes Brett */
.announcement-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.announcement-card {
border-left: 4px solid var(--accent);
background-color: var(--bg-primary);
padding: 1rem;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.announcement-meta {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 0.4rem;
}
.announcement-title {
font-weight: 600;
margin-bottom: 0.4rem;
}
/* Schwarzes Brett V1.22: Banner für wichtige, noch unbestätigte Mitteilungen.
Er bleibt sichtbar, bis die Eltern die Lesebestätigung erteilt haben. */
.board-important-banner {
border: 2px solid var(--danger);
background: var(--danger-light);
border-radius: var(--radius-md);
padding: 1rem 1.2rem;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.board-important-banner-head {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 1.05rem;
color: var(--danger);
}
.board-important-banner-head svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.board-important-item {
background: var(--white);
border-radius: var(--radius-sm);
border: 1px solid var(--danger);
padding: 0.8rem 1rem;
}
/* Zielgruppen- und Wichtig-Marker sollen neben dem Text nicht schreien */
.announcement-card .badge {
text-transform: none;
letter-spacing: 0;
}
/* Table styles */
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
width: 100%;
border-collapse: collapse;
margin-top: var(--s-4);
}
.table th, .table td {
padding: var(--s-3);
text-align: left;
border-bottom: 1px solid var(--line);
}
.table th {
background-color: var(--bg-2);
font-weight: 600;
font-size: var(--fs-sm);
color: var(--ink-2);
text-transform: none;
letter-spacing: 0;
}
/* Erste Spalte traegt fast immer den Kindernamen - die soll man beim
Querlesen sofort finden, besonders wenn die Tabelle am Handy rollt. */
.table td:first-child {
font-weight: 600;
}
/* Parent view specific styles */
.parent-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1.5rem;
}
@media (max-width: 768px) {
.parent-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* Karten in diesem Raster koennen ein eigenes Inline-Raster enthalten (z. B.
zwei Datumsfelder bei "Abwesenheit melden"). 1fr allein hat als Minimum
die natuerliche Breite des Inhalts - min-width: 0 laesst die Spalte
schrumpfen, dieselbe Schutzregel wie fuer Dialoge weiter oben. */
.parent-grid [style*="grid-template-columns"] > * {
min-width: 0;
}
.daily-log-timeline {
display: flex;
flex-direction: column;
gap: 1rem;
}
.timeline-item {
border: 1px solid var(--border-color);
background: var(--white);
padding: 1.2rem;
border-radius: var(--radius-sm);
position: relative;
}
.timeline-date {
font-weight: 600;
color: var(--primary);
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.timeline-detail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.8rem;
font-size: 0.9rem;
}
.detail-block {
background-color: var(--bg-primary);
padding: 0.5rem 0.8rem;
border-radius: 6px;
}
.detail-label {
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 500;
}
.detail-value {
font-weight: 600;
margin-top: 0.1rem;
}
/* ==========================================================================
PRINT STYLES FOR Abrechnungs- & Entwicklungsberichte
========================================================================== */
/* Seitenformat und Raender fuer JEDEN Ausdruck der App.
Stammt aus der frueheren src/invoice.css. Die war ueber ein @import in
Zeile 3 dieser Datei eingebunden und hat sehr wohl gewirkt - hier steht
also fort, was vorher schon galt, nichts Neues. (Eine fruehere Fassung
dieses Kommentars behauptete das Gegenteil; sie beruhte auf einem
Suchlauf, der CSS-Dateien nicht mit durchsucht hatte.)
Kein @media print noetig: @page gilt ausschliesslich fuer paginierte
Medien, am Bildschirm ist die Regel wirkungslos.
Ohne diese Angabe entscheidet der Druckdialog des jeweiligen Browsers
ueber die Raender - je nach Browser und Spracheinstellung zwischen etwa
1 und 2 cm. Der Block darunter setzt body/html auf margin: 0, der
Weissraum kommt also allein von hier. Fest gesetzt, damit ein
Stundennachweis beim Jugendamt ueberall gleich aussieht. */
@page {
size: A4 portrait;
margin: 1.5cm;
}
@media print {
body, html {
background: #ffffff !important;
color: #000000 !important;
font-size: 11pt !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Chrome/Navigations-Elemente ausblenden. Die .app-*-Zeilen kamen mit dem
neuen Geruest dazu - ohne sie stuenden Seitenleiste und untere Leiste
auf jeder Rechnung und jedem Stundennachweis. */
.main-header,
.app-header,
.app-sidebar,
.app-bottombar,
.app-sheet,
.app-sheet-backdrop,
.app-menu,
.nav-tabs,
.no-print,
#alert-box,
#parent-alert,
button,
select,
.form-group,
.btn,
.abschnitt-inhalt,
.abschnitt-aktion,
.kind-werkzeuge,
.section-header,
#logout-btn {
display: none !important;
}
/* .app-main ist die Inhaltsspalte des neuen Geruests und braucht denselben
Nullabstand wie .main-content - sonst rutscht jeder Ausdruck um den
Bildschirm-Innenabstand ein. */
.main-content,
.app-main {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Druckbereich-Borders/Borders und Box-Shadows neutralisieren */
.print-area {
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
width: 100% !important;
}
.print-only {
display: block !important;
}
/* Tabellen optimal für A4 Druck stylen */
.print-table {
width: 100% !important;
border-collapse: collapse !important;
margin-top: 1rem !important;
}
.print-table th,
.print-table td {
border: 1px solid #000000 !important;
padding: 6px 10px !important;
font-size: 9.5pt !important;
color: #000000 !important;
}
.print-table th {
background-color: #f0f0f0 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
font-weight: bold !important;
}
/* Keine Zeile ueber die Blattkante hinweg zerreissen. Der Vorgabewert ist
'auto', ein Umbruch mitten in einer Zeile also erlaubt. Bei den kurzen
Zeilen des Stundennachweises tritt er nicht auf, bei mehrzeiligen
Statustexten kann er es. break-inside ist die aktuelle Schreibweise,
page-break-inside die aeltere - beide gesetzt, weil nicht absehbar ist,
welcher Browser das Blatt erzeugt. */
.print-table tr {
break-inside: avoid;
page-break-inside: avoid;
}
.status-dot {
display: none !important;
}
/* Unterschriftenbereiche am Seitenende halten */
.print-signatures {
margin-top: 50px !important;
}
/* Pagebreak Helpers */
.page-break-before {
page-break-before: always !important;
}
.page-break-inside-avoid {
page-break-inside: avoid !important;
}
.print-only img {
max-width: 80% !important;
max-height: 400px !important;
display: block !important;
margin: 1.5rem auto !important;
border-radius: 8px !important;
border: 1px solid #ddd !important;
object-fit: contain !important;
}
}
/* Puls-Animation für laufenden Schlaf-Timer */
@keyframes timerPulse {
0% { opacity: 1; }
50% { opacity: 0.35; }
100% { opacity: 1; }
}
.pulse-timer {
animation: timerPulse 2s infinite ease-in-out;
}
/* DSGVO-Messenger Chat-System */
.chat-container {
display: flex;
flex-direction: column;
height: 450px;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
background: #faf8f5;
border: 1px solid var(--border-color);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.chat-bubble {
max-width: 75%;
padding: 0.6rem 0.8rem;
border-radius: 12px;
font-size: 0.85rem;
line-height: 1.4;
position: relative;
word-wrap: break-word;
}
.chat-bubble.sent {
align-self: flex-end;
background: var(--accent);
color: white;
border-bottom-right-radius: 2px;
}
.chat-bubble.received {
align-self: flex-start;
background: #e8e3d9;
color: var(--text-main);
border-bottom-left-radius: 2px;
}
.chat-time {
font-size: 0.7rem;
margin-top: 0.25rem;
text-align: right;
opacity: 0.8;
}
.chat-bubble.sent .chat-time {
color: rgba(255, 255, 255, 0.9);
}
.chat-bubble.received .chat-time {
color: var(--text-muted);
}
.chat-input-area {
display: flex;
gap: 0.5rem;
margin-top: 0.8rem;
}
/* Die Zahl an der Glocke: Pink, nicht Rot oder Terracotta - eine Zahl sagt
"hier ist etwas Neues", nicht "hier ist Gefahr". */
.chat-badge {
background: var(--primary);
color: var(--surface);
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1;
min-width: 18px;
height: 18px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: -5px;
right: -5px;
}
/* Abfragen an die Eltern (V1.8.2) */
.polls-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
@media(min-width: 768px) {
.polls-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
}
.poll-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 1rem;
}
.poll-question {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-main);
margin: 0;
}
.poll-meta {
font-size: 0.8rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
align-items: center;
}
.poll-options {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.poll-option-row {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.poll-option-label {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
font-weight: 500;
}
.poll-option-bar-container {
background: var(--bg-secondary);
height: 10px;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.poll-option-bar {
background: var(--primary);
height: 100%;
border-radius: 5px;
transition: width 0.5s ease-out;
}
.poll-option-bar.user-voted {
background: var(--accent);
}
.poll-vote-btn {
width: 100%;
padding: 0.6rem;
border: 1px solid var(--primary);
background: var(--white);
color: var(--primary);
border-radius: var(--radius-sm);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition-fast);
}
.poll-vote-btn:hover {
background: var(--primary-light);
color: var(--primary-hover);
}
.poll-delete-btn {
color: var(--danger);
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8rem;
font-weight: 500;
margin-top: auto;
align-self: flex-end;
transition: var(--transition-fast);
}
.poll-delete-btn:hover {
color: hsl(0, 50%, 45%);
}
.poll-details-toggle {
font-size: 0.8rem;
color: var(--primary);
cursor: pointer;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 500;
border: none;
background: none;
padding: 0;
margin-top: 0.5rem;
}
.poll-details-toggle:hover {
text-decoration: underline;
}
.poll-details-content {
font-size: 0.8rem;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.8rem;
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.poll-details-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.poll-details-list li {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed var(--border-color);
padding-bottom: 0.2rem;
}
.poll-details-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* ==========================================================================
WARTELISTE STYLES (V1.10)
========================================================================== */
/* Die .badge-Familie steht jetzt oben bei den Chips (.chip/.chip-*) - sie
sieht dort genauso aus, nur ohne Versalien und Sperrung. */
/* Honigtopf im öffentlichen Anfrageformular (V1.23).
Bewusst nicht display:none oder hidden - beides erkennen Formular-Ausfüller
und lassen das Feld dann aus. Stattdessen aus dem sichtbaren Bereich
geschoben: für Menschen unsichtbar, für ein Skript ein ganz normales Feld. */
.inquiry-hp {
position: absolute;
left: -5000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Warteliste Filter Buttons */
.inquiry-filters {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
/* .btn-filter gehoert zur Chip-Knopf-Familie weiter oben - Aussehen und
Aktivzustand stehen dort. */
/* --- V1.11 Dokumenten-Center UIs --- */
.doc-center-layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: 1.5rem;
align-items: start;
}
@media (max-width: 900px) {
.doc-center-layout {
grid-template-columns: 1fr;
}
}
.doc-sidebar {
display: flex;
flex-direction: column;
gap: 1rem;
}
.doc-preview-pane {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 2rem;
min-height: 600px;
display: flex;
justify-content: center;
}
.doc-preview-paper {
background: var(--white);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
border-radius: 4px;
width: 100%;
max-width: 700px;
min-height: 800px;
padding: 3rem;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
color: #333;
line-height: 1.5;
font-size: 10.5pt;
position: relative;
}
.doc-preview-paper h1,
.doc-preview-paper h2,
.doc-preview-paper h3 {
color: var(--primary-dark);
}
/* --- V1.11 Lerngeschichten Custom UIs --- */
.story-timeline-card {
border-left: 5px solid var(--primary) !important;
background: var(--bg-primary);
position: relative;
}
.story-timeline-card.is-story {
border-left: 5px solid #cf5997 !important;
background: #fff5f8;
}
.story-bubble {
border: 1px solid #fbcfe8;
border-radius: var(--radius-md);
padding: 1.25rem;
background: var(--white);
margin-top: 0.5rem;
box-shadow: 0 2px 5px rgba(207, 89, 151, 0.05);
}
.story-bubble-title {
color: #cf5997;
font-weight: 700;
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.story-section-box {
margin-top: 1rem;
padding: 0.8rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
}
.story-section-box.reflection {
background-color: #fff0f6;
border-left: 3px solid #cf5997;
color: #86184a;
}
.story-section-box.next-steps {
background-color: #fdf2f8;
border-left: 3px solid #f472b6;
color: #9d174d;
}
/* ======================================================================
Entwicklung - Kind-Detailseite (1.73)
Drei Unterreiter (Bogen/Bild/Geschichten), ein Wortschatz fuer die drei
Zustaende, zwei Knoepfe statt Durchschalten, das Rad statt der Spirale.
Ansichten (.entw-ansicht ...) erscheinen in Verwaltung, Elternbereich und
Jahresbuch-Druck - dieselben Klassen ueberall. Bereichsfarbe kommt NUR
ueber die Custom Property --entw-farbe (Inline-Stil am Markup), hier wird
sie nur als Fallback auf --primary/--ink gelesen.
====================================================================== */
.entw-ansicht {
/* Anker fuer die drei Ansichten (Kette/Liste/Rad) - kein eigener Stil noetig */
}
.entw-kopf {
font-size: var(--fs-md);
font-weight: 700;
color: var(--ink);
margin: 0 0 var(--s-1);
}
.entw-kopf-zusatz {
font-weight: 400;
color: var(--ink-3);
}
.entw-hinweis {
font-size: var(--fs-sm);
color: var(--ink-2);
margin: 0 0 var(--s-3);
line-height: 1.5;
}
.entw-fussnote {
font-size: var(--fs-xs);
color: var(--ink-3);
line-height: 1.5;
margin: var(--s-4) 0 0;
padding-top: var(--s-2);
border-top: 1px solid var(--line);
}
/* Rad: sechs Sektoren (Bereiche), je sechs bogenfoermige Plaetze - tippbar
ueber bindeEntwicklungsAnsicht(). Groesse/Schrift der Beschriftungen setzt
das SVG selbst in viewBox-Einheiten (px waeren hier falsch, sie skalieren
nicht mit der Huelle). */
.entw-rad-huelle {
max-width: 440px;
margin: 0 auto;
}
.entw-rad {
display: block;
width: 100%;
height: auto;
}
.entw-rad-zelle {
transition: stroke-width .15s;
}
.entw-rad[data-entw-gebunden] .entw-rad-zelle {
cursor: pointer;
}
.entw-rad-zelle.ist-gewaehlt {
stroke: var(--ink);
stroke-width: 2.5;
stroke-opacity: 1;
}
.entw-rad-label {
font-family: var(--font-family), system-ui, sans-serif;
font-weight: 600;
letter-spacing: .01em;
}
.entw-rad-mitte {
font-family: var(--font-family), system-ui, sans-serif;
font-size: 22px;
font-weight: 700;
fill: var(--ink-2);
}
.entw-rad-bildunterschrift {
font-size: var(--fs-sm);
color: var(--ink-2);
text-align: center;
line-height: 1.45;
min-height: 3.2em;
margin: var(--s-2) auto 0;
max-width: 46ch;
}
.entw-rad-bildunterschrift strong {
color: var(--ink);
}
.entw-rad-bildunterschrift em {
color: var(--ink-2);
}
/* Zustandssymbol (voll / halb gestrichelt / leerer Ring) - dasselbe Muster
in der Legende, in den Rad-Plaetzen und auf den Status-Knoepfen. */
.entw-zustand {
display: inline-block;
vertical-align: -2px;
}
.entw-legende {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-1) var(--s-4);
margin: var(--s-2) 0 0;
font-size: var(--fs-xs);
color: var(--ink-2);
}
.entw-legende-eintrag {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--ink-2);
}
.entw-legende-eintrag .entw-zustand {
color: var(--primary);
flex: 0 0 auto;
}
/* Aufklapper fuer die Satzliste (intern verborgen, siehe .entw-saetze fuer
die offene Fassung bei Eltern/Druck) - Pfeil kopiert das Muster von
.ang-grundsaetze > summary, keine neue Farbe. */
.entw-klapp {
margin-top: var(--s-4);
border-top: 1px solid var(--line);
}
.entw-klapp > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-2);
padding: var(--s-3) 0;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-2);
min-height: 44px;
}
.entw-klapp > summary::-webkit-details-marker {
display: none;
}
.entw-klapp > summary::after {
content: "";
flex-shrink: 0;
width: 7px;
height: 7px;
margin-left: auto;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--transition-fast);
}
.entw-klapp[open] > summary::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
/* Offene Satzliste: fuer Eltern und den Druck bleibt sie immer sichtbar. */
.entw-saetze {
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid var(--line);
}
.entw-saetze-titel {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-2);
margin: 0 0 var(--s-2);
}
.entw-liste-bereich {
margin-bottom: var(--s-4);
break-inside: avoid;
}
.entw-liste-bereich h5 {
font-size: var(--fs-sm);
font-weight: 700;
margin: 0 0 var(--s-1);
color: var(--entw-farbe, var(--ink));
letter-spacing: .01em;
}
.entw-liste {
list-style: none;
margin: 0;
padding: 0;
}
.entw-liste-zeile {
display: flex;
gap: var(--s-2);
align-items: flex-start;
padding: 4px 0;
font-size: var(--fs-sm);
line-height: 1.45;
color: var(--ink);
}
.entw-liste-punkt {
flex: 0 0 auto;
width: 11px;
height: 11px;
border-radius: 50%; /* ein Kreis, kein Kasten - 50% ist hier erlaubt */
margin-top: .3em;
background: var(--entw-farbe, var(--primary));
border: 2px solid var(--entw-farbe, var(--primary));
}
.entw-liste-punkt.ist-offen {
background: var(--surface);
border-style: dashed;
}
.entw-liste-wann {
color: var(--ink-3);
}
.entw-liste-notiz {
display: block;
font-size: var(--fs-sm);
color: var(--ink-2);
font-style: italic;
}
.entw-liste-rest {
font-size: var(--fs-xs);
color: var(--ink-3);
margin: var(--s-1) 0 0;
line-height: 1.45;
}
/* Kette: der Faden laeuft hinter den Perlen durch (Rapport 104px = eine
Kachelhoehe, Strich bei 23-25px). Wer eine Zahl hier aendert, muss Hoehe
der .entw-perle und den Mittelpunkt des Kreises (24px) mitziehen. */
.entw-kette {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
background-image: repeating-linear-gradient(
to bottom,
transparent 0, transparent 23px,
var(--line) 23px, var(--line) 25px,
transparent 25px, transparent 104px
);
background-position: 0 0;
}
.entw-perle {
width: 96px;
height: 104px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.entw-perle-kreis {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 4px 0 6px;
box-shadow: var(--shadow-1);
background: var(--entw-farbe, var(--primary));
border: 2px solid var(--entw-farbe, var(--primary));
}
.entw-perle.ist-offen .entw-perle-kreis {
background: var(--surface);
border-style: dashed;
opacity: .75;
}
.entw-perle-name {
font-size: var(--fs-xs);
line-height: 1.25;
color: var(--ink);
max-height: 2.5rem;
overflow: hidden;
padding: 0 2px;
}
.entw-perle-datum {
font-size: var(--fs-xs);
color: var(--ink-3);
margin-top: 2px;
}
/* --- Kind-Detailseite (admin.js) --------------------------------------- */
.entw-seite-kopf {
align-items: flex-start;
}
.entw-seite-titelzeile {
display: flex;
align-items: center;
gap: var(--s-3);
min-width: 0;
}
.entw-seite-titelzeile .seite-titel {
margin: 0;
}
.entw-seite-kopf .seite-untertitel {
margin: 2px 0 0;
}
.entw-reiter {
margin: 0 0 var(--s-4);
}
/* .segment scrollt am Handy schon waagerecht (overflow-x: auto); die drei
Unterreiter-Knoepfe duerfen die Breite zusaetzlich unter sich teilen. */
.entw-reiter .segment-btn {
flex: 1 1 auto;
justify-content: center;
}
.entw-bereiche {
margin: 0 0 var(--s-3);
}
/* Sechs Bereiche passen am Handy nicht nebeneinander. .segment-btn darf
schrumpfen (flex 0 1 auto) - dann quetschen sich die Knoepfe auf 44 px und
die Namen laufen uebereinander, statt dass die Leiste scrollt. Feste
Breite je Knopf, und .segment scrollt von allein (overflow-x: auto). */
.entw-bereiche .segment-btn {
flex: 0 0 auto;
}
.entw-meilensteine {
display: flex;
flex-direction: column;
}
.entw-meilenstein {
padding: var(--s-4) 0;
border-top: 1px solid var(--line);
}
.entw-meilenstein:first-child {
border-top: 0;
padding-top: var(--s-2);
}
.entw-meilenstein-titel {
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink);
line-height: 1.35;
}
.entw-meilenstein-alter {
font-size: var(--fs-xs);
font-weight: 400;
color: var(--ink-3);
white-space: nowrap;
margin-left: var(--s-2);
}
/* Zwei gleich aussehende Knoepfe statt Durchschalten - keine Ampel. */
.entw-status {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-2);
margin: var(--s-2) 0;
}
.entw-status-btn {
min-height: 44px;
padding: 0 var(--s-3);
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--ink-2);
font: inherit;
font-size: var(--fs-sm);
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s;
}
.entw-status-btn:hover {
border-color: var(--primary);
}
.entw-status-btn:focus-visible {
outline: 3px solid var(--primary-soft);
outline-offset: 1px;
}
.entw-status-btn[aria-pressed="true"] {
background: var(--primary-soft);
color: var(--primary-ink);
border-color: var(--primary);
}
.entw-status-btn .entw-zustand {
flex: 0 0 auto;
}
.entw-meilenstein-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-1) var(--s-3);
font-size: var(--fs-xs);
color: var(--ink-3);
}
.entw-meilenstein-stand {
display: inline-flex;
align-items: center;
gap: 4px;
}
.entw-meilenstein-meta .btn {
margin-left: auto;
}
.entw-gespeichert {
color: var(--success-ink);
display: inline-flex;
align-items: center;
gap: 2px;
}
.entw-gespeichert svg {
width: 12px;
height: 12px;
}
.entw-notiz {
margin-top: var(--s-2);
}
.entw-meilenstein .hinweis {
margin-top: var(--s-2);
}
.entw-bild {
/* ist eine .card - Flaeche, Linie, Radius, Schatten kommen von dort */
}
.entw-bild-fuss {
display: flex;
justify-content: flex-end;
margin-top: var(--s-3);
padding-top: var(--s-2);
border-top: 1px solid var(--line);
}
.entw-geschichten-kopf {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--s-2);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--line);
margin-bottom: var(--s-2);
}
.entw-geschichten-kopf .card-title {
margin: 0;
}
.entw-geschichten-aktionen {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.entw-geschichten {
/* Anker fuer die Eintragsliste - .entw-eintrag traegt Abstand und Linie */
}
.entw-eintrag {
padding: var(--s-4) 0;
border-bottom: 1px solid var(--line);
}
.entw-eintrag:last-child {
border-bottom: 0;
}
.entw-eintrag.ist-geschichte {
border-left: 3px solid var(--primary);
padding-left: var(--s-3);
}
.entw-eintrag-kopf {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
}
.entw-eintrag-datum {
font-size: var(--fs-xs);
color: var(--ink-3);
}
.entw-eintrag-aktionen {
margin-left: auto;
display: flex;
gap: var(--s-1);
}
.entw-eintrag-bild {
margin: var(--s-2) 0;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--line);
}
.entw-eintrag-bild img {
display: block;
width: 100%;
max-height: 240px;
object-fit: cover;
}
.entw-eintrag-titel {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--ink);
margin: var(--s-2) 0 var(--s-1);
}
.entw-eintrag-text {
font-size: var(--fs-md);
line-height: 1.5;
color: var(--ink);
white-space: pre-line;
margin: 0;
}
.entw-eintrag-block {
margin-top: var(--s-2);
padding: var(--s-2) var(--s-3);
background: var(--bg-2);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
}
.entw-eintrag-block strong {
display: inline-flex;
align-items: center;
gap: var(--s-1);
color: var(--ink-2);
}
.entw-eintrag-block strong svg {
width: 14px;
height: 14px;
}
.entw-eintrag-block p {
margin: 4px 0 0;
white-space: pre-line;
color: var(--ink);
}
.entw-kinder {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--s-4);
margin-top: var(--s-4);
}
/* .entw-kind-kachel ist ein