rene/vereinshaus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor: CSS-Variablen für alle Farbwerte (theme.css)

Browse source
This commit is contained in:
rene 2026-05-22 08:59:35 +02:00
parent e2d7655e13
commit 4fee85bd22
19 changed files with 521 additions and 461 deletions
Download patch file Download diff file Expand all files Collapse all files

59
app/src/lib/styles/theme.css Normal file
View file

@ -0,0 +1,59 @@
:root {
/* Primärfarbe */
--c-primary: #1e40af;
--c-primary-dark: #1d3a9e;
--c-primary-light: #e0e7ff;
--c-primary-subtle: #eff6ff;
/* Text */
--c-text: #1e293b;
--c-text-secondary: #475569;
--c-text-muted: #64748b;
--c-text-hint: #94a3b8;
/* Hintergrund & Rahmen */
--c-border: #e2e8f0;
--c-bg: #f1f5f9;
--c-bg-card: #ffffff;
--c-bg-subtle: #f8fafc;
/* Dunkel (Theme-Farbe, Header, PWA) */
--c-dark: #0f172a;
/* Fehler / Rot */
--c-error: #dc2626;
--c-error-dark: #b91c1c;
--c-error-light: #fca5a5;
--c-error-bg: #fee2e2;
--c-error-subtle: #fef2f2;
/* Erfolg / Grün */
--c-success: #16a34a;
--c-success-light: #86efac;
--c-success-bg: #dcfce7;
/* Warnung / Gelb-Amber */
--c-warning: #f59e0b;
--c-warning-light: #fde047;
--c-warning-bg: #fef9c3;
--c-warning-subtle: #fffbeb;
--c-warning-dark: #92400e;
--c-warning-darker: #713f12;
/* Akzent / Lila (Plan-Badges) */
--c-accent: #7c3aed;
--c-accent-subtle: #ede9fe;
/* Primärfarbe – weitere Töne */
--c-primary-100: #bfdbfe;
--c-primary-200: #c7d2fe;
--c-primary-bg: #f0f9ff;
/* Erfolg – weitere Töne */
--c-success-dark: #166534;
--c-success-subtle: #f0fdf4;
/* Warnung – weitere Töne */
--c-warning-amber: #854d0e;
--c-warning-pale: #fefce8;
}

18
app/src/routes/(app)/+layout.svelte
View file

