/* ==========================================================================
   Hofteam – Design nach der Corporate Identity von Fischbach bio
   Farbpalette und Schrift laut Logo-Leitfaden (Avenir Next).
   ========================================================================== */

@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNext-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNext-Demi.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNext-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Markenfarben (RGB-Werte aus dem Leitfaden) */
  --oliv:        #869C2F;   /* 134 156  47 – Primärfarbe */
  --oliv-dark:   #6B7E25;
  --oliv-soft:   #F1F5DF;
  --tanne:       #004A30;   /*   0  74  48 – Dunkelgrün */
  --tanne-light: #0A6242;
  --lind:        #E9EFCA;   /* 233 239 202 – helles Lindgrün */
  --orange:      #EF7D00;   /* 239 125   0 – Akzent */
  --orange-soft: #F7A941;   /* 247 169  65 */
  --orange-bg:   #FDF0DE;
  --rot:         #E7343F;   /* 231  52  63 */
  --rot-dark:    #9D2E36;   /* 157  46  54 */
  --rot-bg:      #FDEBEC;

  /* Flächen */
  --bg:        #FBFCF6;
  --bg-alt:    #F4F7E9;
  --card:      #FFFFFF;
  --text:      #23291C;
  --muted:     #66725B;
  --line:      #E4E9D6;

  /* Schriftfarben auf farbigen Flächen.
     Alle aus der Leitfaden-Palette; nötig, weil dieselbe Markenfarbe je nach
     Untergrund lesbar sein muss. Im hellen Modus trägt Dunkelgrün, im dunklen Lind. */
  --on-soft:     #004A30;   /* Text auf hellgrünen Flächen (Chips, Plaketten) */
  --orange-text: #A85100;   /* Orange als Schrift – die Fläche bleibt #EF7D00 */
  --rot-text:    #9D2E36;   /* Dunkelrot laut Leitfaden */
  --btn-bg:      #6B7E25;   /* Primärknopf: dunklerer Olivton der Marke, damit
                               weiße Schrift auch bei Sonnenlicht sicher lesbar ist */
  --btn-fg:      #FFFFFF;

  --shadow:    0 1px 2px rgba(0,74,48,.05), 0 4px 16px rgba(0,74,48,.06);
  --shadow-lg: 0 2px 6px rgba(0,74,48,.07), 0 12px 32px rgba(0,74,48,.10);
  --radius:    18px;
  --radius-sm: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #12180F;
    --bg-alt:  #1A2116;
    --card:    #1D2519;
    --text:    #ECF0E4;
    --muted:   #9AA890;
    --line:    #2E3A27;
    --oliv:      #A3BC42;
    --oliv-dark: #B9D157;
    --oliv-soft: #232E17;
    --tanne:       #0A2C1F;
    --tanne-light: #12402D;
    --orange-bg: #33240F;
    --rot-bg:    #3A1B1D;
    /* Im dunklen Modus tragen die hellen Leitfaden-Töne */
    --on-soft:     #E9EFCA;   /* Lind */
    --orange-text: #EF7D00;   /* CI-Orange, auf dunklem Grund gut lesbar */
    --rot-text:    #F08C93;   /* CI-Rot aufgehellt */
    --btn-bg:      #A3BC42;
    --btn-fg:      #004A30;   /* Dunkelgrün auf hellem Oliv */
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Spalte über die volle Bildschirmhöhe: so sitzt die Fußleiste auch dann
     unten am Rand, wenn die Seite weniger Inhalt hat als ein Bildschirm. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main { max-width: 760px; width: 100%; margin: 0 auto; padding: 1.1rem .95rem 1.6rem; flex: 1 0 auto; }

h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.015em; margin: .2rem 0 1rem; }
h2 {
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin: 1.9rem 0 .7rem;
}
h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .4rem; }
p  { margin: .5rem 0; }

a { color: var(--oliv-dark); text-decoration: none; }
.muted { color: var(--muted); font-size: .93rem; }
.center { text-align: center; }

