patsy/Vault
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mockups done

Browse source
This commit is contained in:
Patsy 2026-08-17 11:46:56 +02:00
parent 257331bb5b
commit 1e253523d5
5 changed files with 6642 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1288
VAULT/hinunher/checkpoint-member-mockup.html Normal file
View file

File diff suppressed because it is too large Load diff

503
VAULT/hinunher/index.html Normal file
View file

@ -0,0 +1,503 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AHK Ehrenamtsmanagement – HTML Mockup</title>
<meta name="description" content="Statischer klickbarer UI-Mockup für AHK Ehrenamtsmanagement">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mockup.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body class="mockup-app">
<div class="app-shell">
<aside class="mock-sidebar" aria-label="Hauptnavigation">
<div class="brand-lockup">
<div class="brand-mark" aria-hidden="true">AHK</div>
<div>
<strong>EHRENAMT</strong>
<span>Vor-Ort-Arbeit</span>
</div>
</div>
<button class="team-switcher" data-page="team" type="button">
<span class="material-icons" aria-hidden="true">groups</span>
<span><small>Aktuelles Team</small><strong>Vor-Ort-Arbeit</strong></span>
<span class="material-icons" aria-hidden="true">expand_more</span>
</button>
<nav class="desktop-nav" aria-label="App-Bereiche">
<p class="nav-label">Mein Bereich</p>
<button class="nav-item is-active" data-page="start"><span class="material-icons">home</span>Start</button>
<button class="nav-item" data-page="schedule"><span class="material-icons">calendar_month</span>Einsatzplan</button>
<button class="nav-item" data-page="chat"><span class="material-icons">forum</span>Teamchat <span class="nav-count">3</span></button>
<button class="nav-item" data-page="documents"><span class="material-icons">folder</span>Dokumente</button>
<button class="nav-item" data-page="team"><span class="material-icons">groups</span>Team</button>
<button class="nav-item" data-page="profile"><span class="material-icons">person</span>Profil</button>
<p class="nav-label">Verwaltung</p>
<button class="nav-item" data-page="team-manage"><span class="material-icons">manage_accounts</span>Team verwalten</button>
<button class="nav-item" data-page="org-manage"><span class="material-icons">domain</span>Organisation</button>
<button class="nav-item" data-page="audit"><span class="material-icons">history</span>Audit Log</button>
</nav>
<div class="mock-sidebar-footer">
<button class="nav-item nav-item--subtle" data-page="login"><span class="material-icons">present_to_all</span>Präsentation ab Login</button>
<div class="mini-account">
<div class="avatar avatar--small">P</div>
<div><strong>Patsy</strong><span>Team-Verwaltung</span></div>
</div>
</div>
</aside>
<header class="mobile-header">
<div class="brand-lockup brand-lockup--mobile">
<div class="brand-mark" aria-hidden="true">AHK</div>
<div><strong>EHRENAMT</strong><span>Vor-Ort-Arbeit</span></div>
</div>
<div class="header-actions">
<button class="icon-button" data-page="notifications" aria-label="Benachrichtigungen">
<span class="material-icons">notifications</span><span class="notification-dot">2</span>
</button>
<button class="avatar avatar--button" data-page="profile" aria-label="Profil öffnen">P</button>
</div>
</header>
<main class="app-main" id="main-content">
<div class="desktop-topbar">
<div class="route-chip" id="routeChip">/team/vor-ort-arbeit/</div>
<div class="desktop-actions">
<button class="icon-button icon-button--light" data-page="notifications" aria-label="Benachrichtigungen">
<span class="material-icons">notifications</span><span class="notification-dot">2</span>
</button>
<button class="btn btn-ghost btn-sm" data-page="profile"><span class="material-icons">person</span>Patsy</button>
</div>
</div>
<!-- LOGIN -->
<section class="screen screen--auth" data-screen="login" hidden>
<div class="auth-panel">
<div class="auth-brand">
<div class="brand-mark brand-mark--large">AHK</div>
<p class="kicker">Ehrenamtsmanagement</p>
<h1>Willkommen zurück</h1>
<p>Mit deiner E-Mail-Adresse erhältst du einen einmaligen Code oder einen direkten Anmeldelink.</p>
</div>
<form class="card auth-card" onsubmit="return false;">
<div class="card-body">
<div class="form-group">
<label for="loginEmail">E-Mail-Adresse</label>
<input class="form-control" id="loginEmail" type="email" value="patsy@example.org" autocomplete="email">
<span class="form-hint">Wir senden den Code nur an deine hinterlegte Login-Adresse.</span>
</div>
<button class="btn btn-primary btn-lg btn-full" data-page="verify" type="button">Code anfordern</button>
</div>
</form>
<p class="auth-footnote">Mockup: Es werden keine Daten versendet.</p>
</div>
</section>
<!-- VERIFY -->
<section class="screen screen--auth" data-screen="verify" hidden>
<div class="auth-panel">
<button class="text-back" data-page="login"><span class="material-icons">arrow_back</span>Zurück</button>
<div class="auth-brand">
<p class="kicker">Fast geschafft</p>
<h1>Code eingeben</h1>
<p>Wir haben einen sechsstelligen Code an <strong>patsy@example.org</strong> geschickt.</p>
</div>
<form class="card auth-card" onsubmit="return false;">
<div class="card-body">
<div class="code-inputs" aria-label="Einmal-Code">
<input value="2" aria-label="Ziffer 1"><input value="4" aria-label="Ziffer 2"><input value="8" aria-label="Ziffer 3"><input value="1" aria-label="Ziffer 4"><input value="7" aria-label="Ziffer 5"><input value="3" aria-label="Ziffer 6">
</div>
<button class="btn btn-primary btn-lg btn-full" data-page="onboarding-name" type="button">Weiter</button>
<button class="btn btn-ghost btn-full" type="button">Neuen Code senden</button>
</div>
</form>
</div>
</section>
<!-- ONBOARDING NAME -->
<section class="screen screen--auth" data-screen="onboarding-name" hidden>
<div class="auth-panel">
<div class="auth-brand">
<p class="kicker">Dein Profil</p>
<h1>Wie sollen wir dich nennen?</h1>
<p>Dieser Name ist für dein Team sichtbar. Deine Login-E-Mail bleibt für normale Teammitglieder verborgen.</p>
</div>
<div class="card auth-card">
<div class="card-body">
<div class="form-group">
<label for="displayName">Anzeigename</label>
<input class="form-control" id="displayName" value="Patsy">
</div>
<div class="avatar-picker" aria-label="Avatar auswählen">
<button class="avatar-choice is-selected"><span class="avatar avatar--a">A</span><span>Avatar A</span></button>
<button class="avatar-choice"><span class="avatar avatar--b">B</span><span>Avatar B</span></button>
<button class="avatar-choice"><span class="avatar avatar--c">C</span><span>Avatar C</span></button>
</div>
<button class="btn btn-primary btn-lg btn-full" data-page="team-select" type="button">Weiter zur Teamauswahl</button>
</div>
</div>
</div>
</section>
<!-- TEAM SELECT -->
<section class="screen screen--auth" data-screen="team-select" hidden>
<div class="auth-panel auth-panel--wide">
<div class="auth-brand">
<p class="kicker">Deine Teams</p>
<h1>Wo möchtest du starten?</h1>
<p>Du kannst später jederzeit zwischen deinen Teams wechseln.</p>
</div>
<div class="team-choice-grid">
<button class="team-choice is-selected" data-page="start">
<span class="team-choice__icon material-icons">diversity_3</span>
<span><strong>Vor-Ort-Arbeit</strong><small>18 Mitglieder · 2 offene Einsätze</small></span>
<span class="material-icons">arrow_forward</span>
</button>
<button class="team-choice" data-page="start">
<span class="team-choice__icon material-icons">local_cafe</span>
<span><strong>Café Bach</strong><small>12 Mitglieder · keine offenen Aufgaben</small></span>
<span class="material-icons">arrow_forward</span>
</button>
</div>
</div>
</section>
<!-- START -->
<section class="screen" data-screen="start">
<header class="page-header member-hero">
<p class="eyebrow">Montag, 17. August</p>
<h1>Guten Morgen, Patsy</h1>
<p class="page-subtitle">Hier ist, was heute für dich und dein Team wichtig ist.</p>
</header>
<article class="urgent-card" data-page="schedule">
<div class="urgent-card__icon"><span class="material-icons">priority_high</span></div>
<div>
<span class="card-label card-label--urgent">Dringend · heute</span>
<h2>Springer:in für heute gesucht</h2>
<p>18:00–21:30 · Café Bach · Noch 1 Position offen</p>
</div>
<span class="material-icons urgent-card__arrow">arrow_forward</span>
</article>
<div class="section-heading">
<div><span class="card-label card-label--upcoming">Nächste Einsätze</span><h2>Dein Plan</h2></div>
<button class="text-action" data-page="schedule">Alle ansehen</button>
</div>
<div class="shift-stack">
<article class="shift-card">
<div class="date-tile"><strong>21</strong><span>AUG</span></div>
<div class="shift-card__content">
<div class="shift-card__title-row"><h3>Freitagabend</h3><span class="badge status-badge-ui status-ok"><span class="material-icons">check_circle</span>Eingeteilt</span></div>
<p>18:30–21:30 · Café Bach</p>
<span class="position-pill">Theke</span>
</div>
</article>
<article class="shift-card">
<div class="date-tile"><strong>28</strong><span>AUG</span></div>
<div class="shift-card__content">
<div class="shift-card__title-row"><h3>Checkpoint-Abend</h3><span class="badge status-badge-ui status-info"><span class="material-icons">schedule</span>Verfügbar</span></div>
<p>17:30–21:00 · Pipinstraße</p>
<span class="position-pill">Hauptposition</span>
</div>
</article>
</div>
<div class="dashboard-grid">
<button class="dashboard-tile" data-page="schedule">
<span class="tile-icon tile-icon--teal material-icons">event_available</span>
<span><small>Action</small><strong>4 Termine offen</strong><em>Verfügbarkeit angeben</em></span>
<span class="material-icons">chevron_right</span>
</button>
<button class="dashboard-tile" data-page="chat">
<span class="tile-icon tile-icon--blue material-icons">forum</span>
<span><small>Info</small><strong>3 neue Nachrichten</strong><em>im Team-Channel</em></span>
<span class="material-icons">chevron_right</span>
</button>
<button class="dashboard-tile" data-page="documents">
<span class="tile-icon material-icons">description</span>
<span><small>Info</small><strong>1 neues Dokument</strong><em>Safer-Sex-Leitfaden</em></span>
<span class="material-icons">chevron_right</span>
</button>
<button class="dashboard-tile" data-page="team">
<span class="tile-icon tile-icon--yellow material-icons">groups</span>
<span><small>Team</small><strong>18 Mitglieder</strong><em>Kontakte & Zuständigkeiten</em></span>
<span class="material-icons">chevron_right</span>
</button>
</div>
</section>
<!-- TEAM -->
<section class="screen" data-screen="team" hidden>
<header class="page-header with-team-switch">
<div><p class="kicker">Vor-Ort-Arbeit</p><h1>Unser Team</h1><p class="page-subtitle">Menschen, Kontakte und aktuelle Team-Infos.</p></div>
<button class="btn btn-ghost btn-sm"><span class="material-icons">swap_horiz</span>Team wechseln</button>
</header>
<div class="team-highlight card">
<div class="card-body">
<span class="card-label card-label--info">Ankündigung</span>
<h2>Teamtreffen am 26. August</h2>
<p>Wir besprechen die September-Planung und sammeln Feedback zur neuen Einsatzstruktur.</p>
<span class="meta-line"><span class="material-icons">campaign</span>von Alex · vor 2 Stunden</span>
</div>
</div>
<div class="section-heading"><div><span class="card-label">Mitglieder</span><h2>18 Personen</h2></div><button class="text-action" data-page="members">Verzeichnis öffnen</button></div>
<div class="member-preview-row">
<div class="avatar avatar--a">A</div><div class="avatar avatar--b">B</div><div class="avatar avatar--c">C</div><div class="avatar">P</div><div class="avatar avatar--muted">+14</div>
</div>
<div class="section-heading"><div><span class="card-label">Aktuell</span><h2>Im Team</h2></div></div>
<div class="card-list">
<button class="list-row" data-page="members"><span class="material-icons list-row__icon">contacts</span><span><strong>Mitgliederverzeichnis</strong><small>Kontaktdaten, Team-Verwaltungen, Zuständigkeiten</small></span><span class="material-icons">chevron_right</span></button>
<button class="list-row" data-page="documents"><span class="material-icons list-row__icon">folder</span><span><strong>Dokumente</strong><small>12 aktuelle Dokumente · 4 im Archiv</small></span><span class="material-icons">chevron_right</span></button>
<button class="list-row" data-page="chat"><span class="material-icons list-row__icon">forum</span><span><strong>Teamkommunikation</strong><small>2 aktive Channels</small></span><span class="nav-count">3</span></button>
</div>
</section>
<!-- MEMBERS -->
<section class="screen" data-screen="members" hidden>
<header class="page-header">
<p class="kicker">Vor-Ort-Arbeit</p><h1>Mitglieder</h1><p class="page-subtitle">Kontaktdaten sind nur sichtbar, wenn sie freiwillig geteilt wurden.</p>
</header>
<div class="search-row"><div class="search-box"><span class="material-icons">search</span><input placeholder="Mitglied suchen …"></div><span class="badge badge-blue">18 aktiv</span></div>
<div class="member-list">
<article class="member-card">
<div class="avatar avatar--a">A</div><div class="member-card__main"><div><h3>Alex</h3><span class="badge badge-teal">Team-Verwaltung</span></div><p>Erreichbar: Signal · ab 17 Uhr</p><a href="#">+49 170 1234567</a></div><button class="icon-button icon-button--light" aria-label="Kontakt"><span class="material-icons">chat</span></button>
</article>
<article class="member-card">
<div class="avatar avatar--b">B</div><div class="member-card__main"><div><h3>Sam</h3></div><p>Erreichbar: SMS · bitte keine Anrufe</p><a href="#">+49 171 9876543</a></div><button class="icon-button icon-button--light" aria-label="Kontakt"><span class="material-icons">sms</span></button>
</article>
<article class="member-card">
<div class="avatar avatar--c">C</div><div class="member-card__main"><div><h3>Jo</h3></div><p class="muted-copy">Keine Kontaktdaten freigegeben</p></div><span class="material-icons muted-icon">lock</span>
</article>
<article class="member-card member-card--admin-extra">
<div class="avatar">M</div><div class="member-card__main"><div><h3>Mehmet</h3><span class="badge badge-muted">Eingeladen</span></div><p>Login: mehmet@example.org · Einladung offen</p><small>Beitritt: noch nicht erfolgt</small></div><button class="btn btn-ghost btn-sm">Details</button>
</article>
</div>
<div class="context-note"><span class="material-icons">visibility</span><span><strong>Verwaltungsansicht:</strong> Die letzte Zeile zeigt exemplarisch Zusatzdaten, die nur Team-Verwaltungen sehen.</span></div>
</section>
<!-- SCHEDULE -->
<section class="screen" data-screen="schedule" hidden>
<header class="page-header">
<p class="kicker">Einsatzplanung</p><h1>September 2026</h1><p class="page-subtitle">Verfügbarkeit offen bis 23. August · Veröffentlichung geplant für 25. August.</p>
</header>
<div class="period-progress card">
<div class="card-body">
<div class="period-progress__top"><span class="badge status-badge-ui status-action"><span class="material-icons">edit_calendar</span>Verfügbarkeit offen</span><strong>3 von 7 beantwortet</strong></div>
<div class="progress-track"><span style="width:43%"></span></div>
<p>Bitte gib für jeden Termin an, ob du verfügbar bist.</p>
</div>
</div>
<div class="availability-list">
<article class="availability-card">
<div class="date-tile"><strong>04</strong><span>SEP</span></div>
<div class="availability-card__main"><h3>Checkpoint-Abend</h3><p>17:30–21:00 · Pipinstraße</p><div class="need-row"><span>Haupt: 2</span><span>Springer: 1</span></div></div>
<div class="availability-actions"><button class="answer-btn answer-btn--yes is-selected"><span class="material-icons">check</span>Ja</button><button class="answer-btn answer-btn--no"><span class="material-icons">close</span>Nein</button></div>
</article>
<article class="availability-card availability-card--urgent">
<div class="date-tile"><strong>18</strong><span>SEP</span></div>
<div class="availability-card__main"><div class="title-with-badge"><h3>Freitagabend</h3><span class="badge badge-coral">Offen</span></div><p>18:00–21:30 · Café Bach</p><div class="need-row"><span>Haupt: 2/2</span><span>Springer: 0/1</span></div></div>
<div class="availability-actions"><button class="answer-btn answer-btn--yes"><span class="material-icons">check</span>Ja</button><button class="answer-btn answer-btn--no"><span class="material-icons">close</span>Nein</button></div>
</article>
<article class="availability-card">
<div class="date-tile"><strong>25</strong><span>SEP</span></div>
<div class="availability-card__main"><h3>Checkpoint-Abend</h3><p>17:30–21:00 · Pipinstraße</p><div class="need-row"><span>Haupt: 2</span><span>Springer: 1</span></div></div>
<div class="availability-actions"><button class="answer-btn answer-btn--yes"><span class="material-icons">check</span>Ja</button><button class="answer-btn answer-btn--no is-selected"><span class="material-icons">close</span>Nein</button></div>
</article>
</div>
</section>
<!-- DOCUMENTS -->
<section class="screen" data-screen="documents" hidden>
<header class="page-header page-header--actions">
<div><p class="kicker">Teamwissen</p><h1>Dokumente</h1><p class="page-subtitle">Freigegebene Materialien für Vor-Ort-Arbeit.</p></div>
<button class="btn btn-primary"><span class="material-icons">upload</span>Hochladen</button>
</header>
<div class="segmented" role="tablist" aria-label="Dokumentenstatus"><button class="is-active">Aktuell <span>12</span></button><button>Archiv <span>4</span></button></div>
<div class="document-list">
<article class="document-card">
<div class="file-icon file-icon--pdf">PDF</div><div><h3>Safer-Sex-Leitfaden 2026</h3><p>Aktuelle Hinweise für Beratung und Vor-Ort-Arbeit.</p><span>PDF · 1,8 MB · aktualisiert 12.08.2026</span></div><button class="icon-button icon-button--light"><span class="material-icons">download</span></button>
</article>
<article class="document-card">
<div class="file-thumb"><span class="material-icons">image</span></div><div><h3>Aufbauplan Infostand</h3><p>Foto mit markierter Positionierung der Materialien.</p><span>JPG · 840 KB · aktualisiert 02.08.2026</span></div><button class="icon-button icon-button--light"><span class="material-icons">visibility</span></button>
</article>
<article class="document-card document-card--pending">
<div class="file-icon">DOCX</div><div><div class="title-with-badge"><h3>Checkliste Materialkiste</h3><span class="badge badge-yellow">Prüfung läuft</span></div><p>Nur für dich und Team-Verwaltung sichtbar.</p><span>DOCX · 95 KB · von dir hochgeladen</span></div><button class="btn btn-ghost btn-sm">Zurückziehen</button>
</article>
</div>
<div class="context-note"><span class="material-icons">photo_camera</span><span>Bitte nur Fotos hochladen, für die die erforderlichen Rechte geklärt sind.</span></div>
</section>
<!-- CHAT -->
<section class="screen screen--chat" data-screen="chat" hidden>
<header class="page-header"><p class="kicker">Teamkommunikation</p><h1>Teamchat</h1><p class="page-subtitle">Keine Dateien, keine Embeds – nur klare Teamkommunikation.</p></header>
<div class="channel-layout">
<aside class="channel-list">
<button class="channel-item"><span class="material-icons">campaign</span><span><strong>Ankündigungen</strong><small>nur Team-Verwaltung schreibt</small></span><span class="nav-count">1</span></button>
<button class="channel-item is-active"><span class="material-icons">tag</span><span><strong>Team</strong><small>3 ungelesen</small></span><span class="nav-count">3</span></button>
<button class="channel-item"><span class="material-icons">tag</span><span><strong>Veranstaltungen</strong><small>keine neuen Nachrichten</small></span></button>
</aside>
<section class="chat-pane">
<div class="chat-pane__header"><div><strong># Team</strong><span>18 Mitglieder</span></div><button class="icon-button icon-button--light"><span class="material-icons">info</span></button></div>
<div class="message-stream">
<div class="chat-day"><span>Heute</span></div>
<article class="message-bubble message-bubble--other"><div class="message-author"><span class="avatar avatar--mini avatar--a">A</span><strong>Alex</strong><time>09:12</time></div><p>Kann jemand am Freitag die Materialkiste schon um 17:30 mitbringen?</p><div class="message-state">✓✓ gelesen von 8/18</div></article>
<article class="message-bubble message-bubble--own"><div class="message-author"><strong>Du</strong><time>09:18</time></div><p>Ja, ich kann sie auf dem Weg mitnehmen.</p><div class="message-state message-state--read">✓✓ gelesen</div></article>
<article class="message-bubble message-bubble--other message-bubble--reply"><div class="reply-reference">Antwort auf deine Nachricht</div><div class="message-author"><span class="avatar avatar--mini avatar--b">B</span><strong>Sam</strong><time>09:22</time></div><p>Perfekt, danke! Dann schreibe ich das so in die Vorbereitung.</p><div class="message-state">✓ gespeichert</div></article>
</div>
<form class="chat-composer" onsubmit="return false;"><textarea aria-label="Nachricht" placeholder="Nachricht an #Team"></textarea><div><span class="composer-hint">https-Link möglich · max. 1 externer Link</span><button class="send-button" aria-label="Senden"><span class="material-icons">send</span></button></div></form>
</section>
</div>
</section>
<!-- PROFILE -->
<section class="screen" data-screen="profile" hidden>
<header class="page-header"><p class="kicker">Mein Konto</p><h1>Profil</h1><p class="page-subtitle">So sehen dich deine Teamkolleg:innen.</p></header>
<div class="profile-grid">
<section class="card profile-card">
<div class="card-body">
<div class="profile-identity"><div class="avatar avatar--large">P</div><div><h2>Patsy</h2><span>Avatar A</span></div></div>
<div class="form-group"><label>Anzeigename</label><input class="form-control" value="Patsy"></div>
<div class="avatar-picker avatar-picker--compact"><button class="avatar-choice is-selected"><span class="avatar avatar--a">A</span><span>A</span></button><button class="avatar-choice"><span class="avatar avatar--b">B</span><span>B</span></button><button class="avatar-choice"><span class="avatar avatar--c">C</span><span>C</span></button></div>
<button class="btn btn-primary">Änderungen speichern</button>
</div>
</section>
<section class="card">
<div class="card-header"><h2>Kontaktdaten im Team</h2><span class="badge badge-muted">Standard: aus</span></div>
<div class="card-body">
<label class="toggle-row"><span><strong>Kontaktdaten teilen</strong><small>Nur Mitglieder deines Teams sehen diese Angaben.</small></span><input type="checkbox"><span class="toggle-ui"></span></label>
<div class="form-group"><label>Telefon</label><input class="form-control" value="+49 170 1234567"></div>
<div class="form-group"><label>Erreichbar per</label><div class="choice-pills"><button class="is-selected">Signal</button><button>SMS</button><button>Anruf</button></div></div>
<div class="form-group"><label>Kontakt-Notiz</label><textarea class="form-control">Am besten ab 17 Uhr.</textarea></div>
</div>
</section>
<section class="card profile-card--wide">
<div class="card-header"><h2>Angemeldete Geräte</h2></div>
<div class="device-row"><span class="material-icons">computer</span><div><strong>Heimdall-home · Brave</strong><small>Dieses Gerät · zuletzt aktiv gerade eben</small></div><span class="badge badge-teal">Aktuell</span></div>
<div class="device-row"><span class="material-icons">smartphone</span><div><strong>Galaxy · Chrome</strong><small>Zuletzt aktiv gestern, 22:14</small></div><button class="btn btn-ghost btn-sm">Abmelden</button></div>
</section>
</div>
</section>
<!-- NOTIFICATIONS -->
<section class="screen" data-screen="notifications" hidden>
<header class="page-header"><p class="kicker">Glocke</p><h1>Benachrichtigungen</h1><p class="page-subtitle">Nur Ereignisse, die deine Aufmerksamkeit brauchen – dauerhafte Zustände bleiben im Dashboard.</p></header>
<div class="notification-list">
<article class="notification-card notification-card--urgent"><span class="material-icons">priority_high</span><div><span class="card-label card-label--urgent">Dringend</span><h3>Offener Dienst in weniger als 24 Stunden</h3><p>Heute, 18:00 · Springer:in noch unbesetzt.</p><time>vor 12 Minuten</time></div></article>
<article class="notification-card notification-card--important"><span class="material-icons">event_available</span><div><span class="card-label card-label--action">Wichtig</span><h3>Deine Einteilung wurde geändert</h3><p>Am 21.08. bist du jetzt für „Theke“ eingeteilt.</p><time>vor 2 Stunden</time></div></article>
<article class="notification-card"><span class="material-icons">reply</span><div><span class="card-label card-label--info">Antwort</span><h3>Sam hat dir im Teamchat geantwortet</h3><p>„Perfekt, danke! Dann schreibe ich das so …“</p><time>heute, 09:22</time></div></article>
<article class="notification-card"><span class="material-icons">campaign</span><div><span class="card-label card-label--info">Ankündigung</span><h3>Teamtreffen am 26. August</h3><p>Neue Ankündigung von Alex.</p><time>gestern</time></div></article>
</div>
</section>
<!-- TEAM MANAGE -->
<section class="screen" data-screen="team-manage" hidden>
<header class="page-header"><p class="kicker">Team-Verwaltung</p><h1>Vor-Ort-Arbeit</h1><p class="page-subtitle">Operative Aufgaben im Team – ohne Organisationsverwaltung.</p></header>
<div class="admin-kpi-grid">
<button class="admin-kpi admin-kpi--urgent"><span class="material-icons">warning</span><strong>2</strong><small>unterbesetzte Einsätze</small></button>
<button class="admin-kpi"><span class="material-icons">event_busy</span><strong>6</strong><small>Rückmeldungen fehlen</small></button>
<button class="admin-kpi"><span class="material-icons">fact_check</span><strong>2</strong><small>Dokumente warten</small></button>
<button class="admin-kpi"><span class="material-icons">mail</span><strong>3</strong><small>offene Einladungen</small></button>
</div>
<section class="card management-section">
<div class="card-header"><h2>Unterbesetzte Einsätze</h2><span class="badge badge-coral">Handlungsbedarf</span></div>
<div class="management-row"><div><strong>Heute · Freitagabend</strong><span>18:00–21:30 · Springer: 0/1</span></div><button class="btn btn-coral btn-sm">Offenen Platz besetzen</button></div>
<div class="management-row"><div><strong>04.09. · Checkpoint-Abend</strong><span>17:30–21:00 · Haupt: 1/2</span></div><button class="btn btn-ghost btn-sm">Planung öffnen</button></div>
</section>
<section class="card management-section">
<div class="card-header"><h2>Fairness-Hilfe</h2><span class="badge badge-blue">Vorschlag</span></div>
<div class="fairness-table">
<div class="fairness-head"><span>Person</span><span>Einsätze</span><span>Letzter Einsatz</span></div>
<div><strong>Sam</strong><span>2</span><span>18.07.</span></div><div><strong>Jo</strong><span>3</span><span>01.08.</span></div><div><strong>Patsy</strong><span>5</span><span>14.08.</span></div>
</div>
</section>
</section>
<!-- ORG MANAGE -->
<section class="screen" data-screen="org-manage" hidden>
<header class="page-header"><p class="kicker">Organisationsverwaltung</p><h1>Aidshilfe Köln</h1><p class="page-subtitle">Struktur, Rechte, Brand Profiles und Module – keine teaminternen Fachinhalte.</p></header>
<div class="context-note context-note--strong"><span class="material-icons">shield</span><span>Diese Ebene zeigt bewusst <strong>keinen Teamchat, keine Einsatzdetails und keine Teamdokumente</strong>.</span></div>
<div class="org-grid">
<button class="org-card"><span class="material-icons">groups</span><strong>7 Teams</strong><small>Teams anlegen, archivieren und verwalten</small><span class="material-icons">arrow_forward</span></button>
<button class="org-card"><span class="material-icons">admin_panel_settings</span><strong>Team-Verwaltungen</strong><small>Rollen pro Team vergeben</small><span class="material-icons">arrow_forward</span></button>
<button class="org-card"><span class="material-icons">palette</span><strong>Brand Profiles</strong><small>Farben, Typografie und Team-Identität</small><span class="material-icons">arrow_forward</span></button>
<button class="org-card"><span class="material-icons">extension</span><strong>Module</strong><small>Scheduling, Chat und Dokumente aktivieren</small><span class="material-icons">arrow_forward</span></button>
<button class="org-card"><span class="material-icons">verified_user</span><strong>Org-Admins</strong><small>Organisationsrechte verwalten</small><span class="material-icons">arrow_forward</span></button>
<button class="org-card" data-page="audit"><span class="material-icons">history</span><strong>Audit Log</strong><small>Administrative Änderungen nachvollziehen</small><span class="material-icons">arrow_forward</span></button>
</div>
</section>
<!-- AUDIT -->
<section class="screen" data-screen="audit" hidden>
<header class="page-header"><p class="kicker">Organisation</p><h1>Audit Log</h1><p class="page-subtitle">Nur relevante administrative Änderungen. Chat und Verfügbarkeiten werden hier nicht protokolliert.</p></header>
<div class="filter-bar card"><div class="search-box"><span class="material-icons">search</span><input placeholder="Audit Log durchsuchen …"></div><select class="form-control"><option>Alle Ereignisse</option><option>Teams</option><option>Rechte</option><option>Module</option><option>Dokumente</option></select></div>
<div class="audit-list card">
<div class="audit-row"><span class="audit-icon"><span class="material-icons">manage_accounts</span></span><div><strong>Team-Verwaltung ernannt</strong><p>Alex wurde für „Vor-Ort-Arbeit“ als Team-Verwaltung ernannt.</p><span>Patsy · 17.08.2026, 10:42</span></div></div>
<div class="audit-row"><span class="audit-icon"><span class="material-icons">extension</span></span><div><strong>Modul aktiviert</strong><p>„Dokumente“ wurde für Team „Café Bach“ aktiviert.</p><span>Org-Admin · 16.08.2026, 14:08</span></div></div>
<div class="audit-row"><span class="audit-icon audit-icon--danger"><span class="material-icons">delete_forever</span></span><div><strong>Dokument dauerhaft gelöscht</strong><p>„Alte Kontaktdaten.xlsx“ wurde dauerhaft entfernt.</p><span>Alex · 15.08.2026, 18:31</span></div></div>
</div>
</section>
</main>
<nav class="bottom-nav" aria-label="Mobile Navigation">
<button class="bottom-nav__item is-active" data-page="start"><span class="material-icons">home</span><span>Start</span></button>
<button class="bottom-nav__item" data-page="schedule"><span class="material-icons">calendar_month</span><span>Plan</span></button>
<button class="bottom-nav__item" data-page="chat"><span class="material-icons">forum</span><span>Chat</span><i>3</i></button>
<button class="bottom-nav__item" data-page="documents"><span class="material-icons">folder</span><span>Dateien</span></button>
<button class="bottom-nav__item" data-page="team"><span class="material-icons">groups</span><span>Team</span></button>
<button class="bottom-nav__item" data-page="profile"><span class="material-icons">person</span><span>Profil</span></button>
</nav>
</div>
<script>
const screens = [...document.querySelectorAll('[data-screen]')];
const pageButtons = [...document.querySelectorAll('[data-page]')];
const routeChip = document.getElementById('routeChip');
const routes = {
login: '/auth/login/', verify: '/auth/verify/', 'onboarding-name': '/onboarding/profile/', 'team-select': '/onboarding/team/',
start: '/team/vor-ort-arbeit/', team: '/team/vor-ort-arbeit/team/', members: '/team/vor-ort-arbeit/members/',
schedule: '/team/vor-ort-arbeit/scheduling/', documents: '/team/vor-ort-arbeit/documents/', chat: '/team/vor-ort-arbeit/chat/',
profile: '/profile/', notifications: '/notifications/', 'team-manage': '/team/vor-ort-arbeit/manage/', 'org-manage': '/org/aidshilfe-koeln/manage/', audit: '/org/aidshilfe-koeln/manage/audit/'
};
function showPage(page, pushHash = true) {
const target = screens.find(screen => screen.dataset.screen === page) || screens.find(screen => screen.dataset.screen === 'start');
screens.forEach(screen => screen.hidden = screen !== target);
document.querySelectorAll('.nav-item, .bottom-nav__item').forEach(button => button.classList.toggle('is-active', button.dataset.page === page));
routeChip.textContent = routes[page] || routes.start;
if (pushHash) history.replaceState(null, '', '#' + page);
window.scrollTo({ top: 0, behavior: 'smooth' });
}
pageButtons.forEach(button => button.addEventListener('click', () => showPage(button.dataset.page)));
document.querySelectorAll('.answer-btn').forEach(button => {
button.addEventListener('click', () => {
button.parentElement.querySelectorAll('.answer-btn').forEach(b => b.classList.remove('is-selected'));
button.classList.add('is-selected');
});
});
document.querySelectorAll('.avatar-choice').forEach(button => {
button.addEventListener('click', () => {
button.closest('.avatar-picker').querySelectorAll('.avatar-choice').forEach(b => b.classList.remove('is-selected'));
button.classList.add('is-selected');
});
});
const initial = location.hash.replace('#','');
if (initial && screens.some(s => s.dataset.screen === initial)) showPage(initial, false);
</script>
</body>
</html>

