clemens/kaffeeliste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design Anpassung

Browse Source
This commit is contained in:
Clemens Creutzburg
2026-04-07 15:29:00 +02:00
parent 9ceccb9226
commit 694f9b1fa0
10 changed files with 832 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files
saas-app/app/Modules/Central/Controllers/LandingController.php
+63 -14
View File
@@ -12,27 +12,76 @@ class LandingController
'view' => 'welcome',
'data' => [
'title' => 'Die Kaffeeliste',
'landingColumns' => [
'heroEyebrow' => 'Für Teams, Büros und Standorte',
'heroTitle' => 'Die Kaffeeliste für einen klaren Kaffee-Alltag.',
'heroCopy' => 'Mitglieder, Buchungen, Rollen und Hinweise laufen in einer klaren Oberfläche zusammen. Für Teams, die weniger Listen-Chaos und weniger Rückfragen wollen.',
'landingPreview' => [
['label' => 'Mitglieder', 'value' => '48 aktiv'],
['label' => 'Buchungen', 'value' => 'Heute 12'],
['label' => 'Support', 'value' => '2 offen'],
],
'landingFeatures' => [
[
'eyebrow' => 'Für Mitglieder',
'title' => 'Schnell im Alltag',
'copy' => 'Anmelden, Überblick sehen und direkt weitermachen.',
'title' => 'Dashboard',
'copy' => 'Wichtige Zahlen, Hinweise und offene Themen direkt auf der Startseite.',
],
[
'eyebrow' => 'Für Verantwortliche',
'title' => 'Einfach verwalten',
'copy' => 'Mitglieder, Bereiche und Abläufe an einem Ort.',
'title' => 'Mitglieder und Rollen',
'copy' => 'Zugänge, Zuständigkeiten und Bereiche sauber an einem Ort verwalten.',
],
[
'eyebrow' => 'Für Teams',
'title' => 'Klar für alle',
'copy' => 'Eine gemeinsame Kaffeeliste mit verständlicher Oberfläche.',
'title' => 'Buchungen',
'copy' => 'Einzahlungen, Verbrauch und Korrekturen nachvollziehbar dokumentieren.',
],
[
'title' => 'Support und Exporte',
'copy' => 'Rückfragen, Listen und Auswertungen ohne Wechsel zwischen mehreren Tools.',
],
],
'landingPreview' => [
['label' => 'Schneller Überblick', 'value' => 'Direkt sichtbar'],
['label' => 'Für Mitglieder', 'value' => 'Einfach nutzbar'],
['label' => 'Für Verantwortliche', 'value' => 'Klar verwaltet'],
'landingSteps' => [
[
'number' => '01',
'title' => 'Anmelden und Bereich öffnen',
'copy' => 'Ohne Installation direkt im Browser starten.',
],
[
'number' => '02',
'title' => 'Mitglieder und Zuständigkeiten ordnen',
'copy' => 'Rollen, Standorte und Zugänge klar strukturieren.',
],
[
'number' => '03',
'title' => 'Im Alltag damit arbeiten',
'copy' => 'Buchungen pflegen, Fragen klären und den Überblick behalten.',
],
],
'landingUseCases' => [
[
'title' => 'Für Mitglieder',
'copy' => 'Schnell sehen, was wichtig ist, ohne sich durch Verwaltungsthemen zu arbeiten.',
],
[
'title' => 'Für Verantwortliche',
'copy' => 'Buchungen prüfen, Bereiche steuern und Abläufe sauber organisieren.',
],
[
'title' => 'Für mehrere Standorte',
'copy' => 'Getrennte Bereiche bleiben übersichtlich, folgen aber derselben Logik.',
],
],
'landingProof' => [
[
'title' => 'Schnell verständlich',
'copy' => 'Die wichtigsten Bereiche sind sofort erkennbar und klar benannt.',
],
[
'title' => 'Im Browser und mobil',
'copy' => 'Die Oberfläche funktioniert ohne Installation auf Desktop und Handy.',
],
[
'title' => 'Für den Alltag gebaut',
'copy' => 'Kaffeeliste, Support, Buchungen und Verwaltung greifen sinnvoll ineinander.',
],
],
],
];
saas-app/public/app-support.php
+5 -5
View File
@@ -2838,12 +2838,12 @@ function app_handle_tenant_action(PDO $pdo, array $auth): void
function app_marketing_messages(): array
{
return [
'hero' => 'Die moderne Kaffeeliste für Teams, Standorte und gemeinsame Services.',
'subhero' => 'Zentrale Anmeldung, transparente Kontostände, Einzahlungen, Buchungen und Hinweise in einer webbasierten SaaS-Lösung, die sich leicht betreiben lässt.',
'hero' => 'Die Kaffeeliste für Teams, Standorte und gemeinsame Abläufe.',
'subhero' => 'Eine klare Weboberfläche für Anmeldung, Buchungen, Einzahlungen und Hinweise. Schnell verständlich, auch am Handy.',
'benefits' => [
'Ein Login für alle Mitgliedschaften statt verteilter Tenant-URLs.',
'Eine zentrale Verwaltung für Tenants, Zugänge und Betriebsübersicht.',
'Klare Abläufe für Buchungen, Einzahlungen, Hinweise und Mitgliederverwaltung.',
'Mitglieder melden sich ohne Umwege an.',
'Verantwortliche behalten Buchungen und Einzahlungen im Blick.',
'Standorte und Rollen bleiben sauber getrennt.',
],
];
}
saas-app/public/index.php
+184 -96
View File
@@ -237,15 +237,34 @@ foreach ($primaryNavItems as $item) {
}
$themeCss = app_tenant_theme_root_css($tenantSettings);
$isMarketingHome = $page === 'home' && $auth === null;
$landingColumns = [
['eyebrow' => 'Für Mitglieder', 'title' => 'Schnell starten', 'copy' => 'Einloggen und direkt weiter.'],
['eyebrow' => 'Für Verantwortliche', 'title' => 'Alles im Blick', 'copy' => 'Bereiche, Hinweise und Verwaltung an einem Ort.'],
['eyebrow' => 'Für Standorte', 'title' => 'Gemeinsam organisiert', 'copy' => 'Ein klarer Ablauf für Teams und Bereiche.'],
];
$heroEyebrow = 'Für Teams, Büros und Standorte';
$heroTitle = 'Die Kaffeeliste für einen klaren Kaffee-Alltag.';
$heroCopy = 'Mitglieder, Buchungen, Rollen und Hinweise laufen in einer klaren Oberfläche zusammen. Für Teams, die weniger Listen-Chaos und weniger Rückfragen wollen.';
$landingPreview = [
['label' => 'Start', 'value' => 'Klar'],
['label' => 'Team', 'value' => 'Gemeinsam'],
['label' => 'Zugang', 'value' => 'Direkt'],
['label' => 'Mitglieder', 'value' => '48 aktiv'],
['label' => 'Buchungen', 'value' => 'Heute 12'],
['label' => 'Support', 'value' => '2 offen'],
];
$landingFeatures = [
['title' => 'Dashboard', 'copy' => 'Wichtige Zahlen, Hinweise und offene Themen direkt auf der Startseite.'],
['title' => 'Mitglieder und Rollen', 'copy' => 'Zugänge, Zuständigkeiten und Bereiche sauber an einem Ort verwalten.'],
['title' => 'Buchungen', 'copy' => 'Einzahlungen, Verbrauch und Korrekturen nachvollziehbar dokumentieren.'],
['title' => 'Support und Exporte', 'copy' => 'Rückfragen, Listen und Auswertungen ohne Wechsel zwischen mehreren Tools.'],
];
$landingSteps = [
['number' => '01', 'title' => 'Anmelden und Bereich öffnen', 'copy' => 'Ohne Installation direkt im Browser starten.'],
['number' => '02', 'title' => 'Mitglieder und Zuständigkeiten ordnen', 'copy' => 'Rollen, Standorte und Zugänge klar strukturieren.'],
['number' => '03', 'title' => 'Im Alltag damit arbeiten', 'copy' => 'Buchungen pflegen, Fragen klären und den Überblick behalten.'],
];
$landingUseCases = [
['title' => 'Für Mitglieder', 'copy' => 'Schnell sehen, was wichtig ist, ohne sich durch Verwaltungsthemen zu arbeiten.'],
['title' => 'Für Verantwortliche', 'copy' => 'Buchungen prüfen, Bereiche steuern und Abläufe sauber organisieren.'],
['title' => 'Für mehrere Standorte', 'copy' => 'Getrennte Bereiche bleiben übersichtlich, folgen aber derselben Logik.'],
];
$landingProof = [
['title' => 'Schnell verständlich', 'copy' => 'Die wichtigsten Bereiche sind sofort erkennbar und klar benannt.'],
['title' => 'Im Browser und mobil', 'copy' => 'Die Oberfläche funktioniert ohne Installation auf Desktop und Handy.'],
['title' => 'Für den Alltag gebaut', 'copy' => 'Kaffeeliste, Support, Buchungen und Verwaltung greifen sinnvoll ineinander.'],
];
?><!DOCTYPE html>
@@ -255,59 +274,59 @@ $landingPreview = [
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Die Kaffeeliste</title>
<style>
:root{<?= $themeCss ?>--line:rgba(37,24,15,.14);--shadow:0 18px 40px rgba(37,24,15,.08);--radius:18px}
:root{<?= $themeCss ?>--line:rgba(143,158,191,.16);--line-strong:rgba(174,189,223,.26);--shadow:0 24px 64px rgba(1,6,18,.36);--shadow-soft:0 16px 34px rgba(1,6,18,.2);--radius:14px;--surface-0:#05070d;--surface-1:rgba(8,12,22,.84);--surface-2:rgba(13,18,31,.92);--surface-3:rgba(17,24,40,.96);--surface-soft:rgba(255,255,255,.04);--text-strong:#f4f7ff;--text-soft:rgba(219,228,248,.74);--text-faint:rgba(190,202,226,.52)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:"Aptos","Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,#f9f6ef 0%,var(--bg) 100%)}
body{margin:0;min-height:100vh;font-family:"Aptos","Segoe UI",sans-serif;color:var(--text-strong);background:radial-gradient(circle at top center,rgba(88,122,255,.2),transparent 26%),radial-gradient(circle at 18% 18%,rgba(var(--brand-rgb),.16),transparent 22%),linear-gradient(180deg,#05070d 0%,#0a0f1a 48%,#0d1320 100%)}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Georgia,serif;letter-spacing:-.02em}
.button,button{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid transparent;background:var(--brand);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.button.secondary,.button--ghost{background:#fff;color:var(--brand);border-color:rgba(var(--brand-rgb),.18)}
.page-shell{width:min(1320px,calc(100vw - 32px));margin:18px auto 34px;display:grid;gap:16px}
.site-header{position:sticky;top:18px;z-index:20}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}
.site-brand{display:flex;align-items:center;gap:14px;min-width:0}
.site-brand__mark{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-strong) 100%);color:#fff;font-weight:800;box-shadow:0 14px 28px rgba(var(--brand-rgb),.18)}
.site-brand__title{margin:0;font-size:1.1rem;color:var(--ink)}
.site-brand__subtitle{margin:2px 0 0;color:var(--muted);font-size:.92rem}
h1,h2,h3{font-family:"Inter Tight","Aptos","Segoe UI",sans-serif;letter-spacing:-.04em}
.button,button{display:inline-flex;align-items:center;justify-content:center;padding:.72rem 1rem;border-radius:10px;border:1px solid transparent;background:linear-gradient(135deg,#587aff 0%,#243a91 100%);color:#fff;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 12px 24px rgba(36,58,145,.22)}
.button.secondary,.button--ghost{background:rgba(255,255,255,.03);color:var(--text-strong);border-color:rgba(255,255,255,.12)}
.page-shell{width:100%;margin:0 0 34px;display:grid;gap:16px}
.site-header{position:sticky;top:0;z-index:30;width:100vw;margin-left:calc(50% - 50vw);margin-bottom:24px}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px;width:100%;margin:0;padding:0 24px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:rgba(8,10,18,.82);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.site-brand{display:flex;align-items:center;gap:12px;min-width:0}
.site-brand__mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#587aff 0%,#243a91 100%);color:#fff;font-weight:800;box-shadow:none}
.site-brand__title{margin:0;font-size:1rem;color:var(--text-strong);letter-spacing:-.03em}
.site-brand__subtitle{margin:2px 0 0;color:var(--text-soft);font-size:.88rem}
.site-nav,.site-actions,.actions,.context{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.site-nav__link{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:700}
.site-nav__link:hover{text-decoration:none;color:var(--brand);background:rgba(255,255,255,.82);border-color:rgba(var(--brand-rgb),.14)}
.site-nav__link.active{background:rgba(var(--brand-rgb),.10);color:var(--brand);border-color:rgba(var(--brand-rgb),.18)}
.site-nav__link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 .34rem;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text-soft);font-size:.96rem;font-weight:600}
.site-nav__link:hover{text-decoration:none;color:var(--text-strong);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.site-nav__link.active{background:rgba(255,255,255,.08);color:var(--text-strong);border-color:rgba(255,255,255,.12)}
.site-mobile{display:none;position:relative}
.site-mobile[open]{z-index:20}
.site-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:12px 14px;border-radius:16px;border:1px solid rgba(var(--brand-rgb),.12);background:#fff;color:var(--brand);font-weight:700}
.site-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;min-height:38px;padding:.45rem .72rem;border-radius:10px;border:1px solid var(--line-strong);background:rgba(255,255,255,.04);color:var(--text-strong);font-weight:600}
.site-toggle::-webkit-details-marker{display:none}
.site-toggle::before{content:"";display:block;width:18px;height:2px;border-radius:999px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.site-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(320px,calc(100vw - 32px));padding:14px;border-radius:18px;border:1px solid var(--line);background:#fffdf9;box-shadow:var(--shadow)}
.site-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(320px,calc(100vw - 32px));padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface-3);box-shadow:var(--shadow)}
.site-stack{display:grid;gap:10px}
.site-stack .site-nav__link{justify-content:flex-start;background:rgba(255,255,255,.78);border-color:rgba(37,24,15,.08);color:var(--ink)}
.site-stack .site-nav__link{justify-content:flex-start;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:var(--text-strong)}
.site-footer-actions{display:flex;justify-content:flex-end;margin-top:12px}
.hero,.card,.alert{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.sidebar__eyebrow,.eyebrow{display:inline-block;color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:800}
.hero,.card,.alert{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);box-shadow:var(--shadow)}
.sidebar__eyebrow,.eyebrow{display:inline-block;color:#8aa0d0;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:800}
.sidebar__eyebrow{margin:0}
.sidebar__title{margin:0;font-size:1.32rem;line-height:1.04}
.sidebar__subtitle,.muted,p{color:var(--muted)}
.content{min-width:0;display:grid;gap:16px}
.hero,.card{padding:20px}
.hero{margin-bottom:0;background:rgba(255,255,255,.9)}
.sidebar__subtitle,.muted,p{color:var(--text-soft)}
.content{width:min(1320px,calc(100vw - 32px));margin:0 auto;min-width:0;display:grid;gap:16px}
.hero,.card{padding:18px}
.hero{margin-bottom:0;background:linear-gradient(135deg,rgba(14,20,34,.98),rgba(10,15,26,.96))}
.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 10px}h2{font-size:1.2rem;margin:0 0 10px}h3{font-size:1rem;margin:0 0 8px}p{margin:0;line-height:1.55}
.metric{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}.metric strong{display:block;font-size:1.55rem;margin-bottom:6px}
.list{margin:14px 0 0;padding-left:18px;color:var(--muted);line-height:1.7}
.metric{padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04)}.metric strong{display:block;font-size:1.55rem;margin-bottom:6px}
.list{margin:14px 0 0;padding-left:18px;color:var(--text-soft);line-height:1.7}
.alert{padding:16px 18px;margin-bottom:0}.alert-success{background:rgba(var(--brand-rgb),.08)}.alert-warning{background:rgba(var(--accent-rgb),.1)}.alert-error{background:rgba(154,31,31,.1)}.alert-info{background:rgba(var(--brand-rgb),.08)}
.badge{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font-size:.86rem;font-weight:700}
.badge-neutral{background:rgba(var(--brand-rgb),.08);color:var(--brand)}.badge-success{background:rgba(var(--brand-rgb),.12);color:var(--brand)}.badge-warning{background:rgba(var(--accent-rgb),.14);color:#8c6500}
.table{overflow-x:auto}.table table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
form.grid{grid-template-columns:repeat(2,minmax(0,1fr))}label{display:flex;flex-direction:column;gap:8px;font-weight:700}input,select,textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(37,24,15,.15);font:inherit;background:#fff;color:var(--ink)}textarea{min-height:120px}
.footer{margin-top:0;text-align:center;color:var(--muted);font-size:.92rem}
.badge-neutral{background:rgba(88,122,255,.12);color:#d9e2ff}.badge-success{background:rgba(88,122,255,.12);color:#d9e2ff}.badge-warning{background:rgba(224,154,70,.14);color:#ffd7a1}
.table{overflow-x:auto}.table table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);background:rgba(255,255,255,.03)}
form.grid{grid-template-columns:repeat(2,minmax(0,1fr))}label{display:flex;flex-direction:column;gap:8px;font-weight:700}input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);font:inherit;background:rgba(255,255,255,.04);color:var(--text-strong)}textarea{min-height:120px}
.footer{margin-top:0;text-align:center;color:var(--text-faint);font-size:.92rem}
.section-mini{display:grid;gap:10px}
.section-mini__title{margin:0;font-size:1rem;color:var(--ink)}
.section-mini__copy{margin:0;color:var(--muted)}
.section-mini__title{margin:0;font-size:1rem;color:var(--text-strong)}
.section-mini__copy{margin:0;color:var(--text-soft)}
body.landing-preview{background:radial-gradient(circle at top center,rgba(88,122,255,.22),transparent 28%),radial-gradient(circle at 20% 20%,rgba(42,72,170,.18),transparent 24%),linear-gradient(180deg,#05070d 0%,#0a0f1a 52%,#0d1320 100%);color:#f4f7ff}
body.landing-preview h1,body.landing-preview h2,body.landing-preview h3{font-family:"Inter Tight","Aptos","Segoe UI",sans-serif;letter-spacing:-.04em}
.marketing-shell{min-height:100vh;padding:0 0 92px;display:grid;gap:12px}
.marketing-main{width:min(1240px,calc(100vw - 48px));margin:0 auto}
.marketing-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;height:88px;min-height:88px;width:100%;margin:0 0 20px;padding:0 18px;border:0;border-bottom:1px solid rgba(137,154,188,.18);border-radius:0;background:rgba(8,10,18,.82);box-shadow:none;backdrop-filter:blur(16px)}
.marketing-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:14px;height:88px;min-height:88px;width:100vw;margin-left:calc(50% - 50vw);margin-bottom:20px;padding:0 18px;border:0;border-bottom:1px solid rgba(137,154,188,.18);border-radius:0;background:rgba(8,10,18,.82);box-shadow:none;backdrop-filter:blur(16px)}
.marketing-brand{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.marketing-brand__mark{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#587aff 0%,#243a91 100%);color:#fff;font-size:1rem;font-weight:800;box-shadow:none}
.marketing-brand__title{margin:0;font-size:1.08rem;line-height:1;color:#f4f7ff}
@@ -327,36 +346,42 @@ $landingPreview = [
.marketing-mobile__stack{display:grid;gap:8px}
.marketing-mobile__stack .marketing-nav__link{justify-content:flex-start;padding:.55rem .7rem;background:rgba(255,255,255,.04);border-color:rgba(201,214,255,.1)}
.marketing-mobile__footer{margin-top:12px;display:flex;justify-content:flex-end}
.landing-hero{width:min(1240px,calc(100vw - 48px));margin:0 auto;padding-top:12px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:40px;align-items:start}
.landing-copy__eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:#8aa0d0}
.landing-wrap{display:grid;gap:28px;padding:8px 0 12px}
.landing-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr);gap:36px;align-items:start;padding-top:8px}
.landing-copy{display:grid;gap:12px}
.landing-copy__eyebrow{margin:0;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:#8aa0d0}
.landing-copy h1{margin:0;font-size:clamp(3.2rem,7vw,6.4rem);line-height:.9;letter-spacing:-.06em;color:#f4f7ff}
.landing-copy p{margin:14px 0 0;color:rgba(219,228,248,.72);font-size:1.05rem;max-width:30rem;line-height:1.65}
.landing-actions{margin-top:24px}
.landing-visual,.landing-callout{border:1px solid rgba(163,183,255,.12);border-radius:20px;background:rgba(14,20,34,.86);box-shadow:0 16px 40px rgba(2,5,12,.34)}
.landing-visual{padding:20px;display:grid;gap:12px}
.landing-visual__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(163,183,255,.12)}
.landing-visual__title{margin:0;font-size:1.1rem;color:#f4f7ff}
.landing-visual__stack{display:grid;gap:12px}
.landing-visual__row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);color:rgba(216,225,246,.72);font-weight:600}
.landing-visual__row strong{color:#f4f7ff}
.landing-columns{width:min(1240px,calc(100vw - 48px));margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid rgba(163,183,255,.12);border-bottom:1px solid rgba(163,183,255,.12)}
.landing-column{padding:24px 18px}
.landing-column + .landing-column{border-left:1px solid rgba(163,183,255,.12)}
.landing-column__eyebrow{margin:0 0 10px;color:#8aa0d0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.landing-column h2{margin:0 0 10px;font-size:1.45rem;color:#f4f7ff}
.landing-column p{margin:0;max-width:22rem;color:rgba(219,228,248,.72)}
.landing-callout{width:min(1240px,calc(100vw - 48px));margin:0 auto;padding:24px 26px}
.landing-callout__eyebrow{margin:0 0 8px;color:#8aa0d0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.landing-callout h2{margin:0 0 10px;font-size:2rem;color:#f4f7ff}
.landing-callout p{margin:0;max-width:36rem;color:rgba(217,226,246,.8)}
.landing-copy__lead{margin:0;max-width:34rem;font-size:1.08rem;line-height:1.65;color:rgba(219,228,248,.74)}
.landing-copy__note{margin:0;max-width:32rem;color:rgba(193,205,232,.78);font-size:.96rem}
.landing-actions{margin-top:10px}
.landing-preview,.landing-section,.landing-callout{border:1px solid rgba(163,183,255,.12);border-radius:20px;background:rgba(14,20,34,.86);box-shadow:0 16px 40px rgba(2,5,12,.34)}
.landing-preview{padding:20px;display:grid;gap:12px}
.landing-preview__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(163,183,255,.12)}
.landing-preview__title{margin:0;font-size:1.1rem;color:#f4f7ff}
.landing-preview__line{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);color:rgba(216,225,246,.74);font-weight:600}
.landing-preview__line strong{color:#f4f7ff}
.landing-preview__stack{display:grid;gap:12px}
.landing-section{padding:24px 26px}
.landing-section__head{display:grid;gap:8px;margin-bottom:18px}
.landing-section__eyebrow{margin:0;color:#8aa0d0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.landing-section__title{margin:0;font-size:1.9rem;color:#f4f7ff}
.landing-section__lead{margin:0;max-width:48rem;color:rgba(217,226,246,.8)}
.landing-feature-grid,.landing-step-grid,.landing-use-grid,.landing-proof-grid{display:grid;gap:12px}
.landing-feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.landing-step-grid,.landing-use-grid,.landing-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.landing-card{padding:18px;border-radius:18px;border:1px solid rgba(163,183,255,.12);background:rgba(255,255,255,.035)}
.landing-card__number{display:inline-flex;align-items:center;justify-content:center;min-width:2.15rem;height:2.15rem;margin-bottom:14px;border-radius:999px;background:rgba(88,122,255,.16);color:#dfe8ff;font-size:.78rem;font-weight:800;letter-spacing:.06em}
.landing-card h3{margin:0 0 8px;font-size:1.12rem;color:#f4f7ff}
.landing-card p{margin:0;color:rgba(219,228,246,.74)}
.landing-callout{padding:24px 26px}
.landing-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:20px;margin-top:22px;border-top:1px solid rgba(163,183,255,.12)}
.landing-cta__copy{display:grid;gap:6px}
.landing-cta__copy strong{font-size:1.05rem;color:#f4f7ff}
.landing-cta__copy span{color:rgba(217,226,246,.72)}
.marketing-footer{position:fixed;left:0;right:0;bottom:0;z-index:25;margin-top:0;padding:10px 24px;border-top:1px solid rgba(137,154,188,.14);background:rgba(8,10,18,.88);backdrop-filter:blur(18px);color:rgba(209,217,235,.68);font-size:.92rem}
.marketing-footer__inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;width:min(1240px,calc(100% - 48px));margin:0 auto}
@media(max-width:960px){.marketing-main,.landing-hero,.landing-columns,.landing-callout{width:calc(100vw - 24px)}.marketing-bar{height:72px;min-height:72px;margin:0 0 16px;padding:0 12px}.marketing-nav,.marketing-actions{display:none}.marketing-mobile{display:block}.landing-hero,.landing-columns{grid-template-columns:1fr}.landing-hero{gap:24px;padding-top:0}.landing-column{padding:20px 0}.landing-column + .landing-column{border-left:0;border-top:1px solid rgba(163,183,255,.12)}.landing-callout{padding:20px}.marketing-shell{padding:0 0 88px}.marketing-footer{padding:10px 12px}.marketing-footer__inner{width:100%}}
@media(max-width:960px){.page-shell{width:min(100vw - 20px,1460px)}.site-header__inner{align-items:flex-start;padding:14px 16px}.site-nav{display:none}.site-mobile{display:block}.grid-2,.grid-3,.grid-4,form.grid{grid-template-columns:1fr}.table table{min-width:0}}
@media(max-width:960px){.marketing-main,.landing-hero,.landing-section,.landing-callout{width:calc(100vw - 24px)}.marketing-bar{height:72px;min-height:72px;margin-bottom:16px;padding:0 12px}.marketing-nav,.marketing-actions{display:none}.marketing-mobile{display:block}.landing-hero,.landing-feature-grid,.landing-step-grid,.landing-use-grid,.landing-proof-grid{grid-template-columns:1fr}.landing-hero{gap:24px;padding-top:0}.landing-section,.landing-callout{padding:20px}.marketing-shell{padding:0 0 88px}.marketing-footer{padding:10px 12px}.marketing-footer__inner{width:100%}}
@media(max-width:960px){.site-header{margin-bottom:20px}.site-header__inner{min-height:68px;width:100%;align-items:center;padding:0 16px}.site-nav{display:none}.site-mobile{display:block}.content{width:min(100vw - 20px,1460px)}.grid-2,.grid-3,.grid-4,form.grid{grid-template-columns:1fr}.table table{min-width:0}}
@media(min-width:961px){.site-mobile{display:none}}
</style>
</head>
@@ -400,25 +425,26 @@ $landingPreview = [
<section class="alert alert-<?= h((string) ($flash['type'] ?? 'info')) ?>" style="width:min(1240px,calc(100vw - 48px));margin:0 auto;"><?= h((string) ($flash['message'] ?? '')) ?></section>
<?php endif; ?>
<section class="marketing-hero landing-hero">
<section class="landing-hero">
<div class="landing-copy">
<p class="landing-copy__eyebrow">Die Kaffeeliste</p>
<h1>Kaffee im Team. Klar organisiert.</h1>
<p>Für Mitglieder, Verantwortliche und Standorte.</p>
<p class="landing-copy__eyebrow"><?= h($heroEyebrow) ?></p>
<h1><?= h($heroTitle) ?></h1>
<p class="landing-copy__lead"><?= h($heroCopy) ?></p>
<p class="landing-copy__note">Für Mitglieder, Verantwortliche und Standorte. Mobil nutzbar, klar geführt und ohne unnötige Umwege.</p>
<div class="landing-actions">
<a class="button" href="/login/">Anmelden</a>
<a class="button secondary" href="#bereiche">Mehr erfahren</a>
<a class="button secondary" href="#funktionen">Funktionen ansehen</a>
</div>
</div>
<aside class="landing-visual" aria-label="Produktvorschau">
<div class="landing-visual__top">
<h2 class="landing-visual__title">Übersicht</h2>
<aside class="landing-preview" aria-label="Vorschau">
<div class="landing-preview__header">
<h2 class="landing-preview__title">Übersicht</h2>
<span>Heute</span>
</div>
<div class="landing-visual__stack">
<div class="landing-preview__stack">
<?php foreach ($landingPreview as $item): ?>
<div class="landing-visual__row">
<div class="landing-preview__line">
<span><?= h((string) ($item['label'] ?? '')) ?></span>
<strong><?= h((string) ($item['value'] ?? '')) ?></strong>
</div>
@@ -427,26 +453,88 @@ $landingPreview = [
</aside>
</section>
<section class="landing-columns" id="bereiche">
<?php foreach ($landingColumns as $column): ?>
<article class="landing-column">
<p class="landing-column__eyebrow"><?= h((string) ($column['eyebrow'] ?? '')) ?></p>
<h2><?= h((string) ($column['title'] ?? '')) ?></h2>
<p><?= h((string) ($column['copy'] ?? '')) ?></p>
</article>
<?php endforeach; ?>
<section class="landing-section" id="funktionen" aria-label="Funktionen">
<div class="landing-section__head">
<p class="landing-section__eyebrow">Produkt</p>
<h2 class="landing-section__title">Was die Kaffeeliste im Alltag abdeckt</h2>
<p class="landing-section__lead">Vom Überblick bis zur Auswertung bleibt alles in einer Oberfläche, die sofort verständlich wirkt.</p>
</div>
<div class="landing-feature-grid">
<?php foreach ($landingFeatures as $feature): ?>
<article class="landing-card">
<h3><?= h((string) ($feature['title'] ?? '')) ?></h3>
<p><?= h((string) ($feature['copy'] ?? '')) ?></p>
</article>
<?php endforeach; ?>
</div>
</section>
<section class="landing-callout marketing-cta">
<p class="landing-callout__eyebrow">Einfach im Alltag</p>
<h2>Ein gemeinsamer Ort für die Kaffeeliste.</h2>
<p>Weniger suchen. Weniger erklären. Klar durch den Tag.</p>
<section class="landing-section" id="ablauf" aria-label="Ablauf">
<div class="landing-section__head">
<p class="landing-section__eyebrow">Ablauf</p>
<h2 class="landing-section__title">So funktioniert es</h2>
<p class="landing-section__lead">Vom ersten Login bis zum täglichen Einsatz bleibt der Weg kurz und nachvollziehbar.</p>
</div>
<div class="landing-step-grid">
<?php foreach ($landingSteps as $step): ?>
<article class="landing-card">
<span class="landing-card__number"><?= h((string) ($step['number'] ?? '')) ?></span>
<h3><?= h((string) ($step['title'] ?? '')) ?></h3>
<p><?= h((string) ($step['copy'] ?? '')) ?></p>
</article>
<?php endforeach; ?>
</div>
</section>
<section class="landing-section" id="zielgruppen" aria-label="Zielgruppen">
<div class="landing-section__head">
<p class="landing-section__eyebrow">Für wen</p>
<h2 class="landing-section__title">Für Mitglieder, Verantwortliche und Standorte</h2>
<p class="landing-section__lead">Jede Rolle bekommt genau die Informationen und Wege, die sie im Alltag braucht.</p>
</div>
<div class="landing-use-grid">
<?php foreach ($landingUseCases as $useCase): ?>
<article class="landing-card">
<h3><?= h((string) ($useCase['title'] ?? '')) ?></h3>
<p><?= h((string) ($useCase['copy'] ?? '')) ?></p>
</article>
<?php endforeach; ?>
</div>
</section>
<section class="landing-section" id="vertrauen" aria-label="Vertrauen">
<div class="landing-section__head">
<p class="landing-section__eyebrow">Warum es passt</p>
<h2 class="landing-section__title">Klar genug für den Alltag, ruhig genug für gutes Produktdesign</h2>
<p class="landing-section__lead">Reduziert gestaltet, aber mit genug Tiefe für Teams, die mehr als nur eine einfache Liste brauchen.</p>
</div>
<div class="landing-proof-grid">
<?php foreach ($landingProof as $item): ?>
<article class="landing-card">
<h3><?= h((string) ($item['title'] ?? '')) ?></h3>
<p><?= h((string) ($item['copy'] ?? '')) ?></p>
</article>
<?php endforeach; ?>
</div>
</section>
<section class="landing-callout">
<p class="landing-section__eyebrow">Zum Start</p>
<h2>Ein gemeinsamer Einstieg für Teams, die Kaffee einfach organisieren wollen.</h2>
<p>Klar im Aufbau, direkt in der Nutzung und bereit für den täglichen Einsatz im Team.</p>
<div class="landing-cta">
<div class="landing-cta__copy">
<strong>Bereit für den Start?</strong>
<span>Direkt zur Anmeldung.</span>
<strong>Direkt loslegen</strong>
<span>Ohne Umwege zur Anmeldung.</span>
</div>
<div class="actions">
<a class="button" href="/login/">Anmelden</a>
<a class="button secondary" href="#funktionen">Funktionen ansehen</a>
</div>
<a class="button" href="/login/">Anmelden</a>
</div>
</section>
@@ -574,7 +662,7 @@ $landingPreview = [
<article class="card">
<?php if ($loginStep === 'choose-tenant'): ?>
<div class="eyebrow">Schritt 2</div>
<h2>Bereich waehlen</h2>
<h2>Bereich wählen</h2>
<div class="stack">
<?php foreach (($loginState['memberships'] ?? []) as $membership): ?>
<form method="post" action="/login/" class="card">
@@ -614,7 +702,7 @@ $landingPreview = [
<h2>Wenn es nicht direkt klappt</h2>
<ul class="list">
<li>Prüfe zuerst, ob du die richtige berufliche E-Mail-Adresse verwendest.</li>
<li>Wenn du in mehreren Bereichen arbeitest, waehle den passenden aus.</li>
<li>Wenn du in mehreren Bereichen arbeitest, wähle den passenden aus.</li>
<li>Falls kein Zugang gefunden wird, brauchst du meist nur eine Einladung oder den Kontakt zur verantwortlichen Person.</li>
</ul>
</article>
@@ -661,7 +749,7 @@ $landingPreview = [
<?php endif; ?>
<?php elseif ($page === 'dashboard'): ?>
<section class="hero">
<div class="eyebrow">Uebersicht</div>
<div class="eyebrow">Übersicht</div>
<h1><?= h((string) $auth['tenant_name']) ?></h1>
<p>Alles Wichtige auf einen Blick.</p>
<?php if (app_is_platform_admin($auth) && app_admin_user() !== null): ?>
@@ -687,7 +775,7 @@ $landingPreview = [
<div class="eyebrow">Heute</div>
<h2>Schnell weiter</h2>
<div class="section-mini">
<p class="section-mini__copy">Mitglieder, Buchungen und weitere Bereiche oeffnest du direkt ueber das Menue.</p>
<p class="section-mini__copy">Mitglieder, Buchungen und weitere Bereiche öffnest du direkt über das Menü.</p>
</div>
</article>
<article class="card">
@@ -732,14 +820,14 @@ $landingPreview = [
<h2>Dein Bereich</h2>
<ul class="list">
<li>Hier siehst du deinen Kontostand, letzte Buchungen und aktuelle Hinweise.</li>
<li>Weitere Bereiche findest du direkt im Menue.</li>
<li>Weitere Bereiche findest du direkt im Menü.</li>
<li>Wenn dir etwas fehlt, wende dich an den Betreiber deines Bereichs.</li>
</ul>
</article>
<article class="card">
<div class="eyebrow">Naechster Schritt</div>
<div class="eyebrow">Nächster Schritt</div>
<h2>Direkt weiter</h2>
<p>Nutze das Menue fuer den naechsten Bereich.</p>
<p>Nutze das Menü für den nächsten Bereich.</p>
</article>
<?php endif; ?>
</section>
saas-app/resources/views/auth/login.blade.php
+5 -5
View File
@@ -14,7 +14,7 @@
'message' => 'Auswahl vor dem Einstieg.',
'matches' => [
['name' => 'Werk Berlin', 'domain' => 'berlin.kaffeeliste.de', 'login_mode' => 'oidc-first'],
['name' => 'Werk Koeln', 'domain' => 'koeln.kaffeeliste.de', 'login_mode' => 'oidc-first'],
['name' => 'Werk Köln', 'domain' => 'koeln.kaffeeliste.de', 'login_mode' => 'oidc-first'],
],
],
];
@@ -27,7 +27,7 @@
<p class="hero__kicker">Anmeldung</p>
<h2 class="hero__title">Einfach einsteigen.</h2>
<p class="hero__lead">
E-Mail eingeben, kurz pruefen, weitermachen.
E-Mail eingeben, kurz prüfen, weitermachen.
</p>
</div>
<div class="hero__meta">
@@ -80,7 +80,7 @@
<p class="timeline__meta">Die Anmeldung startet mit der Adresse.</p>
</div>
<div class="timeline__item">
<p class="timeline__title">2. Pruefen</p>
<p class="timeline__title">2. Prüfen</p>
<p class="timeline__meta">Der passende Zugang wird zugeordnet.</p>
</div>
<div class="timeline__item">
@@ -128,11 +128,11 @@
<article class="card">
<p class="card__eyebrow">Kein Treffer</p>
<h3>Sauberer Rueckweg</h3>
<h3>Sauberer Rückweg</h3>
<p class="muted">Wenn keine Zuordnung passt, geht es klar weiter statt im Leeren zu enden.</p>
<div class="callout" style="margin-top: 16px;">
<strong>Kontakt oder Einladung</strong>
Die Anmeldung zeigt dann den naechsten klaren Schritt.
Die Anmeldung zeigt dann den nächsten klaren Schritt.
</div>
</article>
</section>
saas-app/resources/views/dashboard/index.blade.php
+8 -8
View File
@@ -6,7 +6,7 @@
<section class="hero hero--split">
<div class="hero__content">
<div>
<p class="hero__kicker">Uebersicht</p>
<p class="hero__kicker">Übersicht</p>
<h2 class="hero__title">Dein Bereich</h2>
<p class="hero__lead">
Die wichtigsten Werte auf einen Blick.
@@ -23,12 +23,12 @@
<article class="card metric metric--compact">
<p class="metric__label">Status</p>
<div class="metric__value">OK</div>
<p class="muted">Alles laeuft normal.</p>
<p class="muted">Alles läuft normal.</p>
</article>
<article class="card metric metric--compact">
<p class="metric__label">Letzte Aktivitaet</p>
<p class="metric__label">Letzte Aktivität</p>
<div class="metric__value">Heute</div>
<p class="muted">Neueste Aenderungen im Bereich.</p>
<p class="muted">Neueste Änderungen im Bereich.</p>
</article>
</aside>
</section>
@@ -52,7 +52,7 @@
<article class="card metric">
<p class="metric__label">Letzte Buchung</p>
<div class="metric__value">Heute</div>
<p class="muted">Aktuelle Aktivitaet.</p>
<p class="muted">Aktuelle Aktivität.</p>
</article>
</section>
@@ -60,7 +60,7 @@
<article class="table-card">
<div class="table-card__header">
<div>
<p class="card__eyebrow">Aktivitaet</p>
<p class="card__eyebrow">Aktivität</p>
<h3>Letzte Buchungen</h3>
</div>
<span class="pill">Live</span>
@@ -101,7 +101,7 @@
<article class="panel">
<h3>Bereiche</h3>
<p class="muted">Im Menue liegen die zentralen Arbeitsbereiche.</p>
<p class="muted">Im Menü liegen die zentralen Arbeitsbereiche.</p>
<div class="timeline timeline--tight">
<div class="timeline__item">
<p class="timeline__title">Mitglieder</p>
@@ -117,7 +117,7 @@
</div>
</div>
<div class="note" style="margin-top: 18px;">
Die wichtigsten Zahlen sind hier, der Rest bleibt im Menue.
Die wichtigsten Zahlen sind hier, der Rest bleibt im Menü.
</div>
</article>
</section>
saas-app/resources/views/layouts/app.blade.php
+149 -126
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<meta name="color-scheme" content="dark">
<title>@yield('page_title', $title ?? 'Die Kaffeeliste')</title>
@php
$layoutAuth = $auth ?? (function_exists('app_auth_user') ? app_auth_user() : null);
@@ -45,14 +45,22 @@
<style>
:root {
{!! $layoutThemeCss !!}
--line: rgba(44, 32, 23, 0.14);
--line-strong: rgba(44, 32, 23, 0.2);
--shadow: 0 18px 42px rgba(68, 48, 34, 0.08);
--shadow-soft: 0 12px 26px rgba(68, 48, 34, 0.05);
--radius-xl: 24px;
--radius-lg: 18px;
--line: rgba(143, 158, 191, 0.16);
--line-strong: rgba(174, 189, 223, 0.26);
--shadow: 0 24px 64px rgba(1, 6, 18, 0.36);
--shadow-soft: 0 16px 34px rgba(1, 6, 18, 0.2);
--radius-xl: 20px;
--radius-lg: 14px;
--sidebar-width: 292px;
--content-width: 1260px;
--surface-0: #05070d;
--surface-1: rgba(8, 12, 22, 0.84);
--surface-2: rgba(13, 18, 31, 0.92);
--surface-3: rgba(17, 24, 40, 0.96);
--surface-soft: rgba(255, 255, 255, 0.04);
--text-strong: #f4f7ff;
--text-soft: rgba(219, 228, 248, 0.74);
--text-faint: rgba(190, 202, 226, 0.52);
}
* { box-sizing: border-box; }
@@ -60,21 +68,22 @@
body {
margin: 0;
min-height: 100vh;
color: var(--text);
color: var(--text-strong);
background:
radial-gradient(circle at top left, rgba(var(--brand-rgb), 0.08), transparent 32%),
linear-gradient(180deg, #f8f1e6 0%, var(--bg) 100%);
font-family: "Trebuchet MS", "Aptos", "Segoe UI", sans-serif;
radial-gradient(circle at top center, rgba(88, 122, 255, 0.2), transparent 26%),
radial-gradient(circle at 18% 18%, rgba(var(--brand-rgb), 0.16), transparent 22%),
linear-gradient(180deg, #05070d 0%, #0a0f1a 48%, #0d1320 100%);
font-family: "Aptos", "Segoe UI", sans-serif;
line-height: 1.55;
}
h1, h2, h3, h4, .hero__title, .brand__title {
font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
letter-spacing: -0.02em;
font-family: "Inter Tight", "Aptos", "Segoe UI", sans-serif;
letter-spacing: -0.04em;
}
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; }
.app-shell {
@@ -82,7 +91,7 @@
margin: 14px auto;
min-height: calc(100vh - 28px);
display: grid;
gap: 16px;
gap: 14px;
}
.brand {
@@ -93,52 +102,62 @@
}
.brand__mark {
width: 42px;
height: 42px;
border-radius: 14px;
width: 38px;
height: 38px;
border-radius: 10px;
display: grid;
place-items: center;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, var(--brand) 0%, #115e59 55%, var(--accent) 100%);
box-shadow: 0 12px 26px rgba(45, 106, 79, 0.2);
background: linear-gradient(135deg, #587aff 0%, #243a91 100%);
box-shadow: none;
}
.brand__text { display: grid; gap: 3px; min-width: 0; }
.brand__title { margin: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: 0.01em; }
.brand__subtitle { margin: 0; color: var(--muted); font-size: 0.92rem; }
.brand__title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; }
.brand__subtitle { margin: 0; color: var(--text-soft); font-size: 0.88rem; }
.brand--link { color: inherit; text-decoration: none; }
.brand--link:hover { text-decoration: none; }
.site-shell {
min-height: 100vh;
padding: 14px 0 24px;
padding: 0 0 24px;
}
.site-header,
.site-main,
.app-footer {
width: 100%;
}
.site-main {
width: min(var(--content-width), calc(100% - 28px));
margin: 0 auto;
}
.site-header {
position: sticky;
top: 14px;
top: 0;
z-index: 30;
margin-bottom: 18px;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-bottom: 24px;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: 22px;
background: rgba(255, 251, 244, 0.92);
gap: 16px;
width: 100%;
min-height: 74px;
margin: 0;
padding: 0 24px;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: rgba(8, 10, 18, 0.82);
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
}
.top-nav {
@@ -152,26 +171,27 @@
.top-nav__link {
display: inline-flex;
align-items: center;
padding: 0.62rem 0.92rem;
border-radius: 999px;
min-height: 34px;
padding: 0 0.34rem;
border-radius: 6px;
border: 1px solid transparent;
color: var(--muted);
font-size: 0.92rem;
font-weight: 700;
color: var(--text-soft);
font-size: 0.96rem;
font-weight: 600;
white-space: nowrap;
}
.top-nav__link:hover {
text-decoration: none;
color: var(--brand-strong);
background: rgba(255, 255, 255, 0.78);
border-color: rgba(var(--brand-rgb), 0.12);
color: var(--text-strong);
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
}
.top-nav__link.is-active {
color: var(--brand-strong);
background: rgba(var(--brand-rgb), 0.08);
border-color: rgba(var(--brand-rgb), 0.14);
color: var(--text-strong);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
}
.site-actions {
@@ -197,14 +217,14 @@
gap: 8px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--bg-soft);
background: var(--surface-soft);
padding: 0.42rem 0.75rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--brand-strong);
color: var(--text-strong);
}
.badge--solid { background: var(--brand); color: #fff; border-color: transparent; }
.badge--solid { background: linear-gradient(135deg, #587aff 0%, #243a91 100%); color: #fff; border-color: transparent; }
.sidebar-nav { display: grid; gap: 6px; align-content: start; }
@@ -282,13 +302,14 @@
gap: 10px;
list-style: none;
cursor: pointer;
padding: 0.78rem 1rem;
border-radius: 999px;
min-height: 38px;
padding: 0.45rem 0.72rem;
border-radius: 10px;
border: 1px solid var(--line-strong);
background: rgba(255, 255, 255, 0.94);
color: var(--text);
font-size: 0.94rem;
font-weight: 700;
background: rgba(255, 255, 255, 0.04);
color: var(--text-strong);
font-size: 0.92rem;
font-weight: 600;
}
.mobile-nav__toggle::-webkit-details-marker { display: none; }
@@ -309,9 +330,9 @@
top: calc(100% + 12px);
width: min(320px, calc(100vw - 32px));
padding: 16px;
border-radius: 24px;
border-radius: 18px;
border: 1px solid var(--line);
background: rgba(255, 252, 246, 0.98);
background: var(--surface-3);
box-shadow: var(--shadow);
}
@@ -323,9 +344,9 @@
.mobile-nav__stack .top-nav__link {
justify-content: flex-start;
padding: 0.78rem 0.92rem;
border: 1px solid rgba(44, 32, 23, 0.08);
background: rgba(255, 255, 255, 0.78);
color: var(--text);
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: var(--text-strong);
}
.mobile-nav__footer {
@@ -339,20 +360,20 @@
input[type="submit"] {
appearance: none;
border: 0;
border-radius: 12px;
padding: 0.78rem 1.05rem;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
border-radius: 10px;
padding: 0.72rem 1rem;
background: linear-gradient(135deg, #587aff 0%, #243a91 100%);
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
box-shadow: 0 12px 24px rgba(var(--brand-rgb), 0.18);
box-shadow: 0 12px 24px rgba(36, 58, 145, 0.22);
}
.button--ghost {
background: transparent;
color: var(--brand-strong);
border: 1px solid rgba(var(--brand-rgb), 0.18);
background: rgba(255, 255, 255, 0.03);
color: var(--text-strong);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: none;
}
@@ -362,11 +383,10 @@
display: grid;
gap: 16px;
margin-bottom: 28px;
padding: 22px;
padding: 20px;
border: 1px solid var(--line);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(255, 251, 244, 0.98), rgba(252, 247, 240, 0.95));
border-radius: 18px;
background: linear-gradient(135deg, rgba(14, 20, 34, 0.98), rgba(10, 15, 26, 0.96));
box-shadow: var(--shadow);
}
@@ -386,7 +406,7 @@
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.8rem;
color: var(--accent);
color: #8aa0d0;
font-weight: 700;
}
@@ -400,7 +420,7 @@
.hero__lead {
margin: 0;
max-width: 68ch;
color: var(--muted);
color: var(--text-soft);
font-size: 1.02rem;
}
@@ -416,10 +436,10 @@
.form-panel,
.table-card {
border: 1px solid var(--line);
border-radius: 16px;
background: var(--bg-elevated);
border-radius: 14px;
background: var(--surface-2);
box-shadow: var(--shadow);
padding: 18px;
padding: 16px;
}
.card__eyebrow {
@@ -427,7 +447,7 @@
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
color: #8aa0d0;
font-weight: 700;
}
@@ -439,7 +459,7 @@
}
.metric__label,
.muted { color: var(--muted); }
.muted { color: var(--text-soft); }
.list-reset { margin: 0; padding: 0; list-style: none; }
.list-reset li + li { margin-top: 12px; }
@@ -452,9 +472,9 @@
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(31, 41, 51, 0.08);
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.feature-list__badge {
@@ -464,8 +484,8 @@
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(15, 118, 110, 0.1);
color: var(--brand-strong);
background: rgba(88, 122, 255, 0.12);
color: #d9e2ff;
font-weight: 800;
}
@@ -476,7 +496,7 @@
.feature-list__copy {
margin: 0;
color: var(--muted);
color: var(--text-soft);
font-size: 0.94rem;
}
@@ -488,9 +508,9 @@
.auth-summary__card {
padding: 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(31, 41, 51, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.tenant-grid { display: grid; gap: 12px; }
@@ -501,21 +521,21 @@
gap: 12px;
align-items: center;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(31, 41, 51, 0.08);
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.tenant-row__meta { display: grid; gap: 4px; }
.tenant-row__title { margin: 0; font-weight: 700; }
.tenant-row__copy { margin: 0; color: var(--muted); font-size: 0.92rem; }
.tenant-row__copy { margin: 0; color: var(--text-soft); font-size: 0.92rem; }
.callout {
padding: 14px 16px;
border-radius: 16px;
background: rgba(45, 106, 79, 0.06);
border: 1px solid rgba(45, 106, 79, 0.12);
color: var(--brand-strong);
border-radius: 14px;
background: rgba(88, 122, 255, 0.08);
border: 1px solid rgba(88, 122, 255, 0.14);
color: var(--text-strong);
}
.callout strong {
@@ -525,7 +545,7 @@
.metric--compact { padding: 18px 20px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.toolbar .badge { background: #fff; }
.toolbar .badge { background: rgba(255, 255, 255, 0.05); }
.table-card { overflow: hidden; padding: 0; }
@@ -560,9 +580,9 @@
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
color: var(--text-soft);
font-weight: 700;
background: rgba(249, 242, 231, 0.6);
background: rgba(255, 255, 255, 0.03);
}
tr:last-child td { border-bottom: 0; }
@@ -573,14 +593,14 @@
gap: 8px;
padding: 0.38rem 0.65rem;
border-radius: 999px;
background: rgba(15, 118, 110, 0.11);
color: var(--brand-strong);
background: rgba(88, 122, 255, 0.12);
color: #d9e2ff;
font-weight: 700;
font-size: 0.82rem;
}
.status--warning { background: rgba(180, 83, 9, 0.12); color: #92400e; }
.status--danger { background: rgba(185, 28, 28, 0.12); color: #991b1b; }
.status--warning { background: rgba(224, 154, 70, 0.14); color: #ffd7a1; }
.status--danger { background: rgba(195, 82, 82, 0.16); color: #ffd1d1; }
.form-grid { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
@@ -590,12 +610,12 @@
select,
textarea {
width: 100%;
border: 1px solid rgba(31, 41, 51, 0.14);
border-radius: 16px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
padding: 0.85rem 0.95rem;
font: inherit;
color: var(--text);
color: var(--text-strong);
}
textarea { min-height: 120px; resize: vertical; }
@@ -603,9 +623,9 @@
.note {
padding: 14px 16px;
border-radius: 16px;
background: rgba(15, 118, 110, 0.08);
border: 1px solid rgba(15, 118, 110, 0.12);
color: var(--brand-strong);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-soft);
}
.timeline { display: grid; gap: 14px; }
@@ -615,25 +635,27 @@
display: grid;
gap: 6px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(31, 41, 51, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.timeline__title { margin: 0; font-weight: 700; }
.timeline__meta { margin: 0; color: var(--muted); font-size: 0.92rem; }
.timeline__meta { margin: 0; color: var(--text-soft); font-size: 0.92rem; }
.app-footer { padding: 0 0 12px; }
.app-footer { padding: 6px 0 12px; }
.app-footer__inner {
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
width: min(var(--content-width), calc(100% - 28px));
margin: 0 auto;
border-top: 1px solid var(--line);
padding-top: 18px;
color: var(--muted);
font-size: 0.92rem;
padding-top: 14px;
color: var(--text-faint);
font-size: 0.88rem;
}
.marketing-shell {
@@ -657,8 +679,9 @@
gap: 14px;
height: 88px;
min-height: 88px;
width: 100%;
margin: 0 0 20px;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-bottom: 20px;
padding: 0 18px;
border: 0;
border-bottom: 1px solid rgba(137, 154, 188, 0.18);
@@ -838,18 +861,14 @@
@media (max-width: 980px) {
.site-shell {
padding: 10px 0 18px;
}
.site-header,
.site-main,
.app-footer {
width: calc(100% - 20px);
padding: 0 0 18px;
}
.site-header__inner {
padding: 14px 16px;
align-items: flex-start;
width: 100%;
min-height: 68px;
padding: 0 16px;
align-items: center;
}
.top-nav { display: none; }
@@ -878,7 +897,7 @@
.marketing-bar {
height: 72px;
min-height: 72px;
margin: 0 0 16px;
margin-bottom: 16px;
padding: 0 12px;
}
.marketing-nav,
@@ -890,6 +909,10 @@
.marketing-footer__inner {
width: 100%;
}
.site-main,
.app-footer__inner {
width: calc(100% - 20px);
}
}
@media (max-width: 980px) {
.app-body { gap: 14px; }
saas-app/resources/views/members/index.blade.php
+2 -2
View File
@@ -9,7 +9,7 @@
<h2 class="hero__title">Mitglieder</h2>
<p class="hero__lead">
Hier sind aktive Mitglieder, Rollen und Status klar gegliedert. Diese Sicht entspricht der alten
Mitgliederverwaltung, nur als SaaS-taugliche, aufgeraeumte Oberflaeche.
Mitgliederverwaltung, nur als SaaS-taugliche, aufgeräumte Oberfläche.
</p>
</div>
<div class="toolbar">
@@ -23,7 +23,7 @@
<article class="card metric">
<p class="metric__label">Aktive Mitglieder</p>
<div class="metric__value">18</div>
<p class="muted">Fuer Buchungen, Auswertungen und Benachrichtigungen freigeschaltet.</p>
<p class="muted">Für Buchungen, Auswertungen und Benachrichtigungen freigeschaltet.</p>
</article>
<article class="card metric">
<p class="metric__label">Sperrstatus</p>
saas-app/resources/views/support/index.blade.php
+86 -69
View File
@@ -19,9 +19,12 @@
body{
margin:0;
min-height:100vh;
color:var(--ink);
color:#edf2ff;
font-family:"Aptos","Segoe UI",sans-serif;
background:linear-gradient(180deg,#f9f6ef 0%,var(--bg) 100%);
background:
radial-gradient(circle at top center, rgba(88,122,255,.18), transparent 26%),
radial-gradient(circle at 18% 12%, rgba(var(--brand-rgb),.16), transparent 22%),
linear-gradient(180deg,#05070d 0%,#0b1220 48%,#0d1524 100%);
}
a{color:inherit;text-decoration:none}
.button,button{
@@ -29,7 +32,7 @@
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:999px;
border-radius:10px;
border:1px solid transparent;
background:var(--brand);
color:#fff;
@@ -38,66 +41,80 @@
cursor:pointer;
}
.button--ghost{
background:#fff;
color:var(--brand);
border-color:rgba(var(--brand-rgb),.18);
background:transparent;
color:#f4f7ff;
border-color:rgba(201,214,255,.16);
}
.page-shell{
width:min(1460px,calc(100vw - 32px));
margin:20px auto 40px;
margin:0 auto 40px;
display:grid;
gap:20px;
gap:18px;
}
.site-header{
position:sticky;
top:0;
z-index:30;
width:100vw;
margin-left:calc(50% - 50vw);
}
.site-header{position:sticky;top:20px;z-index:20}
.site-header__inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:16px 18px;
border:1px solid var(--line);
border-radius:24px;
background:rgba(255,251,244,.96);
box-shadow:var(--shadow);
width:100%;
margin:0;
min-height:72px;
padding:12px 24px;
border:0;
border-bottom:1px solid rgba(137,154,188,.18);
border-radius:0;
background:rgba(8,10,18,.86);
box-shadow:none;
backdrop-filter:blur(16px);
}
.site-brand{display:flex;align-items:center;gap:14px;min-width:0}
.site-brand{display:flex;align-items:center;gap:12px;min-width:0}
.site-brand__mark{
width:44px;
height:44px;
border-radius:16px;
width:36px;
height:36px;
border-radius:10px;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--brand) 0%,var(--brand-strong) 100%);
background:linear-gradient(135deg,#587aff 0%,#243a91 100%);
color:#fff;
font-weight:800;
box-shadow:0 14px 28px rgba(var(--brand-rgb),.18);
box-shadow:none;
}
.site-brand__title{margin:0;font-family:Georgia,serif;font-size:1.1rem;letter-spacing:-.02em}
.site-brand__subtitle{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.site-brand__title{margin:0;font-family:"Inter Tight","Aptos","Segoe UI",sans-serif;font-size:1.08rem;letter-spacing:-.04em;color:#f4f7ff}
.site-brand__subtitle{margin:2px 0 0;color:rgba(219,228,248,.72);font-size:.9rem}
.site-nav,.site-actions,.actions,.context{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.site-nav__link{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:999px;
min-height:34px;
padding:0 .3rem;
border-radius:8px;
border:1px solid transparent;
color:var(--muted);
color:rgba(231,238,255,.8);
font-weight:700;
font-size:.96rem;
}
.site-nav__link:hover{text-decoration:none;color:var(--brand);background:rgba(255,255,255,.82);border-color:rgba(var(--brand-rgb),.14)}
.site-nav__link.active{background:rgba(var(--brand-rgb),.10);color:var(--brand);border-color:rgba(var(--brand-rgb),.18)}
.site-nav__link:hover{text-decoration:none;color:#f4f7ff;background:rgba(255,255,255,.06);border-color:rgba(201,214,255,.12)}
.site-nav__link.active{background:rgba(255,255,255,.08);color:#f4f7ff;border-color:rgba(201,214,255,.12)}
.hero,.card,.alert{
border:1px solid var(--line);
border-radius:var(--radius);
background:var(--card);
box-shadow:var(--shadow);
border:1px solid rgba(163,183,255,.12);
border-radius:16px;
background:rgba(14,20,34,.86);
box-shadow:0 16px 40px rgba(2,5,12,.34);
}
.hero__title,.card h2,.card h3{
font-family:Georgia,serif;
letter-spacing:-.02em;
font-family:"Inter Tight","Aptos","Segoe UI",sans-serif;
letter-spacing:-.04em;
color:#f4f7ff;
}
.muted,p{color:var(--muted)}
.muted,p{color:rgba(219,228,246,.74)}
.site-mobile{display:none;position:relative}
.site-mobile[open]{z-index:20}
.site-toggle{
@@ -106,11 +123,11 @@
gap:12px;
cursor:pointer;
list-style:none;
padding:12px 14px;
border-radius:16px;
border:1px solid rgba(var(--brand-rgb),.12);
background:#fff;
color:var(--brand);
padding:10px 12px;
border-radius:10px;
border:1px solid rgba(201,214,255,.14);
background:rgba(255,255,255,.04);
color:#f4f7ff;
font-weight:700;
}
.site-toggle::-webkit-details-marker{display:none}
@@ -129,24 +146,24 @@
top:calc(100% + 12px);
width:min(320px,calc(100vw - 32px));
padding:14px;
border-radius:18px;
border:1px solid var(--line);
background:#fffdf9;
box-shadow:var(--shadow);
border-radius:16px;
border:1px solid rgba(163,183,255,.14);
background:rgba(8,10,18,.96);
box-shadow:0 18px 36px rgba(1,5,13,.45);
}
.site-stack{display:grid;gap:10px}
.site-stack .site-nav__link{justify-content:flex-start;background:rgba(255,255,255,.78);border-color:rgba(37,24,15,.08);color:var(--ink)}
.site-stack .site-nav__link{justify-content:flex-start;padding:.6rem .75rem;background:rgba(255,255,255,.04);border-color:rgba(201,214,255,.1);color:#f4f7ff}
.site-footer-actions{display:flex;justify-content:flex-end;margin-top:12px}
.content{min-width:0;display:grid;gap:18px}
.hero{
padding:24px;
display:grid;
gap:18px;
background:linear-gradient(180deg,#fffdf8 0%,#f9f4ea 100%);
background:linear-gradient(180deg,rgba(18,25,42,.96),rgba(13,19,33,.92));
}
.hero__kicker{
margin:0 0 10px;
color:var(--accent);
color:#8aa0d0;
text-transform:uppercase;
letter-spacing:.16em;
font-size:.8rem;
@@ -176,8 +193,8 @@
.metric{
padding:18px;
border-radius:16px;
border:1px solid var(--line);
background:#fff;
border:1px solid rgba(163,183,255,.12);
background:rgba(255,255,255,.04);
display:grid;
gap:8px;
}
@@ -189,40 +206,40 @@
border-radius:999px;
font-size:.86rem;
font-weight:700;
border:1px solid rgba(var(--brand-rgb),.12);
background:#fff;
color:var(--brand);
border:1px solid rgba(201,214,255,.12);
background:rgba(255,255,255,.04);
color:#dfe8ff;
}
.badge--neutral{background:rgba(var(--brand-rgb),.1);color:var(--brand)}
.badge--success{background:rgba(17,98,61,.12);color:#11623d}
.badge--warning{background:rgba(163,75,18,.12);color:#98510c}
.badge--danger{background:rgba(154,31,31,.12);color:#9a1f1f}
.badge--neutral{background:rgba(88,122,255,.14);color:#dfe8ff}
.badge--success{background:rgba(88,122,255,.14);color:#dfe8ff}
.badge--warning{background:rgba(180,83,9,.18);color:#f5c68a}
.badge--danger{background:rgba(185,28,28,.18);color:#f2a2a2}
.alert{padding:16px 18px}
.alert-success{background:rgba(17,98,61,.08)}
.alert-warning{background:rgba(163,75,18,.08)}
.alert-error{background:rgba(154,31,31,.08)}
.alert-info{background:rgba(var(--brand-rgb),.06)}
.alert-success{background:rgba(88,122,255,.12)}
.alert-warning{background:rgba(180,83,9,.16)}
.alert-error{background:rgba(185,28,28,.16)}
.alert-info{background:rgba(88,122,255,.1)}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:18px}
.stack{display:grid;gap:12px}
.table{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:860px}
th,td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
th,td{padding:13px 10px;border-bottom:1px solid rgba(163,183,255,.1);text-align:left;vertical-align:top}
th{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(193,205,232,.7)}
label{display:flex;flex-direction:column;gap:8px;font-weight:700}
input,select,textarea{width:100%;padding:12px 14px;border-radius:16px;border:1px solid rgba(36,22,14,.15);font:inherit;background:#fffdfa;color:var(--ink)}
input,select,textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(163,183,255,.14);font:inherit;background:rgba(9,13,24,.82);color:#f4f7ff}
textarea{min-height:120px}
.timeline{display:grid;gap:12px}
.timeline__item{padding:14px 16px;border-radius:16px;background:#fff;border:1px solid rgba(31,41,51,.08)}
.timeline__meta{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.timeline__item{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(163,183,255,.12)}
.timeline__meta{margin:0;color:rgba(219,228,246,.74);font-size:.94rem;line-height:1.6}
.timeline__title{margin:0 0 6px;font-weight:800}
.pill{
display:inline-flex;
align-items:center;
padding:7px 12px;
border-radius:999px;
border:1px solid rgba(var(--brand-rgb),.15);
background:rgba(var(--brand-rgb),.07);
color:var(--brand);
border:1px solid rgba(201,214,255,.12);
background:rgba(255,255,255,.04);
color:#dfe8ff;
font-size:.84rem;
font-weight:700;
}
@@ -233,10 +250,10 @@
.status.is-waiting::before{background:#9a1f1f}
.status.is-closed::before{background:#11623d}
.mono{font-family:Consolas,monospace}
.footer{margin-top:18px;text-align:center;color:var(--muted);font-size:.92rem}
.footer{margin-top:18px;text-align:center;color:rgba(209,217,235,.68);font-size:.92rem}
@media(max-width:1040px){
.page-shell{width:min(100vw - 20px,1460px)}
.site-header__inner{align-items:flex-start;padding:14px 16px}
.site-header__inner{align-items:center;padding:12px 16px;min-height:68px;width:100%}
.site-nav{display:none}
.site-mobile{display:block}
.split,.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
saas-app/resources/views/tenants/roles.blade.php
+83 -66
View File
@@ -20,17 +20,20 @@
margin:0;
min-height:100vh;
font-family:"Aptos","Segoe UI",sans-serif;
color:var(--ink);
background:linear-gradient(180deg,#f9f6ef 0%,var(--bg) 100%);
color:#edf2ff;
background:
radial-gradient(circle at top center, rgba(88,122,255,.18), transparent 26%),
radial-gradient(circle at 18% 12%, rgba(var(--brand-rgb),.16), transparent 22%),
linear-gradient(180deg,#05070d 0%,#0b1220 48%,#0d1524 100%);
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Georgia,serif;letter-spacing:-.02em}
h1,h2,h3{font-family:"Inter Tight","Aptos","Segoe UI",sans-serif;letter-spacing:-.04em}
.button,button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:999px;
border-radius:10px;
border:1px solid transparent;
background:var(--brand);
color:#fff;
@@ -39,55 +42,68 @@
cursor:pointer;
}
.button--ghost{
background:#fff;
color:var(--brand);
border-color:rgba(var(--brand-rgb),.18);
background:transparent;
color:#f4f7ff;
border-color:rgba(201,214,255,.16);
}
.page-shell{
width:min(1460px,calc(100vw - 32px));
margin:20px auto 40px;
margin:0 auto 40px;
display:grid;
gap:20px;
gap:18px;
}
.site-header{
position:sticky;
top:0;
z-index:30;
width:100vw;
margin-left:calc(50% - 50vw);
}
.site-header{position:sticky;top:20px;z-index:20}
.site-header__inner{
width:100%;
margin:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:16px 18px;
border:1px solid var(--line);
border-radius:24px;
background:rgba(255,251,244,.96);
box-shadow:var(--shadow);
min-height:72px;
padding:12px 24px;
border:0;
border-bottom:1px solid rgba(137,154,188,.18);
border-radius:0;
background:rgba(8,10,18,.86);
box-shadow:none;
backdrop-filter:blur(16px);
}
.site-brand{display:flex;align-items:center;gap:14px;min-width:0}
.site-brand{display:flex;align-items:center;gap:12px;min-width:0}
.site-brand__mark{
width:44px;
height:44px;
border-radius:16px;
width:36px;
height:36px;
border-radius:10px;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--brand) 0%,var(--brand-strong) 100%);
background:linear-gradient(135deg,#587aff 0%,#243a91 100%);
color:#fff;
font-weight:800;
box-shadow:0 14px 28px rgba(var(--brand-rgb),.18);
box-shadow:none;
}
.site-brand__title{margin:0;font-size:1.1rem}
.site-brand__subtitle{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.site-brand__title{margin:0;font-size:1.08rem;color:#f4f7ff}
.site-brand__subtitle{margin:2px 0 0;color:rgba(219,228,248,.72);font-size:.9rem}
.site-nav,.site-actions,.actions,.context,.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.site-nav__link{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:999px;
min-height:34px;
padding:0 .3rem;
border-radius:8px;
border:1px solid transparent;
color:var(--muted);
color:rgba(231,238,255,.8);
font-weight:700;
font-size:.96rem;
}
.site-nav__link:hover{text-decoration:none;color:var(--brand);background:rgba(255,255,255,.82);border-color:rgba(var(--brand-rgb),.14)}
.site-nav__link.active{background:rgba(var(--brand-rgb),.10);color:var(--brand);border-color:rgba(var(--brand-rgb),.18)}
.site-nav__link:hover{text-decoration:none;color:#f4f7ff;background:rgba(255,255,255,.06);border-color:rgba(201,214,255,.12)}
.site-nav__link.active{background:rgba(255,255,255,.08);color:#f4f7ff;border-color:rgba(201,214,255,.12)}
.site-mobile{display:none;position:relative}
.site-mobile[open]{z-index:20}
.site-toggle{
@@ -96,11 +112,11 @@
gap:12px;
cursor:pointer;
list-style:none;
padding:12px 14px;
border-radius:16px;
border:1px solid rgba(var(--brand-rgb),.12);
background:#fff;
color:var(--brand);
padding:10px 12px;
border-radius:10px;
border:1px solid rgba(201,214,255,.14);
background:rgba(255,255,255,.04);
color:#f4f7ff;
font-weight:700;
}
.site-toggle::-webkit-details-marker{display:none}
@@ -119,95 +135,96 @@
top:calc(100% + 12px);
width:min(320px,calc(100vw - 32px));
padding:14px;
border-radius:18px;
border:1px solid var(--line);
background:#fffdf9;
box-shadow:var(--shadow);
border-radius:16px;
border:1px solid rgba(163,183,255,.14);
background:rgba(8,10,18,.96);
box-shadow:0 18px 36px rgba(1,5,13,.45);
}
.site-stack{display:grid;gap:10px}
.site-stack .site-nav__link{
justify-content:flex-start;
background:rgba(255,255,255,.78);
border-color:rgba(37,24,15,.08);
color:var(--ink);
padding:.6rem .75rem;
background:rgba(255,255,255,.04);
border-color:rgba(201,214,255,.1);
color:#f4f7ff;
}
.site-footer-actions{display:flex;justify-content:flex-end;margin-top:12px}
.hero,.card,.table-card,.note{
border:1px solid var(--line);
border-radius:var(--radius);
background:var(--card);
box-shadow:var(--shadow);
border:1px solid rgba(163,183,255,.12);
border-radius:16px;
background:rgba(14,20,34,.86);
box-shadow:0 16px 40px rgba(2,5,12,.34);
}
.hero__title,.card h2,.card h3{font-family:Georgia,serif;letter-spacing:-.02em}
.sidebar__subtitle,.muted{color:var(--muted)}
.hero__title,.card h2,.card h3{font-family:"Inter Tight","Aptos","Segoe UI",sans-serif;letter-spacing:-.04em;color:#f4f7ff}
.sidebar__subtitle,.muted{color:rgba(219,228,246,.74)}
.content{min-width:0;display:grid;gap:18px}
.hero{
display:grid;
grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);
gap:20px;
padding:24px;
background:linear-gradient(180deg,#fffdf8 0%,#f9f4ea 100%);
background:linear-gradient(180deg,rgba(18,25,42,.96),rgba(13,19,33,.92));
}
.hero__kicker{
margin:0 0 10px;
color:var(--accent);
color:#8aa0d0;
text-transform:uppercase;
letter-spacing:.15em;
font-size:.8rem;
font-weight:800;
}
.hero__title{margin:0 0 12px;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05}
.hero__lead{margin:0;color:var(--muted);max-width:70ch;line-height:1.7}
.hero__lead{margin:0;color:rgba(219,228,246,.74);max-width:70ch;line-height:1.7}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}
.metric__label{color:var(--muted)}
.metric{padding:18px;border:1px solid rgba(163,183,255,.12);border-radius:16px;background:rgba(255,255,255,.04)}
.metric__label{color:rgba(219,228,246,.74)}
.metric__value{font-size:1.9rem;font-weight:800;margin:6px 0 8px}
.table-card,.card{padding:22px}
.table-card__header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.status{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(var(--brand-rgb),.1);color:var(--brand);font-weight:700;font-size:.84rem}
.status--warning{background:rgba(var(--accent-rgb),.14);color:#8c6500}
.status--success{background:rgba(var(--brand-rgb),.12);color:var(--brand)}
th,td{padding:12px 10px;border-bottom:1px solid rgba(163,183,255,.1);text-align:left;vertical-align:top}
th{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(193,205,232,.7)}
.status{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(88,122,255,.14);color:#dfe8ff;font-weight:700;font-size:.84rem}
.status--warning{background:rgba(180,83,9,.18);color:#f5c68a}
.status--success{background:rgba(88,122,255,.14);color:#dfe8ff}
.list-reset{margin:0;padding-left:18px}
.list-reset li+li{margin-top:10px}
.note{padding:16px 18px;background:rgba(var(--brand-rgb),.06)}
.note{padding:16px 18px;background:rgba(88,122,255,.08);color:#dfe8ff}
.stack{display:grid;gap:12px}
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(var(--brand-rgb),.08);color:var(--brand);font-size:.84rem;font-weight:700}
.chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.04);color:#dfe8ff;font-size:.84rem;font-weight:700}
.badge{
display:inline-flex;
align-items:center;
padding:7px 12px;
border-radius:999px;
background:#fff;
color:var(--brand);
background:rgba(255,255,255,.04);
color:#dfe8ff;
font-weight:700;
font-size:.86rem;
border:1px solid rgba(var(--brand-rgb),.12);
border:1px solid rgba(201,214,255,.12);
white-space:nowrap;
}
.badge--solid{background:var(--brand);color:#fff}
.badge--solid{background:linear-gradient(135deg,#587aff 0%,#243a91 100%);color:#fff}
.pill{
display:inline-flex;
align-items:center;
padding:7px 12px;
border-radius:999px;
border:1px solid rgba(var(--brand-rgb),.15);
background:rgba(var(--brand-rgb),.07);
color:var(--brand);
border:1px solid rgba(201,214,255,.12);
background:rgba(255,255,255,.04);
color:#dfe8ff;
font-size:.84rem;
font-weight:700;
white-space:nowrap;
}
@media(max-width:960px){
.page-shell{width:min(100vw - 20px,1460px)}
.site-header__inner{align-items:flex-start;padding:14px 16px}
.site-header__inner{align-items:center;padding:12px 16px;min-height:68px;width:100%}
.site-nav{display:none}
.site-mobile{display:block}
.hero,.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
saas-app/resources/views/welcome.blade.php
+247 -103
View File
@@ -5,27 +5,76 @@
@section('body_class', 'landing-preview')
@php
$columns = $landingColumns ?? [
$heroEyebrow = $heroEyebrow ?? 'Für Teams, Büros und Standorte';
$heroTitle = $heroTitle ?? 'Die Kaffeeliste für einen klaren Kaffee-Alltag.';
$heroCopy = $heroCopy ?? 'Mitglieder, Buchungen, Rollen und Hinweise laufen in einer klaren Oberfläche zusammen. Für Teams, die weniger Listen-Chaos und weniger Rückfragen wollen.';
$preview = $landingPreview ?? [
['label' => 'Mitglieder', 'value' => '48 aktiv'],
['label' => 'Buchungen', 'value' => 'Heute 12'],
['label' => 'Support', 'value' => '2 offen'],
];
$features = $landingFeatures ?? [
[
'eyebrow' => 'Für Mitglieder',
'title' => 'Schnell starten',
'copy' => 'Einloggen und direkt weiter.',
'title' => 'Dashboard',
'copy' => 'Wichtige Zahlen, Hinweise und offene Themen direkt auf der Startseite.',
],
[
'eyebrow' => 'Für Verantwortliche',
'title' => 'Alles im Blick',
'copy' => 'Bereiche, Hinweise und Verwaltung an einem Ort.',
'title' => 'Mitglieder und Rollen',
'copy' => 'Zugänge, Zuständigkeiten und Bereiche sauber an einem Ort verwalten.',
],
[
'eyebrow' => 'Für Standorte',
'title' => 'Gemeinsam organisiert',
'copy' => 'Ein klarer Ablauf für Teams und Bereiche.',
'title' => 'Buchungen',
'copy' => 'Einzahlungen, Verbrauch und Korrekturen nachvollziehbar dokumentieren.',
],
[
'title' => 'Support und Exporte',
'copy' => 'Rückfragen, Listen und Auswertungen ohne Wechsel zwischen mehreren Tools.',
],
];
$preview = $landingPreview ?? [
['label' => 'Start', 'value' => 'Klar'],
['label' => 'Team', 'value' => 'Gemeinsam'],
['label' => 'Zugang', 'value' => 'Direkt'],
$steps = $landingSteps ?? [
[
'number' => '01',
'title' => 'Anmelden und Bereich öffnen',
'copy' => 'Ohne Installation direkt im Browser starten.',
],
[
'number' => '02',
'title' => 'Mitglieder und Zuständigkeiten ordnen',
'copy' => 'Rollen, Standorte und Zugänge klar strukturieren.',
],
[
'number' => '03',
'title' => 'Im Alltag damit arbeiten',
'copy' => 'Buchungen pflegen, Fragen klären und den Überblick behalten.',
],
];
$useCases = $landingUseCases ?? [
[
'title' => 'Für Mitglieder',
'copy' => 'Schnell sehen, was wichtig ist, ohne sich durch Verwaltungsthemen zu arbeiten.',
],
[
'title' => 'Für Verantwortliche',
'copy' => 'Buchungen prüfen, Bereiche steuern und Abläufe sauber organisieren.',
],
[
'title' => 'Für mehrere Standorte',
'copy' => 'Getrennte Bereiche bleiben übersichtlich, folgen aber derselben Logik.',
],
];
$proof = $landingProof ?? [
[
'title' => 'Schnell verständlich',
'copy' => 'Die wichtigsten Bereiche sind sofort erkennbar und klar benannt.',
],
[
'title' => 'Im Browser und mobil',
'copy' => 'Die Oberfläche funktioniert ohne Installation auf Desktop und Handy.',
],
[
'title' => 'Für den Alltag gebaut',
'copy' => 'Kaffeeliste, Support, Buchungen und Verwaltung greifen sinnvoll ineinander.',
],
];
@endphp
@@ -48,20 +97,25 @@
.landing-wrap {
display: grid;
gap: 56px;
gap: 28px;
padding: 8px 0 12px;
}
.hero {
.landing-hero {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
gap: 40px;
grid-template-columns: minmax(0, 1.12fr) minmax(290px, 0.88fr);
gap: 36px;
align-items: start;
padding-top: 12px;
padding-top: 8px;
}
.landing-copy {
display: grid;
gap: 12px;
}
.kicker {
margin: 0 0 10px;
margin: 0;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.16em;
@@ -69,28 +123,36 @@
font-weight: 700;
}
.hero h1 {
.landing-copy h1 {
margin: 0;
font-size: clamp(3.2rem, 7vw, 6.4rem);
line-height: 0.9;
}
.hero p {
margin: 14px 0 0;
max-width: 30rem;
font-size: 1.05rem;
.landing-copy__lead {
margin: 0;
max-width: 34rem;
font-size: 1.08rem;
line-height: 1.65;
color: rgba(219, 228, 248, 0.72);
color: rgba(219, 228, 248, 0.74);
}
.landing-copy__note {
margin: 0;
max-width: 32rem;
color: rgba(193, 205, 232, 0.78);
font-size: 0.96rem;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
margin-top: 10px;
}
.landing-preview,
.landing-section,
.landing-callout {
border: 1px solid rgba(163, 183, 255, 0.12);
border-radius: 20px;
@@ -127,7 +189,7 @@
padding: 12px 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
color: rgba(216, 225, 246, 0.72);
color: rgba(216, 225, 246, 0.74);
font-weight: 600;
}
@@ -135,24 +197,18 @@
color: #f4f7ff;
}
.landing-columns {
.landing-section {
padding: 24px 26px;
}
.landing-section__head {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 1px solid rgba(163, 183, 255, 0.12);
border-bottom: 1px solid rgba(163, 183, 255, 0.12);
gap: 8px;
margin-bottom: 18px;
}
.landing-column {
padding: 24px 18px;
}
.landing-column + .landing-column {
border-left: 1px solid rgba(163, 183, 255, 0.12);
}
.landing-column__eyebrow {
margin: 0 0 10px;
.landing-section__eyebrow {
margin: 0;
color: #8aa0d0;
font-size: 0.78rem;
font-weight: 700;
@@ -160,43 +216,73 @@
text-transform: uppercase;
}
.landing-column h2 {
margin: 0 0 10px;
font-size: 1.45rem;
.landing-section__title {
margin: 0;
font-size: 1.9rem;
color: #f4f7ff;
}
.landing-column p {
.landing-section__lead {
margin: 0;
max-width: 22rem;
color: rgba(219, 228, 248, 0.72);
max-width: 48rem;
color: rgba(217, 226, 246, 0.8);
}
.landing-feature-grid,
.landing-step-grid,
.landing-use-grid,
.landing-proof-grid {
display: grid;
gap: 12px;
}
.landing-feature-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.landing-step-grid,
.landing-use-grid,
.landing-proof-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.landing-card {
padding: 18px;
border-radius: 18px;
border: 1px solid rgba(163, 183, 255, 0.12);
background: rgba(255, 255, 255, 0.035);
}
.landing-card__number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.15rem;
height: 2.15rem;
margin-bottom: 14px;
border-radius: 999px;
background: rgba(88, 122, 255, 0.16);
color: #dfe8ff;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.06em;
}
.landing-card h3 {
margin: 0 0 8px;
font-size: 1.12rem;
color: #f4f7ff;
}
.landing-card p {
margin: 0;
color: rgba(219, 228, 246, 0.74);
}
.landing-callout {
padding: 24px 26px;
}
.landing-callout__eyebrow {
margin: 0 0 8px;
color: #8aa0d0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.landing-callout h2 {
margin: 0 0 10px;
font-size: 2rem;
color: #f4f7ff;
}
.landing-callout p {
margin: 0;
max-width: 36rem;
color: rgba(217, 226, 246, 0.8);
}
.landing-cta {
display: flex;
align-items: center;
@@ -224,28 +310,23 @@
@media (max-width: 960px) {
.landing-wrap {
gap: 36px;
gap: 20px;
}
.hero,
.landing-columns {
.landing-hero,
.landing-feature-grid,
.landing-step-grid,
.landing-use-grid,
.landing-proof-grid {
grid-template-columns: 1fr;
}
.hero {
.landing-hero {
gap: 24px;
padding-top: 0;
}
.landing-column {
padding: 20px 0;
}
.landing-column + .landing-column {
border-left: 0;
border-top: 1px solid rgba(163, 183, 255, 0.12);
}
.landing-section,
.landing-callout {
padding: 20px;
}
@@ -255,15 +336,16 @@
@section('content')
<div class="landing-wrap">
<section class="hero">
<div>
<p class="kicker">Die Kaffeeliste</p>
<h1>Kaffee im Team. Klar organisiert.</h1>
<p>Für Mitglieder, Verantwortliche und Standorte.</p>
<section class="landing-hero">
<div class="landing-copy">
<p class="kicker">{{ $heroEyebrow }}</p>
<h1>{{ $heroTitle }}</h1>
<p class="landing-copy__lead">{{ $heroCopy }}</p>
<p class="landing-copy__note">Für Mitglieder, Verantwortliche und Standorte. Mobil nutzbar, klar geführt und ohne unnötige Umwege.</p>
<div class="actions">
<a class="button" href="/login/">Anmelden</a>
<a class="button button--ghost" href="#bereiche">Mehr erfahren</a>
<a class="button button--ghost" href="#funktionen">Funktionen ansehen</a>
</div>
</div>
@@ -281,27 +363,89 @@
</aside>
</section>
<section class="landing-columns" id="bereiche" aria-label="Bereiche">
@foreach ($columns as $column)
<article class="landing-column">
<p class="landing-column__eyebrow">{{ $column['eyebrow'] ?? '' }}</p>
<h2>{{ $column['title'] ?? '' }}</h2>
<p>{{ $column['copy'] ?? '' }}</p>
</article>
@endforeach
<section class="landing-section" id="funktionen" aria-label="Funktionen">
<div class="landing-section__head">
<p class="landing-section__eyebrow">Produkt</p>
<h2 class="landing-section__title">Was die Kaffeeliste im Alltag abdeckt</h2>
<p class="landing-section__lead">Vom Überblick bis zur Auswertung bleibt alles in einer Oberfläche, die sofort verständlich wirkt.</p>
</div>
<div class="landing-feature-grid">
@foreach ($features as $feature)
<article class="landing-card">
<h3>{{ $feature['title'] ?? '' }}</h3>
<p>{{ $feature['copy'] ?? '' }}</p>
</article>
@endforeach
</div>
</section>
<section class="landing-section" id="ablauf" aria-label="Ablauf">
<div class="landing-section__head">
<p class="landing-section__eyebrow">Ablauf</p>
<h2 class="landing-section__title">So funktioniert es</h2>
<p class="landing-section__lead">Vom ersten Login bis zum täglichen Einsatz bleibt der Weg kurz und nachvollziehbar.</p>
</div>
<div class="landing-step-grid">
@foreach ($steps as $step)
<article class="landing-card">
<span class="landing-card__number">{{ $step['number'] ?? '' }}</span>
<h3>{{ $step['title'] ?? '' }}</h3>
<p>{{ $step['copy'] ?? '' }}</p>
</article>
@endforeach
</div>
</section>
<section class="landing-section" id="zielgruppen" aria-label="Zielgruppen">
<div class="landing-section__head">
<p class="landing-section__eyebrow">Für wen</p>
<h2 class="landing-section__title">Für Mitglieder, Verantwortliche und Standorte</h2>
<p class="landing-section__lead">Jede Rolle bekommt genau die Informationen und Wege, die sie im Alltag braucht.</p>
</div>
<div class="landing-use-grid">
@foreach ($useCases as $useCase)
<article class="landing-card">
<h3>{{ $useCase['title'] ?? '' }}</h3>
<p>{{ $useCase['copy'] ?? '' }}</p>
</article>
@endforeach
</div>
</section>
<section class="landing-section" id="vertrauen" aria-label="Vertrauen">
<div class="landing-section__head">
<p class="landing-section__eyebrow">Warum es passt</p>
<h2 class="landing-section__title">Klar genug für den Alltag, ruhig genug für gutes Produktdesign</h2>
<p class="landing-section__lead">Reduziert gestaltet, aber mit genug Tiefe für Teams, die mehr als nur eine einfache Liste brauchen.</p>
</div>
<div class="landing-proof-grid">
@foreach ($proof as $item)
<article class="landing-card">
<h3>{{ $item['title'] ?? '' }}</h3>
<p>{{ $item['copy'] ?? '' }}</p>
</article>
@endforeach
</div>
</section>
<section class="landing-callout">
<p class="landing-callout__eyebrow">Einfach im Alltag</p>
<h2>Ein gemeinsamer Ort für die Kaffeeliste.</h2>
<p>Weniger suchen. Weniger erklären. Klar durch den Tag.</p>
<p class="landing-section__eyebrow">Zum Start</p>
<h2>Ein gemeinsamer Einstieg für Teams, die Kaffee einfach organisieren wollen.</h2>
<p>Klar im Aufbau, direkt in der Nutzung und bereit für den täglichen Einsatz im Team.</p>
<div class="landing-cta">
<div class="landing-cta__copy">
<strong>Bereit für den Start?</strong>
<span>Direkt zur Anmeldung.</span>
<strong>Direkt loslegen</strong>
<span>Ohne Umwege zur Anmeldung.</span>
</div>
<div class="actions">
<a class="button" href="/login/">Anmelden</a>
<a class="button button--ghost" href="#funktionen">Funktionen ansehen</a>
</div>
<a class="button" href="/login/">Anmelden</a>
</div>
</section>
</div>