/* ---------------------------------------------------------------- Kopfleiste */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--tanne); padding: .75rem 1rem;
  padding-top: max(.75rem, env(safe-area-inset-top));
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 2px 12px rgba(0,74,48,.18);
}
.brand { display: flex; align-items: center; gap: .55rem; }
.brand img { height: 25px; width: auto; display: block; }
.brand span {
  color: #fff; font-size: .98rem; font-weight: 700; letter-spacing: -.015em;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .brand span { font-size: .86rem; }
  .brand img { height: 22px; }
  .langs a { font-size: .66rem; padding: .3rem .22rem; }
  .logoutlink { margin-left: .3rem; padding: .3rem .42rem !important; }
}
.topright { display: flex; align-items: center; gap: .1rem; }
.langs a {
  color: rgba(255,255,255,.62); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .3rem .32rem; border-radius: 6px;
}
.langs a.on { color: #fff; background: rgba(255,255,255,.16); }
.logoutlink {
  color: rgba(255,255,255,.75) !important; font-size: 1rem; margin-left: .5rem;
  padding: .35rem .5rem !important; border-radius: 8px; background: rgba(255,255,255,.1);
}

.flash {
  background: var(--oliv-soft); color: var(--on-soft); font-weight: 600;
  padding: .8rem 1rem; text-align: center; font-size: .95rem;
}

/* Verbindungsanzeige – im Normalfall unsichtbar, meldet sich nur bei Störung */
.offlinebar {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--rot-bg); color: var(--rot-text);
  padding: .6rem 1rem; font-size: .9rem; font-weight: 700; text-align: center;
  position: sticky; top: 0; z-index: 25;
}
.offlinebar[hidden] { display: none; }
.offlinebar .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--rot);
  flex: 0 0 auto; animation: pulse 1.6s ease-in-out infinite;
}
.offlinebar.back { background: var(--oliv-soft); color: var(--on-soft); }
.offlinebar.back .dot { background: var(--oliv); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------------------------------------------------------------- Karten */
.card {
  background: var(--card); border-radius: var(--radius); padding: 1.05rem;
  margin-bottom: .85rem; box-shadow: var(--shadow);
  border: 1px solid transparent;
}
.card.narrow { max-width: 430px; margin: 1.8rem auto; padding: 1.6rem 1.35rem; box-shadow: var(--shadow-lg); }
.card.link { display: block; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.card.link:active { transform: scale(.985); box-shadow: var(--shadow-lg); }
.card.highlight { border-color: var(--oliv); background: var(--oliv-soft); }

.card.stat { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card.stat span { color: var(--muted); font-size: .95rem; }
.card.stat strong { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.card.stat.big {
  background: linear-gradient(135deg, var(--tanne) 0%, var(--tanne-light) 100%);
  border: 0; box-shadow: var(--shadow-lg);
}
.card.stat.big span { color: rgba(255,255,255,.75); }
.card.stat.big strong { color: #fff; font-size: 1.85rem; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- Login */
.loginlogo { text-align: center; margin-bottom: 1.3rem; }
.loginlogo img { width: 190px; max-width: 72%; height: auto; }
.loginsub { text-align: center; color: var(--muted); font-size: .95rem; margin: -.4rem 0 1.4rem; }
.divider {
  display: flex; align-items: center; gap: .8rem; margin: 1.5rem 0 1rem;
  color: var(--muted); font-size: .82rem;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------------- Einsätze */
.shift { padding: 0; overflow: hidden; }
.shiftrow { display: flex; gap: .95rem; padding: 1.05rem 1.05rem .3rem; }

.datechip {
  flex: 0 0 auto; align-self: flex-start; width: 60px; text-align: center;
  border-radius: 14px; background: var(--oliv-soft);
  padding: .5rem .2rem .55rem; line-height: 1.1;
}
.datechip .wd { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-soft); opacity: .85; }
.datechip .d  { font-size: 1.5rem; font-weight: 700; color: var(--on-soft); display: block; margin: .1rem 0; }
.datechip .m  { font-size: .68rem; font-weight: 600; text-transform: uppercase; color: var(--on-soft); opacity: .7; }
.datechip.past { background: var(--bg-alt); }

.shiftmain { flex: 1; min-width: 0; }
.shiftmain h3 { letter-spacing: -.01em; }
.shifttime { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.shiftdesc { color: var(--muted); font-size: .92rem; margin: .35rem 0 0; }

.counts { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 0; }
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--bg-alt); color: var(--muted); border-radius: 999px;
  padding: .2rem .65rem; font-size: .8rem; font-weight: 600;
}
.badge.green  { background: var(--oliv-soft); color: var(--on-soft); }
.badge.orange { background: var(--orange-bg); color: var(--orange-text); }
.badge.full   { background: var(--btn-bg); color: var(--btn-fg); }
.badge.red    { background: var(--rot-bg); color: var(--rot-text); }

.shiftfoot { padding: .3rem 1.05rem 1.05rem; }

.mystatus {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  border-radius: var(--radius-sm); padding: .65rem .85rem; margin: .7rem 0 .6rem;
  font-weight: 600; font-size: .95rem;
  background: var(--bg-alt); color: var(--muted);
}
.mystatus .time { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.mystatus > span:first-child { min-width: 0; }
.mystatus.confirmed { background: var(--oliv-soft); color: var(--on-soft); }
.mystatus.declined  { background: var(--bg-alt); color: var(--muted); }
.mystatus.signed_up { background: var(--orange-bg); color: var(--orange-text); }
/* Fest eingeteilt: deutlich hervorgehoben, damit es nicht übersehen wird */
.mystatus.assigned  { background: var(--tanne); color: #fff; }
.mystatus.cannot    { background: var(--rot-bg); color: var(--rot-text); }

.awaynote {
  display: flex; gap: .45rem; align-items: flex-start;
  background: var(--orange-bg); color: var(--orange-text); border-radius: var(--radius-sm);
  padding: .6rem .8rem; margin: .7rem 0; font-size: .9rem; font-weight: 600;
}

.signupbtns { display: flex; flex-direction: column; gap: .55rem; margin-top: .8rem; }
.partial { margin-top: .8rem; padding-top: .9rem; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- Formulare */
label { display: block; margin: .9rem 0; font-size: .88rem; font-weight: 600; color: var(--muted); }
input, select, textarea {
  display: block; width: 100%; margin-top: .35rem; padding: .78rem .85rem;
  font-size: 1.05rem; font-family: inherit; font-weight: 400; color: var(--text);
  background: var(--bg-alt); border: 1.5px solid transparent; border-radius: var(--radius-sm);
  transition: border-color .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--oliv); background: var(--card);
}
input[type="file"] { padding: .6rem; font-size: .88rem; }
input[type="date"], input[type="time"] { font-variant-numeric: tabular-nums; }
select { appearance: none; background-image: none; }

label.check, label.radio {
  color: var(--text); font-weight: 500; font-size: 1rem;
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .85rem; margin: .45rem 0;
  background: var(--bg-alt); border: 1.5px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .15s, background .15s;
}
label.check input, label.radio input { width: auto; margin: 0; accent-color: var(--oliv); transform: scale(1.25); }
label.radio:has(input:checked), label.check:has(input:checked) {
  border-color: var(--oliv); background: var(--oliv-soft);
}

.row { display: flex; gap: .7rem; align-items: flex-end; }
.row > label { flex: 1; }
.row.spread { justify-content: space-between; align-items: center; }
.subbox {
  border-left: 3px solid var(--oliv); padding-left: .9rem; margin: .9rem 0;
}
.hidden { display: none !important; }
fieldset { border: 0; padding: 0; margin: 0; }
form { margin: 0; }

/* Live-Berechnung der Arbeitszeit */
.calcbox {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-alt); border-radius: var(--radius-sm);
  padding: .75rem .9rem; margin: 1rem 0 .3rem;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: background .2s, color .2s;
}
.calcbox strong { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calcbox.ok { background: var(--oliv-soft); color: var(--on-soft); }
.calcbox.ok strong { color: var(--on-soft); }

/* Schnellwahl-Chips (Heute/Gestern, Pausenlängen) */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: -.35rem 0 .6rem; }
.chip {
  background: var(--bg-alt); border: 1.5px solid transparent; color: var(--muted);
  border-radius: 999px; padding: .4rem .85rem; font-size: .88rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .15s;
}
.chip:active { transform: scale(.95); }
.chip.on { background: var(--oliv-soft); border-color: var(--oliv); color: var(--on-soft); }

/* Bereichs-Etikett */
/* Bereichs-Etikett: Die Farbe steckt im Punkt, nicht in der Schrift – sonst
   wäre der Text unlesbar, sobald jemand einem Bereich einen hellen Ton gibt. */
.areatag {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--text); border-radius: 999px; padding: .12rem .6rem;
  font-size: .78rem; font-weight: 700; width: fit-content; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.areatag::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--c);
}
/* In der schmalen Spalte kürzt sich der Bereichsname – die Stundenzahl bleibt
   immer vollständig. „text-overflow" wirkt nicht auf dem Flex-Element selbst,
   deshalb steht der Name in einem eigenen Feld. */
.areatag .tagname {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.areatag .tagnum { flex: 0 0 auto; }
.areatag.muted-tag { --c: var(--muted); background: var(--bg-alt); font-weight: 600; }
.areadot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; }

/* Notizen an Stundeneinträgen */
.bossnote, .internalnote {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: .7rem;
  border-radius: var(--radius-sm); padding: .6rem .75rem; font-size: .88rem; line-height: 1.4;
}
.bossnote { background: var(--oliv-soft); color: var(--on-soft); }
.internalnote { background: var(--orange-bg); color: var(--rot-text); }

/* Zwei Summen nebeneinander */
.totals { display: flex; gap: .7rem; margin-bottom: .3rem; }
.totalcard {
  flex: 1; display: flex; flex-direction: column; gap: .15rem;
  background: var(--card); border-radius: var(--radius); padding: .95rem 1rem;
  box-shadow: var(--shadow); color: inherit;
}
.totalcard span { color: var(--muted); font-size: .78rem; font-weight: 600; }
.totalcard strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.totalcard.dark {
  background: linear-gradient(135deg, var(--tanne) 0%, var(--tanne-light) 100%);
  box-shadow: var(--shadow-lg);
}
.totalcard.dark span { color: rgba(255,255,255,.72); }
.totalcard.dark strong { color: #fff; }

/* Balkenübersicht */
.barrow {
  display: flex; align-items: center; gap: .7rem; padding: .45rem 0; color: inherit;
}
.barlabel { flex: 0 0 34%; font-size: .88rem; font-weight: 600; }
.barlabel.on { color: var(--oliv-dark); }
.bartrack { flex: 1; background: var(--bg-alt); border-radius: 999px; height: 9px; overflow: hidden; }
.bartrack i { display: block; height: 100%; background: var(--oliv); border-radius: 999px; }
.barval { flex: 0 0 auto; font-size: .86rem; font-weight: 700; min-width: 62px; text-align: right; }

.filterbar { display: flex; gap: .7rem; }
.filterbar label { flex: 1; margin: 0; }

.dimmed { opacity: .55; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.arearow { display: flex; align-items: center; gap: .8rem; }

/* Aufklappbares Eingabeformular */
.foldform { padding: 0; overflow: hidden; }
.foldform > summary {
  display: flex; align-items: center; gap: .7rem; padding: 1rem 1.05rem;
  font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none;
}
.foldform > summary::-webkit-details-marker { display: none; }
.foldform .foldplus {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--btn-bg); color: var(--btn-fg); display: flex; align-items: center;
  justify-content: center; font-size: 1.15rem; line-height: 1; font-weight: 400;
}
.foldform .foldarrow { margin-left: auto; color: var(--muted); transition: transform .2s; }
.foldform[open] .foldarrow { transform: rotate(180deg); }
.foldform[open] > summary { border-bottom: 1px solid var(--line); }
.foldbody { padding: .3rem 1.05rem 1.05rem; }

/* Bereichs-Verteiler */
.splitblock {
  background: var(--bg-alt); border-radius: var(--radius-sm);
  padding: .85rem .9rem; margin: 1rem 0;
}
.splithead {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .88rem; margin-bottom: .6rem;
}
.splitstate { font-size: .84rem; font-weight: 700; color: var(--muted); }
.splitstate .done { color: var(--on-soft); }
.splitstate .open { color: var(--orange-text); }
.splitstate.complete .open { color: var(--on-soft); }
.splitstate.over .open { color: var(--rot); }
.splitstate.over .open::before { content: '+'; }

.splitrow { display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem; }
.splitrow select {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: .55rem .5rem;
  font-size: .95rem; background: var(--card);
}
.splitrow .sp-h, .splitrow .sp-m {
  flex: 0 0 auto; width: 48px; margin: 0; padding: .55rem .3rem;
  text-align: center; font-size: .95rem; font-variant-numeric: tabular-nums;
  background: var(--card);
}
.splitrow .colon { color: var(--muted); font-weight: 700; }
.splitrow .sp-rest, .splitrow .sp-del {
  flex: 0 0 auto; width: 32px; height: 34px; border: 0; border-radius: 9px;
  background: var(--card); color: var(--muted); font-size: 1rem;
  font-family: inherit; cursor: pointer;
}
.splitrow .sp-rest { color: var(--on-soft); font-weight: 700; }
.splitrow .sp-del { color: var(--rot-text); font-size: 1.15rem; line-height: 1; }
.splitrow .sp-rest:active, .splitrow .sp-del:active { transform: scale(.92); }
.splithint { font-size: .82rem; margin: .5rem 0 0; }

.areatags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.areatags .areatag { margin-top: 0; }

/* Mehrsprachige Eingabe */
.langtag {
  display: inline-block; background: var(--oliv-soft); color: var(--on-soft);
  border-radius: 5px; padding: .05rem .35rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; vertical-align: middle;
}
.translatebox {
  background: var(--bg-alt); border-radius: var(--radius-sm);
  padding: .85rem .9rem; margin: 1rem 0;
}
.translatebox .btn { width: 100%; }
.translatebox p { font-size: .82rem; margin: .6rem 0 0; }
.translatebox p.ok { color: var(--on-soft); font-weight: 600; }
.translatebox p.warntext { color: var(--orange-text); font-weight: 600; }
.warntext { color: var(--orange-text); }

.langfields { margin: .5rem 0 1rem; }
.langfields > summary {
  cursor: pointer; list-style: none; font-size: .9rem; font-weight: 700;
  color: var(--muted); padding: .5rem 0; display: flex; align-items: center; gap: .4rem;
}
.langfields > summary::-webkit-details-marker { display: none; }
.langfields[open] > summary .foldarrow { transform: rotate(180deg); }
.langfields .foldarrow { transition: transform .2s; }
.langgroup {
  border-left: 3px solid var(--line); padding-left: .85rem; margin-bottom: 1rem;
}
.langhead { font-size: .85rem; font-weight: 700; color: var(--muted); margin-bottom: -.3rem; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .75rem 1.15rem; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  font-size: 1.02rem; font-weight: 700; font-family: inherit; letter-spacing: -.005em;
  text-align: center; cursor: pointer; transition: transform .1s, filter .15s;
}
.btn:active { transform: scale(.975); }
.btn.primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 2px 8px rgba(118,137,42,.3); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.dark { background: var(--tanne); color: #fff; }
.btn.outline { background: var(--card); border-color: var(--line); color: var(--text); }
.btn.outline:hover { border-color: var(--oliv); }
.btn.big { display: flex; width: 100%; margin-top: .7rem; padding: .95rem; font-size: 1.05rem; }
.btn.small { padding: .45rem .8rem; font-size: .88rem; border-radius: 9px; }
.btn.danger { color: var(--rot-text); border-color: var(--rot-bg); background: var(--rot-bg); }
.btn.ghost { background: transparent; color: var(--muted); }

.backlink {
  display: inline-flex; align-items: center; gap: .4rem; color: var(--muted);
  font-size: .93rem; font-weight: 600; margin: .8rem 0 1.5rem;
}

/* ---------------------------------------------------------------- Wizard */
.progress { margin-bottom: 1.5rem; }
.progress .bar { background: var(--line); border-radius: 999px; height: 7px; overflow: hidden; }
.progress .bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--oliv) 0%, var(--oliv-dark) 100%);
  transition: width .3s cubic-bezier(.4,0,.2,1);
}
.proglabel { margin-top: .5rem; font-size: .84rem; color: var(--muted); font-weight: 600; }
.proglabel b { color: var(--oliv-dark); }
.wizardnav { display: flex; gap: .7rem; margin-top: 1.5rem; }
.wizardnav .btn { flex: 1; padding: .9rem; }

/* ---------------------------------------------------------------- Tabellen */
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
td, th { padding: .6rem .35rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
table.kv td:first-child { color: var(--muted); width: 44%; font-size: .87rem; }
table.kv td { padding: .5rem .3rem; }
.num { font-variant-numeric: tabular-nums; }

.owed { color: var(--orange-text); font-weight: 700; }
.warn {
  display: flex; gap: .5rem; align-items: flex-start;
  background: var(--orange-bg); color: var(--rot-text); border-radius: var(--radius-sm);
  padding: .65rem .8rem; margin: .5rem 0; font-size: .9rem; font-weight: 600; line-height: 1.4;
}
.error {
  background: var(--rot-bg); color: var(--rot-text); padding: .8rem 1rem;
  border-radius: var(--radius-sm); font-weight: 600; font-size: .93rem;
}
/* Bestätigung im Stundenformular, wenn aus einem Einsatz übernommen wurde */
.okbox {
  background: var(--oliv-soft); color: var(--on-soft); padding: .65rem .8rem;
  border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem;
  margin: 0 0 1rem; line-height: 1.4;
}
/* Der Einsatz, der auf seine Stunden wartet – auffällig, aber nicht laut */
.card.takeover { border: 2px solid var(--oliv); }
.card.takeover .takeoverbtn { display: flex; width: 100%; margin-top: .8rem; }

/* ---------------------------------------------------------------- Listen */
.person { display: flex; align-items: center; gap: .85rem; }
.avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--oliv-soft); color: var(--on-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; letter-spacing: -.02em;
}
.avatar.dark { background: var(--tanne); color: #fff; }
.personmain { flex: 1; min-width: 0; }
.personmain strong { display: block; font-weight: 600; }
.personmain .sub { color: var(--muted); font-size: .87rem; }
.statuscol { text-align: right; font-size: .9rem; flex: 0 0 auto; }
.docrow { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.docrow:last-child { border-bottom: 0; }

.adminmenu { display: flex; gap: .55rem; margin-bottom: 1rem; }
.adminmenu .btn { flex: 1; flex-direction: column; gap: .3rem; padding: .9rem .3rem; font-size: .82rem; }
.adminmenu .btn svg { width: 22px; height: 22px; color: var(--oliv); }

.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.empty .ico { font-size: 2.2rem; display: block; margin-bottom: .5rem; opacity: .55; }

/* ---------------------------------------------------------------- Untere Navigation */
.bottomnav {
  position: sticky; bottom: 0; display: flex; z-index: 30; flex: 0 0 auto;
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 20px rgba(0,74,48,.07);
}
.bottomnav a {
  flex: 1; text-align: center; padding: .55rem .2rem .5rem;
  font-size: .68rem; font-weight: 600; color: var(--muted);
}
.bottomnav a svg { display: block; margin: 0 auto .15rem; width: 23px; height: 23px; }
.bottomnav a.on { color: var(--oliv-dark); }
.bottomnav a.on svg { stroke: var(--oliv); }

/* Aufzählungen in der Datenschutz-Information */
.plainlist { margin: .4rem 0; padding-left: 1.1rem; }
.plainlist li { margin: .45rem 0; }