/* ZEM – Oberfläche, Redesign 27.10.2026 (Entscheidung Felix: Firmenfarben Blau/Türkis/Grün stärker, keine „3D-Knöpfe",
   Handy als App mit fünf Reitern, Desktop mit Seitenleiste). Keine fremden Quellen (N-03), keine Inline-Stile (CSP).
   Schrift Barlow selbst gehostet (public/schrift, OFL). Akzent folgt der eigenen Gesellschaft (--akzent). */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/schrift/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/schrift/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/schrift/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(/schrift/barlow-700.woff2) format('woff2'); }

:root {
  --blau: #1ca2e0; --tuerkis: #00b2ad; --gruen: #87b04a; --akzent: #1ca2e0;
  --primaer: #0b77a8; --primaer-dunkel: #075f87; --primaer-hell: #e4f3fa; --primaer-ton: #c9e7f4;
  --tuerkis-hell: #dff5f4; --gruen-hell: #eaf3dc;
  --navy: #142a35; --navy-2: #1b3745; --navy-3: #24465a; --navy-text: #c7d5dc;
  --verlauf: linear-gradient(120deg, var(--tuerkis) 0%, var(--gruen) 50%, var(--blau) 100%); /* Reihenfolge der Gruppe: Bau (Türkis), Immobilien (Grün), Wohnraum (Blau), Felix 28.10. */
  --tinte: #16262f; --grau: #5f6d75; --leise: #8a969d; --linie: #e3e9ed; --rand: #c4ced5;
  --hintergrund: #f3f6f8; --flaeche: #ffffff; --flaeche-2: #f7f9fb; --feld: #eef2f5;
  --warn: #d9730d; --warn-hell: #fdefdf; --ok: #2f7a52; --ok-hell: #e1f2e7; --rot: #c0392b; --rot-hell: #fbe4e1;
  --r-s: 10px; --r: 16px; --r-l: 22px;
  --schatten-1: 0 1px 2px rgba(20, 42, 53, 0.05), 0 3px 10px rgba(20, 42, 53, 0.05);
  --schatten-2: 0 12px 34px rgba(20, 42, 53, 0.16);
  --nav-hoehe: 64px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
/* body ist Container für die Regel von #app selbst (ein Element kann nicht seine eigene Breite abfragen), #app für alles darin. */
body { container-type: inline-size; container-name: app; }
body { font-family: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.4; color: var(--tinte); background: var(--hintergrund); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, opacity 0.16s ease; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 70%, white); outline-offset: 2px; }
a { color: var(--primaer); }
h1, h2, h3, p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.symbol { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---------- Grundgerüst ---------- */
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; container-type: inline-size; container-name: app; }
.kopf { background: var(--flaeche); padding: 14px 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--linie); }
.kopf::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--verlauf); }
.kopf h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .kopf h1 { font-size: 18px; white-space: normal; } }
.kopf > div:first-child { min-width: 0; } .kopf small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf small { color: var(--grau); display: block; font-size: 13px; margin-top: 1px; }
.kopf .rechts { display: flex; gap: 6px; align-items: center; }
.kopf .jetzt { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--tinte); padding: 0 6px; }
.inhalt { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 16px calc(var(--nav-hoehe) + 24px); display: flex; flex-direction: column; gap: 14px; }
.brand, .nutzer { display: none; }
/* Firmenfarbe (Felix 03.11.): Streifen oben, Rand der Seitenleiste, aktiver Reiter und Punkt vor der Gesellschaft in der Farbe der eigenen Gesellschaft. */
.firmenpunkt { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); margin-right: 5px; vertical-align: 1px; }
html.firmenfarbe .firmenpunkt { display: inline-block; }
html.firmenfarbe .kopf::before { background: var(--akzent); }
html.firmenfarbe .navigation { border-top: 3px solid var(--akzent); }

/* Untere Navigation (Handy): bis zu fünf Reiter mit Symbol, Rest unter „Mehr". */
.navigation { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-around; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--linie); padding: 6px 4px max(6px, env(safe-area-inset-bottom)); }
.navigation button { flex: 1 1 0; min-width: 56px; max-width: 110px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--grau); border-radius: 12px; position: relative; }
.navigation button .symbol { width: 24px; height: 24px; padding: 2px 10px; box-sizing: content-box; border-radius: 999px; transition: background-color 0.16s ease; }
.navigation button.an { color: var(--primaer); }
.navigation button.an .symbol { background: color-mix(in srgb, var(--akzent) 16%, white); color: var(--primaer); }
.navigation .zahl { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--rot); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff; }
.navigation .im-mehr { display: none; }
.mehr-liste { display: grid; gap: 8px; }
.mehr-liste button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: var(--r-s); background: var(--flaeche-2); font-weight: 600; text-align: left; }
.mehr-liste button .symbol { color: var(--primaer); }
.mehr-liste .zahl { margin-left: auto; background: var(--rot); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 8px; }