400
VAULT/hinunher/mockup.css Normal file
View file

@ -0,0 +1,400 @@
/*
* AHK Ehrenamtsmanagement — Präsentations-Mockup
* Ergänzt die unveränderte style.css um die mobile Mitglieder-App.
*/
:root {
--brand-ink: #07182E;
--brand-deep: #061126;
--brand-teal: #00858A;
--brand-teal-strong: #005F61;
--brand-aqua: #52E0CF;
--brand-blue: #2596BE;
--brand-coral: #F04A67;
--brand-yellow: #F6E74A;
--brand-mist: #F4FAFC;
--brand-paper: #FFFFFF;
}
body.mockup-app {
display: block;
min-height: 100vh;
color: var(--brand-ink);
background: var(--brand-deep);
overflow-x: hidden;
}
button { min-height: 44px; }
button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; background: var(--brand-mist); }
.mock-sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 40;
width: 260px;
display: none;
flex-direction: column;
color: #fff;
background:
radial-gradient(circle at 14% 8%, rgba(82,224,207,.25), transparent 20rem),
linear-gradient(165deg, var(--brand-teal-strong), var(--brand-deep) 78%);
border-right: 1px solid rgba(255,255,255,.1);
}
.brand-lockup { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.1rem .9rem; }
.brand-lockup strong { display: block; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .04em; line-height: .85; }
.brand-lockup span { display: block; margin-top: .18rem; color: rgba(255,255,255,.7); font-size: .7rem; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid var(--brand-aqua); border-radius: 12px 4px 12px 4px; color: var(--brand-yellow); font-family: var(--font-display); font-size: 1.05rem; font-weight: 900; letter-spacing: .03em; transform: rotate(-2deg); }
.brand-mark--large { width: 62px; height: 62px; margin: 0 auto 1.2rem; font-size: 1.4rem; }
.team-switcher { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; width: calc(100% - 1.4rem); margin: .35rem .7rem .7rem; padding: .72rem .8rem; border: 1px solid rgba(255,255,255,.13); border-radius: .75rem; color: #fff; background: rgba(255,255,255,.06); text-align: left; cursor: pointer; }
.team-switcher small, .team-switcher strong { display: block; }
.team-switcher small { color: rgba(255,255,255,.52); font-size: .63rem; text-transform: uppercase; letter-spacing: .07em; }
.team-switcher strong { font-size: .82rem; }
.desktop-nav { display: flex; flex: 1; flex-direction: column; gap: 2px; overflow-y: auto; padding: .2rem .65rem 1rem; }
.nav-label { padding: 1rem .7rem .35rem; color: rgba(255,255,255,.36); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: .68rem; width: 100%; min-height: 46px; padding: .62rem .7rem; border: 0; border-radius: .65rem; color: rgba(255,255,255,.76); background: transparent; text-align: left; cursor: pointer; font-weight: 650; }
.nav-item .material-icons { color: rgba(255,255,255,.44); font-size: 1.15rem; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.is-active { color: #fff; background: rgba(82,224,207,.16); box-shadow: inset 3px 0 0 var(--brand-aqua); }
.nav-item.is-active .material-icons { color: var(--brand-yellow); }
.nav-count { display: inline-grid; min-width: 1.3rem; height: 1.3rem; margin-left: auto; padding: 0 .3rem; place-items: center; border-radius: 999px; color: #fff; background: var(--brand-coral); font-size: .65rem; font-style: normal; font-weight: 800; }
.nav-item--subtle { margin-bottom: .6rem; color: rgba(255,255,255,.55); font-size: .78rem; }
.mock-sidebar-footer { padding: .7rem; border-top: 1px solid rgba(255,255,255,.1); }
.mini-account { display: flex; align-items: center; gap: .65rem; padding: .7rem .55rem; }
.mini-account strong, .mini-account span { display: block; }
.mini-account strong { font-size: .8rem; }
.mini-account span { color: var(--brand-aqua); font-size: .65rem; }
.mobile-header { position: sticky; top: 0; z-index: 30; display: flex; min-height: 66px; align-items: center; justify-content: space-between; padding: 0 .8rem; color: #fff; background: linear-gradient(135deg, var(--brand-teal-strong), var(--brand-deep)); box-shadow: 0 3px 18px rgba(6,17,38,.2); }
.brand-lockup--mobile { padding: 0; }
.brand-lockup--mobile .brand-mark { width: 35px; height: 35px; border-radius: 10px 3px 10px 3px; font-size: .84rem; }
.brand-lockup--mobile strong { font-size: 1.1rem; }
.brand-lockup--mobile span { font-size: .62rem; }
.header-actions { display: flex; align-items: center; gap: .35rem; }
.icon-button { position: relative; display: inline-grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }
.icon-button:hover { background: rgba(255,255,255,.08); }
.icon-button--light { color: var(--brand-ink); background: #fff; border: 1px solid rgba(7,24,46,.12); }
.icon-button--light:hover { color: var(--brand-teal-strong); background: #eef8f9; }
.notification-dot { position: absolute; top: 7px; right: 6px; display: grid; min-width: 17px; height: 17px; padding: 0 4px; place-items: center; border: 2px solid var(--brand-deep); border-radius: 999px; color: #fff; background: var(--brand-coral); font-size: .58rem; font-weight: 800; }
.notification-dot::after { content: '2'; }
.avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--brand-teal), var(--brand-blue)); font-weight: 800; box-shadow: 0 2px 7px rgba(7,24,46,.15); }
.avatar--button { width: 38px; height: 38px; min-height: 38px; border: 2px solid rgba(255,255,255,.65); cursor: pointer; }
.avatar--small { width: 34px; height: 34px; flex-basis: 34px; }
.avatar--mini { width: 26px; height: 26px; flex-basis: 26px; border-width: 1px; font-size: .7rem; }
.avatar--large { width: 72px; height: 72px; flex-basis: 72px; font-size: 1.35rem; }
.avatar--a { background: linear-gradient(135deg, #00858A, #005F61); }
.avatar--b { background: linear-gradient(135deg, #2596BE, #5264d9); }
.avatar--c { background: linear-gradient(135deg, #F04A67, #b744c4); }
.avatar--muted { color: var(--brand-ink); background: #dceff2; border-color: #fff; }
main.app-main {
margin: 0;
min-height: calc(100vh - 66px);
padding: 1.2rem .9rem 6.4rem;
color: var(--brand-ink);
background: var(--brand-mist);
}
.desktop-topbar { display: none; }
.screen { width: min(100%, 1040px); margin: 0 auto; animation: page-in .18s ease-out; }
@keyframes page-in { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-header { margin-bottom: 1.35rem; }
.page-header h1, .member-hero h1 { margin: 0 0 .4rem; color: var(--brand-ink); font-family: var(--font-display); font-size: clamp(2.25rem, 9vw, 3.6rem); font-weight: 700; line-height: .88; letter-spacing: -.015em; text-transform: uppercase; }
.page-subtitle { max-width: 48rem; color: #425e70 !important; font-size: .9rem; }
.eyebrow { margin-bottom: .42rem; color: var(--brand-teal-strong); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kicker { color: var(--brand-teal) !important; }
.with-team-switch, .page-header--actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.card { border-color: rgba(7,24,46,.12); background: #fff; box-shadow: 0 5px 18px rgba(7,24,46,.06); }
.card-header { background: #edf7f8; border-color: rgba(7,24,46,.1); }
.card-header h2, .card-header h3 { color: var(--brand-ink); }
.card-body { color: #30495c; }
.btn-primary { color: #fff !important; background: #087b7c !important; border-color: #087b7c !important; }
.btn-primary:hover { background: #05696a !important; }
.btn-ghost { color: var(--brand-ink); border-color: rgba(7,24,46,.18); background: #fff; }
.btn-ghost:hover { color: var(--brand-ink); border-color: var(--brand-teal); background: #edf7f8; }
.card-label { display: block; margin-bottom: .35rem; color: #607786; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.card-label--urgent { color: #b62542; }
.card-label--action { color: #8b5a00; }
.card-label--upcoming, .card-label--info { color: #087b7c; }
.urgent-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; margin-bottom: 1.8rem; padding: 1rem; border: 1px solid rgba(240,74,103,.3); border-left: 5px solid var(--brand-coral); border-radius: 1rem; background: linear-gradient(110deg, #fff3f5, #fff); box-shadow: 0 6px 18px rgba(240,74,103,.09); cursor: pointer; }
.urgent-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .75rem; color: #fff; background: var(--brand-coral); }
.urgent-card h2 { margin: 0 0 .15rem; font-size: 1rem; }
.urgent-card p { color: #4a6474; font-size: .78rem; }
.urgent-card__arrow { color: var(--brand-coral); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1.7rem 0 .8rem; }
.section-heading h2 { margin: 0; color: var(--brand-ink); font-size: 1.1rem; }
.text-action, .text-back { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0; border: 0; color: #087b7c; background: transparent; cursor: pointer; font-size: .78rem; font-weight: 800; }
.shift-stack { display: grid; gap: .7rem; }
.shift-card { display: grid; grid-template-columns: auto 1fr; gap: .85rem; padding: .85rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; background: #fff; box-shadow: 0 3px 12px rgba(7,24,46,.05); }
.date-tile { display: grid; width: 52px; height: 58px; place-items: center; align-content: center; border-radius: .7rem; color: #fff; background: var(--brand-teal-strong); }
.date-tile strong { font-family: var(--font-display); font-size: 1.55rem; line-height: .9; }
.date-tile span { margin-top: .2rem; color: var(--brand-aqua); font-size: .57rem; font-weight: 900; letter-spacing: .1em; }
.shift-card__content { min-width: 0; }
.shift-card__title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem; }
.shift-card h3 { color: var(--brand-ink); font-size: .92rem; }
.shift-card p { margin: .1rem 0 .4rem; color: #5c7280; font-size: .76rem; }
.position-pill { display: inline-flex; padding: .18rem .5rem; border-radius: 999px; color: #075f60; background: #e2f5f3; font-size: .67rem; font-weight: 800; }
.status-badge-ui { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid transparent; }
.status-badge-ui .material-icons { font-size: .9rem; }
.status-ok { color: #0a654f; background: #e5f6ef; border-color: #b9e8d4; }
.status-info { color: #075c70; background: #e4f4f8; border-color: #b7dfe8; }
.status-action { color: #6b5100; background: #fff5c9; border-color: #ead66b; }
.dashboard-grid { display: grid; gap: .7rem; margin-top: 1.3rem; }
.dashboard-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; width: 100%; padding: .9rem; border: 1px solid rgba(7,24,46,.1); border-radius: .85rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; box-shadow: 0 3px 10px rgba(7,24,46,.04); }
.dashboard-tile > span:nth-child(2) { display: grid; }
.dashboard-tile small { color: #6b7e89; font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-tile strong { margin-top: .1rem; font-size: .88rem; }
.dashboard-tile em { color: #667c89; font-size: .72rem; font-style: normal; }
.tile-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .72rem; color: #075f60; background: #e1f3f2; }
.tile-icon--blue { color: #176b8a; background: #e1f0f5; }
.tile-icon--yellow { color: #725600; background: #fff8c9; }
.team-highlight h2 { margin: .15rem 0 .35rem; color: var(--brand-ink); font-size: 1.1rem; }
.team-highlight p { color: #425e70; }
.meta-line { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; color: #637b89; font-size: .72rem; }
.meta-line .material-icons { font-size: 1rem; }
.member-preview-row { display: flex; padding-left: .3rem; }
.member-preview-row .avatar { margin-left: -8px; }
.member-preview-row .avatar:first-child { margin-left: 0; }
.card-list { overflow: hidden; border: 1px solid rgba(7,24,46,.11); border-radius: 1rem; background: #fff; }
.list-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; width: 100%; padding: .9rem 1rem; border: 0; border-bottom: 1px solid rgba(7,24,46,.09); color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; }
.list-row:last-child { border-bottom: 0; }
.list-row span:nth-child(2) { display: grid; }
.list-row strong { font-size: .84rem; }
.list-row small { color: #687f8c; font-size: .7rem; }
.list-row__icon { color: #087b7c; }
.search-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1rem; }
.search-box { display: flex; flex: 1; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .75rem; border: 1px solid rgba(7,24,46,.15); border-radius: .7rem; background: #fff; }
.search-box .material-icons { color: #6b7f8c; font-size: 1.1rem; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--brand-ink); background: transparent; }
.member-list { display: grid; gap: .65rem; }
.member-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid rgba(7,24,46,.11); border-radius: .85rem; background: #fff; }
.member-card__main { min-width: 0; }
.member-card__main > div { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.member-card h3 { color: var(--brand-ink); font-size: .92rem; }
.member-card p { margin-top: .12rem; color: #536d7d; font-size: .73rem; }
.member-card a { display: inline-block; margin-top: .2rem; color: #087b7c; font-size: .74rem; font-weight: 800; }
.member-card small { color: #6a7d88; font-size: .67rem; }
.muted-copy, .muted-icon { color: #81909a !important; }
.member-card--admin-extra { border-style: dashed; background: #f9fcfd; }
.context-note { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; padding: .8rem .9rem; border-left: 4px solid var(--brand-blue); border-radius: .55rem; color: #3a596b; background: #eaf4f7; font-size: .75rem; line-height: 1.5; }
.context-note .material-icons { color: #176b8a; font-size: 1.05rem; }
.context-note--strong { margin: 0 0 1.2rem; border-left-color: var(--brand-teal); background: #e7f5f4; }
.period-progress { margin-bottom: 1rem; }
.period-progress__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.period-progress__top strong { color: var(--brand-ink); font-size: .8rem; }
.progress-track { height: 8px; margin: .8rem 0 .45rem; overflow: hidden; border-radius: 999px; background: #dcebed; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-teal), var(--brand-blue)); }
.period-progress p { color: #687e8b; font-size: .72rem; }
.availability-list { display: grid; gap: .7rem; }
.availability-card { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .85rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; background: #fff; }
.availability-card--urgent { border-left: 4px solid var(--brand-coral); }
.availability-card__main h3 { color: var(--brand-ink); font-size: .9rem; }
.availability-card__main p { color: #607886; font-size: .72rem; }
.need-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.need-row span { padding: .18rem .45rem; border-radius: .4rem; color: #496777; background: #edf5f6; font-size: .65rem; font-weight: 700; }
.availability-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.answer-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 44px; border: 1px solid rgba(7,24,46,.15); border-radius: .6rem; color: #526b7b; background: #fff; cursor: pointer; font-weight: 800; }
.answer-btn .material-icons { font-size: 1rem; }
.answer-btn--yes.is-selected { color: #075f60; border-color: #62bdb0; background: #ddf5f1; }
.answer-btn--no.is-selected { color: #a82440; border-color: #ef9bad; background: #fff0f3; }
.title-with-badge { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.segmented { display: inline-grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 1rem; padding: 4px; border-radius: .75rem; background: #dcebed; }
.segmented button { min-height: 40px; border: 0; border-radius: .55rem; color: #5b7482; background: transparent; font-weight: 800; cursor: pointer; }
.segmented button.is-active { color: var(--brand-ink); background: #fff; box-shadow: 0 2px 8px rgba(7,24,46,.08); }
.segmented span { display: inline-grid; min-width: 20px; height: 20px; margin-left: .25rem; place-items: center; border-radius: 999px; background: #e7f1f3; font-size: .64rem; }
.document-list { display: grid; gap: .7rem; }
.document-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; background: #fff; }
.document-card h3 { color: var(--brand-ink); font-size: .88rem; }
.document-card p { margin: .12rem 0 .3rem; color: #506b7b; font-size: .72rem; }
.document-card > div:nth-child(2) > span:last-child { color: #74858f; font-size: .65rem; }
.file-icon, .file-thumb { display: grid; width: 48px; height: 56px; place-items: center; border-radius: .55rem; color: #176b8a; background: #e2f0f5; font-size: .62rem; font-weight: 900; }
.file-icon--pdf { color: #ad2946; background: #fbe8ec; }
.file-thumb { color: #075f60; background: linear-gradient(145deg, #dff5f1, #c6e9e8); }
.document-card--pending { border-style: dashed; background: #fffdf2; }
.channel-layout { display: grid; gap: .7rem; }
.channel-list { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .2rem; }
.channel-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; min-width: 180px; min-height: 58px; padding: .6rem .7rem; border: 1px solid rgba(7,24,46,.11); border-radius: .7rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; }
.channel-item.is-active { border-color: #61bcb7; background: #e6f5f3; }
.channel-item .material-icons { color: #087b7c; font-size: 1.1rem; }
.channel-item span:nth-child(2) { display: grid; }
.channel-item strong { font-size: .78rem; }
.channel-item small { color: #667c89; font-size: .62rem; }
.chat-pane { display: flex; min-height: 560px; flex-direction: column; overflow: hidden; border: 1px solid rgba(7,24,46,.11); border-radius: 1rem; background: #fff; box-shadow: 0 5px 18px rgba(7,24,46,.05); }
.chat-pane__header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid rgba(7,24,46,.1); background: #edf7f8; }
.chat-pane__header strong, .chat-pane__header span { display: block; }
.chat-pane__header strong { color: var(--brand-ink); }
.chat-pane__header span { color: #6c818c; font-size: .66rem; }
.message-stream { display: flex; flex: 1; flex-direction: column; gap: .85rem; padding: .9rem; overflow-y: auto; background: linear-gradient(#f8fcfd, #fff); }
.chat-day { display: flex; align-items: center; gap: .5rem; color: #87959e; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.chat-day::before, .chat-day::after { content: ''; flex: 1; height: 1px; background: #dce9ec; }
.message-bubble { max-width: 88%; align-self: flex-start; padding: .7rem .8rem; border: 1px solid #dce7ea; border-radius: .9rem .9rem .9rem .2rem; background: #fff; box-shadow: 0 2px 6px rgba(7,24,46,.04); }
.message-bubble--own { align-self: flex-end; border-color: #9ddbd4; border-radius: .9rem .9rem .2rem .9rem; background: #def3f0; }
.message-bubble--reply { border-left: 4px solid var(--brand-blue); }
.message-author { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.message-author strong { color: var(--brand-ink); font-size: .72rem; }
.message-author time { margin-left: auto; color: #7e9099; font-size: .6rem; }
.message-bubble p { color: #304d5e; font-size: .78rem; line-height: 1.48; }
.message-state { margin-top: .32rem; color: #86949b; font-size: .58rem; text-align: right; }
.message-state--read { color: #087b7c; font-weight: 800; }
.reply-reference { margin: -.15rem 0 .45rem; padding: .3rem .45rem; border-left: 3px solid var(--brand-blue); color: #48687a; background: #edf5f8; font-size: .62rem; }
.chat-composer { padding: .7rem; border-top: 1px solid rgba(7,24,46,.1); background: #edf7f8; }
.chat-composer textarea { width: 100%; min-height: 76px; padding: .65rem; border: 1px solid rgba(7,24,46,.15); border-radius: .65rem; color: var(--brand-ink); background: #fff; resize: none; }
.chat-composer > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; }
.composer-hint { color: #73858f; font-size: .58rem; }
.send-button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: .65rem; color: #fff; background: #087b7c; cursor: pointer; }
.profile-grid { display: grid; gap: .9rem; }
.profile-identity { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.profile-identity h2 { color: var(--brand-ink); font-size: 1.15rem; }
.profile-identity span { color: #6f828d; font-size: .72rem; }
.avatar-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1rem 0; }
.avatar-choice { display: grid; justify-items: center; gap: .3rem; min-height: 84px; padding: .55rem; border: 1px solid rgba(7,24,46,.14); border-radius: .65rem; color: #526b7b; background: #fff; cursor: pointer; }
.avatar-choice.is-selected { border-color: #087b7c; box-shadow: inset 0 0 0 1px #087b7c; background: #eef9f8; }
.avatar-choice span:last-child { font-size: .65rem; font-weight: 800; }
.avatar-picker--compact { grid-template-columns: repeat(3, minmax(70px, 110px)); }
.toggle-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; margin-bottom: 1rem; cursor: pointer; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { color: var(--brand-ink); font-size: .84rem; }
.toggle-row small { color: #6d818d; font-size: .68rem; }
.toggle-row input { position: absolute; opacity: 0; }
.toggle-ui { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #c8d6db; transition: .18s ease; }
.toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(7,24,46,.2); transition: .18s ease; }
.toggle-row input:checked + .toggle-ui { background: #087b7c; }
.toggle-row input:checked + .toggle-ui::after { transform: translateX(20px); }
.choice-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.choice-pills button { min-height: 38px; padding: .35rem .65rem; border: 1px solid rgba(7,24,46,.14); border-radius: 999px; color: #566f7e; background: #fff; cursor: pointer; }
.choice-pills button.is-selected { color: #075f60; border-color: #6dbfb8; background: #def3ef; }
.device-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .85rem 1rem; border-top: 1px solid rgba(7,24,46,.09); }
.device-row:first-of-type { border-top: 0; }
.device-row > .material-icons { color: #087b7c; }
.device-row strong, .device-row small { display: block; }
.device-row strong { color: var(--brand-ink); font-size: .78rem; }
.device-row small { color: #71858f; font-size: .65rem; }
.notification-list { display: grid; gap: .7rem; }
.notification-card { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .9rem; border: 1px solid rgba(7,24,46,.1); border-radius: .85rem; background: #fff; }
.notification-card > .material-icons { display: grid; width: 40px; height: 40px; place-items: center; border-radius: .65rem; color: #176b8a; background: #e3f1f5; }
.notification-card--urgent { border-left: 4px solid var(--brand-coral); }
.notification-card--urgent > .material-icons { color: #b62542; background: #ffe7ec; }
.notification-card--important { border-left: 4px solid #d7ad32; }
.notification-card--important > .material-icons { color: #805d00; background: #fff5cc; }
.notification-card h3 { color: var(--brand-ink); font-size: .84rem; }
.notification-card p { margin: .12rem 0 .3rem; color: #536d7d; font-size: .72rem; }
.notification-card time { color: #86959d; font-size: .62rem; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1.2rem; }
.admin-kpi { display: grid; min-height: 122px; align-content: center; justify-items: center; gap: .15rem; padding: .8rem; border: 1px solid rgba(7,24,46,.11); border-top: 4px solid #087b7c; border-radius: .85rem; color: var(--brand-ink); background: #fff; cursor: pointer; }
.admin-kpi .material-icons { color: #087b7c; }
.admin-kpi strong { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
.admin-kpi small { color: #667d8a; text-align: center; }
.admin-kpi--urgent { border-top-color: var(--brand-coral); }
.admin-kpi--urgent .material-icons, .admin-kpi--urgent strong { color: #b62542; }
.management-section { margin-bottom: 1rem; }
.management-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1rem; border-top: 1px solid rgba(7,24,46,.09); }
.management-row:first-of-type { border-top: 0; }
.management-row strong, .management-row span { display: block; }
.management-row strong { color: var(--brand-ink); font-size: .8rem; }
.management-row span { color: #617987; font-size: .68rem; }
.fairness-table { display: grid; }
.fairness-table > div { display: grid; grid-template-columns: 1fr 70px 110px; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid rgba(7,24,46,.08); color: #526d7d; font-size: .72rem; }
.fairness-table .fairness-head { color: #71848e; background: #f6fafb; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.fairness-table strong { color: var(--brand-ink); }
.org-grid { display: grid; gap: .75rem; }
.org-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; }
.org-card > .material-icons:first-child { display: grid; width: 44px; height: 44px; place-items: center; border-radius: .7rem; color: #075f60; background: #e3f4f2; }
.org-card strong, .org-card small { display: block; }
.org-card strong { font-size: .86rem; }
.org-card small { color: #687f8c; font-size: .68rem; }
.org-card > .material-icons:last-child { color: #80919a; }
.filter-bar { display: grid; gap: .7rem; margin-bottom: 1rem; padding: .8rem; }
.audit-list { overflow: hidden; }
.audit-row { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .95rem 1rem; border-top: 1px solid rgba(7,24,46,.09); }
.audit-row:first-child { border-top: 0; }
.audit-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: .65rem; color: #075f60; background: #e2f3f1; }
.audit-icon--danger { color: #ad2946; background: #fde8ed; }
.audit-row strong { color: var(--brand-ink); font-size: .8rem; }
.audit-row p { margin: .15rem 0 .3rem; color: #4b6777; font-size: .72rem; }
.audit-row div > span { color: #84949c; font-size: .62rem; }
.screen--auth { min-height: calc(100vh - 9rem); display: grid; place-items: center; }
.auth-panel { width: min(100%, 430px); margin: 0 auto; }
.auth-panel--wide { width: min(100%, 700px); }
.auth-brand { margin-bottom: 1rem; text-align: center; }
.auth-brand h1 { margin: 0 0 .6rem; color: var(--brand-ink); font-family: var(--font-display); font-size: clamp(2.5rem, 10vw, 4rem); line-height: .88; text-transform: uppercase; }
.auth-brand p { color: #526e7e; }
.auth-card { width: 100%; }
.auth-footnote { margin-top: .8rem; color: #71848f; font-size: .68rem; text-align: center; }
.code-inputs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; margin-bottom: 1rem; }
.code-inputs input { width: 100%; min-width: 0; height: 52px; border: 1px solid rgba(7,24,46,.16); border-radius: .55rem; color: var(--brand-ink); background: #f8fcfd; text-align: center; font-size: 1.2rem; font-weight: 800; }
.auth-card .btn + .btn { margin-top: .55rem; }
.team-choice-grid { display: grid; gap: .7rem; }
.team-choice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid rgba(7,24,46,.12); border-radius: .9rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; }
.team-choice.is-selected { border-color: #6cbfb8; box-shadow: inset 4px 0 0 #087b7c; }
.team-choice__icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: .7rem; color: #075f60; background: #e0f3f1; }
.team-choice strong, .team-choice small { display: block; }
.team-choice small { color: #6b808b; font-size: .68rem; }
.bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 35; display: grid; grid-template-columns: repeat(6, 1fr); min-height: 66px; padding: 4px max(2px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(2px, env(safe-area-inset-left)); border-top: 1px solid rgba(255,255,255,.12); background: rgba(6,17,38,.97); box-shadow: 0 -5px 20px rgba(6,17,38,.18); backdrop-filter: blur(14px); }
.bottom-nav__item { position: relative; display: grid; min-width: 0; min-height: 56px; place-items: center; align-content: center; gap: 1px; padding: 4px 1px; border: 0; border-radius: .55rem; color: rgba(255,255,255,.58); background: transparent; cursor: pointer; font-size: .56rem; font-weight: 750; }
.bottom-nav__item .material-icons { font-size: 1.25rem; }
.bottom-nav__item.is-active { color: var(--brand-aqua); background: rgba(82,224,207,.1); }
.bottom-nav__item i { position: absolute; top: 2px; right: calc(50% - 18px); display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 999px; color: #fff; background: var(--brand-coral); font-size: .55rem; font-style: normal; font-weight: 900; }
@media (min-width: 680px) {
main.app-main { padding: 1.7rem 1.4rem 7rem; }
.dashboard-grid { grid-template-columns: repeat(2, 1fr); }
.availability-card { grid-template-columns: auto 1fr auto; align-items: center; }
.availability-actions { grid-column: auto; display: flex; }
.answer-btn { min-width: 68px; }
.profile-grid { grid-template-columns: 1fr 1fr; }
.profile-card--wide { grid-column: 1 / -1; }
.admin-kpi-grid { grid-template-columns: repeat(4, 1fr); }
.org-grid { grid-template-columns: repeat(2, 1fr); }
.filter-bar { grid-template-columns: 1fr 220px; align-items: center; }
}
@media (min-width: 900px) {
.mock-sidebar { display: flex; }
.mobile-header, .bottom-nav { display: none; }
main.app-main { margin-left: 260px; min-height: 100vh; padding: 5.7rem 2rem 4rem; }
.desktop-topbar { position: fixed; top: 0; right: 0; left: 260px; z-index: 25; display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 0 2rem; border-bottom: 1px solid rgba(7,24,46,.08); background: rgba(244,250,252,.92); backdrop-filter: blur(12px); }
.route-chip { padding: .35rem .6rem; border: 1px solid rgba(7,24,46,.08); border-radius: .45rem; color: #657c88; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.desktop-actions { display: flex; align-items: center; gap: .5rem; }
.screen { margin: 0; }
.member-hero { padding-top: .4rem; }
.shift-stack { grid-template-columns: repeat(2, 1fr); }
.channel-layout { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.channel-list { display: grid; overflow: visible; }
.channel-item { min-width: 0; }
.org-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
main.app-main { padding-right: 3rem; padding-left: 3rem; }
.dashboard-grid { grid-template-columns: repeat(4, 1fr); }
.dashboard-tile { grid-template-columns: auto 1fr; }
.dashboard-tile > .material-icons:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.screen { animation: none; }
* { scroll-behavior: auto !important; }
}

4313
VAULT/hinunher/style.css Normal file
View file

File diff suppressed because it is too large Load diff

138
VAULT/hinunher/vor-ort-arbeit-mockup.html Normal file
View file

@ -0,0 +1,138 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vor-Ort-Arbeit – App-Mockup</title>
<link rel="stylesheet" href="style.css">
<style>
:root { --navy:#07182E; --deep:#061126; --teal:#00858A; --teal-strong:#005F61; --aqua:#52E0CF; --blue:#2596BE; --coral:#F04A67; --yellow:#F6E74A; --mist:#F4FAFC; --paper:#fff; }
body { display:block; background:var(--mist); color:var(--navy); }
.mockup { max-width:1180px; margin:0 auto; padding:1.25rem; }
.mockup-note { max-width:760px; margin:0 auto 1.5rem; padding:1rem 1.1rem; background:#e9f7f6; border-left:4px solid var(--teal); color:#17414b; border-radius:.5rem; font-size:.9rem; }
.phone { width:min(100%,430px); margin:auto; background:var(--mist); border:10px solid var(--deep); border-radius:2rem; overflow:hidden; box-shadow:0 18px 42px rgba(7,24,46,.28); min-height:820px; position:relative; }
.status { height:26px; background:var(--deep); color:#fff; padding:4px 18px; display:flex; justify-content:space-between; font-size:.7rem; }
.app-head { background:linear-gradient(135deg,var(--teal-strong),var(--teal)); color:#fff; padding:16px 18px 18px; display:flex; align-items:center; gap:12px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:var(--aqua); color:var(--deep); font-family:var(--font-display); font-weight:900; font-size:1.35rem; }
.app-head strong { display:block; font-size:1rem; }
.app-head small { color:#d8fffa; }
.bell { margin-left:auto; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:10px; background:transparent; color:#fff; position:relative; }
.bell b { position:absolute; top:-6px; right:-4px; min-width:18px; height:18px; display:grid; place-items:center; background:var(--coral); border-radius:99px; color:#fff; font-size:.65rem; }
.content { padding:20px 16px 92px; }
.eyebrow { color:var(--teal); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.greeting { font-family:var(--font-display); font-size:2.35rem; line-height:.92; text-transform:uppercase; margin:.3rem 0 .5rem; }
.intro { color:#526b7b; font-size:.9rem; margin-bottom:1.2rem; }
.dashboard-card { display:block; padding:16px; margin-bottom:12px; border:1px solid rgba(7,24,46,.13); border-radius:14px; background:#fff; color:var(--navy); box-shadow:0 3px 10px rgba(7,24,46,.08); text-decoration:none; }
.dashboard-card.urgent { border-left:5px solid var(--coral); background:#fff7f8; }
.dashboard-card.action { border-left:5px solid var(--teal); }
.dashboard-card.upcoming { border-left:5px solid var(--blue); }
.dashboard-card.info { border-left:5px solid #92722a; background:#fffdef; }
.card-top { display:flex; justify-content:space-between; gap:10px; align-items:start; }
.type { font-size:.67rem; font-weight:800; letter-spacing:.08em; }
.urgent .type { color:#b62240; } .action .type { color:var(--teal); } .upcoming .type { color:#176b8a; } .info .type { color:#715900; }
.dashboard-card h2 { font-size:1rem; line-height:1.35; margin:.35rem 0; }
.dashboard-card p { color:#526b7b; font-size:.84rem; margin:0; }
.card-link { display:inline-block; margin-top:.7rem; color:var(--teal-strong); font-weight:800; font-size:.83rem; }
.bottom-nav { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); background:var(--deep); border-top:1px solid rgba(255,255,255,.13); }
.bottom-nav a { min-height:66px; color:#c8d9df; display:grid; place-content:center; gap:2px; text-align:center; font-size:.72rem; text-decoration:none; }
.bottom-nav a[aria-current="page"] { color:var(--aqua); background:rgba(82,224,207,.12); font-weight:800; }
.icon { font-size:1.15rem; line-height:1; }
.page-section { margin-top:2.6rem; }
.section-title { font-family:var(--font-display); font-size:2rem; text-transform:uppercase; margin:0 0 .75rem; }
.desktop-preview { background:var(--mist); border:1px solid rgba(7,24,46,.14); border-radius:1rem; overflow:hidden; box-shadow:0 6px 18px rgba(7,24,46,.1); }
.desktop-header { background:var(--deep); color:#fff; padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
.desktop-header strong { font-family:var(--font-display); font-size:1.45rem; text-transform:uppercase; }
.desktop-main { padding:1.25rem; display:grid; gap:1rem; grid-template-columns:1fr; }
.team-switch { padding:.8rem 1rem; border:1px solid rgba(7,24,46,.18); border-radius:.55rem; background:#fff; font-weight:700; }
.manage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.manage-item { padding:1.1rem; background:#fff; border:1px solid rgba(7,24,46,.13); border-radius:.75rem; }
.manage-item strong { font-family:var(--font-display); font-size:2.1rem; line-height:1; color:var(--teal-strong); display:block; }
.manage-item.critical strong { color:#c93552; }
.manage-item span { color:#30495c; font-size:.86rem; }
.mockup footer { color:#526b7b; text-align:center; font-size:.8rem; margin:1.5rem auto 0; max-width:680px; }
@media (min-width:760px) { .mockup { padding:2rem; } .desktop-main { grid-template-columns:220px 1fr; } .manage-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
</style>
</head>
<body>
<main class="mockup">
<p class="mockup-note"><strong>Interaktiver Look-&amp;-Feel-Mockup:</strong> Die Beispielansicht zeigt die Mitglieder-Startseite im mobilen Format sowie darunter die Team-Verwaltung. Links und Buttons sind bewusst als semantische HTML-Elemente angelegt; produktive Daten und Funktionen sind noch nicht implementiert.</p>
<section class="phone" aria-label="Mobile Mitglieder-Startseite">
<div class="status"><span>11:17</span><span>●●● 5G ▰</span></div>
<header class="app-head">
<div class="brand-mark" aria-hidden="true">VO</div>
<div><strong>Vor-Ort-Arbeit</strong><small>Team Café Bach</small></div>
<button class="bell" aria-label="3 neue Benachrichtigungen">♧<b>3</b></button>
</header>
<div class="content">
<p class="eyebrow">Start · Montag, 17. August</p>
<h1 class="greeting">Guten Morgen,<br>Chrystal!</h1>
<p class="intro">Hier ist, was heute für dich und dein Team wichtig ist.</p>
<a class="dashboard-card urgent" href="#einsatz">
<div class="card-top"><span class="type">DRINGEND</span><span aria-hidden="true">→</span></div>
<h2>Heute wird noch ein Springer gesucht</h2>
<p>Abenddienst · 18:00–22:00 · Café Bach</p>
<span class="card-link">Offene Position ansehen</span>
</a>
<a class="dashboard-card upcoming" href="#einsatz">
<div class="card-top"><span class="type">NÄCHSTER EINSATZ</span><span aria-hidden="true">→</span></div>
<h2>Beratung &amp; Empfang</h2>
<p>Mittwoch, 19. August · 16:00–20:00</p>
<span class="card-link">Einteilung öffnen</span>
</a>
<a class="dashboard-card action" href="#verfuegbarkeit">
<div class="card-top"><span class="type">AKTION</span><span aria-hidden="true">→</span></div>
<h2>4 Termine sind noch offen</h2>
<p>Bitte teile deine Verfügbarkeit für September mit.</p>
<span class="card-link">Verfügbarkeit angeben</span>
</a>
<a class="dashboard-card info" href="#chat">
<div class="card-top"><span class="type">INFO</span><span class="n-badge">3</span></div>
<h2>Neue Nachrichten im Teamchat</h2>
<p>Team · 3 ungelesene Nachrichten</p>
<span class="card-link">Chat öffnen</span>
</a>
</div>
<nav class="bottom-nav" aria-label="Hauptnavigation">
<a href="#start" aria-current="page"><span class="icon" aria-hidden="true">⌂</span>Start</a>
<a href="#team"><span class="icon" aria-hidden="true">♟</span>Team</a>
<a href="#profil"><span class="icon" aria-hidden="true">◉</span>Profil</a>
</nav>
</section>
<section class="page-section" aria-labelledby="manage-heading">
<h2 id="manage-heading" class="section-title">Team-Verwaltung</h2>
<article class="desktop-preview" aria-label="Vorschau Team-Verwaltung">
<header class="desktop-header"><strong>Vor-Ort-Arbeit</strong><span>Organisation · AIDS Hilfe Köln</span></header>
<div class="desktop-main">
<aside>
<p class="eyebrow">Aktuelles Team</p>
<button class="team-switch" type="button">Café Bach ▾</button>
<p style="margin-top:1.25rem"><strong>Navigation</strong></p>
<p>Start<br>Team<br>Einsatzplanung<br>Dokumente<br>Teamchat<br>Mitglieder</p>
</aside>
<div>
<p class="eyebrow">/team/cafe-bach/manage/</p>
<h3 class="section-title" style="font-size:2.35rem">Übersicht</h3>
<p class="intro">Was deine Team-Verwaltung heute braucht.</p>
<div class="manage-grid">
<article class="manage-item critical"><strong>1</strong><span>Unterbesetzter Einsatz heute</span></article>
<article class="manage-item"><strong>6</strong><span>Fehlende Verfügbarkeiten</span></article>
<article class="manage-item"><strong>2</strong><span>Dokumente warten auf Freigabe</span></article>
<article class="manage-item"><strong>3</strong><span>Offene Einladungen</span></article>
<article class="manage-item critical"><strong>2</strong><span>Unbesetzte Positionen</span></article>
<article class="manage-item"><strong>12</strong><span>Aktive Teammitglieder</span></article>
</div>
</div>
</div>
</article>
</section>
<footer>Design-Grundlage: hochgeladenes <code>style.css</code> mit ergänzenden, mockup-spezifischen CSS-Regeln. Die Farbwerte, Typografie, Karten, Kontraste und 44px-orientierten Touch-Ziele folgen dem vorgegebenen Brand Profile.</footer>
</main>
</body>
</html>