From 762a33d65ebf3feaaef842211895f4939c8a9a29 Mon Sep 17 00:00:00 2001
From: admin <bjoern.brandstaeter@gmx.de>
Date: Tue, 30 Jun 2026 20:03:55 +0000
Subject: [PATCH] Dateien nach "public/css" hochladen

---
 public/css/style.css | 541 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 541 insertions(+)
 create mode 100644 public/css/style.css

diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 0000000..b2a6597
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,541 @@
+/* ==========================================================================
+   Zeitkonto — Designsprache: ein Arbeitszeit-Hauptbuch ("Ledger").
+   Die Saldo-Anzeige ist als klassische Buchhaltungs-Summenzeile gestaltet
+   (einfache Linie darüber, doppelte Linie darunter), Zahlen stehen in
+   einer Mono-Schrift mit tabellarischer Ausrichtung wie in einem Kontobuch.
+   ========================================================================== */
+
+:root {
+  --paper: #faf7f2;
+  --paper-tint: #f3eee4;
+  --ink: #20231f;
+  --ink-soft: #5d6258;
+  --line: #ddd6c8;
+  --teal: #1f5c53;
+  --teal-tint: #e3eeec;
+  --rust: #a1432a;
+  --rust-tint: #f3e6e0;
+  --brass: #b5792b;
+  --card-bg: #ffffff;
+  --radius: 6px;
+
+  --font-display: 'Fraunces', Georgia, serif;
+  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
+  --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--teal);
+}
+
+:focus-visible {
+  outline: 2px solid var(--brass);
+  outline-offset: 2px;
+}
+
+/* -------------------------------------------------------------------- */
+/* Signatur-Element: das Zeit-Symbol (kleine Uhr, rein aus CSS)         */
+/* -------------------------------------------------------------------- */
+
+.time-mark {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  border: 2px solid var(--ink);
+  position: relative;
+  flex: none;
+}
+
+.time-mark::before,
+.time-mark::after {
+  content: '';
+  position: absolute;
+  background: var(--ink);
+}
+
+.time-mark::before {
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 32%;
+  transform: translate(-50%, -100%);
+}
+
+.time-mark::after {
+  top: 50%;
+  left: 50%;
+  width: 28%;
+  height: 2px;
+  transform: translate(-15%, -50%);
+}
+
+.auth-card__mark {
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0 auto 0.75rem;
+}
+
+.auth-card__mark::before {
+  border-width: 2px;
+}
+
+/* -------------------------------------------------------------------- */
+/* Layout                                                                */
+/* -------------------------------------------------------------------- */
+
+.container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem 4rem;
+}
+
+.container--narrow {
+  max-width: 640px;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--card-bg);
+}
+
+.topbar__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.topbar__mark {
+  width: 1.4rem;
+  height: 1.4rem;
+}
+
+.topbar__title {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 1.25rem;
+  letter-spacing: 0.01em;
+}
+
+.topbar__nav {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  font-size: 0.95rem;
+}
+
+.topbar__link {
+  color: var(--ink-soft);
+  text-decoration: none;
+  padding-bottom: 0.2rem;
+  border-bottom: 2px solid transparent;
+}
+
+.topbar__link:hover {
+  color: var(--ink);
+}
+
+.topbar__link.is-active {
+  color: var(--ink);
+  border-bottom-color: var(--brass);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(260px, 340px) 1fr;
+  gap: 1.5rem;
+  align-items: start;
+  margin-top: 1.5rem;
+}
+
+@media (max-width: 760px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* -------------------------------------------------------------------- */
+/* Saldo-Karte (Signatur-Element)                                       */
+/* -------------------------------------------------------------------- */
+
+.balance-card {
+  margin-top: 1.5rem;
+  background: var(--card-bg);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 2rem 1.5rem 1.75rem;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .balance-card {
+    animation: rise 0.4s ease-out;
+  }
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.balance-card__label {
+  display: block;
+  font-family: var(--font-display);
+  font-variant: small-caps;
+  letter-spacing: 0.05em;
+  color: var(--ink-soft);
+  font-size: 0.95rem;
+}
+
+.balance-card__rule {
+  width: 64px;
+  margin: 0.85rem auto;
+  border-top: 1px solid var(--line);
+}
+
+.balance-card__figure {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: clamp(2.4rem, 6vw, 3.4rem);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  padding-bottom: 0.35rem;
+  border-bottom: 6px double currentColor;
+}
+
+.balance-card.is-positive .balance-card__figure {
+  color: var(--teal);
+}
+
+.balance-card.is-negative .balance-card__figure {
+  color: var(--rust);
+}
+
+.balance-card__hint {
+  display: block;
+  margin-top: 0.9rem;
+  color: var(--ink-soft);
+  font-size: 0.85rem;
+}
+
+/* -------------------------------------------------------------------- */
+/* Karten / Formulare                                                    */
+/* -------------------------------------------------------------------- */
+
+.card {
+  background: var(--card-bg);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.card__title {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 1.15rem;
+  margin: 0 0 1rem;
+}
+
+.card__footnote {
+  margin-top: 1rem;
+  color: var(--ink-soft);
+  font-size: 0.85rem;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.field__label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.field__hint {
+  font-size: 0.78rem;
+  color: var(--ink-soft);
+}
+
+.field-row {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.field-row .field {
+  flex: 1;
+}
+
+input[type='text'],
+input[type='date'],
+input[type='time'],
+input[type='number'],
+input[type='password'] {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--paper);
+  color: var(--ink);
+}
+
+input:focus {
+  outline: none;
+  border-color: var(--brass);
+  box-shadow: 0 0 0 3px rgba(181, 121, 43, 0.18);
+}
+
+fieldset.field {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.checkbox-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 0.4rem 0.6rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.checkbox input {
+  accent-color: var(--teal);
+}
+
+/* -------------------------------------------------------------------- */
+/* Buttons                                                                */
+/* -------------------------------------------------------------------- */
+
+.button {
+  display: inline-block;
+  text-align: center;
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 0.95rem;
+  padding: 0.65rem 1.1rem;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.button--block {
+  width: 100%;
+}
+
+.button--primary {
+  background: var(--teal);
+  color: #fff;
+}
+
+.button--primary:hover {
+  background: #184a43;
+}
+
+.button--ghost {
+  background: transparent;
+  border-color: var(--line);
+  color: var(--ink);
+}
+
+.button--ghost:hover {
+  border-color: var(--ink-soft);
+}
+
+.link-button {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--font-body);
+  font-size: 0.85rem;
+  color: var(--teal);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.link-button--danger {
+  color: var(--rust);
+}
+
+/* -------------------------------------------------------------------- */
+/* Ledger-Tabelle                                                        */
+/* -------------------------------------------------------------------- */
+
+.table-scroll {
+  overflow-x: auto;
+}
+
+.ledger-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.ledger-table thead th {
+  text-align: left;
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+  border-bottom: 2px solid var(--ink);
+  padding: 0.5rem 0.6rem;
+  white-space: nowrap;
+}
+
+.ledger-table tbody td {
+  padding: 0.55rem 0.6rem;
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+}
+
+.ledger-table tbody tr:nth-child(even) {
+  background: var(--paper-tint);
+}
+
+.ledger-table .num {
+  font-family: var(--font-mono);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.ledger-table .is-positive {
+  color: var(--teal);
+}
+
+.ledger-table .is-negative {
+  color: var(--rust);
+}
+
+.ledger-table__note {
+  white-space: normal;
+  color: var(--ink-soft);
+  max-width: 220px;
+}
+
+.ledger-table__actions {
+  display: flex;
+  gap: 0.6rem;
+}
+
+.ledger-table--compact td,
+.ledger-table--compact th {
+  padding: 0.45rem 0.6rem;
+}
+
+.empty-state {
+  color: var(--ink-soft);
+  font-size: 0.95rem;
+}
+
+/* -------------------------------------------------------------------- */
+/* Hinweise                                                              */
+/* -------------------------------------------------------------------- */
+
+.notice {
+  margin-top: 1rem;
+  padding: 0.7rem 1rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  border: 1px solid transparent;
+}
+
+.notice--error {
+  background: var(--rust-tint);
+  border-color: var(--rust);
+  color: var(--rust);
+}
+
+.notice--success {
+  background: var(--teal-tint);
+  border-color: var(--teal);
+  color: var(--teal);
+}
+
+/* -------------------------------------------------------------------- */
+/* Login / Fehlerseite                                                   */
+/* -------------------------------------------------------------------- */
+
+.auth-body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 360px;
+  background: var(--card-bg);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 2rem 1.75rem;
+  text-align: center;
+}
+
+.auth-card__title {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.6rem;
+  margin: 0 0 0.35rem;
+}
+
+.auth-card__subtitle {
+  color: var(--ink-soft);
+  font-size: 0.9rem;
+  margin: 0 0 1.5rem;
+}
+
+.auth-card .form {
+  text-align: left;
+}