/* ---------- Karten und Abschnitte ---------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 16px; box-shadow: var(--schatten-1); }
.karte h2 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.karte h2 .symbol { color: var(--primaer); }
.abschnitt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }
.leise { color: var(--grau); font-size: 14px; }
.klein { font-size: 13px; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.spalte { display: flex; flex-direction: column; gap: 10px; }
.reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.reihe > * { flex: 1 1 120px; } /* schmale Breiten: Felder brechen um statt abzuschneiden */
.reihe > .knopf { flex-basis: auto; }
.gross { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.mittel { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.leer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 16px; color: var(--grau); background: var(--flaeche); border: 1px dashed var(--rand); border-radius: var(--r); }
.leer .symbol { width: 34px; height: 34px; color: var(--tuerkis); }

/* Status-Pillen */
.marke { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.marke::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.marke.ok { background: var(--ok-hell); color: var(--ok); } .marke.warn { background: var(--warn-hell); color: #9a4a06; } .marke.grau { background: #e9edf0; color: #4d5a62; } .marke.rot { background: var(--rot-hell); color: #9b2323; } .marke.blau { background: var(--primaer-hell); color: var(--primaer); } .marke.tuerkis { background: var(--tuerkis-hell); color: #077c78; }
.marke.hell { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Kennzahlen-Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--schatten-1); }
.kachel .wert { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.kachel .leise { font-size: 13px; }
.chip-symbol { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--primaer-hell); color: var(--primaer); }
.chip-symbol .symbol { width: 20px; height: 20px; }
.chip-symbol.tuerkis { background: var(--tuerkis-hell); color: #077c78; } .chip-symbol.gruen { background: var(--gruen-hell); color: #4f7021; } .chip-symbol.warn { background: var(--warn-hell); color: #9a4a06; } .chip-symbol.rot { background: var(--rot-hell); color: var(--rot); } .chip-symbol.grau { background: #e9edf0; color: #4d5a62; }

/* Fortschrittsring */
.ring { position: relative; width: 104px; height: 104px; flex: 0 0 auto; }
.ring svg { width: 100%; height: 100%; }
.ring .spur { fill: none; stroke: var(--feld); stroke-width: 9; }
.ring .wert { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray 0.4s ease; }
.ring-mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 18px; line-height: 1.1; color: var(--tinte); }
.ring-mitte .leise { font-size: 11px; font-weight: 600; }
.ring.ok { color: var(--ok); } .ring.warn { color: var(--warn); } .ring.rot { color: var(--rot); } .ring.blau { color: var(--primaer); } .ring.tuerkis { color: var(--tuerkis); } .ring.gruen { color: var(--gruen); }
.ring.klein { width: 64px; height: 64px; } .ring.klein .ring-mitte { font-size: 13px; }
.held .ring .spur { stroke: rgba(255, 255, 255, 0.18); } .held .ring-mitte { color: #fff; } .held .ring-mitte .leise { color: rgba(255, 255, 255, 0.75); }

/* Avatare */
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: hsl(var(--ton) 45% 30%); background: hsl(var(--ton) 55% 88%); }
.avatar.gross { width: 56px; height: 56px; font-size: 20px; }

/* ---------- Knöpfe ---------- */
.knopf { min-height: 48px; border-radius: 12px; background: var(--primaer); color: #fff; font-weight: 700; font-size: 16px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 6px rgba(11, 119, 168, 0.22); }
.knopf:hover { background: var(--primaer-dunkel); box-shadow: 0 4px 12px rgba(11, 119, 168, 0.28); }
.knopf:active { transform: scale(0.985); }
.knopf.verlauf { background: var(--verlauf); box-shadow: 0 6px 18px rgba(0, 178, 173, 0.3); font-size: 17px; min-height: 56px; }
.knopf.verlauf:hover { filter: brightness(1.05); }
.knopf.dunkel { background: var(--navy); box-shadow: 0 2px 6px rgba(20, 42, 53, 0.25); }
.knopf.dunkel:hover { background: var(--navy-2); }
.knopf.hell { background: var(--primaer-hell); color: var(--primaer); box-shadow: none; }
.knopf.hell:hover { background: var(--primaer-ton); }
.knopf.weiss { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--rand); box-shadow: none; }
.knopf.weiss:hover { background: var(--flaeche-2); border-color: #a9b6be; }
.knopf.warn { background: var(--warn); box-shadow: 0 2px 6px rgba(217, 115, 13, 0.25); }
.knopf.warn:hover { background: #c2650a; }
.knopf.rot { background: var(--rot-hell); color: var(--rot); box-shadow: none; }
.knopf.rot:hover { background: #f6cfca; }
.knopf.klein { min-height: 38px; font-size: 14px; padding: 0 14px; border-radius: 10px; }
/* Anmeldung über Microsoft (SPEC Z-05d): Knopf als Link, Logo aus vier Feldern, Passwort eingeklappt als Notfallweg. */
a.knopf { text-decoration: none; }
.knopf.microsoft { background: var(--navy); box-shadow: 0 2px 6px rgba(20, 42, 53, 0.25); }
.knopf.microsoft:hover { background: var(--navy-2); }
.ms-logo { display: inline-grid; grid-template-columns: 9px 9px; gap: 2px; margin-right: 4px; }
.ms-logo i { display: block; width: 9px; height: 9px; }
.ms-logo .r { background: #f25022; } .ms-logo .g { background: #7fba00; } .ms-logo .b { background: #00a4ef; } .ms-logo .y { background: #ffb900; }
details.notfall { margin-top: 6px; }
details.notfall summary { cursor: pointer; color: var(--grau); font-size: 14px; list-style: none; }
details.notfall summary::before { content: '▸ '; }
details[open].notfall summary::before { content: '▾ '; }
details.notfall form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.knopf:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.knopf .symbol { width: 20px; height: 20px; }
.text { background: none; color: var(--primaer); font-weight: 600; min-height: 40px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; }
.text:hover { background: var(--primaer-hell); }
.text.rot { color: var(--rot); } .text.rot:hover { background: var(--rot-hell); }
.rund { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--grau); background: var(--feld); }
.rund:hover { background: var(--primaer-ton); color: var(--primaer); }

/* Aktionsleiste (laufender Tag): vier gleich große Felder mit Symbol und Wort */
.aktionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* Tagesaktionen (Felix 03.11.): Nachtragen ist der Normalfall (Z-18), darum ein Hauptknopf; live mitstoppen als Nebenweg darunter.
   Unten auf der Seite (margin-top: auto), damit kein Leerraum zwischen Liste und Knöpfen bleibt und der Daumen hinkommt. */
.tag-aktionen { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; }
.tag-aktionen .knopf { min-height: 60px; padding: 8px 18px; }
.tag-aktionen .knopf.hell { min-height: 52px; }
.tag-aktionen .knopf .symbol { width: 22px; height: 22px; }
.ta-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.ta-text small { font-size: 12px; font-weight: 500; opacity: 0.8; }
.held.start .tag-aktionen { margin-top: 6px; }
.aktionen button { min-height: 70px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--tinte); box-shadow: var(--schatten-1); }
.aktionen button .symbol { width: 24px; height: 24px; color: var(--primaer); }
.aktionen button:hover { border-color: var(--primaer-ton); background: var(--primaer-hell); }
.aktionen button.haupt { background: var(--primaer); color: #fff; border-color: var(--primaer); } .aktionen button.haupt .symbol { color: #fff; } .aktionen button.haupt:hover { background: var(--primaer-dunkel); }
.aktionen button.ende { background: var(--navy); color: #fff; border-color: var(--navy); } .aktionen button.ende .symbol { color: #fff; } .aktionen button.ende:hover { background: var(--navy-2); }
.aktionen button.pause-an { background: var(--tuerkis-hell); border-color: var(--tuerkis-hell); } .aktionen button.pause-an .symbol { color: #077c78; }

/* ---------- Held-Karte (Heute) ---------- */
.held { position: relative; overflow: hidden; border-radius: var(--r-l); padding: 20px 20px 18px; color: #fff; background: linear-gradient(135deg, var(--navy) 0%, #0f4f6d 70%, #0b6f7f 100%); box-shadow: var(--schatten-2); display: flex; flex-direction: column; gap: 12px; }
.held::after { content: ''; position: absolute; width: 260px; height: 260px; right: -110px; top: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(28, 162, 224, 0.45), transparent 72%); pointer-events: none; }
.held.pause { background: linear-gradient(135deg, #0b5a63 0%, #00797a 60%, #118f8a 100%); }
.held.beendet { background: linear-gradient(135deg, #2b3e4a 0%, #3b5563 70%, #4f6d58 100%); }
.held.start { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
.held.start::after { background: radial-gradient(closest-side, rgba(0, 178, 173, 0.18), transparent 72%); }
.held .leise { color: rgba(255, 255, 255, 0.72); } .held.start .leise { color: var(--grau); }
.held .zeit { font-size: 58px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.held.start .zeit { font-size: 48px; }
.held .zeit small { font-size: 22px; font-weight: 600; letter-spacing: 0; margin-left: 4px; opacity: 0.8; }
.held .zeit.laufend { font-size: 50px; letter-spacing: -0.03em; }
@container app (min-width: 900px) { .held .zeit.laufend { font-size: 64px; } }
.held .punkt { width: 9px; height: 9px; border-radius: 50%; background: #7ee787; box-shadow: 0 0 0 0 rgba(126, 231, 135, 0.6); animation: puls 1.8s ease-out infinite; }
.held.pause .punkt { background: #ffd166; box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.6); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(126, 231, 135, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(126, 231, 135, 0); } }
.held .projekt { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 10px 12px; }
.held .projekt b { font-size: 16px; }
.held .projekt .leise { font-size: 13px; }
.held .projekt .chip-symbol { background: rgba(255, 255, 255, 0.16); color: #fff; }
.held .zeile.oben { align-items: flex-start; }

/* Wochenstreifen: sieben Tage als Chips */
.wochenstreifen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.wochenstreifen button { min-height: 60px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--grau); }
.wochenstreifen button b { font-size: 16px; color: var(--tinte); font-weight: 700; }
.wochenstreifen button i { width: 6px; height: 6px; border-radius: 50%; background: var(--linie); }
.wochenstreifen button i.ok { background: var(--gruen); } .wochenstreifen button i.warn { background: var(--warn); } .wochenstreifen button i.laeuft { background: var(--tuerkis); } .wochenstreifen button i.rot { background: var(--rot); }
.wochenstreifen button.an { background: var(--primaer); border-color: var(--primaer); color: rgba(255, 255, 255, 0.8); } .wochenstreifen button.an b { color: #fff; }
.wochenstreifen button.heute:not(.an) { border-color: var(--primaer); color: var(--primaer); }
.wochenstreifen button:hover:not(.an) { background: var(--primaer-hell); }

/* Zeitstrahl des Tages */
.zeitstrahl { display: flex; flex-direction: column; gap: 6px; }
.block { display: grid; grid-template-columns: 58px 10px minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 12px 10px 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; text-align: left; color: inherit; }
.block .von { font-size: 12px; font-weight: 600; color: var(--grau); line-height: 1.25; }
.block .schiene { width: 6px; height: 100%; min-height: 34px; border-radius: 3px; background: var(--blau); justify-self: center; }
.block.pause .schiene { background: #b9c4ca; } .block.laeuft .schiene { background: var(--tuerkis); } .block.auto .schiene { background: repeating-linear-gradient(180deg, #b9c4ca 0 4px, transparent 4px 7px); }
.block .mitte { min-width: 0; }
.block .titel { font-weight: 700; overflow-wrap: anywhere; }
.block .titel small { font-weight: 500; color: var(--grau); }
.block .dauer { font-weight: 700; font-size: 15px; }
.block .ende { display: flex; align-items: center; gap: 6px; }
.block.tagzeile { cursor: pointer; } .block.tagzeile:hover { border-color: var(--primaer-ton); background: var(--primaer-hell); }
.block.hinweisblock { background: var(--warn-hell); border-color: #f5d7b3; }
.block.hinweisblock .schiene { background: var(--warn); }

/* Wochenansicht (Redesign 28.10.): Wochenwahl, Tageszeilen mit Plakette und Farbkante */
.wochenwahl { display: flex; align-items: center; gap: 10px; }
.wochenwahl-mitte { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 52px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
.wochenwahl-mitte b { font-size: 17px; } .wochenwahl-mitte .leise { font-size: 12px; }
.wochenwahl-mitte.an { background: var(--primaer-hell); border-color: var(--primaer-ton); color: var(--primaer); } .wochenwahl-mitte.an .leise { color: var(--primaer); }
.wochenwahl-mitte:hover { background: var(--primaer-hell); }
.tag { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--linie); text-align: left; color: inherit; box-shadow: var(--schatten-1); animation: auftauchen 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tag:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 42, 53, 0.1); }
.tag.ok { border-left-color: var(--gruen); } .tag.warn { border-left-color: var(--warn); } .tag.rot { border-left-color: var(--rot); } .tag.laeuft { border-left-color: var(--tuerkis); } .tag.frei, .tag.leer { border-left-color: var(--linie); }
.tag.leer { background: var(--flaeche-2); border-style: dashed; }
.tag.heute { border-color: var(--primaer-ton); }
.plakette { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--feld); color: var(--grau); line-height: 1.1; }
.plakette span { font-size: 11px; font-weight: 700; text-transform: uppercase; } .plakette b { font-size: 20px; color: var(--tinte); }
.tag.ok .plakette { background: var(--gruen-hell); color: #4f7021; } .tag.warn .plakette { background: var(--warn-hell); color: #9a4a06; } .tag.rot .plakette { background: var(--rot-hell); color: var(--rot); } .tag.laeuft .plakette { background: var(--tuerkis-hell); color: #077c78; }
.tag.heute .plakette { background: var(--primaer); color: rgba(255, 255, 255, 0.8); } .tag.heute .plakette b { color: #fff; }
.tag-mitte { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tag-zahl { font-size: 16px; white-space: nowrap; } .tag-zahl b { font-size: 18px; }
.tag-ende { display: flex; align-items: center; gap: 6px; }
.tag-ende .symbol.leise { width: 18px; height: 18px; color: var(--leise); }
.zeitstrahl > .tag:nth-child(3) { animation-delay: 0.05s; } .zeitstrahl > .tag:nth-child(4) { animation-delay: 0.1s; } .zeitstrahl > .tag:nth-child(5) { animation-delay: 0.15s; } .zeitstrahl > .tag:nth-child(n + 6) { animation-delay: 0.2s; }
/* Wochensumme (Felix 02.11.: übersichtlicher): Stunden groß, Stand in Worten mit Symbol. */
.w-summe { display: flex; flex-direction: column; gap: 6px; }
/* Woche am Computer (Felix 03.11.): Säulen je Tag in der Summenkarte; Übersicht: eigene Akte als Spalte. */
.w-balken { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 64px; align-items: end; margin-top: 6px; }
.w-balken > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.w-balken i { display: block; width: 100%; max-width: 28px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--akzent), color-mix(in srgb, var(--akzent) 55%, white)); }
.w-balken .ohne i { background: var(--linie); }
.w-balken span { font-size: 11px; color: var(--grau); }
.uebersicht > .akte { display: flex; flex-direction: column; gap: 18px; }
.w-zahl b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.w-stand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.w-stand .symbol { width: 20px; height: 20px; }
.w-stand.ok { color: var(--ok); } .w-stand.warn { color: #9a4a06; } .w-stand.grau { color: var(--grau); }

/* Zeitraster (Felix 02.11.: fixe Viertelstunden zum Antippen): je Stunde eine Zeile, vier Zellen; belegt gestreift, Zukunft leer. */

/* ---------- Formulare ---------- */
.feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feld label, .feld > .beschriftung { font-size: 12px; font-weight: 700; color: var(--grau); text-transform: uppercase; letter-spacing: 0.06em; }
.feld input, .feld select, .feld textarea { min-height: 48px; border: 1.5px solid var(--rand); border-radius: 12px; padding: 0 14px; background: var(--flaeche); width: 100%; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 3px var(--primaer-ton); }
.feld textarea { min-height: 120px; padding: 10px 14px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.feld input::placeholder { color: var(--leise); }
.feld select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis; }
.feld { position: relative; }
.feld:has(select)::after { content: ''; position: absolute; right: 18px; bottom: 20px; width: 9px; height: 9px; border-right: 2px solid var(--grau); border-bottom: 2px solid var(--grau); transform: rotate(45deg); pointer-events: none; }
.feld:has(select:focus)::after { border-color: var(--primaer); }
.feld input[type="date"], .feld input[type="time"] { cursor: pointer; }
.feld input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.feld .leise { font-size: 13px; }
.suche { position: relative; flex: 1; min-width: 0; }
.suche .symbol { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--leise); width: 20px; height: 20px; pointer-events: none; }
.suche input { padding-left: 40px; min-height: 48px; border: 1.5px solid var(--rand); border-radius: 12px; background: var(--flaeche); width: 100%; }
.suche input:focus { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 3px var(--primaer-ton); }
.schalterzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 2px; font-weight: 500; cursor: pointer; }
.schalterzeile input { appearance: none; width: 46px; height: 28px; border-radius: 14px; background: #cfd8de; position: relative; flex: 0 0 auto; cursor: pointer; transition: background-color 0.16s ease; }
.schalterzeile input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.16s ease; }
.schalterzeile input:checked { background: var(--primaer); } .schalterzeile input:checked::after { transform: translateX(18px); }
.fehler { background: var(--rot-hell); color: #9b2323; border-radius: 12px; padding: 10px 14px; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.hinweis { background: var(--primaer-hell); color: #0b4f6f; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.hinweis.warn { background: var(--warn-hell); color: #7a3a05; }
.hinweis.spalte, .hinweis.zeile { gap: 10px; }
.code { font-family: ui-monospace, Menlo, monospace; word-break: break-all; background: var(--feld); border-radius: var(--r-s); padding: 10px 12px; font-size: 15px; }
.qr { display: block; width: min(240px, 100%); height: auto; margin: 0 auto; background: #fff; fill: #000; border-radius: var(--r-s); shape-rendering: crispEdges; }
.schalter { display: flex; background: var(--feld); border-radius: 12px; padding: 3px; }
.schalter button { flex: 1; min-height: 42px; border-radius: 10px; font-weight: 600; color: #44505a; }
.schalter button.an { background: var(--flaeche); color: var(--primaer); box-shadow: 0 1px 4px rgba(20, 42, 53, 0.16); }
.stepper { display: flex; align-items: center; justify-content: space-between; background: var(--feld); border-radius: 14px; padding: 6px; }
.stepper button { width: 48px; height: 48px; border-radius: 12px; background: var(--flaeche); font-size: 24px; box-shadow: 0 1px 3px rgba(20, 42, 53, 0.12); }
.stepper b { font-size: 24px; }
/* Geführtes Blatt (Felix 28.10.): nummerierte Schritte, gestaffeltes Hereinkommen, Bestätigung mit Häkchen */
.feld-kopf { display: flex; align-items: center; gap: 8px; }
.feld-kopf label { margin: 0; }
.schritt { width: 22px; height: 22px; border-radius: 50%; background: var(--verlauf); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(0, 178, 173, 0.3); transition: transform 0.16s ease; }
.blatt .feld { animation: auftauchen 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.blatt .feld:nth-of-type(2) { animation-delay: 0.06s; } .blatt .feld:nth-of-type(3) { animation-delay: 0.12s; } .blatt .feld:nth-of-type(4) { animation-delay: 0.18s; } .blatt .feld:nth-of-type(n + 5) { animation-delay: 0.24s; }
.blatt .feld:focus-within .schritt { transform: scale(1.15); }
.blatt .feld:focus-within label { color: var(--primaer); }
.wahl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 10px 4px 6px; border-radius: 999px; animation: aufpoppen 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; max-width: 100%; align-self: flex-start; }
.wahl .symbol { width: 16px; height: 16px; }
.wahl.ok { background: var(--ok-hell); color: var(--ok); } .wahl.warn { background: var(--warn-hell); color: #9a4a06; }
.suche input { transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }
.suche input:focus { transform: translateY(-1px); box-shadow: 0 0 0 4px var(--primaer-ton), 0 6px 18px rgba(11, 119, 168, 0.12); }
.suche .symbol { transition: color 0.16s ease, transform 0.16s ease; }
.suche:focus-within .symbol { color: var(--primaer); transform: translateY(-50%) scale(1.1); }
.schalter button { transition: background-color 0.16s ease, color 0.16s ease, transform 0.12s ease; }
.schalter button.an { animation: aufpoppen 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.schalter button:active { transform: scale(0.95); }
.sucheintrag { animation: auftauchen 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.sucheintrag:nth-child(2) { animation-delay: 0.03s; } .sucheintrag:nth-child(3) { animation-delay: 0.06s; } .sucheintrag:nth-child(4) { animation-delay: 0.09s; } .sucheintrag:nth-child(n + 5) { animation-delay: 0.12s; }
.blatt > .knopf.verlauf { animation: auftauchen 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
/* Suchfeld mit Trefferliste (Felix 28.10.): tippen statt scrollen */
.suchfeld .suche input { padding-left: 40px; }
.suchliste { display: flex; flex-direction: column; gap: 2px; padding: 6px; margin-top: 2px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten-1); max-height: 300px; overflow-y: auto; animation: auftauchen 0.18s ease both; }
.sucheintrag { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; text-align: left; color: var(--tinte); font-size: 15px; }
.sucheintrag:hover, .sucheintrag.aktiv { background: var(--primaer-hell); }
.sucheintrag .nr { font-weight: 700; min-width: 58px; color: var(--primaer); }
.sucheintrag .nm { flex: 1; min-width: 0; color: var(--grau); overflow-wrap: anywhere; }
.sucheintrag mark { background: #fff1b8; color: inherit; border-radius: 3px; padding: 0 1px; }
.sucheintrag .eigen { font-size: 11px; font-weight: 700; background: var(--tuerkis-hell); color: #077c78; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.suchliste .leer-hinweis { padding: 10px 12px; color: var(--grau); font-size: 13px; }
.sucheintrag.still { animation: none; }
.neu-anlegen { display: flex; flex-direction: column; gap: 8px; padding: 4px 6px 8px; }
.neu-anlegen .zeile { gap: 8px; } .neu-anlegen input { flex: 1; min-width: 0; } .neu-anlegen .knopf.klein { padding: 8px 14px; font-size: 14px; }
.fehler.klein { font-size: 13px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--primaer-hell); color: var(--primaer); font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips button:hover { background: var(--primaer-ton); }
.chips button .symbol { width: 16px; height: 16px; }

/* ---------- Blatt, Rückfrage, Toast ---------- */
.schleier { position: fixed; inset: 0; background: rgba(20, 42, 53, 0.5); backdrop-filter: blur(2px); display: flex; align-items: flex-end; justify-content: center; z-index: 20; animation: einblenden 0.16s ease; }
.blatt { background: var(--flaeche); width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 14px 18px max(22px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--schatten-2); animation: hochschieben 0.22s ease; }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.blatt h2 { font-size: 19px; font-weight: 700; }
.blatt > .knopf, .blatt > .reihe > .knopf { margin-top: 4px; }
@keyframes hochschieben { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-hoehe) + 14px); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; box-shadow: var(--schatten-2); max-width: calc(100% - 32px); animation: hochschieben 0.2s ease; }
.toast .symbol { color: #7ee787; } .toast.fehler .symbol { color: #ffb4a8; }
.toast.weg { opacity: 0; transition: opacity 0.4s ease; }

/* ---------- Listen und Zeilen ---------- */
.liste { display: flex; flex-direction: column; gap: 6px; }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; text-align: left; color: inherit; }
.person:is(button):hover { border-color: var(--primaer-ton); background: var(--primaer-hell); }
.person .name { font-weight: 700; }
.person .leise { font-size: 13px; }
.person .ende { display: flex; align-items: center; gap: 6px; }
.person .ende .symbol.leise { width: 18px; height: 18px; color: var(--leise); }
.salden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tabelle { display: none; }

/* ---------- Anmeldung und Start ---------- */
.anmeldung { margin: auto; width: 100%; padding: 24px 16px; display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.anmeldung h1 { font-size: 22px; }
.startseite { margin: auto; width: 100%; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.willkommen { background: var(--verlauf); background-size: 220% 220%; animation: wandern 18s ease-in-out infinite; color: #fff; padding: 36px 20px 64px; position: relative; overflow: hidden; }
/* Treibende Lichtflecken und eine große, dezente Uhr als Motiv (Wunsch Felix 27.10. abends: mehr Bewegung) */
.willkommen::before, .willkommen::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.willkommen::before { width: 420px; height: 420px; left: -180px; top: -220px; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent 72%); animation: treiben 14s ease-in-out infinite; }
.willkommen::after { width: 380px; height: 380px; right: -150px; bottom: -230px; background: rgba(255, 255, 255, 0.12); animation: treiben 20s ease-in-out -7s infinite reverse; }
@keyframes treiben { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, 24px) scale(1.08); } }
.zeitring { position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 14px rgba(255, 255, 255, 0.04); pointer-events: none; z-index: 0 !important; }
.zeitring::before { content: ''; position: absolute; inset: 18px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.28); }
.zeitring i { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 4px; background: rgba(255, 255, 255, 0.38); }
.zeitring .stunde { width: 6px; height: 64px; margin-left: -3px; animation: drehen 72s linear infinite; }
.zeitring .minute { width: 4px; height: 96px; margin-left: -2px; animation: drehen 12s linear infinite; }
.zeitring .mitte { width: 14px; height: 14px; margin-left: -7px; bottom: calc(50% - 7px); border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
@keyframes drehen { to { transform: rotate(360deg); } }
.willkommen > :not(.zeitring) { position: relative; z-index: 1; }
.willkommen .logo { animation: aufpoppen 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both, schweben 4s ease-in-out 1s infinite; }
.willkommen h1 { animation: auftauchen 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }
.willkommen p { animation: auftauchen 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
.firma { position: relative; overflow: hidden; transition: background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; }
.firma::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-160%) skewX(-18deg); pointer-events: none; }
.firma:hover::after { animation: glanz 0.9s ease-out; }
.firma:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10, 60, 80, 0.22); background: rgba(255, 255, 255, 0.24); }
.firma:nth-child(1) { animation-delay: 0.3s; } .firma:nth-child(2) { animation-delay: 0.4s; } .firma:nth-child(3) { animation-delay: 0.5s; }
.startseite .anmeldung { animation: auftauchen 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both; }
.startseite .anmeldung .knopf { position: relative; overflow: hidden; }
.startseite .anmeldung .knopf::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: glanz 3.2s ease-in-out 1.5s infinite; pointer-events: none; }
.feld input:focus { transform: translateY(-1px); }
.feld input { transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }
.willkommen .logo { width: 56px; height: 56px; border-radius: 14px; background: #fff; color: var(--primaer); font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); }
.willkommen h1 { margin: 18px 0 6px; font-size: 28px; letter-spacing: -0.02em; }
.willkommen p { font-size: 15px; opacity: 0.94; max-width: 440px; }
/* Die drei Unternehmen als Glaskacheln auf dem Verlauf (Wunsch Felix 27.10. abends) */
.firmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.firma { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.32); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(10, 60, 80, 0.14); text-align: center; animation: aufpoppen 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.firma:nth-child(2) { animation-delay: 0.1s; } .firma:nth-child(3) { animation-delay: 0.2s; }
.firma .kachel { width: 100%; height: 58px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 7px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.firma .kachel img { max-width: 100%; max-height: 100%; object-fit: contain; }
.firma .kachel b { font-size: 13px; line-height: 1.1; color: var(--tuerkis); }
.firma.immobilien .kachel { background: var(--gruen); }
.firma .name { display: block; font-weight: 700; font-size: 12px; line-height: 1.2; }
.firma .zusatz { display: none; font-size: 12px; opacity: 0.85; }
.startseite .unten { position: relative; z-index: 2; margin: -40px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.startseite .anmeldung { margin: 0; padding: 20px 18px; background: var(--flaeche); border-radius: var(--r); box-shadow: var(--schatten-2); }

/* ---------- Animationen (Wunsch Felix 27.10.: spielerisch, „fast wie ein Computerspiel"); bei „Bewegung reduzieren" alle aus ---------- */
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes aufpoppen { from { opacity: 0; transform: scale(0.6); } 60% { transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes glanz { 0% { transform: translateX(-160%) skewX(-18deg); } 60%, 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes wandern { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes huepfen { 0% { transform: translateY(0); } 40% { transform: translateY(-5px) scale(1.15); } 100% { transform: none; } }
@keyframes leuchten { 0%, 100% { filter: drop-shadow(0 0 0 rgba(135, 176, 74, 0)); } 50% { filter: drop-shadow(0 0 12px rgba(135, 176, 74, 0.9)); } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.inhalt > * { flex-shrink: 0; animation: auftauchen 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.inhalt > *:nth-child(2) { animation-delay: 0.06s; } .inhalt > *:nth-child(3) { animation-delay: 0.12s; } .inhalt > *:nth-child(4) { animation-delay: 0.18s; }
.inhalt > *:nth-child(5) { animation-delay: 0.24s; } .inhalt > *:nth-child(6) { animation-delay: 0.3s; } .inhalt > *:nth-child(7) { animation-delay: 0.36s; } .inhalt > *:nth-child(n + 8) { animation-delay: 0.42s; }
.kacheln > *, .zwei > * { animation: auftauchen 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.kacheln > *:nth-child(2), .zwei > *:nth-child(2) { animation-delay: 0.08s; } .kacheln > *:nth-child(3) { animation-delay: 0.16s; } .kacheln > *:nth-child(4) { animation-delay: 0.24s; }
.wochenstreifen button { animation: aufpoppen 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.wochenstreifen button:nth-child(2) { animation-delay: 0.04s; } .wochenstreifen button:nth-child(3) { animation-delay: 0.08s; } .wochenstreifen button:nth-child(4) { animation-delay: 0.12s; }
.wochenstreifen button:nth-child(5) { animation-delay: 0.16s; } .wochenstreifen button:nth-child(6) { animation-delay: 0.2s; } .wochenstreifen button:nth-child(7) { animation-delay: 0.24s; }
.zeitstrahl > .block { animation: auftauchen 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.zeitstrahl > .block:nth-child(3) { animation-delay: 0.05s; } .zeitstrahl > .block:nth-child(4) { animation-delay: 0.1s; } .zeitstrahl > .block:nth-child(5) { animation-delay: 0.15s; } .zeitstrahl > .block:nth-child(n + 6) { animation-delay: 0.2s; }
.knopf.verlauf { position: relative; overflow: hidden; }
.knopf.verlauf::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); animation: glanz 2.8s ease-in-out infinite; pointer-events: none; }
.knopf.verlauf:hover { transform: translateY(-2px) scale(1.01); }
.held.laeuft, .held.pause { background-size: 200% 200%; animation: auftauchen 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both, wandern 14s ease-in-out infinite; }
.held.laeuft .zeit { text-shadow: 0 0 26px rgba(28, 162, 224, 0.55); }
.held.pause .zeit { text-shadow: 0 0 26px rgba(0, 178, 173, 0.55); }
.held .projekt .chip-symbol { animation: schweben 3s ease-in-out infinite; }
.navigation button.an .symbol { animation: huepfen 0.45s ease; }
.navigation .zahl, .marke.blau, .chips button { animation: aufpoppen 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ring .wert { transition: stroke-dasharray 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ring.voll svg { animation: leuchten 1.4s ease-in-out 2; }
.ring.voll .ring-mitte { animation: aufpoppen 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s both; }
.aktionen button, .wochenstreifen button, .rund, .chips button, .mehr-liste button { transition: transform 0.12s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; }
.aktionen button:active, .wochenstreifen button:active, .rund:active, .chips button:active, .mehr-liste button:active { transform: scale(0.92); }
.aktionen button:hover { transform: translateY(-2px); }
.block, .person, .kachel { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease; }
.block.tagzeile:hover, .person:is(button):hover, .kachel:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 42, 53, 0.1); }
.leer .symbol { animation: schweben 3s ease-in-out infinite; }
.blatt { animation: hochschieben 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
.toast { animation: aufpoppen 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.konfetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.balken i { transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---------- Telefonrahmen (Wunsch Felix 27.10.): die Handy-Ansicht am Mac. Der Rahmen ist der App-Container, sein Inhalt rollt,
   die untere Leiste und die Blätter bleiben im Rahmen (Containment macht ihn zum Bezug für position: fixed). ---------- */
html.handy { background: #dfe5e9; min-height: 100%; }
.handy body { margin: 0; }
.handy #app { margin: 20px auto; }
html.handy body { background: transparent; }
.handy #app { display: flex; flex-direction: column; width: 390px; height: min(844px, 100vh - 40px); max-height: none; min-height: 0; margin: 28px auto; container-type: size; contain: layout paint; transform: translateZ(0); overflow: hidden; border-radius: 48px; border: 11px solid #1b262d; box-shadow: 0 30px 80px rgba(20, 42, 53, 0.35), inset 0 0 0 2px #3a4750; background: var(--hintergrund); }
.handy #app > .inhalt, .handy #app > .anmeldung, .handy #app > .startseite { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.handy #app > .startseite { display: flex; }
.handy #app > .kopf { position: relative; top: auto; }
.handy #app > .kopf { padding-top: 22px; border-radius: 37px 37px 0 0; }
.handy #app > .navigation { border-radius: 0 0 37px 37px; padding-bottom: 18px; }
.handy .toast { bottom: 90px; }
.ansicht-umschalter { display: none; position: fixed; right: 18px; top: 16px; z-index: 50; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--schatten-2); }
.ansicht-umschalter .symbol { width: 18px; height: 18px; }
@media (min-width: 900px) { .ansicht-umschalter { display: inline-flex; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Desktop (SPEC N-05): Seitenleiste, Kopf, breiter Inhalt, zwei Spalten. Maßgeblich ist die Breite des
   App-Containers, nicht des Fensters: im Telefonrahmen (.handy) gilt die Handy-Gestaltung auch am großen Bildschirm. ---------- */
.nur-desktop { display: none; }
@container app (min-width: 900px) {
  body { background: #eaeff2; }
  .nur-handy, .navigation .nur-handy { display: none; }
  .nur-desktop { display: initial; }
  #app { display: grid; grid-template-columns: 256px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
  .navigation { position: sticky; top: 0; height: 100vh; grid-column: 1; grid-row: 1 / span 2; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 0 14px 18px; background: var(--navy); border-top: 0; backdrop-filter: none; }
  .navigation::before { content: ''; display: block; height: 4px; margin: 0 -14px 14px; background: var(--verlauf); }
  .brand { display: flex; align-items: center; gap: 12px; padding: 8px 10px 22px; color: #fff; }
  .brand .logo { width: 40px; height: 40px; border-radius: 11px; background: var(--verlauf); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
  .brand b { font-size: 18px; letter-spacing: 0.04em; display: block; line-height: 1.1; }
  .brand small { color: var(--navy-text); font-size: 12px; }
  .navigation button { flex: 0 0 auto; max-width: none; min-height: 46px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--navy-text); border-radius: 10px; }
  .navigation button .symbol { padding: 0; width: 22px; height: 22px; border-radius: 0; }
  .navigation button:hover { background: var(--navy-2); color: #fff; }
  .navigation button.an { background: var(--navy-3); color: #fff; box-shadow: inset 3px 0 0 var(--akzent); }
  .navigation button.an .symbol { background: none; color: #fff; }
  .navigation .im-mehr { display: flex; }
  .navigation .zahl { position: static; margin-left: auto; border: 0; }
  .nutzer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
  .nutzer .nutzer-knopf { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; color: #fff; border-radius: 10px; padding: 4px 6px; margin: -4px -6px; }
  .nutzer .nutzer-knopf:hover { background: rgba(255, 255, 255, 0.08); }
  .nutzer .avatar { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .nutzer .name { font-weight: 700; font-size: 14px; display: block; line-height: 1.15; }
  .nutzer .leise { color: var(--navy-text); font-size: 12px; display: block; line-height: 1.2; }
  .nutzer .nutzer-knopf > div { min-width: 0; }
  html.firmenfarbe .navigation { border-top: 0; border-left: 5px solid var(--akzent); }
  html.firmenfarbe .navigation::before { background: var(--akzent); animation: none; }
  html.firmenfarbe .navigation button.an { background: var(--akzent); box-shadow: 0 8px 20px color-mix(in srgb, var(--akzent) 35%, transparent); }
  html.firmenfarbe .nutzer .avatar { box-shadow: 0 0 0 2px var(--akzent); }
  .nutzer .rund { margin-left: auto; background: rgba(255, 255, 255, 0.08); color: #fff; } .nutzer .rund:hover { background: rgba(255, 255, 255, 0.18); }
  .kopf { grid-column: 2; grid-row: 1; width: 100%; max-width: 1480px; justify-self: center; padding: 22px 40px 18px; background: transparent; border-bottom: 0; position: static; }
  .kopf::before { display: none; }
  .kopf h1 { font-size: 28px; letter-spacing: -0.02em; }
  .kopf small { font-size: 15px; }
  .kopf .abmelden { display: none; }
  .kopf .jetzt { font-size: 22px; padding: 0 10px; }
  .inhalt { grid-column: 2; grid-row: 2; width: 100%; max-width: 1480px; justify-self: center; margin: 0; padding: 0 40px 48px; gap: 18px; }
  .inhalt.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-auto-rows: max-content; align-items: start; column-gap: 24px; row-gap: 18px; }
  .inhalt.zweispaltig > * { grid-column: 1; }
  .inhalt.zweispaltig > .seite { grid-column: 2; }
  .inhalt.zweispaltig > .seite:first-of-type, .inhalt.zweispaltig > .seite ~ .seite { grid-row: auto; }
  .inhalt.zweispaltig > .seite.oben { grid-row: 1 / span 6; }
  .inhalt.breit { max-width: 1480px; }
  .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .kachel { padding: 18px; } .kachel .wert { font-size: 30px; }
  .karte { padding: 20px 22px; border-radius: 18px; }
  .karte h2 { font-size: 17px; }
  .held { padding: 30px 32px; }
  .held.start { min-height: 300px; justify-content: center; gap: 14px; }
  .held.start .zeit { font-size: 92px; }
  .held.start .knopf { max-width: 460px; min-height: 58px; font-size: 17px; }
  .held .zeit { font-size: 72px; }
  .aktionen button { min-height: 78px; font-size: 13px; }
  .anmeldung { grid-column: 1 / span 2; }
  .startseite { grid-column: 1 / span 2; max-width: none; flex-direction: row; min-height: 100vh; }
  .startseite .willkommen { flex: 1 1 52%; display: flex; flex-direction: column; justify-content: safe center; padding: 40px 6vw; border-radius: 0; }
  .startseite .willkommen h1 { font-size: 42px; } .startseite .willkommen p { font-size: 18px; max-width: 520px; }
  .firmen { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; max-width: 460px; }
  .firma { flex-direction: row; text-align: left; gap: 16px; padding: 10px 14px 10px 10px; }
  .firma .kachel { width: 118px; height: 54px; flex: 0 0 auto; }
  .firma .kachel b { font-size: 15px; }
  .firma .name { font-size: 17px; } .firma .zusatz { display: block; font-size: 14px; }
  .zeitring { width: 460px; height: 460px; right: -170px; top: auto; bottom: -190px; }
  .zeitring .stunde { height: 110px; } .zeitring .minute { height: 160px; }
  @keyframes hereingleiten { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  .startseite .anmeldung { animation: hereingleiten 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both; }
  .firma:hover { transform: translateX(6px) translateY(-2px); }
  .startseite .unten { flex: 1 1 48%; margin: 0; padding: 60px 6vw; justify-content: center; gap: 18px; background: var(--hintergrund); }
  .startseite .anmeldung { box-shadow: var(--schatten-1); border: 1px solid var(--linie); max-width: 520px; width: 100%; margin: 0 auto; }
  .salden { grid-template-columns: repeat(4, 1fr); }
  .schleier { align-items: center; padding: 20px; }
  .blatt { border-radius: 20px; max-width: 520px; padding: 20px 24px 24px; animation: aufpoppen 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .blatt:has(.angabenpaar) { max-width: 820px; }
  .toast { bottom: 28px; }
  .wochenstreifen button { min-height: 70px; } .wochenstreifen button b { font-size: 18px; }
  .block { grid-template-columns: 70px 10px minmax(0, 1fr) auto; padding: 12px 16px 12px 12px; }
  .block .von { font-size: 13px; }
  .liste.tabelle-desktop .person { border-radius: 0; border: 0; border-top: 1px solid var(--linie); padding: 12px 16px; }
  .liste.tabelle-desktop { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; gap: 0; }
  .liste.tabelle-desktop .person:first-child { border-top: 0; }
  .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
}

/* ---------- Computer-Ansicht, rechte Spalte (Felix 28.10.): Wochenbalken und „Wer ist da" ---------- */
.balkenliste { display: flex; flex-direction: column; gap: 4px; }
.balkenzeile { display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 12px; text-align: left; color: var(--tinte); }
.balkenzeile:hover { background: var(--primaer-hell); }
.balkenzeile.an { background: var(--primaer-hell); box-shadow: inset 3px 0 0 var(--primaer); }
.balkenzeile .tagname { font-size: 13px; font-weight: 700; color: var(--grau); } .balkenzeile.heute .tagname { color: var(--primaer); }
.balkenzeile .balken { height: 12px; border-radius: 8px; background: #e9eef1; overflow: hidden; display: block; }
.balkenzeile .balken i { display: block; height: 100%; min-width: 4px; border-radius: 8px; background: var(--primaer); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.balkenzeile .balken i.ok { background: var(--gruen); } .balkenzeile .balken i.warn { background: var(--warn); } .balkenzeile .balken i.tuerkis { background: var(--tuerkis); } .balkenzeile .balken i.rot { background: var(--rot); } .balkenzeile .balken i.grau { background: #cfd8dd; }
.balkenzeile .stunden { font-size: 14px; font-weight: 700; text-align: right; }
.zaehlerreihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.zaehler { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: #f1f5f7; }
.zaehler b { font-size: 24px; line-height: 1.1; } .zaehler span { font-size: 12px; color: var(--grau); }
.zaehler.ok b { color: var(--ok); } .zaehler.tuerkis b { color: #077c78; } .zaehler.warn b { color: #9a4a06; } .zaehler.grau b { color: var(--grau); }
.liste.mini { display: flex; flex-direction: column; gap: 2px; }
.liste.mini .person { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border: 0; background: none; box-shadow: none; }
.liste.mini .person .name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste.mini { max-height: 320px; overflow-y: auto; }
.tag-zeit { font-size: 12px; margin-top: 2px; }
.verteilung { display: flex; flex-direction: column; gap: 12px; }
.verteilzeile { display: flex; flex-direction: column; gap: 5px; }
.vz-kopf { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.vz-kopf .nr { font-weight: 700; color: var(--primaer); } .vz-kopf .nm { flex: 1; min-width: 0; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vz-kopf b { font-weight: 700; }
.verteilzeile .balken { height: 8px; border-radius: 6px; background: #e9eef1; overflow: hidden; }
.verteilzeile .balken i { display: block; height: 100%; border-radius: 6px; background: var(--verlauf); }

/* ---------- Eingaben-Tabelle und Admin-Zeilen (Felix 28.10.) ---------- */
.tabellenrahmen { flex-shrink: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten-1); overflow-x: auto; }
.eingabetabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.eingabetabelle th { position: sticky; top: 0; text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); background: #f6f9fa; padding: 10px 14px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.eingabetabelle td { padding: 9px 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.eingabetabelle tbody tr { cursor: pointer; } .eingabetabelle tbody tr:hover, .eingabetabelle tbody tr:focus-visible { background: var(--primaer-hell); outline: none; }
.eingabetabelle tbody tr.pausenzeile { color: var(--grau); }
.eingabetabelle td .zeile { gap: 10px; justify-content: flex-start; }
.adminzeile { flex-wrap: wrap; }
.adminsteuerung { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.adminsteuerung select { min-width: 190px; }

/* ---------- Buchungsblatt: Projekt und Kostenstelle nebeneinander (Felix 28.10.) ---------- */
.gruppenhinweis { font-size: 13px; }
.angabenpaar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.angabengruppe { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gruppenkopf { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primaer); }
.gruppenkopf .symbol { color: var(--primaer); }
@container app (min-width: 900px) {
  .angabenpaar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .angabengruppe + .angabengruppe { border-left: 1px solid var(--linie); padding-left: 22px; margin-left: 22px; }
}

/* ---------- Grafischer Tagesverlauf (Felix 28.10.) ---------- */
.verlauf-balken { position: relative; height: 54px; border-radius: 14px; background: #eef3f6; overflow: hidden; }
.vseg { position: absolute; top: 7px; bottom: 7px; min-width: 4px; border-radius: 8px; border: 0; padding: 0 4px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; overflow: hidden; white-space: nowrap; cursor: pointer; transition: transform 0.15s, filter 0.15s; }
button.vseg:hover, button.vseg:focus-visible { filter: brightness(1.1); transform: scaleY(1.08); outline: none; }
div.vseg { cursor: default; }
.vseg.f0, .punkt.f0 { background: #1ca2e0; } .vseg.f1, .punkt.f1 { background: #00b2ad; } .vseg.f2, .punkt.f2 { background: #87b04a; }
.vseg.f3, .punkt.f3 { background: #5b6cd6; } .vseg.f4, .punkt.f4 { background: #e0a31c; } .vseg.f5, .punkt.f5 { background: #c0627a; }
.vseg.pause { background: repeating-linear-gradient(135deg, #cfd8dd 0 6px, #e3e9ed 6px 12px); }
.vseg.luecke { background: var(--warn-hell); border: 2px dashed var(--warn); }
.vseg.laeuft { animation: vlauf 1.8s ease-in-out infinite; }
@keyframes vlauf { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.verlauf-achse { position: relative; height: 16px; }
.vtick { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--leise); }
.verlauf-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.vleg { display: inline-flex; align-items: center; gap: 6px; } .vleg.warn { color: #9a4a06; }
.vleg .punkt { width: 10px; height: 10px; border-radius: 3px; animation: none; box-shadow: none; display: inline-block; }
.vleg .punkt.luecke { background: var(--warn-hell); border: 2px dashed var(--warn); }

/* ---------- Zusammen mit: Kollegen am Block (Felix 28.10.) ---------- */
.zusammen { gap: 8px; }
.zusammen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 4px; border-radius: 999px; background: var(--primaer-hell); color: var(--primaer); font-size: 13px; font-weight: 700; animation: aufpoppen 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.zchip .ava { width: 24px; height: 24px; font-size: 10px; }
.zchip button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--primaer); } .zchip button:hover { background: rgba(28, 162, 224, 0.2); }
.zchip button .symbol { width: 12px; height: 12px; }
.zusammen-knopf { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 14px 8px 10px; border-radius: 12px; border: 1px dashed var(--primaer); color: var(--primaer); font-weight: 700; font-size: 14px; background: transparent; transition: background 0.15s, transform 0.15s; }
.zusammen-knopf:hover { background: var(--primaer-hell); transform: translateY(-1px); }
.zusammen-knopf .symbol { width: 24px; height: 24px; }
.zusammen-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: #f4f8fa; border: 1px solid var(--linie); animation: auftauchen 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.zusammen-panel[hidden] { display: none; }
.zusammen-kopf { display: flex; align-items: center; gap: 12px; }
.zbild { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--verlauf); color: #fff; }
.zbild .symbol { width: 30px; height: 30px; }
.zusammen-liste { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; padding-right: 2px; }
.zeintrag { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); text-align: left; transition: background 0.12s, border-color 0.12s; }
.zeintrag:hover { background: var(--primaer-hell); }
.zeintrag.an { border-color: var(--primaer); background: var(--primaer-hell); }
.zname { display: flex; flex-direction: column; min-width: 0; flex: 1; } .zname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zname .leise { font-size: 12px; }
.zhaken { width: 22px; height: 22px; color: var(--primaer); display: inline-flex; align-items: center; justify-content: center; } .zhaken .symbol { width: 20px; height: 20px; }
.zusammen-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- Zeitwahl „vor N Min" mit gleitendem Daumen (Felix 28.10.) ---------- */
.zeitwahl { display: flex; flex-direction: column; gap: 8px; }
.zeitleiste { position: relative; display: flex; padding: 4px; border-radius: 18px; background: linear-gradient(180deg, #e8eef2, #f1f5f8); box-shadow: inset 0 1px 3px rgba(20, 42, 53, 0.12); --n: 5; --i: 0; }
.zdaumen { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 14px; background: var(--verlauf); box-shadow: 0 4px 12px rgba(28, 162, 224, 0.4); transform: translateX(calc(var(--i) * 100%)); transition: transform 0.38s cubic-bezier(0.3, 1.45, 0.5, 1); }
.zoption { position: relative; z-index: 1; flex: 1; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 14px; color: #44505a; transition: color 0.2s; }
.zoption .zvor, .zoption .zmin { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; line-height: 1; }
.zoption .znum { font-size: 22px; font-weight: 800; line-height: 1.05; }
.zoption:active { transform: scale(0.94); }
.zoption.an { color: #fff; }
.zoption.an .znum { animation: zpop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes zpop { 0% { transform: scale(0.7); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
.zoption .zjetzt { width: 9px; height: 9px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 0 rgba(135, 176, 74, 0.6); animation: puls 1.8s ease-out infinite; margin-bottom: 3px; }
.zoption.an .zjetzt { background: #fff; }
.zoption .znum:not(.num) { font-size: 16px; }
.zvorschau { text-align: center; font-size: 14px; color: var(--grau); min-height: 20px; }
.zvorschau b { color: var(--primaer); font-size: 16px; }
.zvorschau.neu { animation: auftauchen 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------- Zusammen mit: freundlicher Knopf statt Feld (Felix 28.10.) ---------- */
.zusammen { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.zusammen-knopf { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 6px 18px 6px 8px; border-radius: 999px; border: 0; color: #2f4a59; font-size: 14px; background: linear-gradient(120deg, #e6f6f5, #eaf3fb); box-shadow: 0 1px 3px rgba(20, 42, 53, 0.1); transition: transform 0.15s, box-shadow 0.15s; }
.zusammen-knopf:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 42, 53, 0.14); }
.zusammen-knopf:active { transform: scale(0.97); }
.zusammen-knopf b { color: #0d5f7f; } .zusammen-knopf em { font-style: normal; opacity: 0.6; }
.zfigur { position: relative; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; background: #fff; box-shadow: 0 1px 3px rgba(20, 42, 53, 0.14); }
.zusammen-knopf:hover .zfigur { animation: zwackeln 0.6s ease-in-out; }
@keyframes zwackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.08); } 60% { transform: rotate(10deg) scale(1.08); } }
.zplus { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; line-height: 1; color: #fff; background: var(--gruen); border: 2px solid #fff; }
.zplus.zahl { background: var(--primaer); font-size: 11px; }
.zbild { font-size: 28px; line-height: 1; background: #fff; box-shadow: 0 1px 3px rgba(20, 42, 53, 0.16); }

/* ---------- Figurenpaar statt Emoji (Felix 28.10.) ---------- */
.figurenpaar { width: 100%; height: 100%; display: block; }
.fig-koerper-a { fill: #00a39f; } .fig-kopf-a { fill: #8fdcd8; } .fig-helm-a { fill: #f2b632; stroke: #f2b632; stroke-width: 1.6; stroke-linecap: round; }
.fig-koerper-b { fill: #1ca2e0; } .fig-kopf-b { fill: #a9dcf6; } .fig-helm-b { fill: #ffd75e; stroke: #ffd75e; stroke-width: 1.6; stroke-linecap: round; }
.fig-rand { stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.zfigur .figurenpaar { width: 30px; height: 30px; transition: transform 0.2s; }
.zusammen-knopf:hover .zfigur .figurenpaar { transform: scale(1.1); }
.zbild .figurenpaar { width: 34px; height: 34px; }

/* ---------- Wort-für-Wort-Vervollständigung (Felix 28.10.) ---------- */
.wortreihe { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 8px; border-bottom: 1px solid var(--linie); margin-bottom: 2px; }
.wort { padding: 7px 14px; border-radius: 999px; font-size: 15px; font-weight: 700; color: #0d5f7f; background: linear-gradient(120deg, #e6f6f5, #eaf3fb); box-shadow: 0 1px 2px rgba(20, 42, 53, 0.1); transition: transform 0.12s, box-shadow 0.12s, background 0.12s; animation: aufpoppen 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.wort:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(20, 42, 53, 0.16); }
.wort:active { transform: scale(0.95); }
.wort.erstes { background: var(--verlauf); color: #fff; }

/* ---------- Einheitliche Felder in der Buchungsmaske (Felix 28.10.: „Zusammen mit“ wirkt zu herausgehoben) ----------
   „Zusammen mit“, die Wörter und die Auswahl-Chips folgen jetzt dem Stil der Eingabefelder und Vorschlags-Chips. */
.zusammen-knopf { display: flex; align-items: center; gap: 10px; align-self: stretch; width: 100%; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--rand); border-radius: 12px; background: var(--flaeche); color: var(--leise); font-size: inherit; font-weight: 400; text-align: left; box-shadow: none; transition: border-color 0.16s ease, box-shadow 0.16s ease; }
.zusammen-knopf:hover { transform: none; box-shadow: none; border-color: var(--primaer); }
.zusammen-knopf:active { transform: none; }
.zusammen-knopf:focus-visible { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 3px var(--primaer-ton); }
.zusammen-knopf b { color: var(--tinte); font-weight: 600; } .zusammen-knopf em { font-style: normal; opacity: 1; }
.zfigur { width: 24px; height: 24px; flex: 0 0 auto; background: none; box-shadow: none; border-radius: 0; }
.zfigur .figurenpaar, .zusammen-knopf:hover .zfigur .figurenpaar { width: 24px; height: 24px; transform: none; }
.zusammen-knopf:hover .zfigur { animation: none; }
.zplus { position: static; margin-left: auto; flex: 0 0 auto; width: 24px; height: 24px; border: 0; border-radius: 50%; font-size: 18px; font-weight: 600; color: var(--primaer); background: var(--primaer-hell); }
.zplus.zahl { color: #fff; background: var(--primaer); font-size: 12px; font-weight: 700; }
.zchip { min-height: 34px; padding: 0 4px 0 5px; font-weight: 600; }
.zbild { width: 40px; height: 40px; background: var(--primaer-hell); box-shadow: none; }
.zbild .figurenpaar { width: 28px; height: 28px; }
.wortreihe { padding: 2px 2px 8px; }
.wort { min-height: 34px; padding: 0 12px; font-size: 14px; font-weight: 600; border-radius: 999px; color: var(--primaer); background: var(--primaer-hell); box-shadow: none; }
.wort:hover { background: var(--primaer-ton); transform: none; box-shadow: none; }
.zusammen-knopf .ztext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Leise Zeile „Meinst du / Danach oft" unter dem Tätigkeitsfeld (Felix 28.10.) ---------- */
.weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; animation: auftauchen 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.weiter[hidden] { display: none; }
.weiter-text { font-size: 12px; font-weight: 600; color: var(--leise); margin-right: 2px; }

/* ---------- Tätigkeit mehrzeilig: Stichworte, Enter für die nächste Zeile (Felix 28.10.) ---------- */
.suche textarea { display: block; width: 100%; min-height: 48px; max-height: 190px; padding: 12px 14px 12px 40px; border: 1.5px solid var(--rand); border-radius: 12px; background: var(--flaeche); font-family: inherit; font-size: inherit; line-height: 22px; resize: none; overflow-y: auto; transition: border-color 0.16s ease, box-shadow 0.16s ease, height 0.12s ease; }
.suche textarea:focus { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 3px var(--primaer-ton); }
.suche textarea::placeholder { color: var(--leise); }
.suche:has(textarea) .symbol, .suche:has(textarea):focus-within .symbol { top: 14px; transform: none; }
.notizen { margin: 5px 0 0; padding-left: 18px; font-size: 13px; color: var(--grau); display: flex; flex-direction: column; gap: 2px; }
.notizen li::marker { color: var(--primaer); }

/* Tag nachtragen als Spiel (Felix 29.10.): Bahn mit wachsenden Blöcken, Schritte schieben von rechts herein */
.spielbahn { padding: 6px 18px 2px; }
.spielgleis { position: relative; height: 26px; border-radius: 13px; background: var(--feld); box-shadow: inset 0 1px 3px rgba(20, 42, 53, 0.12); overflow: visible; }
.spielgleis .teil { position: absolute; top: 3px; bottom: 3px; border-radius: 10px; transform-origin: left center; transition: left 0.4s ease, width 0.4s ease; }
.spielgleis .teil.arbeit { background: linear-gradient(90deg, var(--primaer), var(--tuerkis)); }
.spielgleis .teil.pause { background: linear-gradient(90deg, #ffd166, #f4b942); }
.spielgleis .teil.neu { animation: teilein 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.spielgleis .teil.offen { background: repeating-linear-gradient(135deg, rgba(28, 162, 224, 0.35) 0 6px, rgba(28, 162, 224, 0.12) 6px 12px); animation: offenpuls 1.4s ease-in-out infinite; }
.spielgleis .marke-jetzt { position: absolute; top: -22px; transform: translateX(-50%); font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 9px; color: #fff; background: var(--navy); transition: left 0.4s ease; white-space: nowrap; }
.spielticks { position: relative; height: 16px; margin-top: 3px; font-size: 11px; color: var(--leise); }
.spielticks .tick { position: absolute; transform: translateX(-50%); }
.spielbahn { margin-top: 18px; }
.spielbuehne { overflow: hidden; }
.spielschritt { animation: schrittein 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.spielfrage { font-size: 20px; font-weight: 700; line-height: 1.2; }
.spielchips { display: flex; flex-wrap: wrap; gap: 8px; }
.spielchip { padding: 8px 14px; border-radius: 999px; background: var(--feld); font-weight: 600; transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.spielchip:hover { transform: translateY(-1px); }
.spielchip.an { background: var(--primaer); color: #fff; transform: scale(1.06); }
.spielliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.spielliste li { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 12px; background: var(--primaer-hell); animation: schrittein 0.4s ease both; animation-delay: calc(var(--i) * 0.08s); }
.spielliste li.pause { background: var(--warn-hell); }
@keyframes teilein { from { transform: scaleX(0); opacity: 0.2; } to { transform: scaleX(1); opacity: 1; } }
@keyframes offenpuls { 50% { opacity: 0.55; } }
@keyframes schrittein { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .spielschritt, .spielliste li, .spielgleis .teil.neu, .spielgleis .teil.offen { animation: none; } }

/* ---------- Computeransicht: Feinschliff (Felix 29.10.): ruhige Hintergrundanimation, Fußband mit den Marken der Gruppe, gepflegte Karten ---------- */
.gruppenfuss { display: none; }
@keyframes farbtreiben { 0% { background-position: 0% 0%, 100% 10%, 50% 100%; } 100% { background-position: 18% 22%, 82% 34%, 40% 76%; } }
@container app (min-width: 900px) {
  /* Fußband: Willkommensgruß und die Marken der Gruppe, ruhig und nicht anklickbar */
  #app { grid-template-rows: auto 1fr auto; }
  .navigation { grid-row: 1 / -1; }
  .gruppenfuss { grid-column: 2; grid-row: 3; width: 100%; max-width: 1480px; justify-self: center; padding: 26px 40px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .gruppenfuss p { margin: 0; font-size: 15px; color: #4d5f68; }
  .gruppenfuss p b { color: var(--tinte); }
  .gruppenfuss-marken { display: flex; align-items: center; gap: 0; }
  .gruppenfuss-marken > * { padding: 0 26px; display: flex; align-items: center; }
  .gruppenfuss-marken > * + * { border-left: 1px solid rgba(20, 42, 53, 0.14); }
  .gruppenfuss-marken > :last-child { padding-right: 0; }
  .marke-bau { gap: 0.28em; font-size: 20px; color: #00928d; letter-spacing: 0.01em; white-space: nowrap; }
  .marke-bau b { font-weight: 800; }
  .marke-immo { width: 190px; height: 48px; background: #6f9a35; -webkit-mask: url(/logo/rechberger-immobilien.png) center / contain no-repeat; mask: url(/logo/rechberger-immobilien.png) center / contain no-repeat; box-sizing: content-box; }
  .marke-wohnraum { height: 52px; width: auto; box-sizing: content-box; mix-blend-mode: multiply; }

  /* Kopf: Titel mit Akzentlinie, Uhr als Pille; der Ansichtsumschalter rutscht nach unten rechts */
  .kopf { padding: 30px 40px 22px; }
  .kopf h1 { font-size: 32px; letter-spacing: -0.025em; position: relative; padding-bottom: 8px; }
  .kopf h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; border-radius: 2px; background: var(--verlauf); }
  .kopf small { margin-top: 8px; color: #53646d; }
  .kopf .jetzt { background: rgba(255, 255, 255, 0.85); border: 1px solid var(--linie); border-radius: 999px; padding: 6px 18px; box-shadow: var(--schatten-1); font-size: 20px; }
  .ansicht-umschalter { top: auto; bottom: 96px; left: 22px; right: auto; min-height: 36px; padding: 0 14px; font-size: 13px; opacity: 0.55; transition: opacity 0.2s ease; }
  .ansicht-umschalter:hover { opacity: 1; }

  /* Karten und Kacheln: weiche Tiefe, sanftes Anheben, Akzent oben */
  .karte, .kachel { border-color: rgba(20, 42, 53, 0.08); box-shadow: 0 1px 2px rgba(20, 42, 53, 0.04), 0 8px 24px rgba(20, 42, 53, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .karte:hover, .kachel:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 42, 53, 0.05), 0 14px 32px rgba(20, 42, 53, 0.1); }
  .kachel { position: relative; overflow: hidden; padding: 20px 22px; gap: 10px; }
  .kachel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--verlauf); opacity: 0.85; }
  .kachel .wert { font-size: 32px; letter-spacing: -0.03em; white-space: nowrap; }
  .kachel .chip-symbol { width: 42px; height: 42px; border-radius: 12px; }
  .leer { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)); border: 1px dashed #b8c6ce; padding: 54px 24px; gap: 10px; }
  .leer .symbol { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--tuerkis-hell); color: #078b86; box-sizing: border-box; }
  .leer b { font-size: 18px; color: var(--tinte); }
  .abschnitt { margin-bottom: 2px; }
  .knopf:not(.klein):hover { transform: translateY(-1px); }

  /* Anträge: Salden und die zwei Aktionen als Kopfreihe über die volle Breite, darunter die Liste */
  .inhalt.antraege > .liste { grid-column: 1 / -1; }
  .inhalt.antraege > .seite.antrags-kopf { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
  .antrags-kopf .salden, .antrags-kopf .reihe { display: contents; }
  .antrags-kopf .kachel { grid-row: 1; min-height: 132px; justify-content: space-between; }
  .antrags-kopf .reihe .knopf:nth-child(1) { grid-column: 3; } .antrags-kopf .reihe .knopf:nth-child(2) { grid-column: 4; }
  .antrags-kopf .reihe .knopf { grid-row: 1; min-height: 132px; flex-direction: column; gap: 12px; font-size: 17px; border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 42, 53, 0.04), 0 8px 24px rgba(20, 42, 53, 0.08); }
  .antrags-kopf .reihe .knopf .symbol { width: 30px; height: 30px; }
  .antrags-kopf .reihe .knopf:not(.weiss) { background: linear-gradient(135deg, var(--primaer), #0b8fb3 70%, #11a89f); color: #fff; }
  .antrags-kopf .reihe .knopf.weiss { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 42, 53, 0.08); }
  .antrags-kopf > .leise { grid-column: 1 / -1; grid-row: 2; margin-top: -6px; }
}
/* Hintergrund: drei weiche Farbflächen in den Farben der Gruppe (Bau türkis, Immobilien grün, Wohnraum blau) treiben langsam.
   Als @media, weil body selbst der Container ist und sich nicht selbst abfragen kann; im Telefonrahmen bleibt es ruhig. */
@media (min-width: 900px) {
  html:not(.handy) body { background: #edf1f4; }
  html:not(.handy) body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
      radial-gradient(44vw 44vw at 22% 20%, rgba(0, 178, 173, 0.32), transparent 70%),
      radial-gradient(40vw 40vw at 84% 14%, rgba(28, 162, 224, 0.28), transparent 70%),
      radial-gradient(48vw 48vw at 54% 96%, rgba(135, 176, 74, 0.28), transparent 70%); background-repeat: no-repeat; background-size: 125% 125%; }
}
@media (prefers-reduced-motion: reduce) { html:not(.handy) body::before { animation: none; } .karte, .kachel { transition: none; } }

/* Übungsinstanz: orange Band ganz oben, damit sie nie mit den echten Daten verwechselt wird */
.umgebungsband { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: repeating-linear-gradient(135deg, #e07b00 0 14px, #c96a00 14px 28px); }
html.mit-band body { padding-top: 26px; }
html.mit-band .kopf { top: 26px; }
@container app (min-width: 900px) { html.mit-band .navigation { top: 26px; height: calc(100vh - 26px); } }

/* ---------- Verlauf der letzten Wochen (Felix 29.10.) ---------- */
.verlauf-wochen { gap: 14px; }
.schalter-gruppe { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--feld); gap: 2px; }
.schalter-gruppe button { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--grau); }
.schalter-gruppe button.an { background: #fff; color: var(--primaer); box-shadow: 0 1px 3px rgba(20, 42, 53, 0.15); }
.verlauf-zahlen { display: flex; gap: 28px; flex-wrap: wrap; font-size: 15px; }
.verlauf-zahlen b { font-size: 22px; letter-spacing: -0.02em; }
.saeulen { position: relative; height: 220px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; align-items: end; }
.saeule { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; padding: 0; border-radius: 8px; }
.saeule .stab { width: 100%; height: 78%; display: flex; align-items: flex-end; }
.saeule .stab i { display: block; width: 100%; max-width: 30px; margin: 0 auto; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--blau), var(--tuerkis)); transform-origin: bottom; animation: saeule 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: calc(var(--i) * 18ms); transition: filter 0.15s ease; }
.saeule.ohne .stab i { background: #d5dde2; }
.saeule.aktuell .stab i { background: linear-gradient(180deg, var(--gruen), var(--tuerkis)); }
.saeule:hover .stab i, .saeule:focus-visible .stab i { filter: brightness(1.12) saturate(1.2); }
.saeule .kw { font-size: 11px; color: var(--leise); height: 14px; }
.saeule .wert { font-size: 11px; font-weight: 700; color: var(--tinte); height: 14px; opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; }
.saeule:hover .wert, .saeule:focus-visible .wert, .saeule.aktuell .wert { opacity: 1; }
.schnittlinie { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed rgba(20, 42, 53, 0.28); pointer-events: none; z-index: 1; }
.schnittlinie span { position: absolute; right: 0; top: -22px; font-size: 12px; font-weight: 700; color: #4d5f68; background: rgba(255, 255, 255, 0.9); padding: 1px 8px; border-radius: 999px; }
@keyframes saeule { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@container app (min-width: 900px) { .inhalt.zweispaltig > .verlauf-wochen { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .saeule .stab i { animation: none; } }

/* ---------- Willkommensgruß nach der Anmeldung (Felix 29.10.) ---------- */
.willkommensgruss { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; cursor: pointer; background: linear-gradient(135deg, #0b6f7f, #00a39e 38%, #6aa844 70%, #1ca2e0); background-size: 220% 220%; animation: gruss-ein 0.5s ease both, gruss-farbe 6s ease-in-out infinite alternate; }
.handy .willkommensgruss { position: absolute; border-radius: 37px; }
.willkommensgruss.zu { animation: gruss-aus 0.6s ease both; pointer-events: none; }
.wg-inhalt { position: relative; padding: 24px; max-width: 640px; }
.wg-logo { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 20px; background: #fff; color: #078b86; font-weight: 800; font-size: 26px; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); animation: gruss-hoch 0.7s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.wg-inhalt h2 { font-size: clamp(38px, 7vw, 68px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; animation: gruss-hoch 0.7s 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.wg-inhalt p { margin: 14px 0 0; font-size: clamp(17px, 2.4vw, 24px); opacity: 0.95; animation: gruss-hoch 0.7s 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.wg-ringe { position: absolute; left: 50%; top: 50%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); animation: gruss-ring 2.8s ease-out both; }
.wg-ringe::after { content: ''; position: absolute; inset: 9vmin; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.22); }
@keyframes gruss-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes gruss-aus { from { opacity: 1; } to { opacity: 0; transform: scale(1.03); } }
@keyframes gruss-hoch { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes gruss-farbe { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
@keyframes gruss-ring { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .willkommensgruss, .wg-logo, .wg-inhalt h2, .wg-inhalt p, .wg-ringe { animation: none; } }

/* ---------- Seitenleiste hell und ausklappbar (Felix 29.10.: das Dunkle ist langweilig) ---------- */
.nav-schalter { display: none; }
@keyframes menue-ein { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes leiste-glanz { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@container app (min-width: 900px) {
  #app { transition: grid-template-columns 0.3s cubic-bezier(0.3, 0.8, 0.3, 1); }
  html.nav-zu #app { grid-template-columns: 88px minmax(0, 1fr); }
  .navigation { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(238, 247, 250, 0.82)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-right: 1px solid rgba(20, 42, 53, 0.07); box-shadow: 10px 0 40px rgba(20, 42, 53, 0.05); }
  .navigation::before { background: linear-gradient(90deg, var(--tuerkis), var(--gruen), var(--blau), var(--tuerkis)); background-size: 300% 100%; animation: leiste-glanz 8s linear infinite alternate; }
  .brand { color: var(--tinte); }
  .brand small { color: var(--grau); }
  .brand .logo { box-shadow: 0 6px 16px rgba(0, 163, 158, 0.35); }
  .navigation button { color: #3b4e58; position: relative; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.2s ease; animation: menue-ein 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
  .navigation button:nth-of-type(2) { animation-delay: 0.04s; } .navigation button:nth-of-type(3) { animation-delay: 0.08s; } .navigation button:nth-of-type(4) { animation-delay: 0.12s; }
  .navigation button:nth-of-type(5) { animation-delay: 0.16s; } .navigation button:nth-of-type(6) { animation-delay: 0.2s; } .navigation button:nth-of-type(7) { animation-delay: 0.24s; }
  .navigation button .symbol { color: var(--primaer); transition: transform 0.2s ease; }
  .navigation button:hover { background: rgba(28, 162, 224, 0.1); color: var(--tinte); transform: translateX(3px); }
  .navigation button:hover .symbol { transform: scale(1.12) rotate(-4deg); }
  .navigation button.an { background: linear-gradient(135deg, #0b77a8, #0494a0 60%, #17a99c); color: #fff; box-shadow: 0 8px 20px rgba(11, 119, 168, 0.32); transform: none; }
  .navigation button.an .symbol { color: #fff; }
  .navigation .zahl { background: var(--rot); color: #fff; }
  .nutzer { border-top: 1px solid rgba(20, 42, 53, 0.08); color: var(--tinte); }
  .nutzer .nutzer-knopf { color: var(--tinte); }
  .nutzer .nutzer-knopf:hover { background: rgba(28, 162, 224, 0.1); transform: none; }
  .nutzer .avatar { background: linear-gradient(135deg, var(--primaer-ton), #cfeee9); color: #0a5a7a; }
  .nutzer .leise { color: var(--grau); }
  .nutzer .rund { background: rgba(20, 42, 53, 0.06); color: var(--tinte); } .nutzer .rund:hover { background: rgba(192, 57, 43, 0.14); color: var(--rot); transform: none; }
  .ansicht-umschalter { background: rgba(20, 42, 53, 0.78); }

  /* Ausklapp-Knopf am Rand der Leiste */
  .navigation .nav-schalter { display: flex; position: absolute; right: -15px; top: 62px; width: 30px; min-width: 30px; max-width: 30px; height: 30px; min-height: 30px; padding: 0; gap: 0; flex: none; border-radius: 50%; align-items: center; justify-content: center; background: #fff; color: var(--primaer); border: 1px solid rgba(20, 42, 53, 0.12); box-shadow: 0 4px 14px rgba(20, 42, 53, 0.15); z-index: 7; animation: none; }
  .navigation .nav-schalter .symbol { width: 16px; height: 16px; color: var(--primaer); transition: transform 0.3s ease; }
  .navigation .nav-schalter:hover { transform: scale(1.12); background: #fff; }
  html.nav-zu .navigation .nav-schalter .symbol { transform: rotate(180deg); }

  /* Eingeklappt: nur Symbole, Namen als Tooltip */
  html.nav-zu .navigation { padding-left: 12px; padding-right: 12px; }
  html.nav-zu .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  html.nav-zu .brand > div:last-child { display: none; }
  html.nav-zu .navigation button:not(.nav-schalter) { font-size: 0; justify-content: center; padding: 0; gap: 0; }
  html.nav-zu .navigation button:not(.nav-schalter) .symbol { width: 24px; height: 24px; }
  html.nav-zu .navigation .zahl { position: absolute; top: 3px; right: 6px; margin: 0; font-size: 11px; }
  html.nav-zu .nutzer { flex-direction: column; padding: 12px 0 0; }
  html.nav-zu .nutzer .nutzer-knopf { flex: none; padding: 4px; margin: 0; justify-content: center; }
  html.nav-zu .nutzer .nutzer-knopf > div { display: none; }
  html.nav-zu .nutzer .rund { margin: 0; }
  html.nav-zu .ansicht-umschalter { bottom: 170px; left: 24px; font-size: 0; gap: 0; padding: 0; width: 40px; min-width: 40px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .navigation button, .navigation::before { animation: none; } #app { transition: none; } }

/* ---------- Personenakte (Felix 29.10.) ---------- */
.akte { gap: 18px; }
.akte-koerper { display: flex; flex-direction: column; gap: 18px; }
.akte-kopf { flex-wrap: wrap; }
.akte-name { font-size: 24px; }
.akte-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.akte-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@container app (min-width: 900px) { .akte-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } .akte-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.akte-monate { height: 230px; }
.akte-monate .saeule { cursor: default; }
.tagzeilen { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.tagzeile { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px; align-items: center; gap: 10px; font-size: 14px; }
.tagzeile b { text-align: right; }
.balken-leiste { height: 10px; border-radius: 5px; background: var(--feld); overflow: hidden; }
.balken-leiste i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--blau), var(--tuerkis)); transform-origin: left; animation: breit 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes breit { from { transform: scaleX(0); } to { transform: none; } }
.ziel-bereich { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@container app (min-width: 900px) { .ziel-bereich { grid-template-columns: 220px minmax(0, 1fr); } }
.ring-box { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.ring-diagramm { width: 100%; height: 100%; }
.ring-diagramm .spur { stroke: var(--feld); }
.ring-diagramm .stueck { stroke-dasharray: var(--laenge) var(--umfang); stroke-dashoffset: var(--versatz); stroke-linecap: butt; animation: ringein 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: calc(var(--i) * 120ms); }
@keyframes ringein { from { stroke-dasharray: 0 var(--umfang); } }
.ring-mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-mitte b { font-size: 24px; letter-spacing: -0.02em; }
.ziel-liste { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ziel-zeile, .text-zeile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ziel-kopf { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ziel-kopf .ziel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punkt-farbe i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.kollegen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.kollege { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--primaer-hell); font-size: 13px; transition: transform 0.15s ease, background-color 0.15s ease; }
.kollege:hover { background: var(--primaer-ton); transform: translateY(-1px); }
.kollege .avatar { width: 22px; height: 22px; font-size: 9px; }
.juengster { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.juengster:first-of-type { border-top: 0; }
.akte-kachel { min-height: 118px; }
@media (prefers-reduced-motion: reduce) { .balken-leiste i, .ring-diagramm .stueck { animation: none; } }

/* ---------- Person mit Unterseiten und Brotkrumen (Felix 29.10.) ---------- */
.krumen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.krumen .symbol { width: 14px; height: 14px; }
.krume { padding: 4px 10px; border-radius: 999px; color: var(--primaer); font-weight: 600; transition: background-color 0.15s ease; }
button.krume:hover { background: var(--primaer-hell); }
.krume.aktuell { color: var(--tinte); }
.person-rahmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.person-menue { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.person-menue button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; white-space: nowrap; font-weight: 600; font-size: 14px; color: #3b4e58; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--linie); transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.2s ease; }
.person-menue button .symbol { width: 18px; height: 18px; color: var(--primaer); }
.person-menue button:hover { background: #fff; transform: translateY(-1px); }
.person-menue button.an { background: linear-gradient(135deg, #0b77a8, #0494a0 60%, #17a99c); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(11, 119, 168, 0.28); }
.person-menue button.an .symbol { color: #fff; }
.person-seite { min-width: 0; }
.seitenwechsel { animation: seite-ein 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes seite-ein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@container app (min-width: 900px) {
  .person-rahmen { grid-template-columns: 230px minmax(0, 1fr); }
  .person-menue { flex-direction: column; overflow: visible; position: sticky; top: 16px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(20, 42, 53, 0.08); box-shadow: 0 1px 2px rgba(20, 42, 53, 0.04), 0 8px 24px rgba(20, 42, 53, 0.06); }
  .person-menue button { background: transparent; border-color: transparent; }
  .person-menue button:hover { background: rgba(28, 162, 224, 0.1); transform: translateX(3px); }
  .person-menue button.an { background: linear-gradient(135deg, #0b77a8, #0494a0 60%, #17a99c); }
}
@media (prefers-reduced-motion: reduce) { .seitenwechsel { animation: none; } }

/* ---------- Personenwahl im Export (Felix 29.10.) ---------- */
.personenwahl { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.personenwahl-liste { max-height: 260px; overflow-y: auto; border: 1px solid var(--linie); border-radius: 12px; background: #fff; }
.personenwahl .personenwahl-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--linie); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--tinte); }
.personenwahl-zeile:last-child { border-bottom: 0; }
.personenwahl-zeile:hover { background: var(--primaer-hell); }
.personenwahl-zeile input { width: 18px; height: 18px; accent-color: var(--primaer); flex: none; }
.personenwahl-zeile .num { min-width: 48px; }

/* ---------- Export-Seite (Felix 29.10.): Kacheln, Lauf-Karten, Start-Karte mit Bewegung ---------- */
.export-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container app (min-width: 900px) {
  .inhalt.zweispaltig > .export-kacheln { grid-column: 1 / -1; grid-row: 1; }
  .inhalt.zweispaltig > .seite.oben.export-seite { grid-row: 2 / span 6; }
  .export-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.export-kacheln .kachel .wert { font-size: 30px; }
.laufliste { gap: 10px; }
.laufkarte { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(20, 42, 53, 0.08); box-shadow: 0 1px 2px rgba(20, 42, 53, 0.04), 0 6px 18px rgba(20, 42, 53, 0.05); overflow: hidden; animation: lauf-ein 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.laufkarte::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--blau), var(--tuerkis)); }
.laufkarte.korrektur::before { background: linear-gradient(180deg, #e0a31c, #d9730d); }
.laufkarte.offen::before { background: linear-gradient(180deg, #ffb74d, #e07b00); animation: lauf-puls 1.8s ease-in-out infinite; }
.laufkarte:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 42, 53, 0.05), 0 12px 28px rgba(20, 42, 53, 0.1); }
.lauf-symbol { flex: none; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #0b77a8, #00a39e); box-shadow: 0 6px 14px rgba(11, 119, 168, 0.28); }
.laufkarte.korrektur .lauf-symbol { background: linear-gradient(135deg, #e0a31c, #d9730d); box-shadow: 0 6px 14px rgba(217, 115, 13, 0.28); }
.lauf-symbol .symbol { width: 22px; height: 22px; }
.lauf-mitte { flex: 1; min-width: 0; }
.lauf-mitte .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.laufkarte .ende { display: flex; align-items: center; gap: 10px; flex: none; }
.laufkarte .rund { transition: transform 0.2s ease, background-color 0.2s ease; }
.laufkarte .rund:hover { transform: translateY(2px); background: var(--primaer-hell); }
.export-karte h2 { gap: 10px; }
.export-karte h2 .chip-symbol { background: linear-gradient(135deg, #0b77a8, #00a39e); color: #fff; box-shadow: 0 6px 14px rgba(11, 119, 168, 0.28); }
.personenwahl { animation: seite-ein 0.3s ease both; }
.personenwahl-zeile { animation: lauf-ein 0.3s ease both; }
.export-start { position: relative; overflow: hidden; background: linear-gradient(135deg, #0b77a8, #0494a0 55%, #17a99c); box-shadow: 0 10px 24px rgba(11, 119, 168, 0.32); }
.export-start::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-120%); animation: export-glanz 4s ease-in-out infinite; }
.export-start.arbeitet { background-size: 200% 100%; animation: export-streifen 1s linear infinite; background-image: repeating-linear-gradient(135deg, #0b77a8 0 14px, #0a8fa6 14px 28px); }
.export-start:disabled { cursor: progress; opacity: 0.9; }
@keyframes lauf-ein { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes lauf-puls { 50% { opacity: 0.45; } }
@keyframes export-glanz { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes export-streifen { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .laufkarte, .personenwahl, .personenwahl-zeile, .export-start::after, .export-start.arbeitet, .laufkarte.offen::before { animation: none; } }
.export-karte .fehler, .export-karte .hinweis { white-space: pre-line; }

/* ---------- Leichte Bewegung im ganzen Programm (Felix 29.10.: sympathisch, nicht aufdringlich) ---------- */
@keyframes sanft-ein { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes atmen { 0%, 100% { box-shadow: 0 6px 18px rgba(0, 178, 173, 0.28); } 50% { box-shadow: 0 10px 28px rgba(28, 162, 224, 0.42); } }
@keyframes linie-waechst { from { width: 0; } to { width: 44px; } }
@keyframes schwimmen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes schimmern { to { background-position: -200% 0; } }

/* Listen, Kacheln und Reihen laufen nacheinander ein */
.liste > *, .kacheln > *, .zeitstrahl > *, .aktionen > *, .tagzeilen > *, .verteilung > *, .mehr-liste > * { animation: sanft-ein 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
:is(.liste, .kacheln, .zeitstrahl, .aktionen, .tagzeilen, .verteilung, .mehr-liste) > *:nth-child(2) { animation-delay: 0.04s; }
:is(.liste, .kacheln, .zeitstrahl, .aktionen, .tagzeilen, .verteilung, .mehr-liste) > *:nth-child(3) { animation-delay: 0.08s; }
:is(.liste, .kacheln, .zeitstrahl, .aktionen, .tagzeilen, .verteilung, .mehr-liste) > *:nth-child(4) { animation-delay: 0.12s; }
:is(.liste, .kacheln, .zeitstrahl, .aktionen, .tagzeilen, .verteilung, .mehr-liste) > *:nth-child(5) { animation-delay: 0.16s; }
:is(.liste, .kacheln, .zeitstrahl, .aktionen, .tagzeilen, .verteilung, .mehr-liste) > *:nth-child(6) { animation-delay: 0.2s; }
:is(.liste, .kacheln, .zeitstrahl, .aktionen, .tagzeilen, .verteilung, .mehr-liste) > *:nth-child(n + 7) { animation-delay: 0.24s; }
.chips button, .zusammen .chip, .marke { animation: pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards; }

/* Berührung: Knöpfe und Zeilen reagieren spürbar, aber leicht */
.knopf, .rund, .person, .tag, .aktionen button, .wochenstreifen button { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.2s ease, background-color 0.18s ease, filter 0.18s ease, color 0.18s ease; }
.knopf:not(:disabled):hover, .aktionen button:hover, .wochenstreifen button:hover { transform: translateY(-2px); }
.knopf:active, .rund:active, .aktionen button:active, .wochenstreifen button:active, .tag:active, button.person:active { transform: scale(0.97); }
button.person:hover, .tag:hover { transform: translateX(3px); }
.rund:hover { transform: scale(1.08); }
.avatar { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.4); }
.person:hover .avatar, .nutzer-knopf:hover .avatar { transform: scale(1.1) rotate(-4deg); }
.brand .logo { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.4); }
.brand:hover .logo { transform: rotate(-8deg) scale(1.08); }
a:not(.rund) { transition: color 0.15s ease; }
.knopf .symbol, .aktionen button .symbol { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.4); }
.knopf:hover .symbol, .aktionen button:hover .symbol { transform: scale(1.15) rotate(-6deg); }

/* Eingabefelder leuchten beim Fokus weich auf */
input, select, textarea { transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(28, 162, 224, 0.16); }

/* Hauptaktion „Arbeitstag starten“ atmet leise; Titelstrich wächst ein; Uhr und Karten schweben kaum merklich */
.export-start:not(.arbeitet) { animation: atmen 3.2s ease-in-out infinite; }
.kopf h1::after { animation: linie-waechst 0.7s 0.15s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.willkommensgruss .wg-logo { animation: gruss-hoch 0.7s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.2) both, schwimmen 3s 1s ease-in-out infinite; }
.leer .symbol { animation: schwimmen 3.4s ease-in-out infinite; }

/* Wartezustände schimmern statt zu stehen */
.leise:is(:only-child) { background: none; }
.spinner-text { background: linear-gradient(90deg, var(--feld) 25%, #fff 50%, var(--feld) 75%); background-size: 200% 100%; animation: schimmern 1.4s linear infinite; border-radius: 8px; color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .liste > *, .kacheln > *, .zeitstrahl > *, .aktionen > *, .tagzeilen > *, .verteilung > *, .mehr-liste > *, .chips button, .marke, .held.start .knopf.verlauf, .export-start, .kopf h1::after, .leer .symbol, .willkommensgruss .wg-logo { animation: none; }
  .knopf, .rund, .person, .tag, .avatar, .brand .logo { transition: none; }
}

/* BMD-Historie in der Person (Felix 29.10.) */
.bmd-archiv .bmd-arten { display: flex; flex-wrap: wrap; gap: 8px; }
.bmd-archiv .bmd-art { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--feld); text-align: left; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.bmd-archiv .bmd-art:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(20, 42, 53, 0.12); }
.bmd-archiv .bmd-art.an { background: #fff; box-shadow: inset 0 0 0 2px var(--primaer); }
.bmd-archiv .tabellenrahmen { max-height: 60vh; overflow: auto; }
.bmd-archiv .eingabetabelle td, .bmd-archiv .eingabetabelle th { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.bmd-archiv .eingabetabelle td:nth-child(6) { white-space: normal; min-width: 200px; }

/* ---------- Export-Seite, zweite Fassung (Felix 29.10.: schöner und übersichtlicher): Schritt 1 Auswahl, Schritt 2 Ausgabe ---------- */
.ex-schritt { display: flex; align-items: center; gap: 14px; }
.ex-schritt h2 { margin: 0; }
.ex-nr { flex: none; width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #0b77a8, #00a39e); box-shadow: 0 6px 14px rgba(11, 119, 168, 0.28); }
.ex-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container app (min-width: 700px) { .ex-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-auswahl .feld .schalter-gruppe { align-self: flex-start; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-chip { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--grau); background: var(--feld); border: 1.5px solid transparent; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.ex-chip:hover { transform: translateY(-1px); background: var(--primaer-hell); color: var(--primaer); }
.ex-chip.an { background: #fff; color: var(--primaer); border-color: var(--primaer); box-shadow: 0 2px 8px rgba(11, 119, 168, 0.18); }
.ex-auswahl .historie-schalter { padding: 12px 14px; border-radius: 14px; background: var(--feld); align-items: flex-start; }
.ex-auswahl .historie-schalter .leise { font-size: 13px; }
.ex-zusammenfassung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 14px; border-radius: 14px; background: var(--primaer-hell); font-size: 14px; }
.ex-zusammenfassung b { color: var(--primaer); }
.ex-punkt { color: var(--leise); }
.ex-aktion-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container app (min-width: 700px) { .ex-aktion-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-aktion { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: #fff; border: 1.5px solid var(--rand); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; animation: sanft-ein 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
.ex-aktion.lauf { animation-delay: 80ms; }
.ex-aktion:hover { transform: translateY(-2px); border-color: var(--primaer); box-shadow: 0 10px 26px rgba(11, 119, 168, 0.14); }
.ex-aktion h3 { margin: 0; font-size: 17px; }
.ex-aktion-symbol { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #0b77a8, #00a39e); box-shadow: 0 6px 14px rgba(11, 119, 168, 0.28); }
.ex-aktion.lauf .ex-aktion-symbol { background: linear-gradient(135deg, #e0a31c, #d9730d); box-shadow: 0 6px 14px rgba(217, 115, 13, 0.28); }
.ex-aktion-symbol .symbol { width: 22px; height: 22px; }
.ex-aktion-unten { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ex-aktion-unten .knopf { width: 100%; }
.ex-aktion-unten .text { align-self: center; }
@media (prefers-reduced-motion: reduce) { .ex-aktion, .ex-chip { animation: none; transition: none; } }
@container app (min-width: 900px) { .inhalt.zweispaltig.export-seite-rahmen { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.export-seite .laufkarte { padding: 12px 14px; gap: 12px; }
.export-seite .lauf-mitte .name { white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
.export-seite .laufkarte .ende { flex-direction: column; align-items: flex-end; gap: 8px; }
.ex-raster.datum { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Danach-Leiste und genaue Uhrzeit (Felix 29.10.): ein großer Fertig-Knopf, früheres Ende gleich darunter */
.zeitleiste.frei .zdaumen { opacity: 0; }
.zgenau { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 8px 12px; border-radius: 14px; background: var(--feld); }
.zgenau input { min-height: 40px; width: 130px; border: 1.5px solid var(--rand); border-radius: 10px; padding: 0 10px; background: var(--flaeche); font-weight: 700; }
.zgenau input:focus { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 3px var(--primaer-ton); }
.hinweis.danach { gap: 12px; }
.knopf.danach-fertig { width: 100%; min-height: 64px; font-size: 20px; }
.hinweis.danach .reihe { align-items: center; justify-content: space-between; }
.frueher { gap: 10px; padding-top: 4px; animation: seite-ein 0.3s ease both; }
.frueher .knopf { align-self: flex-end; }

/* Persönliche Daten in der Personenakte und Stammdaten (Felix 29.10.) */
.akte-person { display: flex; flex-direction: column; gap: 12px; }
.akte-person h2 { margin: 0; }
.akte-person-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container app (min-width: 700px) { .akte-person-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.akte-person-feld { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--feld); }
.abschnittstitel { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--grau); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Persönlicher Kalender (Felix 29.10.) ---------- */
.art-feiertag { --k: #d64545; }
.art-landesfeiertag { --k: #e59a9a; }
.art-brauch { --k: #8b98a3; }
.art-betriebsurlaub { --k: #2f7d4f; }
.art-urlaub { --k: #1ca2e0; }
.art-abwesenheit { --k: #7a8b96; }
.art-geburtstag { --k: #e0a31c; }
.art-event { --k: #5b6cd6; }
.grp-feiertage { --k: #d64545; } .grp-landes { --k: #e59a9a; } .grp-mein { --k: #00a39e; } .grp-kollegen { --k: #1ca2e0; } .grp-geburtstage { --k: #e0a31c; } .grp-firma { --k: #5b6cd6; }
@container app (min-width: 900px) { .inhalt.zweispaltig.kalender-seite { grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); } }
.kal-haupt { gap: 14px; }
.kal-werkzeug { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kal-titel { margin: 0; flex: 1; min-width: 150px; text-align: center; font-size: 22px; }
.kal-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.kal-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--grau); background: var(--feld); border: 1.5px solid transparent; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.kal-chip:hover { transform: translateY(-1px); }
.kal-chip-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--k); opacity: 0.35; transition: opacity 0.18s ease; }
.kal-chip.an { background: #fff; color: var(--text, #142a35); border-color: var(--k); box-shadow: 0 2px 8px rgba(20, 42, 53, 0.1); }
.kal-chip.an .kal-chip-punkt { opacity: 1; }
.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kal-ein { animation: kal-ein 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
@keyframes kal-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kal-kopf { padding: 4px 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }
.kal-tag { min-height: 54px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; overflow: hidden; border-radius: 12px; background: #fff; border: 1.5px solid rgba(20, 42, 53, 0.08); text-align: left; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.kal-tag:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 42, 53, 0.1); }
.kal-tag.aus { opacity: 0.45; }
.kal-tag.wochenende { background: #f4f7f9; }
.kal-tag.frei { background: #fdeeee; }
.kal-tag.heute .kal-nr { background: var(--primaer); color: #fff; }
.kal-tag.an { border-color: var(--primaer); box-shadow: 0 0 0 3px var(--primaer-ton); }
.kal-nr { min-width: 26px; height: 26px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; font-size: 13px; font-weight: 700; }
.kal-pillen { display: none; width: 100%; flex-direction: column; gap: 3px; min-width: 0; }
.kal-punkte { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.kal-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); }
.kal-pille { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere; color: #1b2f3a; background: color-mix(in srgb, var(--k) 16%, #fff); border-left: 3px solid var(--k); }
.kal-pille.eigen { color: #10232c; background: color-mix(in srgb, var(--k) 38%, #fff); }
.kal-pille.art-urlaub.eigen { --k: #00a39e; }
.kal-pille.vorlaeufig, .kal-zeile.vorlaeufig { opacity: 0.75; border-style: dashed; }
.kal-mehr { font-size: 11px; font-weight: 700; color: var(--grau); padding-left: 4px; }
/* Pillen nur, wo die Zellen breit genug sind: einspaltig ab 760 px, zweispaltig (Seitenspalte rechts) erst ab 1100 px */
@container app (min-width: 760px) and (max-width: 899px) { .kal-tag { min-height: 96px; align-items: stretch; padding: 6px; } .kal-nr { align-self: flex-start; } .kal-pillen { display: flex; } .kal-punkte { display: none; } }
@container app (min-width: 1100px) { .kal-tag { min-height: 96px; align-items: stretch; padding: 6px; } .kal-nr { align-self: flex-start; } .kal-pillen { display: flex; } .kal-punkte { display: none; } }
.kal-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--feld); animation: sanft-ein 0.3s ease backwards; }
.kal-zeile .kal-marke { flex: none; width: 5px; align-self: stretch; border-radius: 3px; background: var(--k); }
.kal-zeile .kal-text { flex: 1; min-width: 0; }
.kal-beschreibung { margin-top: 4px; font-size: 13px; color: var(--grau); white-space: pre-line; }
.kal-tag-karte h2, .kal-bald h2 { margin: 0; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .kal-ein, .kal-zeile { animation: none; } .kal-tag, .kal-chip { transition: none; } }
@container app (max-width: 759px) { .kal-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .kal-chip { flex: none; white-space: nowrap; } }

/* ---------- Ablauf des Tages (Felix 29.10.): von früh bis jetzt, je Ziel in der Farbe des Tagesverlaufs ----------
   Felix 03.11.: je Zeile zuerst „von – bis“ mit der Dauer rechts, darunter Projekt (Nummer fett) und Tätigkeit; Pausen schmal,
   unverbuchte Zeit mit orangem Hintergrund; die Summe als eine Zahl statt Chips, alles in h:mm. */
.ablauf { display: flex; flex-direction: column; padding: 14px 16px 10px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie); }
.ablauf > .abschnitt { margin-bottom: 8px; }
.az-summe { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.az-haupt { font-size: 15px; color: var(--grau); }
.az-haupt b { font-size: 26px; color: var(--tinte); letter-spacing: -0.01em; margin-right: 2px; }
.az-offen { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 700; }
.az-offen.warn { color: #9a4a06; } .az-offen.rot { color: var(--rot); }
.az-offen .symbol { width: 18px; height: 18px; }
.az-zeile { --k: var(--blau); position: relative; isolation: isolate; display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 8px 0; animation: sanft-ein 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
.az-zeile > :not(.az-punkt) { grid-column: 2; }
.az-zeile::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--linie); }
.az-zeile.erste::before { top: 26px; }
.az-zeile.letzte::before { bottom: calc(100% - 26px); }
.az-zeile.erste.letzte::before { display: none; }
.az-zeile.f0 { --k: #1ca2e0; } .az-zeile.f1 { --k: #00b2ad; } .az-zeile.f2 { --k: #87b04a; } .az-zeile.f3 { --k: #5b6cd6; } .az-zeile.f4 { --k: #e0a31c; } .az-zeile.f5 { --k: #c0627a; }
.az-zeile.pause { --k: #b9c4ca; padding: 4px 0; }
.az-zeile.luecke { --k: var(--warn); }
.az-zeile.luecke::after { content: ''; position: absolute; inset: 2px -10px 2px 20px; z-index: -1; border-radius: 12px; background: var(--warn-hell); }
.az-punkt { position: relative; z-index: 1; grid-column: 1; grid-row: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 3px var(--flaeche); justify-self: center; }
.az-zeile.pause .az-punkt { width: 8px; height: 8px; }
.az-zeile.luecke .az-punkt { background: var(--flaeche); border: 2px dashed var(--k); box-sizing: border-box; }
.az-zeile.auto .az-punkt { background: repeating-linear-gradient(180deg, var(--k) 0 3px, transparent 3px 5px); }
.az-kopf { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.az-kopf > b { font-size: 15px; white-space: nowrap; }
.az-kopf .ende { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.az-kopf .dauer { font-weight: 700; font-size: 15px; white-space: nowrap; }
.az-kopf .rund { width: 36px; height: 36px; background: transparent; }
.az-kopf .rund:hover { background: var(--feld); }
.az-kopf .rund .symbol { width: 18px; height: 18px; }
.az-was { font-weight: 600; color: var(--grau); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-zeile.pause .az-kopf { min-height: 32px; }
.az-zeile.pause .az-kopf > b, .az-zeile.pause .dauer { font-weight: 600; color: var(--grau); }
.az-zeile.luecke .az-was, .az-zeile.luecke .dauer { color: #9a4a06; }
.az-zeile.luecke .az-kopf { min-height: 38px; }
.az-titel { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.az-text { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.az-text .leise, .az-meta .leise { font-size: 13px; }
.az-meta { font-size: 13px; }
.az-zeile .notizen { margin-top: 2px; font-size: 14px; color: var(--tinte); }
.az-zeile.jetzt-zeile .az-punkt { animation: az-puls 1.8s ease-out infinite; }
@keyframes az-puls { 0% { box-shadow: 0 0 0 3px var(--flaeche), 0 0 0 3px color-mix(in srgb, var(--k) 55%, transparent); } 70% { box-shadow: 0 0 0 3px var(--flaeche), 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 3px var(--flaeche), 0 0 0 3px transparent; } }
.laeuft-marke { color: var(--text, #142a35); }
@media (prefers-reduced-motion: reduce) { .az-zeile, .az-zeile.jetzt-zeile .az-punkt { animation: none; } }

/* Zuletzt gebucht nach Tagen (Felix 29.10.) */
.jt { display: flex; flex-direction: column; }
.jt + .jt { margin-top: 14px; }
.jt-kopf { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--primaer-hell); position: sticky; top: 0; }
.jt-kopf .leise { flex: 1; font-size: 13px; }
.jt-summe { color: var(--primaer); }
.jt .juengster { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 8px 12px; }
.jt-kopf + .juengster { border-top: 0; }
.jt-text { font-size: 14px; color: var(--grau); overflow-wrap: anywhere; }

/* Tagesbalken im Blatt „Block eintragen“ (Felix 03.11.): der Tag von 6 bis 20 Uhr, Blöcke grau, die gewählte Zeit in der Firmenfarbe. */
.tagesbalken-rahmen { display: flex; flex-direction: column; gap: 2px; }
.tagesbalken { position: relative; height: 26px; border-radius: 7px; background: var(--feld); overflow: hidden; touch-action: none; cursor: crosshair; user-select: none; }
.tagesbalken.zieht { cursor: grabbing; }
.tb-teil { position: absolute; top: 5px; bottom: 5px; border-radius: 4px; background: #c5cfd6; }
.tb-teil.pause { background: #e1e7eb; } .tb-teil.laeuft { background: var(--tuerkis); opacity: 0.6; }
.tb-wahl { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; background: var(--akzent); cursor: grab; box-shadow: 0 2px 6px color-mix(in srgb, var(--akzent) 40%, transparent); transition: left 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tb-wahl.falsch { background: var(--rot); }
.tb-griff { position: absolute; top: 4px; bottom: 4px; width: 8px; cursor: ew-resize; }
.tb-griff::after { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.85); }
.tb-griff.links { left: 0; } .tb-griff.rechts { right: 0; }
.tagesbalken.zieht .tb-wahl { transition: none; }
.tb-skala { position: relative; height: 14px; font-size: 10px; color: var(--leise); }
.tb-skala span { position: absolute; transform: translateX(-50%); }