@ -103,8 +103,8 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: #fff; background: var(--c-bg-card);
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--c-border);
} }
.logo { .logo {
@ -113,19 +113,19 @@
gap: 0.45rem; gap: 0.45rem;
font-size: 1.05rem; font-size: 1.05rem;
font-weight: 700; font-weight: 700;
color: #0f172a; color: var(--c-dark);
letter-spacing: -0.02em; letter-spacing: -0.02em;
text-decoration: none; text-decoration: none;
} }
.header-icon { .header-icon {
color: #64748b; color: var(--c-text-muted);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.25rem; padding: 0.25rem;
transition: color 0.15s; transition: color 0.15s;
} }
.header-icon:hover { color: #1e293b; } .header-icon:hover { color: var(--c-text); }
main { main {
flex: 1; flex: 1;
@ -143,8 +143,8 @@
right: 0; right: 0;
height: calc(60px + env(safe-area-inset-bottom)); height: calc(60px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
background: #fff; background: var(--c-bg-card);
border-top: 1px solid #e2e8f0; border-top: 1px solid var(--c-border);
display: flex; display: flex;
z-index: 10; z-index: 10;
} }
@ -156,14 +156,14 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.15rem; gap: 0.15rem;
color: #94a3b8; color: var(--c-text-hint);
transition: color .15s; transition: color .15s;
font-size: 0.7rem; font-size: 0.7rem;
text-decoration: none; text-decoration: none;
} }
.bottom-nav a.active { .bottom-nav a.active {
color: #1e40af; color: var(--c-primary);
} }
.nav-label { .nav-label {

24
app/src/routes/(app)/+page.svelte
View file

@ -64,7 +64,7 @@
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 1.25rem; padding: 1.25rem;
background: #0f172a; background: var(--c-dark);
border-radius: 14px; border-radius: 14px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -79,18 +79,18 @@
h1 { h1 {
font-size: 1.15rem; font-size: 1.15rem;
font-weight: 700; font-weight: 700;
color: #fff; color: var(--c-bg-card);
margin: 0; margin: 0;
} }
.verein-ort { .verein-ort {
font-size: 0.82rem; font-size: 0.82rem;
color: #94a3b8; color: var(--c-text-hint);
} }
section { section {
background: #fff; background: var(--c-bg-card);
border: 1px solid #e2e8f0; border: 1px solid var(--c-border);
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
} }
@ -98,7 +98,7 @@
h2 { h2 {
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
color: #94a3b8; color: var(--c-text-hint);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
padding: 0.85rem 1rem 0.5rem; padding: 0.85rem 1rem 0.5rem;
@ -116,24 +116,24 @@
flex-direction: column; flex-direction: column;
gap: 0.15rem; gap: 0.15rem;
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
border-top: 1px solid #f1f5f9; border-top: 1px solid var(--c-bg);
} }
.termin-titel { font-size: 0.92rem; font-weight: 600; color: #1e293b; } .termin-titel { font-size: 0.92rem; font-weight: 600; color: var(--c-text); }
.termin-wann { font-size: 0.78rem; color: #64748b; } .termin-wann { font-size: 0.78rem; color: var(--c-text-muted); }
.alle-link { .alle-link {
display: block; display: block;
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
border-top: 1px solid #f1f5f9; border-top: 1px solid var(--c-bg);
font-size: 0.85rem; font-size: 0.85rem;
color: #1e40af; color: var(--c-primary);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
} }
.hint { .hint {
color: #94a3b8; color: var(--c-text-hint);
font-size: 0.9rem; font-size: 0.9rem;
text-align: center; text-align: center;
margin-top: 2rem; margin-top: 2rem;

82
app/src/routes/(app)/beitraege/+page.svelte
View file

@ -350,26 +350,26 @@
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
.top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; } .top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; }
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
.plan-hinweis { .plan-hinweis {
background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; background: var(--c-primary-subtle); border: 1px solid var(--c-primary-100); border-radius: 8px;
padding: 0.75rem 1rem; font-size: 0.875rem; color: #1e40af; margin-bottom: 1rem; padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--c-primary); margin-bottom: 1rem;
} }
.plan-hinweis a { color: #1e40af; font-weight: 700; } .plan-hinweis a { color: var(--c-primary); font-weight: 700; }
.hinweis { .hinweis {
background: #fef9c3; background: var(--c-warning-bg);
border: 1px solid #fde047; border: 1px solid var(--c-warning-light);
border-radius: 8px; border-radius: 8px;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
color: #713f12; color: var(--c-warning-darker);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.hinweis a { color: #713f12; } .hinweis a { color: var(--c-warning-darker); }
.hint { color: #94a3b8; font-size: 0.95rem; text-align: center; margin-top: 3rem; } .hint { color: var(--c-text-hint); font-size: 0.95rem; text-align: center; margin-top: 3rem; }
.liste { .liste {
list-style: none; list-style: none;
@ -384,8 +384,8 @@
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.9rem 1rem; padding: 0.9rem 1rem;
background: #fff; background: var(--c-bg-card);
border: 1px solid #e2e8f0; border: 1px solid var(--c-border);
border-radius: 10px; border-radius: 10px;
} }
@ -396,9 +396,9 @@
flex-direction: column; flex-direction: column;
gap: 0.1rem; gap: 0.1rem;
} }
.karte-name { font-weight: 600; font-size: 0.95rem; color: #1e293b; } .karte-name { font-weight: 600; font-size: 0.95rem; color: var(--c-text); }
.karte-beschr { font-size: 0.78rem; color: #94a3b8; } .karte-beschr { font-size: 0.78rem; color: var(--c-text-hint); }
.karte-meta { font-size: 0.82rem; color: #475569; } .karte-meta { font-size: 0.82rem; color: var(--c-text-secondary); }
.karte-aktionen { .karte-aktionen {
display: flex; display: flex;
@ -409,8 +409,8 @@
.btn-sepa { .btn-sepa {
padding: 0.35rem 0.7rem; padding: 0.35rem 0.7rem;
background: #e0e7ff; background: var(--c-primary-light);
color: #1e40af; color: var(--c-primary);
border: none; border: none;
border-radius: 6px; border-radius: 6px;
font-size: 0.78rem; font-size: 0.78rem;
@ -418,7 +418,7 @@
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s;
} }
.btn-sepa:hover:not(:disabled) { background: #c7d2fe; } .btn-sepa:hover:not(:disabled) { background: var(--c-primary-200); }
.btn-sepa:disabled { opacity: 0.4; cursor: not-allowed; } .btn-sepa:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-icon { .btn-icon {
@ -428,15 +428,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: none; background: none;
border: 1px solid #e2e8f0; border: 1px solid var(--c-border);
border-radius: 6px; border-radius: 6px;
color: #64748b; color: var(--c-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
cursor: pointer; cursor: pointer;
transition: border-color 0.15s, color 0.15s; transition: border-color 0.15s, color 0.15s;
} }
.btn-icon:hover { border-color: #94a3b8; color: #1e293b; } .btn-icon:hover { border-color: var(--c-text-hint); color: var(--c-text); }
.btn-icon-red:hover { border-color: #fca5a5; color: #dc2626; } .btn-icon-red:hover { border-color: var(--c-error-light); color: var(--c-error); }
/* Overlay & Sheet */ /* Overlay & Sheet */
.overlay { .overlay {
@ -452,7 +452,7 @@
} }
.sheet { .sheet {
background: #fff; background: var(--c-bg-card);
border-radius: 16px; border-radius: 16px;
padding: 1.5rem; padding: 1.5rem;
width: 100%; width: 100%;
@ -461,29 +461,29 @@
overflow-y: auto; overflow-y: auto;
} }
h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 0.25rem; } h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 0.25rem; }
.sepa-sub { font-size: 0.85rem; color: #64748b; margin-bottom: 1.25rem; } .sepa-sub { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 1.25rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
label { font-size: 0.875rem; font-weight: 500; color: #475569; } label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
.field-hint { font-size: 0.75rem; color: #94a3b8; } .field-hint { font-size: 0.75rem; color: var(--c-text-hint); }
input, select { input, select {
padding: 0.65rem 0.85rem; padding: 0.65rem 0.85rem;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
background: #fff; background: var(--c-bg-card);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
input:focus, select:focus { outline: none; border-color: #1e40af; } input:focus, select:focus { outline: none; border-color: var(--c-primary); }
.sepa-summary { .sepa-summary {
background: #f8fafc; background: var(--c-bg-subtle);
border: 1px solid #e2e8f0; border: 1px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
margin-bottom: 1rem; margin-bottom: 1rem;
overflow: hidden; overflow: hidden;
@ -493,22 +493,22 @@
justify-content: space-between; justify-content: space-between;
padding: 0.65rem 1rem; padding: 0.65rem 1rem;
font-size: 0.9rem; font-size: 0.9rem;
color: #1e293b; color: var(--c-text);
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--c-border);
} }
.sepa-row:last-child { border-bottom: none; } .sepa-row:last-child { border-bottom: none; }
.sepa-warn { color: #92400e; background: #fffbeb; } .sepa-warn { color: var(--c-warning-dark); background: var(--c-warning-subtle); }
.sepa-total { font-weight: 700; background: #f0f9ff; } .sepa-total { font-weight: 700; background: var(--c-primary-bg); }
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; }
.actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.btn-primary { .btn-primary {
flex: 1; flex: 1;
padding: 0.75rem; padding: 0.75rem;
background: #1e40af; background: var(--c-primary);
color: #fff; color: var(--c-bg-card);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
@ -516,16 +516,16 @@
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { .btn-ghost {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: none; background: none;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
color: #64748b; color: var(--c-text-muted);
cursor: pointer; cursor: pointer;
} }
</style> </style>

108
app/src/routes/(app)/einstellungen/+page.svelte
View file

@ -41,10 +41,10 @@
let vereinId = $state(''); let vereinId = $state('');
const planInfo: Record<string, { label: string; farbe: string; features: string[]; limit: number | null }> = { const planInfo: Record<string, { label: string; farbe: string; features: string[]; limit: number | null }> = {
free: { label: 'Kostenlos', farbe: '#64748b', limit: 50, features: ['Bis 50 Mitglieder', 'Termine & Wiederholungen', 'Nachrichten & Push', 'Veranstaltungsorte', 'Durchführende einladen'] }, free: { label: 'Kostenlos', farbe: 'var(--c-text-muted)', limit: 50, features: ['Bis 50 Mitglieder', 'Termine & Wiederholungen', 'Nachrichten & Push', 'Veranstaltungsorte', 'Durchführende einladen'] },
starter: { label: 'Starter', farbe: '#1e40af', limit: 150, features: ['Bis 150 Mitglieder', 'SEPA pain.008-Export', 'iCal-Kalender-Abo', 'Alle Free-Features'] }, starter: { label: 'Starter', farbe: 'var(--c-primary)', limit: 150, features: ['Bis 150 Mitglieder', 'SEPA pain.008-Export', 'iCal-Kalender-Abo', 'Alle Free-Features'] },
wachstum:{ label: 'Verband', farbe: '#7c3aed', limit: null, features: ['Unbegrenzte Mitglieder', 'Mehrere Admins', 'Prioritäts-Support', 'Alle Starter-Features'] }, wachstum:{ label: 'Verband', farbe: 'var(--c-accent)', limit: null, features: ['Unbegrenzte Mitglieder', 'Mehrere Admins', 'Prioritäts-Support', 'Alle Starter-Features'] },
verband: { label: 'Verband', farbe: '#7c3aed', limit: null, features: ['Unbegrenzte Mitglieder', 'Mehrere Admins', 'Prioritäts-Support', 'Alle Starter-Features'] }, verband: { label: 'Verband', farbe: 'var(--c-accent)', limit: null, features: ['Unbegrenzte Mitglieder', 'Mehrere Admins', 'Prioritäts-Support', 'Alle Starter-Features'] },
}; };
const istFree = $derived(plan === 'free'); const istFree = $derived(plan === 'free');
@ -389,11 +389,11 @@
{/if} {/if}
<style> <style>
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; } h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); margin-bottom: 1rem; }
/* Plan */ /* Plan */
.plan-card { .plan-card {
background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; background: var(--c-bg-card); border: 1.5px solid var(--c-border); border-radius: 12px;
padding: 1rem 1.1rem; margin-bottom: 1.5rem; padding: 1rem 1.1rem; margin-bottom: 1.5rem;
} }
.plan-header { .plan-header {
@ -401,41 +401,41 @@
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
.plan-label { font-size: 1rem; font-weight: 700; } .plan-label { font-size: 1rem; font-weight: 700; }
.plan-limit { font-size: 0.78rem; color: #94a3b8; margin-left: 0.4rem; } .plan-limit { font-size: 0.78rem; color: var(--c-text-hint); margin-left: 0.4rem; }
.plan-mitglieder { font-size: 0.82rem; color: #64748b; } .plan-mitglieder { font-size: 0.82rem; color: var(--c-text-muted); }
.plan-mitglieder.warn { color: #dc2626; font-weight: 700; } .plan-mitglieder.warn { color: var(--c-error); font-weight: 700; }
.plan-warn { .plan-warn {
background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; background: var(--c-error-subtle); border: 1px solid var(--c-error-light); border-radius: 8px;
padding: 0.6rem 0.8rem; font-size: 0.82rem; color: #dc2626; margin-bottom: 0.75rem; padding: 0.6rem 0.8rem; font-size: 0.82rem; color: var(--c-error); margin-bottom: 0.75rem;
} }
.plan-features { .plan-features {
list-style: none; padding: 0; margin: 0 0 0.85rem; list-style: none; padding: 0; margin: 0 0 0.85rem;
display: flex; flex-direction: column; gap: 0.25rem; display: flex; flex-direction: column; gap: 0.25rem;
} }
.plan-features li { font-size: 0.85rem; color: #475569; } .plan-features li { font-size: 0.85rem; color: var(--c-text-secondary); }
.plan-features li.gesperrt { color: #94a3b8; } .plan-features li.gesperrt { color: var(--c-text-hint); }
.upgrade-hint { .upgrade-hint {
display: inline-block; font-size: 0.7rem; font-weight: 700; display: inline-block; font-size: 0.7rem; font-weight: 700;
background: #e0e7ff; color: #1e40af; border-radius: 4px; background: var(--c-primary-light); color: var(--c-primary); border-radius: 4px;
padding: 0.05rem 0.35rem; margin-left: 0.3rem; padding: 0.05rem 0.35rem; margin-left: 0.3rem;
} }
.btn-upgrade { .btn-upgrade {
display: block; width: 100%; padding: 0.65rem; display: block; width: 100%; padding: 0.65rem;
background: #1e40af; color: #fff; border: none; border-radius: 8px; background: var(--c-primary); color: var(--c-bg-card); border: none; border-radius: 8px;
font-size: 0.9rem; font-weight: 600; text-align: center; font-size: 0.9rem; font-weight: 600; text-align: center;
text-decoration: none; transition: background 0.15s; text-decoration: none; transition: background 0.15s;
} }
.btn-upgrade:hover { background: #1d3a9e; } .btn-upgrade:hover { background: var(--c-primary-dark); }
section { section {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--c-bg);
} }
h2 { h2 {
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
color: #94a3b8; color: var(--c-text-hint);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
margin-bottom: 0.85rem; margin-bottom: 0.85rem;
@ -443,46 +443,46 @@
.sepa-hint { .sepa-hint {
font-size: 0.8rem; font-size: 0.8rem;
color: #94a3b8; color: var(--c-text-hint);
margin-bottom: 0.85rem; margin-bottom: 0.85rem;
line-height: 1.5; line-height: 1.5;
} }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
label { font-size: 0.875rem; font-weight: 500; color: #475569; } label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
input, select { input, select {
padding: 0.65rem 0.85rem; padding: 0.65rem 0.85rem;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
background: #fff; background: var(--c-bg-card);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
input:focus, select:focus { outline: none; border-color: #1e40af; } input:focus, select:focus { outline: none; border-color: var(--c-primary); }
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; }
.success { color: #16a34a; font-size: 0.875rem; margin-bottom: 0.75rem; } .success { color: var(--c-success); font-size: 0.875rem; margin-bottom: 0.75rem; }
.err { color: #dc2626; font-size: 0.875rem; margin: 0.5rem 0; } .err { color: var(--c-error); font-size: 0.875rem; margin: 0.5rem 0; }
.ok { color: #16a34a; font-size: 0.875rem; margin: 0.5rem 0; } .ok { color: var(--c-success); font-size: 0.875rem; margin: 0.5rem 0; }
.btn-save { .btn-save {
padding: 0.65rem 1.25rem; padding: 0.65rem 1.25rem;
background: #1e40af; color: #fff; background: var(--c-primary); color: var(--c-bg-card);
border: none; border-radius: 8px; border: none; border-radius: 8px;
font-size: 0.95rem; font-weight: 600; cursor: pointer; font-size: 0.95rem; font-weight: 600; cursor: pointer;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.btn-save:disabled { opacity: 0.55; cursor: not-allowed; } .btn-save:disabled { opacity: 0.55; cursor: not-allowed; }
.hint { color: #94a3b8; font-size: 0.95rem; } .hint { color: var(--c-text-hint); font-size: 0.95rem; }
.btn-primary { .btn-primary {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background: #1e40af; background: var(--c-primary);
color: #fff; color: var(--c-bg-card);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
@ -491,80 +491,80 @@
transition: background 0.15s; transition: background 0.15s;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.divider { .divider {
height: 1px; height: 1px;
background: #f1f5f9; background: var(--c-bg);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.ical-url { .ical-url {
font-family: monospace; font-size: 0.78rem; color: #1e293b; font-family: monospace; font-size: 0.78rem; color: var(--c-text);
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; background: var(--c-bg-subtle); border: 1px solid var(--c-border); border-radius: 6px;
padding: 0.5rem 0.75rem; word-break: break-all; margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; word-break: break-all; margin-bottom: 0.5rem;
} }
.trainer-liste { .trainer-liste {
list-style: none; padding: 0; margin: 0 0 0.75rem; list-style: none; padding: 0; margin: 0 0 0.75rem;
border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden;
} }
.trainer-liste li { .trainer-liste li {
display: flex; align-items: center; justify-content: space-between; display: flex; align-items: center; justify-content: space-between;
gap: 0.75rem; padding: 0.7rem 0.85rem; gap: 0.75rem; padding: 0.7rem 0.85rem;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--c-bg);
} }
.trainer-liste li:last-child { border-bottom: none; } .trainer-liste li:last-child { border-bottom: none; }
.trainer-info { display: flex; flex-direction: column; gap: 0.1rem; } .trainer-info { display: flex; flex-direction: column; gap: 0.1rem; }
.trainer-name { font-size: 0.9rem; font-weight: 600; color: #1e293b; } .trainer-name { font-size: 0.9rem; font-weight: 600; color: var(--c-text); }
.trainer-gruppen { font-size: 0.75rem; color: #94a3b8; } .trainer-gruppen { font-size: 0.75rem; color: var(--c-text-hint); }
.btn-remove { .btn-remove {
padding: 0.3rem 0.65rem; background: none; padding: 0.3rem 0.65rem; background: none;
border: 1px solid #fca5a5; border-radius: 6px; border: 1px solid var(--c-error-light); border-radius: 6px;
font-size: 0.78rem; color: #dc2626; cursor: pointer; flex-shrink: 0; font-size: 0.78rem; color: var(--c-error); cursor: pointer; flex-shrink: 0;
} }
.btn-einladen { .btn-einladen {
width: 100%; padding: 0.65rem; background: none; width: 100%; padding: 0.65rem; background: none;
border: 1.5px dashed #e2e8f0; border-radius: 8px; border: 1.5px dashed var(--c-border); border-radius: 8px;
font-size: 0.9rem; color: #1e40af; cursor: pointer; font-size: 0.9rem; color: var(--c-primary); cursor: pointer;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
.btn-einladen:hover { border-color: #1e40af; } .btn-einladen:hover { border-color: var(--c-primary); }
.invite-box { .invite-box {
margin-top: 0.75rem; padding: 0.85rem; margin-top: 0.75rem; padding: 0.85rem;
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; background: var(--c-bg-subtle); border: 1px solid var(--c-border); border-radius: 8px;
display: flex; flex-direction: column; gap: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem;
} }
.invite-label { font-size: 0.78rem; color: #64748b; margin: 0; } .invite-label { font-size: 0.78rem; color: var(--c-text-muted); margin: 0; }
.invite-url { .invite-url {
font-size: 0.78rem; font-family: monospace; font-size: 0.78rem; font-family: monospace;
color: #1e293b; word-break: break-all; color: var(--c-text); word-break: break-all;
} }
.btn-kopieren { .btn-kopieren {
padding: 0.4rem 0.75rem; background: #1e40af; color: #fff; padding: 0.4rem 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
border: none; border-radius: 6px; font-size: 0.82rem; border: none; border-radius: 6px; font-size: 0.82rem;
cursor: pointer; align-self: flex-start; cursor: pointer; align-self: flex-start;
} }
.btn-importexport { .btn-importexport {
display: block; width: 100%; padding: 0.75rem; display: block; width: 100%; padding: 0.75rem;
background: none; border: 1.5px solid #e2e8f0; border-radius: 8px; background: none; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 0.95rem; color: #1e40af; text-align: center; font-size: 0.95rem; color: var(--c-primary); text-align: center;
text-decoration: none; margin-bottom: 0; text-decoration: none; margin-bottom: 0;
} }
.btn-importexport:hover { border-color: #1e40af; background: #f0f9ff; } .btn-importexport:hover { border-color: var(--c-primary); background: var(--c-primary-bg); }
.btn-logout { .btn-logout {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background: none; background: none;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 0.95rem; font-size: 0.95rem;
color: #64748b; color: var(--c-text-muted);
cursor: pointer; cursor: pointer;
margin-bottom: 5rem; margin-bottom: 5rem;
} }
.btn-logout:hover { border-color: #94a3b8; color: #1e293b; } .btn-logout:hover { border-color: var(--c-text-hint); color: var(--c-text); }
</style> </style>

70
app/src/routes/(app)/import-export/+page.svelte
View file

@ -328,102 +328,102 @@
<style> <style>
.top { margin-bottom: 1.25rem; } .top { margin-bottom: 1.25rem; }
.back { font-size: 0.85rem; color: #1e40af; text-decoration: none; display: block; margin-bottom: 0.25rem; } .back { font-size: 0.85rem; color: var(--c-primary); text-decoration: none; display: block; margin-bottom: 0.25rem; }
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
.hint { color: #94a3b8; text-align: center; margin-top: 3rem; } .hint { color: var(--c-text-hint); text-align: center; margin-top: 3rem; }
section { section {
margin-bottom: 2rem; margin-bottom: 2rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--c-bg);
} }
h2 { h2 {
font-size: 0.72rem; font-weight: 700; color: #94a3b8; font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint);
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem;
} }
.hinweis-text { font-size: 0.85rem; color: #64748b; margin-bottom: 0.85rem; line-height: 1.5; } .hinweis-text { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.85rem; line-height: 1.5; }
/* Export */ /* Export */
.export-grid { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .export-grid { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.export-btn { .export-btn {
display: flex; align-items: center; gap: 0.85rem; display: flex; align-items: center; gap: 0.85rem;
padding: 0.85rem 1rem; background: #fff; padding: 0.85rem 1rem; background: var(--c-bg-card);
border: 1.5px solid #e2e8f0; border-radius: 10px; border: 1.5px solid var(--c-border); border-radius: 10px;
cursor: pointer; text-align: left; width: 100%; cursor: pointer; text-align: left; width: 100%;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
.export-btn:hover { border-color: #1e40af; } .export-btn:hover { border-color: var(--c-primary); }
.export-btn.breit { width: 100%; } .export-btn.breit { width: 100%; }
.export-icon { font-size: 1.2rem; flex-shrink: 0; width: 1.5rem; text-align: center; } .export-icon { font-size: 1.2rem; flex-shrink: 0; width: 1.5rem; text-align: center; }
.export-label { font-weight: 600; font-size: 0.9rem; color: #1e293b; flex: 1; } .export-label { font-weight: 600; font-size: 0.9rem; color: var(--c-text); flex: 1; }
.export-sub { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; } .export-sub { font-size: 0.75rem; color: var(--c-text-hint); white-space: nowrap; }
.status-ok { font-size: 0.85rem; color: #16a34a; } .status-ok { font-size: 0.85rem; color: var(--c-success); }
/* Upload */ /* Upload */
.upload-label { .upload-label {
display: flex; flex-direction: column; align-items: center; gap: 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
padding: 2rem 1rem; border: 2px dashed #e2e8f0; border-radius: 10px; padding: 2rem 1rem; border: 2px dashed var(--c-border); border-radius: 10px;
cursor: pointer; color: #64748b; transition: border-color 0.15s; text-align: center; cursor: pointer; color: var(--c-text-muted); transition: border-color 0.15s; text-align: center;
} }
.upload-label:hover { border-color: #1e40af; color: #1e40af; } .upload-label:hover { border-color: var(--c-primary); color: var(--c-primary); }
.file-input { display: none; } .file-input { display: none; }
.upload-icon { font-size: 1.5rem; } .upload-icon { font-size: 1.5rem; }
.upload-sub { font-size: 0.75rem; color: #94a3b8; } .upload-sub { font-size: 0.75rem; color: var(--c-text-hint); }
/* Mapping */ /* Mapping */
.mapping-header { .mapping-header {
display: flex; justify-content: space-between; align-items: center; display: flex; justify-content: space-between; align-items: center;
margin-bottom: 0.75rem; font-size: 0.85rem; color: #64748b; margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--c-text-muted);
} }
.btn-ghost-sm { .btn-ghost-sm {
padding: 0.3rem 0.65rem; background: none; padding: 0.3rem 0.65rem; background: none;
border: 1px solid #e2e8f0; border-radius: 6px; border: 1px solid var(--c-border); border-radius: 6px;
font-size: 0.8rem; color: #64748b; cursor: pointer; font-size: 0.8rem; color: var(--c-text-muted); cursor: pointer;
} }
.mapping-tabelle { .mapping-tabelle {
border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden;
margin-bottom: 1rem; overflow-x: auto; margin-bottom: 1rem; overflow-x: auto;
} }
.mapping-row { .mapping-row {
display: grid; grid-template-columns: 1fr 1.4fr 1fr; display: grid; grid-template-columns: 1fr 1.4fr 1fr;
gap: 0.5rem; padding: 0.5rem 0.75rem; gap: 0.5rem; padding: 0.5rem 0.75rem;
border-bottom: 1px solid #f1f5f9; align-items: center; border-bottom: 1px solid var(--c-bg); align-items: center;
} }
.mapping-row:last-child { border-bottom: none; } .mapping-row:last-child { border-bottom: none; }
.mapping-row.header { background: #f8fafc; font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; } .mapping-row.header { background: var(--c-bg-subtle); font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint); text-transform: uppercase; }
.col-name { font-size: 0.82rem; color: #1e293b; font-weight: 500; } .col-name { font-size: 0.82rem; color: var(--c-text); font-weight: 500; }
.col-preview { font-size: 0.75rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .col-preview { font-size: 0.75rem; color: var(--c-text-hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapping-row select { .mapping-row select {
padding: 0.3rem 0.5rem; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.3rem 0.5rem; border: 1px solid var(--c-border); border-radius: 6px;
font-size: 0.8rem; background: #fff; width: 100%; font-size: 0.8rem; background: var(--c-bg-card); width: 100%;
} }
.mapping-actions { display: flex; flex-direction: column; gap: 0.5rem; } .mapping-actions { display: flex; flex-direction: column; gap: 0.5rem; }
/* Ergebnis */ /* Ergebnis */
.import-result { .import-result {
background: #f0fdf4; border: 1px solid #86efac; border-radius: 10px; background: var(--c-success-subtle); border: 1px solid var(--c-success-light); border-radius: 10px;
padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
} }
.import-result.hat-fehler { background: #fefce8; border-color: #fde047; } .import-result.hat-fehler { background: var(--c-warning-pale); border-color: var(--c-warning-light); }
.result-ok { font-weight: 700; color: #16a34a; font-size: 0.95rem; } .result-ok { font-weight: 700; color: var(--c-success); font-size: 0.95rem; }
.result-fehler-titel { font-size: 0.85rem; color: #92400e; font-weight: 600; } .result-fehler-titel { font-size: 0.85rem; color: var(--c-warning-dark); font-weight: 600; }
.fehler-liste { margin: 0; padding-left: 1.2rem; } .fehler-liste { margin: 0; padding-left: 1.2rem; }
.fehler-liste li { font-size: 0.78rem; color: #92400e; } .fehler-liste li { font-size: 0.78rem; color: var(--c-warning-dark); }
.btn-primary { .btn-primary {
padding: 0.75rem; background: #1e40af; color: #fff; padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600;
cursor: pointer; transition: background 0.15s; width: 100%; cursor: pointer; transition: background 0.15s; width: 100%;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { .btn-ghost {
padding: 0.6rem 1rem; background: none; padding: 0.6rem 1rem; background: none;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 0.9rem; color: #64748b; cursor: pointer; align-self: flex-start; font-size: 0.9rem; color: var(--c-text-muted); cursor: pointer; align-self: flex-start;
} }
</style> </style>

40
app/src/routes/(app)/mitglieder/+page.svelte
View file

@ -31,9 +31,9 @@
} }
const statusFarbe: Record<string, string> = { const statusFarbe: Record<string, string> = {
aktiv: '#16a34a', aktiv: 'var(--c-success)',
passiv: '#f59e0b', passiv: 'var(--c-warning)',
ausgetreten: '#94a3b8' ausgetreten: 'var(--c-text-hint)'
}; };
</script> </script>
@ -69,7 +69,7 @@
{[m.email, gruppenLabel(m.gruppe_ids)].filter(Boolean).join(' · ')} {[m.email, gruppenLabel(m.gruppe_ids)].filter(Boolean).join(' · ')}
</span> </span>
</div> </div>
<span class="badge" style="color:{statusFarbe[m.status] ?? '#94a3b8'}"> <span class="badge" style="color:{statusFarbe[m.status] ?? 'var(--c-text-hint)'}">
{m.status} {m.status}
</span> </span>
</a> </a>
@ -87,19 +87,19 @@
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
.count { font-size: 1rem; color: #94a3b8; } .count { font-size: 1rem; color: var(--c-text-hint); }
.search { .search {
width: 100%; width: 100%;
padding: 0.6rem 0.85rem; padding: 0.6rem 0.85rem;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
background: #f8fafc; background: var(--c-bg-subtle);
box-sizing: border-box; box-sizing: border-box;
} }
.search:focus { outline: none; border-color: #1e40af; background: #fff; } .search:focus { outline: none; border-color: var(--c-primary); background: var(--c-bg-card); }
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -113,20 +113,20 @@
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.85rem; padding: 0.85rem;
background: #fff; background: var(--c-bg-card);
border: 1px solid #e2e8f0; border: 1px solid var(--c-border);
border-radius: 10px; border-radius: 10px;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
a:hover { border-color: #1e40af; } a:hover { border-color: var(--c-primary); }
.avatar { .avatar {
width: 2.4rem; width: 2.4rem;
height: 2.4rem; height: 2.4rem;
border-radius: 50%; border-radius: 50%;
background: #e0e7ff; background: var(--c-primary-light);
color: #1e40af; color: var(--c-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -142,24 +142,24 @@
flex-direction: column; flex-direction: column;
gap: 0.1rem; gap: 0.1rem;
} }
.name { font-weight: 600; font-size: 0.95rem; color: #1e293b; } .name { font-weight: 600; font-size: 0.95rem; color: var(--c-text); }
.meta { .meta {
font-size: 0.78rem; font-size: 0.78rem;
color: #94a3b8; color: var(--c-text-hint);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.badge { font-size: 0.72rem; font-weight: 600; text-transform: capitalize; flex-shrink: 0; } .badge { font-size: 0.72rem; font-weight: 600; text-transform: capitalize; flex-shrink: 0; }
.hint { color: #94a3b8; text-align: center; margin-top: 3rem; font-size: 0.95rem; } .hint { color: var(--c-text-hint); text-align: center; margin-top: 3rem; font-size: 0.95rem; }
.fab { .fab {
position: fixed; position: fixed;
bottom: calc(60px + env(safe-area-inset-bottom) + 1.25rem); bottom: calc(60px + env(safe-area-inset-bottom) + 1.25rem);
right: 1.25rem; right: 1.25rem;
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;
background: #1e40af; background: var(--c-primary);
color: #fff; color: var(--c-bg-card);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -170,5 +170,5 @@
box-shadow: 0 4px 14px rgba(30, 64, 175, 0.4); box-shadow: 0 4px 14px rgba(30, 64, 175, 0.4);
transition: background 0.15s; transition: background 0.15s;
} }
.fab:hover { background: #1d3a9e; } .fab:hover { background: var(--c-primary-dark); }
</style> </style>

78
app/src/routes/(app)/mitglieder/[id]/+page.svelte
View file

@ -128,7 +128,7 @@
} }
const statusFarbe: Record<string, string> = { const statusFarbe: Record<string, string> = {
aktiv: '#16a34a', passiv: '#f59e0b', ausgetreten: '#94a3b8', aktiv: 'var(--c-success)', passiv: 'var(--c-warning)', ausgetreten: 'var(--c-text-hint)',
}; };
</script> </script>
@ -151,7 +151,7 @@
<div class="hero"> <div class="hero">
<div class="avatar-lg">{vorname[0]}{nachname[0]}</div> <div class="avatar-lg">{vorname[0]}{nachname[0]}</div>
<h1>{vorname} {nachname}</h1> <h1>{vorname} {nachname}</h1>
<span class="status-badge" style="color:{statusFarbe[status] ?? '#94a3b8'}">{status}</span> <span class="status-badge" style="color:{statusFarbe[status] ?? 'var(--c-text-hint)'}">{status}</span>
</div> </div>
<div class="detail-block"> <div class="detail-block">
@ -380,105 +380,105 @@
<style> <style>
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.back { font-size: 0.9rem; color: #1e40af; text-decoration: none; } .back { font-size: 0.9rem; color: var(--c-primary); text-decoration: none; }
.edit-btn { .edit-btn {
background: none; border: 1.5px solid #e2e8f0; border-radius: 8px; background: none; border: 1.5px solid var(--c-border); border-radius: 8px;
padding: 0.4rem 0.85rem; font-size: 0.875rem; color: #475569; cursor: pointer; padding: 0.4rem 0.85rem; font-size: 0.875rem; color: var(--c-text-secondary); cursor: pointer;
} }
h1 { font-size: 1.3rem; font-weight: 700; color: #1e293b; } h1 { font-size: 1.3rem; font-weight: 700; color: var(--c-text); }
.hint { color: #94a3b8; text-align: center; margin-top: 3rem; } .hint { color: var(--c-text-hint); text-align: center; margin-top: 3rem; }
.hero { .hero {
display: flex; flex-direction: column; align-items: center; gap: 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
padding: 1.5rem 1rem; background: #fff; padding: 1.5rem 1rem; background: var(--c-bg-card);
border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 1rem; border: 1px solid var(--c-border); border-radius: 12px; margin-bottom: 1rem;
} }
.avatar-lg { .avatar-lg {
width: 4rem; height: 4rem; border-radius: 50%; width: 4rem; height: 4rem; border-radius: 50%;
background: #e0e7ff; color: #1e40af; background: var(--c-primary-light); color: var(--c-primary);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.3rem; text-transform: uppercase; font-weight: 700; font-size: 1.3rem; text-transform: uppercase;
} }
.status-badge { font-size: 0.8rem; font-weight: 600; text-transform: capitalize; } .status-badge { font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
.detail-block { .detail-block {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 12px;
overflow: hidden; margin-bottom: 0.75rem; padding: 0.75rem 1rem; overflow: hidden; margin-bottom: 0.75rem; padding: 0.75rem 1rem;
} }
.detail-block h2 { .detail-block h2 {
font-size: 0.72rem; font-weight: 700; color: #94a3b8; font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint);
text-transform: uppercase; letter-spacing: 0.06em; text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
.row-detail { .row-detail {
display: flex; justify-content: space-between; align-items: baseline; display: flex; justify-content: space-between; align-items: baseline;
gap: 1rem; padding: 0.45rem 0; gap: 1rem; padding: 0.45rem 0;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--c-bg);
} }
.row-detail:last-child { border-bottom: none; } .row-detail:last-child { border-bottom: none; }
.dl { font-size: 0.82rem; color: #94a3b8; flex-shrink: 0; } .dl { font-size: 0.82rem; color: var(--c-text-hint); flex-shrink: 0; }
.dv { font-size: 0.88rem; color: #1e293b; text-align: right; } .dv { font-size: 0.88rem; color: var(--c-text); text-align: right; }
.dv.link { color: #1e40af; text-decoration: none; } .dv.link { color: var(--c-primary); text-decoration: none; }
.dv.mono { font-family: monospace; font-size: 0.82rem; } .dv.mono { font-family: monospace; font-size: 0.82rem; }
.leer { font-size: 0.85rem; color: #94a3b8; } .leer { font-size: 0.85rem; color: var(--c-text-hint); }
.notiz-text { font-size: 0.875rem; color: #475569; white-space: pre-wrap; } .notiz-text { font-size: 0.875rem; color: var(--c-text-secondary); white-space: pre-wrap; }
.btn-delete { .btn-delete {
width: 100%; padding: 0.75rem; background: none; width: 100%; padding: 0.75rem; background: none;
border: 1.5px solid #fca5a5; border-radius: 8px; border: 1.5px solid var(--c-error-light); border-radius: 8px;
color: #dc2626; font-size: 0.9rem; cursor: pointer; color: var(--c-error); font-size: 0.9rem; cursor: pointer;
transition: background 0.15s; margin-bottom: 5rem; transition: background 0.15s; margin-bottom: 5rem;
} }
.btn-delete:hover { background: #fef2f2; } .btn-delete:hover { background: var(--c-error-subtle); }
/* Formular */ /* Formular */
section { section {
margin-bottom: 1.5rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--c-bg);
} }
section:last-of-type { border-bottom: none; } section:last-of-type { border-bottom: none; }
section h2 { section h2 {
font-size: 0.72rem; font-weight: 700; color: #94a3b8; font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint);
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem;
} }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
label { font-size: 0.875rem; font-weight: 500; color: #475569; } label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
input, select, textarea { input, select, textarea {
padding: 0.65rem 0.85rem; padding: 0.65rem 0.85rem;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; background: #fff; width: 100%; font-size: 1rem; background: var(--c-bg-card); width: 100%;
box-sizing: border-box; font-family: inherit; resize: vertical; box-sizing: border-box; font-family: inherit; resize: vertical;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
input:focus, select:focus, textarea:focus { outline: none; border-color: #1e40af; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); }
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem; } .checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check-label { .check-label {
display: flex; align-items: center; gap: 0.4rem; display: flex; align-items: center; gap: 0.4rem;
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
border: 1.5px solid #e2e8f0; border-radius: 20px; border: 1.5px solid var(--c-border); border-radius: 20px;
font-size: 0.875rem; cursor: pointer; font-size: 0.875rem; cursor: pointer;
transition: border-color 0.15s, background 0.15s; transition: border-color 0.15s, background 0.15s;
} }
.check-label.active { border-color: #1e40af; background: #e0e7ff; color: #1e40af; } .check-label.active { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary); }
.check-label input { display: none; } .check-label input { display: none; }
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; }
.actions { display: flex; gap: 0.75rem; margin-top: 1rem; } .actions { display: flex; gap: 0.75rem; margin-top: 1rem; }
.btn-primary { .btn-primary {
flex: 1; padding: 0.75rem; background: #1e40af; color: #fff; flex: 1; padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
cursor: pointer; transition: background 0.15s; cursor: pointer; transition: background 0.15s;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { .btn-ghost {
padding: 0.75rem 1rem; background: none; padding: 0.75rem 1rem; background: none;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; color: #64748b; cursor: pointer; font-size: 1rem; color: var(--c-text-muted); cursor: pointer;
} }
.overlay { .overlay {
@ -488,16 +488,16 @@
padding-bottom: calc(1rem + env(safe-area-inset-bottom)); padding-bottom: calc(1rem + env(safe-area-inset-bottom));
} }
.dialog { .dialog {
background: #fff; border-radius: 16px; padding: 1.5rem; background: var(--c-bg-card); border-radius: 16px; padding: 1.5rem;
width: 100%; max-width: 400px; width: 100%; max-width: 400px;
} }
.dialog p { font-size: 1rem; color: #1e293b; margin-bottom: 0.5rem; } .dialog p { font-size: 1rem; color: var(--c-text); margin-bottom: 0.5rem; }
.dialog-sub { font-size: 0.875rem !important; color: #94a3b8; } .dialog-sub { font-size: 0.875rem !important; color: var(--c-text-hint); }
.dialog-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .dialog-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.btn-danger { .btn-danger {
flex: 1; padding: 0.75rem; background: #dc2626; color: #fff; flex: 1; padding: 0.75rem; background: var(--c-error); color: var(--c-bg-card);
border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600;
cursor: pointer; transition: background 0.15s; cursor: pointer; transition: background 0.15s;
} }
.btn-danger:hover { background: #b91c1c; } .btn-danger:hover { background: var(--c-error-dark); }
</style> </style>

30
app/src/routes/(app)/mitglieder/neu/+page.svelte
View file

@ -204,54 +204,54 @@
<style> <style>
.top { margin-bottom: 1.25rem; } .top { margin-bottom: 1.25rem; }
.back { font-size: 0.9rem; color: #1e40af; text-decoration: none; display: block; margin-bottom: 0.5rem; } .back { font-size: 0.9rem; color: var(--c-primary); text-decoration: none; display: block; margin-bottom: 0.5rem; }
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
section { section {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--c-bg);
} }
section:last-of-type { border-bottom: none; } section:last-of-type { border-bottom: none; }
h2 { font-size: 0.8rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem; } h2 { font-size: 0.8rem; font-weight: 700; color: var(--c-text-hint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
label { font-size: 0.875rem; font-weight: 500; color: #475569; } label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
input, select, textarea { input, select, textarea {
padding: 0.65rem 0.85rem; padding: 0.65rem 0.85rem;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; background: #fff; width: 100%; font-size: 1rem; background: var(--c-bg-card); width: 100%;
box-sizing: border-box; font-family: inherit; resize: vertical; box-sizing: border-box; font-family: inherit; resize: vertical;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
input:focus, select:focus, textarea:focus { outline: none; border-color: #1e40af; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); }
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem; } .checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check-label { .check-label {
display: flex; align-items: center; gap: 0.4rem; display: flex; align-items: center; gap: 0.4rem;
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
border: 1.5px solid #e2e8f0; border-radius: 20px; border: 1.5px solid var(--c-border); border-radius: 20px;
font-size: 0.875rem; cursor: pointer; font-size: 0.875rem; cursor: pointer;
transition: border-color 0.15s, background 0.15s; transition: border-color 0.15s, background 0.15s;
} }
.check-label.active { border-color: #1e40af; background: #e0e7ff; color: #1e40af; } .check-label.active { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary); }
.check-label input { display: none; } .check-label input { display: none; }
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; }
.actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; margin-bottom: 5rem; } .actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; margin-bottom: 5rem; }
.btn-primary { .btn-primary {
flex: 1; padding: 0.75rem; background: #1e40af; color: #fff; flex: 1; padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
cursor: pointer; transition: background 0.15s; cursor: pointer; transition: background 0.15s;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { .btn-ghost {
padding: 0.75rem 1rem; background: none; padding: 0.75rem 1rem; background: none;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; color: #64748b; text-decoration: none; text-align: center; font-size: 1rem; color: var(--c-text-muted); text-decoration: none; text-align: center;
} }
</style> </style>

52
app/src/routes/(app)/nachrichten/+page.svelte
View file

@ -201,25 +201,25 @@
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
.top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; } .top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; }
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
.success { .success {
background: #dcfce7; background: var(--c-success-bg);
border: 1px solid #86efac; border: 1px solid var(--c-success-light);
border-radius: 8px; border-radius: 8px;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
color: #166534; color: var(--c-success-dark);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.hint { color: #94a3b8; font-size: 0.95rem; text-align: center; margin-top: 3rem; } .hint { color: var(--c-text-hint); font-size: 0.95rem; text-align: center; margin-top: 3rem; }
.liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.karte { .karte {
background: #fff; background: var(--c-bg-card);
border: 1px solid #e2e8f0; border: 1px solid var(--c-border);
border-radius: 10px; border-radius: 10px;
padding: 0.9rem 1rem; padding: 0.9rem 1rem;
display: flex; display: flex;
@ -233,10 +233,10 @@
align-items: baseline; align-items: baseline;
gap: 0.5rem; gap: 0.5rem;
} }
.karte-betreff { font-weight: 600; font-size: 0.95rem; color: #1e293b; } .karte-betreff { font-weight: 600; font-size: 0.95rem; color: var(--c-text); }
.karte-datum { font-size: 0.75rem; color: #94a3b8; flex-shrink: 0; } .karte-datum { font-size: 0.75rem; color: var(--c-text-hint); flex-shrink: 0; }
.karte-meta { font-size: 0.78rem; color: #64748b; } .karte-meta { font-size: 0.78rem; color: var(--c-text-muted); }
.karte-vorschau { font-size: 0.85rem; color: #475569; margin: 0; } .karte-vorschau { font-size: 0.85rem; color: var(--c-text-secondary); margin: 0; }
/* Sheet */ /* Sheet */
.overlay { .overlay {
@ -251,7 +251,7 @@
padding-bottom: calc(1rem + env(safe-area-inset-bottom)); padding-bottom: calc(1rem + env(safe-area-inset-bottom));
} }
.sheet { .sheet {
background: #fff; background: var(--c-bg-card);
border-radius: 16px; border-radius: 16px;
padding: 1.5rem; padding: 1.5rem;
width: 100%; width: 100%;
@ -259,24 +259,24 @@
max-height: 92dvh; max-height: 92dvh;
overflow-y: auto; overflow-y: auto;
} }
h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; } h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
label, .field-label { font-size: 0.875rem; font-weight: 500; color: #475569; } label, .field-label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
input, textarea { input, textarea {
padding: 0.65rem 0.85rem; padding: 0.65rem 0.85rem;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
background: #fff; background: var(--c-bg-card);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.15s; transition: border-color 0.15s;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
} }
input:focus, textarea:focus { outline: none; border-color: #1e40af; } input:focus, textarea:focus { outline: none; border-color: var(--c-primary); }
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; } .checkboxes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.check-label { .check-label {
@ -284,30 +284,30 @@
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.35rem;
padding: 0.35rem 0.7rem; padding: 0.35rem 0.7rem;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 20px; border-radius: 20px;
font-size: 0.82rem; font-size: 0.82rem;
cursor: pointer; cursor: pointer;
transition: border-color 0.15s, background 0.15s; transition: border-color 0.15s, background 0.15s;
} }
.check-label.active { border-color: #1e40af; background: #e0e7ff; color: #1e40af; } .check-label.active { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary); }
.check-label input { display: none; } .check-label input { display: none; }
.versand-info { .versand-info {
font-size: 0.8rem; font-size: 0.8rem;
color: #94a3b8; color: var(--c-text-hint);
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; }
.actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.btn-primary { .btn-primary {
flex: 1; flex: 1;
padding: 0.75rem; padding: 0.75rem;
background: #1e40af; background: var(--c-primary);
color: #fff; color: var(--c-bg-card);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
@ -315,16 +315,16 @@
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { .btn-ghost {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: none; background: none;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
color: #64748b; color: var(--c-text-muted);
cursor: pointer; cursor: pointer;
} }
</style> </style>

66
app/src/routes/(app)/neuigkeiten/+page.svelte
View file

@ -332,13 +332,13 @@
<style> <style>
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; } .top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; }
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
.hint { color: #94a3b8; text-align: center; margin-top: 3rem; } .hint { color: var(--c-text-hint); text-align: center; margin-top: 3rem; }
.feed { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 5rem; } .feed { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 5rem; }
.beitrag { .beitrag {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 12px;
overflow: hidden; padding: 0.9rem 1rem; overflow: hidden; padding: 0.9rem 1rem;
} }
@ -347,27 +347,27 @@
} }
.avatar { .avatar {
width: 2.2rem; height: 2.2rem; border-radius: 50%; width: 2.2rem; height: 2.2rem; border-radius: 50%;
background: #e0e7ff; color: #1e40af; background: var(--c-primary-light); color: var(--c-primary);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.85rem; flex-shrink: 0; font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
} }
.beitrag-meta { flex: 1; display: flex; flex-direction: column; gap: 0.05rem; } .beitrag-meta { flex: 1; display: flex; flex-direction: column; gap: 0.05rem; }
.autor { font-weight: 600; font-size: 0.875rem; color: #1e293b; } .autor { font-weight: 600; font-size: 0.875rem; color: var(--c-text); }
.zeit { font-size: 0.72rem; color: #94a3b8; } .zeit { font-size: 0.72rem; color: var(--c-text-hint); }
.btn-del { .btn-del {
background: none; border: none; color: #94a3b8; background: none; border: none; color: var(--c-text-hint);
font-size: 0.85rem; cursor: pointer; padding: 0.2rem; font-size: 0.85rem; cursor: pointer; padding: 0.2rem;
} }
.btn-del:hover { color: #dc2626; } .btn-del:hover { color: var(--c-error); }
.termin-tag { .termin-tag {
font-size: 0.75rem; color: #1e40af; background: #eff6ff; font-size: 0.75rem; color: var(--c-primary); background: var(--c-primary-subtle);
border-radius: 20px; padding: 0.2rem 0.65rem; border-radius: 20px; padding: 0.2rem 0.65rem;
display: inline-block; margin-bottom: 0.5rem; display: inline-block; margin-bottom: 0.5rem;
} }
.beitrag-text { .beitrag-text {
font-size: 0.92rem; color: #1e293b; line-height: 1.55; font-size: 0.92rem; color: var(--c-text); line-height: 1.55;
white-space: pre-wrap; margin: 0 0 0.6rem; white-space: pre-wrap; margin: 0 0 0.6rem;
} }
@ -393,15 +393,15 @@
.beitrag-fuss { .beitrag-fuss {
display: flex; align-items: center; gap: 0.75rem; padding-top: 0.5rem; display: flex; align-items: center; gap: 0.75rem; padding-top: 0.5rem;
border-top: 1px solid #f1f5f9; margin-top: 0.25rem; border-top: 1px solid var(--c-bg); margin-top: 0.25rem;
} }
.btn-like { .btn-like {
background: none; border: 1px solid #e2e8f0; border-radius: 20px; background: none; border: 1px solid var(--c-border); border-radius: 20px;
padding: 0.25rem 0.75rem; font-size: 0.82rem; cursor: pointer; padding: 0.25rem 0.75rem; font-size: 0.82rem; cursor: pointer;
transition: all 0.15s; color: #64748b; transition: all 0.15s; color: var(--c-text-muted);
} }
.btn-like.aktiv { background: #fef9c3; border-color: #fbbf24; color: #92400e; } .btn-like.aktiv { background: var(--c-warning-bg); border-color: var(--c-warning); color: var(--c-warning-dark); }
.gruppe-tag { font-size: 0.72rem; color: #94a3b8; } .gruppe-tag { font-size: 0.72rem; color: var(--c-text-hint); }
/* Formular */ /* Formular */
.overlay { .overlay {
@ -410,61 +410,61 @@
z-index: 100; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 100; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom));
} }
.sheet { .sheet {
background: #fff; border-radius: 16px; padding: 1.5rem; background: var(--c-bg-card); border-radius: 16px; padding: 1.5rem;
width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto;
} }
h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; } h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
label, .field-label { font-size: 0.875rem; font-weight: 500; color: #475569; } label, .field-label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
textarea, select { textarea, select {
padding: 0.65rem 0.85rem; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 0.65rem 0.85rem; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; background: #fff; width: 100%; font-size: 1rem; background: var(--c-bg-card); width: 100%;
box-sizing: border-box; font-family: inherit; resize: vertical; box-sizing: border-box; font-family: inherit; resize: vertical;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
textarea:focus, select:focus { outline: none; border-color: #1e40af; } textarea:focus, select:focus { outline: none; border-color: var(--c-primary); }
.upload-area { margin-bottom: 0.85rem; } .upload-area { margin-bottom: 0.85rem; }
.upload-label { .upload-label {
display: inline-flex; align-items: center; gap: 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.5rem 0.85rem; border: 1.5px dashed #e2e8f0; border-radius: 8px; padding: 0.5rem 0.85rem; border: 1.5px dashed var(--c-border); border-radius: 8px;
font-size: 0.875rem; color: #64748b; cursor: pointer; font-size: 0.875rem; color: var(--c-text-muted); cursor: pointer;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
.upload-label:hover { border-color: #1e40af; color: #1e40af; } .upload-label:hover { border-color: var(--c-primary); color: var(--c-primary); }
.file-input { display: none; } .file-input { display: none; }
.preview-grid { .preview-grid {
display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem;
} }
.preview-img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; } .preview-img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.preview-video { .preview-video {
width: 72px; height: 72px; background: #f1f5f9; border-radius: 6px; width: 72px; height: 72px; background: var(--c-bg); border-radius: 6px;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-size: 0.75rem; color: #64748b; font-size: 0.75rem; color: var(--c-text-muted);
} }
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; } .checkboxes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.check-label { .check-label {
display: flex; align-items: center; gap: 0.35rem; display: flex; align-items: center; gap: 0.35rem;
padding: 0.3rem 0.65rem; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 0.3rem 0.65rem; border: 1.5px solid var(--c-border); border-radius: 20px;
font-size: 0.82rem; cursor: pointer; font-size: 0.82rem; cursor: pointer;
} }
.check-label.active { border-color: #1e40af; background: #e0e7ff; color: #1e40af; } .check-label.active { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary); }
.check-label input { display: none; } .check-label input { display: none; }
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.5rem; } .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.5rem; }
.actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.btn-primary-full { .btn-primary-full {
flex: 1; padding: 0.75rem; background: #1e40af; color: #fff; flex: 1; padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer;
} }
.btn-primary-full:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary-full:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { .btn-ghost {
padding: 0.75rem 1rem; background: none; padding: 0.75rem 1rem; background: none;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; color: #64748b; cursor: pointer; font-size: 1rem; color: var(--c-text-muted); cursor: pointer;
} }
.btn-primary { background: #1e40af; color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; } .btn-primary { background: var(--c-primary); color: var(--c-bg-card); border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
/* Lightbox */ /* Lightbox */
.lightbox { .lightbox {

70
app/src/routes/(app)/orte/+page.svelte
View file

@ -258,55 +258,55 @@
<style> <style>
.top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; } .top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; } .top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; }
.back { font-size: 0.85rem; color: #1e40af; text-decoration: none; display: block; margin-bottom: 0.25rem; } .back { font-size: 0.85rem; color: var(--c-primary); text-decoration: none; display: block; margin-bottom: 0.25rem; }
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
.hint { color: #94a3b8; font-size: 0.95rem; text-align: center; margin-top: 3rem; } .hint { color: var(--c-text-hint); font-size: 0.95rem; text-align: center; margin-top: 3rem; }
.section-title { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin: 1.25rem 0 0.5rem; } .section-title { font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint); text-transform: uppercase; letter-spacing: 0.06em; margin: 1.25rem 0 0.5rem; }
.liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.karte { .karte {
display: flex; align-items: flex-start; gap: 0.75rem; display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.85rem 1rem; background: #fff; padding: 0.85rem 1rem; background: var(--c-bg-card);
border: 1px solid #e2e8f0; border-radius: 10px; border: 1px solid var(--c-border); border-radius: 10px;
} }
.karte.inaktiv { opacity: 0.55; } .karte.inaktiv { opacity: 0.55; }
.ort-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .ort-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ort-name-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .ort-name-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ort-name { font-weight: 600; font-size: 0.95rem; color: #1e293b; } .ort-name { font-weight: 600; font-size: 0.95rem; color: var(--c-text); }
.ort-meta { font-size: 0.78rem; color: #64748b; } .ort-meta { font-size: 0.78rem; color: var(--c-text-muted); }
.gesperrt-hinweis { font-size: 0.75rem; color: #dc2626; font-weight: 500; } .gesperrt-hinweis { font-size: 0.75rem; color: var(--c-error); font-weight: 500; }
.badge { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 20px; } .badge { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 20px; }
.badge.gruen { background: #dcfce7; color: #16a34a; } .badge.gruen { background: var(--c-success-bg); color: var(--c-success); }
.badge.rot { background: #fee2e2; color: #dc2626; } .badge.rot { background: var(--c-error-bg); color: var(--c-error); }
.badge.grau { background: #f1f5f9; color: #64748b; } .badge.grau { background: var(--c-bg); color: var(--c-text-muted); }
.ort-aktionen { display: flex; gap: 0.35rem; flex-shrink: 0; align-items: flex-start; } .ort-aktionen { display: flex; gap: 0.35rem; flex-shrink: 0; align-items: flex-start; }
.btn-ausfall { .btn-ausfall {
padding: 0.3rem 0.6rem; background: #fef9c3; border: 1px solid #fde047; padding: 0.3rem 0.6rem; background: var(--c-warning-bg); border: 1px solid var(--c-warning-light);
border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: #854d0e; cursor: pointer; border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: var(--c-warning-amber); cursor: pointer;
} }
.ausfall-karte { .ausfall-karte {
display: flex; align-items: center; gap: 0.75rem; display: flex; align-items: center; gap: 0.75rem;
padding: 0.7rem 1rem; background: #fff; padding: 0.7rem 1rem; background: var(--c-bg-card);
border: 1px solid #fca5a5; border-radius: 8px; border: 1px solid var(--c-error-light); border-radius: 8px;
} }
.ausfall-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; } .ausfall-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.ausfall-ort { font-weight: 600; font-size: 0.88rem; color: #1e293b; } .ausfall-ort { font-weight: 600; font-size: 0.88rem; color: var(--c-text); }
.ausfall-zeitraum { font-size: 0.78rem; color: #dc2626; } .ausfall-zeitraum { font-size: 0.78rem; color: var(--c-error); }
.ausfall-grund { font-size: 0.75rem; color: #94a3b8; } .ausfall-grund { font-size: 0.75rem; color: var(--c-text-hint); }
.btn-icon { .btn-icon {
width: 1.9rem; height: 1.9rem; display: flex; align-items: center; width: 1.9rem; height: 1.9rem; display: flex; align-items: center;
justify-content: center; background: none; border: 1px solid #e2e8f0; justify-content: center; background: none; border: 1px solid var(--c-border);
border-radius: 6px; color: #64748b; font-size: 0.85rem; cursor: pointer; border-radius: 6px; color: var(--c-text-muted); font-size: 0.85rem; cursor: pointer;
} }
.btn-icon:hover { border-color: #94a3b8; color: #1e293b; } .btn-icon:hover { border-color: var(--c-text-hint); color: var(--c-text); }
.btn-icon-red:hover { border-color: #fca5a5; color: #dc2626; } .btn-icon-red:hover { border-color: var(--c-error-light); color: var(--c-error); }
.overlay { .overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.4); position: fixed; inset: 0; background: rgba(0,0,0,0.4);
@ -314,32 +314,32 @@
z-index: 100; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 100; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom));
} }
.sheet { .sheet {
background: #fff; border-radius: 16px; padding: 1.5rem; background: var(--c-bg-card); border-radius: 16px; padding: 1.5rem;
width: 100%; max-width: 480px; max-height: 90dvh; overflow-y: auto; width: 100%; max-width: 480px; max-height: 90dvh; overflow-y: auto;
} }
h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 0.25rem; } h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 0.25rem; }
.sheet-sub { font-size: 0.85rem; color: #64748b; margin-bottom: 1rem; } .sheet-sub { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 1rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
label { font-size: 0.875rem; font-weight: 500; color: #475569; } label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
.toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; } .toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; }
input, select { input, select {
padding: 0.65rem 0.85rem; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 0.65rem 0.85rem; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; background: #fff; width: 100%; box-sizing: border-box; font-size: 1rem; background: var(--c-bg-card); width: 100%; box-sizing: border-box;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
input:focus, select:focus { outline: none; border-color: #1e40af; } input:focus, select:focus { outline: none; border-color: var(--c-primary); }
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; }
.actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.btn-primary { .btn-primary {
flex: 1; padding: 0.75rem; background: #1e40af; color: #fff; flex: 1; padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { .btn-ghost {
padding: 0.75rem 1rem; background: none; padding: 0.75rem 1rem; background: none;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; color: #64748b; cursor: pointer; font-size: 1rem; color: var(--c-text-muted); cursor: pointer;
} }
</style> </style>

146
app/src/routes/(app)/termine/+page.svelte
View file

@ -229,10 +229,10 @@
} }
const verfuegbarkeitConfig: Record<Verfuegbarkeit, { label: string; farbe: string }> = { const verfuegbarkeitConfig: Record<Verfuegbarkeit, { label: string; farbe: string }> = {
offen: { label: 'Offen', farbe: '#f59e0b' }, offen: { label: 'Offen', farbe: 'var(--c-warning)' },
bestaetigt: { label: 'Bestätigt', farbe: '#16a34a' }, bestaetigt: { label: 'Bestätigt', farbe: 'var(--c-success)' },
abgesagt: { label: 'Abgesagt', farbe: '#dc2626' }, abgesagt: { label: 'Abgesagt', farbe: 'var(--c-error)' },
vertretung_gesucht: { label: 'Vertretung gesucht', farbe: '#7c3aed' }, vertretung_gesucht: { label: 'Vertretung gesucht', farbe: 'var(--c-accent)' },
}; };
function istMeinTermin(t: Termin): boolean { function istMeinTermin(t: Termin): boolean {
@ -241,10 +241,10 @@
function verfuegbarkeitFarbe(t: Termin): string { function verfuegbarkeitFarbe(t: Termin): string {
switch (t.verfuegbarkeit) { switch (t.verfuegbarkeit) {
case 'bestaetigt': return '#16a34a'; case 'bestaetigt': return 'var(--c-success)';
case 'abgesagt': return '#dc2626'; case 'abgesagt': return 'var(--c-error)';
case 'vertretung_gesucht': return '#7c3aed'; case 'vertretung_gesucht': return 'var(--c-accent)';
default: return '#1e40af'; default: return 'var(--c-primary)';
} }
} }
@ -349,7 +349,7 @@
● {verfuegbarkeitConfig[t.verfuegbarkeit].label} ● {verfuegbarkeitConfig[t.verfuegbarkeit].label}
</span> </span>
{:else} {:else}
<span class="verfueg-badge" style="color:#f59e0b">● Offen</span> <span class="verfueg-badge" style="color:var(--c-warning)">● Offen</span>
{/if} {/if}
{#if isAdmin() && userName(t.durchfuehrender_id)} {#if isAdmin() && userName(t.durchfuehrender_id)}
<span class="karte-sub">→ {userName(t.durchfuehrender_id)}</span> <span class="karte-sub">→ {userName(t.durchfuehrender_id)}</span>
@ -555,69 +555,69 @@
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; } .top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; }
.top-rechts { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .top-rechts { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
.btn-orte { .btn-orte {
padding: 0.5rem 0.85rem; background: none; padding: 0.5rem 0.85rem; background: none;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 0.85rem; color: #475569; text-decoration: none; font-size: 0.85rem; color: var(--c-text-secondary); text-decoration: none;
} }
.ansicht-switcher { .ansicht-switcher {
display: flex; border: 1.5px solid #e2e8f0; border-radius: 8px; overflow: hidden; display: flex; border: 1.5px solid var(--c-border); border-radius: 8px; overflow: hidden;
} }
.ansicht-switcher button { .ansicht-switcher button {
padding: 0.4rem 0.75rem; background: none; border: none; padding: 0.4rem 0.75rem; background: none; border: none;
font-size: 0.82rem; font-weight: 600; color: #64748b; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--c-text-muted); cursor: pointer;
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
} }
.ansicht-switcher button + button { border-left: 1px solid #e2e8f0; } .ansicht-switcher button + button { border-left: 1px solid var(--c-border); }
.ansicht-switcher button.aktiv { background: #1e40af; color: #fff; } .ansicht-switcher button.aktiv { background: var(--c-primary); color: var(--c-bg-card); }
.kalender-wrap { .kalender-wrap {
margin-bottom: 1rem; margin-bottom: 1rem;
--ec-today-bg-color: #eff6ff; --ec-today-bg-color: var(--c-primary-subtle);
--ec-event-bg-color: #1e40af; --ec-event-bg-color: var(--c-primary);
--ec-border-color: #e2e8f0; --ec-border-color: var(--c-border);
--ec-text-color: #1e293b; --ec-text-color: var(--c-text);
--ec-button-bg-color: #fff; --ec-button-bg-color: var(--c-bg-card);
--ec-button-border-color: #e2e8f0; --ec-button-border-color: var(--c-border);
--ec-button-text-color: #475569; --ec-button-text-color: var(--c-text-secondary);
--ec-active-bg-color: #1e40af; --ec-active-bg-color: var(--c-primary);
--ec-active-text-color: #fff; --ec-active-text-color: var(--c-bg-card);
} }
.ausfall-warn { font-size: 0.75rem; color: #dc2626; font-weight: 600; } .ausfall-warn { font-size: 0.75rem; color: var(--c-error); font-weight: 600; }
.ort-link { font-size: 0.75rem; color: #1e40af; margin-left: 0.5rem; } .ort-link { font-size: 0.75rem; color: var(--c-primary); margin-left: 0.5rem; }
.hint { color: #94a3b8; font-size: 0.95rem; text-align: center; margin-top: 3rem; } .hint { color: var(--c-text-hint); font-size: 0.95rem; text-align: center; margin-top: 3rem; }
.warnung { .warnung {
background: #fffbeb; border: 1px solid #fde68a; background: var(--c-warning-subtle); border: 1px solid var(--c-warning-light);
border-radius: 8px; padding: 0.65rem 0.9rem; border-radius: 8px; padding: 0.65rem 0.9rem;
font-size: 0.85rem; color: #92400e; margin-bottom: 1rem; font-size: 0.85rem; color: var(--c-warning-dark); margin-bottom: 1rem;
} }
.liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.karte { .karte {
display: flex; align-items: flex-start; gap: 0.75rem; display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.85rem 1rem; background: #fff; padding: 0.85rem 1rem; background: var(--c-bg-card);
border: 1px solid #e2e8f0; border-radius: 10px; border: 1px solid var(--c-border); border-radius: 10px;
} }
.karte-grau { background: #f8fafc; opacity: 0.75; } .karte-grau { background: var(--c-bg-subtle); opacity: 0.75; }
.karte-datum-col { .karte-datum-col {
display: flex; flex-direction: column; align-items: center; display: flex; flex-direction: column; align-items: center;
min-width: 2.2rem; padding-top: 0.1rem; min-width: 2.2rem; padding-top: 0.1rem;
} }
.tag { font-size: 0.65rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; } .tag { font-size: 0.65rem; font-weight: 600; color: var(--c-text-hint); text-transform: uppercase; }
.tag-zahl { font-size: 1.4rem; font-weight: 700; color: #1e40af; line-height: 1.1; } .tag-zahl { font-size: 1.4rem; font-weight: 700; color: var(--c-primary); line-height: 1.1; }
.monat { font-size: 0.65rem; color: #94a3b8; text-transform: uppercase; } .monat { font-size: 0.65rem; color: var(--c-text-hint); text-transform: uppercase; }
.karte-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .karte-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.karte-titel-zeile { display: flex; align-items: center; gap: 0.4rem; } .karte-titel-zeile { display: flex; align-items: center; gap: 0.4rem; }
.karte-titel { font-weight: 600; font-size: 0.95rem; color: #1e293b; } .karte-titel { font-weight: 600; font-size: 0.95rem; color: var(--c-text); }
.serie-badge { font-size: 0.75rem; color: #1e40af; font-weight: 700; } .serie-badge { font-size: 0.75rem; color: var(--c-primary); font-weight: 700; }
.karte-meta { font-size: 0.78rem; color: #64748b; } .karte-meta { font-size: 0.78rem; color: var(--c-text-muted); }
.karte-sub { font-size: 0.72rem; color: #94a3b8; } .karte-sub { font-size: 0.72rem; color: var(--c-text-hint); }
.verfueg-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; } .verfueg-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; }
.verfueg-badge { font-size: 0.75rem; font-weight: 600; } .verfueg-badge { font-size: 0.75rem; font-weight: 600; }
@ -628,27 +628,27 @@
.btn-aktion { .btn-aktion {
padding: 0.3rem 0.65rem; border-radius: 20px; padding: 0.3rem 0.65rem; border-radius: 20px;
font-size: 0.75rem; font-weight: 600; cursor: pointer; font-size: 0.75rem; font-weight: 600; cursor: pointer;
border: 1.5px solid #e2e8f0; background: #fff; border: 1.5px solid var(--c-border); background: var(--c-bg-card);
transition: all 0.15s; transition: all 0.15s;
} }
.btn-aktion.bestaetigen { color: #16a34a; } .btn-aktion.bestaetigen { color: var(--c-success); }
.btn-aktion.bestaetigen.aktiv { background: #dcfce7; border-color: #16a34a; } .btn-aktion.bestaetigen.aktiv { background: var(--c-success-bg); border-color: var(--c-success); }
.btn-aktion.absagen { color: #dc2626; } .btn-aktion.absagen { color: var(--c-error); }
.btn-aktion.absagen.aktiv { background: #fee2e2; border-color: #dc2626; } .btn-aktion.absagen.aktiv { background: var(--c-error-bg); border-color: var(--c-error); }
.btn-aktion.vertretung { color: #7c3aed; } .btn-aktion.vertretung { color: var(--c-accent); }
.btn-aktion.vertretung.aktiv { background: #ede9fe; border-color: #7c3aed; } .btn-aktion.vertretung.aktiv { background: var(--c-accent-subtle); border-color: var(--c-accent); }
.karte-aktionen { display: flex; gap: 0.35rem; flex-shrink: 0; } .karte-aktionen { display: flex; gap: 0.35rem; flex-shrink: 0; }
.btn-icon { .btn-icon {
width: 1.9rem; height: 1.9rem; display: flex; align-items: center; width: 1.9rem; height: 1.9rem; display: flex; align-items: center;
justify-content: center; background: none; border: 1px solid #e2e8f0; justify-content: center; background: none; border: 1px solid var(--c-border);
border-radius: 6px; color: #64748b; font-size: 0.85rem; cursor: pointer; border-radius: 6px; color: var(--c-text-muted); font-size: 0.85rem; cursor: pointer;
} }
.btn-icon:hover { border-color: #94a3b8; color: #1e293b; } .btn-icon:hover { border-color: var(--c-text-hint); color: var(--c-text); }
.btn-icon-red:hover { border-color: #fca5a5; color: #dc2626; } .btn-icon-red:hover { border-color: var(--c-error-light); color: var(--c-error); }
.vergangen summary { .vergangen summary {
font-size: 0.85rem; color: #94a3b8; cursor: pointer; font-size: 0.85rem; color: var(--c-text-hint); cursor: pointer;
padding: 0.5rem 0; list-style: none; user-select: none; padding: 0.5rem 0; list-style: none; user-select: none;
} }
.vergangen-liste { margin-top: 0.5rem; } .vergangen-liste { margin-top: 0.5rem; }
@ -661,56 +661,56 @@
padding-bottom: calc(1rem + env(safe-area-inset-bottom)); padding-bottom: calc(1rem + env(safe-area-inset-bottom));
} }
.sheet { .sheet {
background: #fff; border-radius: 16px; padding: 1.5rem; background: var(--c-bg-card); border-radius: 16px; padding: 1.5rem;
width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto;
} }
h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; } h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 1rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
label, .field-label { font-size: 0.875rem; font-weight: 500; color: #475569; } label, .field-label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
input, textarea, select { input, textarea, select {
padding: 0.65rem 0.85rem; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 0.65rem 0.85rem; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; background: #fff; width: 100%; font-size: 1rem; background: var(--c-bg-card); width: 100%;
box-sizing: border-box; font-family: inherit; resize: vertical; box-sizing: border-box; font-family: inherit; resize: vertical;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
input:focus, textarea:focus, select:focus { outline: none; border-color: #1e40af; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-primary); }
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; } .checkboxes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.check-label { .check-label {
display: flex; align-items: center; gap: 0.35rem; display: flex; align-items: center; gap: 0.35rem;
padding: 0.35rem 0.7rem; border: 1.5px solid #e2e8f0; padding: 0.35rem 0.7rem; border: 1.5px solid var(--c-border);
border-radius: 20px; font-size: 0.82rem; cursor: pointer; border-radius: 20px; font-size: 0.82rem; cursor: pointer;
} }
.check-label.active { border-color: #1e40af; background: #e0e7ff; color: #1e40af; } .check-label.active { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary); }
.check-label input { display: none; } .check-label input { display: none; }
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; }
.actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.btn-primary { .btn-primary {
flex: 1; padding: 0.75rem; background: #1e40af; color: #fff; flex: 1; padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
cursor: pointer; transition: background 0.15s; cursor: pointer; transition: background 0.15s;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { .btn-ghost {
padding: 0.75rem 1rem; background: none; padding: 0.75rem 1rem; background: none;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; color: #64748b; cursor: pointer; font-size: 1rem; color: var(--c-text-muted); cursor: pointer;
} }
.dialog { .dialog {
background: #fff; border-radius: 16px; padding: 1.5rem; background: var(--c-bg-card); border-radius: 16px; padding: 1.5rem;
width: 100%; max-width: 400px; width: 100%; max-width: 400px;
} }
.dialog p { font-size: 1rem; color: #1e293b; margin-bottom: 0.4rem; font-weight: 600; } .dialog p { font-size: 1rem; color: var(--c-text); margin-bottom: 0.4rem; font-weight: 600; }
.dialog-sub { font-weight: 400 !important; font-size: 0.875rem; color: #94a3b8; } .dialog-sub { font-weight: 400 !important; font-size: 0.875rem; color: var(--c-text-hint); }
.radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; } .radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }
.radio-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #1e293b; cursor: pointer; } .radio-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--c-text); cursor: pointer; }
.dialog-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .dialog-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #475569; cursor: pointer; } .toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--c-text-secondary); cursor: pointer; }
.serie-vorschau { font-size: 0.82rem; color: #1e40af; margin: -0.4rem 0 0.5rem; } .serie-vorschau { font-size: 0.82rem; color: var(--c-primary); margin: -0.4rem 0 0.5rem; }
.btn-danger { .btn-danger {
flex: 1; padding: 0.75rem; background: #dc2626; color: #fff; flex: 1; padding: 0.75rem; background: var(--c-error); color: var(--c-bg-card);
border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer;
} }
.btn-danger:hover { background: #b91c1c; } .btn-danger:hover { background: var(--c-error-dark); }
</style> </style>

6
app/src/routes/(auth)/+layout.svelte
View file

@ -27,13 +27,13 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1.5rem; padding: 1.5rem;
background: #f8fafc; background: var(--c-bg-subtle);
} }
.auth-card { .auth-card {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
background: #fff; background: var(--c-bg-card);
border-radius: 12px; border-radius: 12px;
padding: 2rem; padding: 2rem;
box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
@ -43,7 +43,7 @@
display: block; display: block;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 700; font-weight: 700;
color: #1e40af; color: var(--c-primary);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }

22
app/src/routes/(auth)/login/+page.svelte
View file

@ -71,7 +71,7 @@
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 700; font-weight: 700;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
color: #1e293b; color: var(--c-text);
} }
.field { .field {
@ -84,25 +84,25 @@
label { label {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
color: #475569; color: var(--c-text-secondary);
} }
input { input {
padding: 0.65rem 0.85rem; padding: 0.65rem 0.85rem;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
transition: border-color .15s; transition: border-color .15s;
background: #fff; background: var(--c-bg-card);
} }
input:focus { input:focus {
outline: none; outline: none;
border-color: #1e40af; border-color: var(--c-primary);
} }
.error { .error {
color: #dc2626; color: var(--c-error);
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
@ -110,8 +110,8 @@
button { button {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background: #1e40af; background: var(--c-primary);
color: #fff; color: var(--c-bg-card);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
@ -121,7 +121,7 @@
} }
button:hover:not(:disabled) { button:hover:not(:disabled) {
background: #1d3a9e; background: var(--c-primary-dark);
} }
button:disabled { button:disabled {
@ -132,12 +132,12 @@
.switch { .switch {
margin-top: 1.25rem; margin-top: 1.25rem;
font-size: 0.9rem; font-size: 0.9rem;
color: #64748b; color: var(--c-text-muted);
text-align: center; text-align: center;
} }
.switch a { .switch a {
color: #1e40af; color: var(--c-primary);
font-weight: 500; font-weight: 500;
} }
</style> </style>

24
app/src/routes/(auth)/register/+page.svelte
View file

@ -99,13 +99,13 @@
h1 { h1 {
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 700; font-weight: 700;
color: #1e293b; color: var(--c-text);
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.subtitle { .subtitle {
font-size: 0.9rem; font-size: 0.9rem;
color: #64748b; color: var(--c-text-muted);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -119,25 +119,25 @@
label { label {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
color: #475569; color: var(--c-text-secondary);
} }
input { input {
padding: 0.65rem 0.85rem; padding: 0.65rem 0.85rem;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
transition: border-color .15s; transition: border-color .15s;
background: #fff; background: var(--c-bg-card);
} }
input:focus { input:focus {
outline: none; outline: none;
border-color: #1e40af; border-color: var(--c-primary);
} }
.error { .error {
color: #dc2626; color: var(--c-error);
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
@ -145,8 +145,8 @@
button { button {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background: #1e40af; background: var(--c-primary);
color: #fff; color: var(--c-bg-card);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
@ -156,7 +156,7 @@
} }
button:hover:not(:disabled) { button:hover:not(:disabled) {
background: #1d3a9e; background: var(--c-primary-dark);
} }
button:disabled { button:disabled {
@ -167,12 +167,12 @@
.switch { .switch {
margin-top: 1.25rem; margin-top: 1.25rem;
font-size: 0.9rem; font-size: 0.9rem;
color: #64748b; color: var(--c-text-muted);
text-align: center; text-align: center;
} }
.switch a { .switch a {
color: #1e40af; color: var(--c-primary);
font-weight: 500; font-weight: 500;
} }
</style> </style>

5
app/src/routes/+layout.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import '$lib/styles/theme.css';
let { children } = $props(); let { children } = $props();
</script> </script>
@ -31,8 +32,8 @@
:global(body) { :global(body) {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #1e293b; color: var(--c-text);
background: #f8fafc; background: var(--c-bg-subtle);
line-height: 1.6; line-height: 1.6;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

32
app/src/routes/invite/[token]/+page.svelte
View file

@ -120,7 +120,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1.5rem 1rem; padding: 1.5rem 1rem;
background: #f8fafc; background: var(--c-bg-subtle);
} }
.logo { .logo {
display: flex; display: flex;
@ -128,13 +128,13 @@
gap: 0.5rem; gap: 0.5rem;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 700; font-weight: 700;
color: #0f172a; color: var(--c-dark);
letter-spacing: -0.02em; letter-spacing: -0.02em;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.card { .card {
background: #fff; background: var(--c-bg-card);
border: 1px solid #e2e8f0; border: 1px solid var(--c-border);
border-radius: 16px; border-radius: 16px;
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
width: 100%; width: 100%;
@ -145,29 +145,29 @@
} }
.icon-ring { .icon-ring {
width: 3.5rem; height: 3.5rem; border-radius: 50%; width: 3.5rem; height: 3.5rem; border-radius: 50%;
background: #e0e7ff; display: flex; background: var(--c-primary-light); display: flex;
align-items: center; justify-content: center; align-items: center; justify-content: center;
font-size: 1.5rem; margin: 0 auto; font-size: 1.5rem; margin: 0 auto;
} }
.icon-ring.error { background: #fee2e2; } .icon-ring.error { background: var(--c-error-bg); }
h1 { font-size: 1.2rem; font-weight: 700; color: #1e293b; text-align: center; margin: 0; } h1 { font-size: 1.2rem; font-weight: 700; color: var(--c-text); text-align: center; margin: 0; }
.beschr { font-size: 0.9rem; color: #64748b; text-align: center; line-height: 1.55; margin: 0; } .beschr { font-size: 0.9rem; color: var(--c-text-muted); text-align: center; line-height: 1.55; margin: 0; }
.hint { color: #94a3b8; text-align: center; } .hint { color: var(--c-text-hint); text-align: center; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
label { font-size: 0.875rem; font-weight: 500; color: #475569; } label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
input { input {
padding: 0.65rem 0.85rem; padding: 0.65rem 0.85rem;
border: 1.5px solid #e2e8f0; border-radius: 8px; border: 1.5px solid var(--c-border); border-radius: 8px;
font-size: 1rem; background: #fff; width: 100%; box-sizing: border-box; font-size: 1rem; background: var(--c-bg-card); width: 100%; box-sizing: border-box;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
input:focus { outline: none; border-color: #1e40af; } input:focus { outline: none; border-color: var(--c-primary); }
.error { color: #dc2626; font-size: 0.875rem; margin: 0; } .error { color: var(--c-error); font-size: 0.875rem; margin: 0; }
.btn-primary { .btn-primary {
width: 100%; padding: 0.75rem; background: #1e40af; color: #fff; width: 100%; padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
cursor: pointer; margin-top: 0.25rem; transition: background 0.15s; cursor: pointer; margin-top: 0.25rem; transition: background 0.15s;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
</style> </style>

50
app/src/routes/onboarding/+page.svelte
View file

@ -174,7 +174,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1.5rem 1rem; padding: 1.5rem 1rem;
background: #f8fafc; background: var(--c-bg-subtle);
} }
.logo { .logo {
@ -183,14 +183,14 @@
gap: 0.5rem; gap: 0.5rem;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 700; font-weight: 700;
color: #0f172a; color: var(--c-dark);
letter-spacing: -0.02em; letter-spacing: -0.02em;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.card { .card {
background: #fff; background: var(--c-bg-card);
border: 1px solid #e2e8f0; border: 1px solid var(--c-border);
border-radius: 16px; border-radius: 16px;
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
width: 100%; width: 100%;
@ -207,10 +207,10 @@
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
border-radius: 50%; border-radius: 50%;
background: #e2e8f0; background: var(--c-border);
transition: background 0.3s; transition: background 0.3s;
} }
.dot.active { background: #1e40af; } .dot.active { background: var(--c-primary); }
.step { .step {
display: flex; display: flex;
@ -222,7 +222,7 @@
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;
border-radius: 50%; border-radius: 50%;
background: #e0e7ff; background: var(--c-primary-light);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -230,8 +230,8 @@
margin: 0 auto 0.25rem; margin: 0 auto 0.25rem;
} }
.icon-ring.success { .icon-ring.success {
background: #dcfce7; background: var(--c-success-bg);
color: #16a34a; color: var(--c-success);
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 700; font-weight: 700;
} }
@ -239,14 +239,14 @@
h1 { h1 {
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 700; font-weight: 700;
color: #1e293b; color: var(--c-text);
text-align: center; text-align: center;
margin: 0; margin: 0;
} }
.beschr { .beschr {
font-size: 0.9rem; font-size: 0.9rem;
color: #64748b; color: var(--c-text-muted);
text-align: center; text-align: center;
line-height: 1.55; line-height: 1.55;
margin: 0; margin: 0;
@ -258,20 +258,20 @@
gap: 0.3rem; gap: 0.3rem;
margin-bottom: 0.85rem; margin-bottom: 0.85rem;
} }
label { font-size: 0.875rem; font-weight: 500; color: #475569; } label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
input { input {
padding: 0.65rem 0.85rem; padding: 0.65rem 0.85rem;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
background: #fff; background: var(--c-bg-card);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
input:focus { outline: none; border-color: #1e40af; } input:focus { outline: none; border-color: var(--c-primary); }
.error { color: #dc2626; font-size: 0.875rem; margin: 0; } .error { color: var(--c-error); font-size: 0.875rem; margin: 0; }
.btn-row { .btn-row {
display: flex; display: flex;
@ -282,8 +282,8 @@
.btn-primary { .btn-primary {
flex: 1; flex: 1;
padding: 0.75rem; padding: 0.75rem;
background: #1e40af; background: var(--c-primary);
color: #fff; color: var(--c-bg-card);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
@ -291,16 +291,16 @@
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s;
} }
.btn-primary:hover:not(:disabled) { background: #1d3a9e; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { .btn-ghost {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: none; background: none;
border: 1.5px solid #e2e8f0; border: 1.5px solid var(--c-border);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
color: #64748b; color: var(--c-text-muted);
cursor: pointer; cursor: pointer;
} }
@ -310,7 +310,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
border: 1px solid #e2e8f0; border: 1px solid var(--c-border);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
margin: 0.25rem 0; margin: 0.25rem 0;
@ -320,7 +320,7 @@
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--c-bg);
} }
.naechstes li:last-child { border-bottom: none; } .naechstes li:last-child { border-bottom: none; }
.naechstes-icon { font-size: 1.1rem; flex-shrink: 0; } .naechstes-icon { font-size: 1.1rem; flex-shrink: 0; }
@ -329,6 +329,6 @@
flex-direction: column; flex-direction: column;
gap: 0.1rem; gap: 0.1rem;
} }
.naechstes strong { font-size: 0.875rem; color: #1e293b; } .naechstes strong { font-size: 0.875rem; color: var(--c-text); }
.naechstes span { font-size: 0.78rem; color: #94a3b8; } .naechstes span { font-size: 0.78rem; color: var(--c-text-hint); }
</style> </style>