/* ==========================================================================
   mareSpa Team-Seite — Regeln.

   Übersetzt aus dem Claude-Design-Entwurf vom 12.10.2026
   (MareSpa/Design/Team-Seite-Entwurf-2026-10-12/, verbindlich). Die Maße
   stehen wie im Entwurf; die Farben kommen AUSSCHLIESSLICH aus tokens.css /
   tokens-dunkel.css (Kopien aus dem Cockpit). Kein Hexwert, kein rgba() in
   dieser Datei — tests/test_tokens.py zählt und verlangt null.

   Umbruch (Nachtrag 12.10.2026, Punkt 1): unter 1024 px die Handy-Fassung,
   ab 768 px auf höchstens 720 px zentriert; ab 1024 px das Raster (Entwurf
   TagDesktop / WocheDesktop). Beide stehen im Dokument (.nur-handy /
   .nur-gross), weil die Aufbauten zu verschieden für eine reine
   CSS-Umstellung sind. Bei 768 px war das Wochenraster unlesbar (Namen auf
   den Anfangsbuchstaben gekürzt) — deshalb die höhere Grenze.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fl-3); color: var(--text);
  font-family: var(--schrift); font-size: 15px; line-height: 22px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--copper-t); }
a:hover { color: var(--copper-d); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--copper-d); outline-offset: 2px;
}
p { margin: 0; }
h1, h2 { margin: 0; }

/* Etikett: Mulish 600 in Versalien (kein Spline Sans Mono — Beschluss 12.10.) */
.et { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .3px;
      text-transform: uppercase; color: var(--muted); }
.et-nav { color: var(--nav-leise); }
.et-kupfer { color: var(--copper-t); }
.zahl { font-variant-numeric: tabular-nums; }
.k1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.k2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.klein { font-size: 13px; line-height: 18px; color: var(--muted); }
.rot { color: var(--rot); }
.leertext { color: var(--muted); }

.nur-gross { display: none; }
@media (min-width: 768px) {
  .nur-handy { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
  .nur-handy { display: none; }
  .nur-gross { display: block; }
}

/* ---------------- Kopfzeile ---------------- */
.kopf {
  background: var(--marine); color: var(--auf-marine); height: 56px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; position: relative;
}
@media (min-width: 768px) { .kopf { padding: 0 32px; } }
.marke { display: flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; }
.marke:hover { color: inherit; }
.wortmarke { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1; }
.wortmarke.gross { font-size: 40px; line-height: 44px; }

/* Menü — im Entwurf nur der Knopf; der Inhalt ist das Nötigste (gemeldet). */
.menue { position: relative; }
.menue > summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none;
  color: var(--nav-ruhe); font-size: 15px; padding: 0 4px; cursor: pointer;
}
.menue > summary::-webkit-details-marker { display: none; }
.menue-flaeche {
  position: absolute; right: 0; top: 48px; z-index: 10; min-width: 200px;
  background: var(--fl); border-radius: var(--radius-fl, 10px); box-shadow: var(--tiefe-1);
  padding: 4px 0; display: flex; flex-direction: column;
}
.menue-flaeche a, .menue-flaeche button {
  min-height: 44px; display: flex; align-items: center; padding: 0 16px; width: 100%;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer;
}
.menue-flaeche a:hover, .menue-flaeche button:hover { background: var(--fl-4); color: var(--ink); }

/* ---------------- Leiste unter dem Kopf (Handy) ---------------- */
.leiste {
  padding: 24px 16px 16px; display: flex; flex-direction: column; gap: 16px;
  background: var(--fl-2); border-bottom: 1px solid var(--linie);
}
.seitentitel { font-family: var(--serif); font-size: 28px; line-height: 34px;
               font-weight: 600; color: var(--ink); }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blaettern { display: flex; align-items: center; gap: 4px; }
.navknopf {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--fl); border: 1px solid var(--feldrand); border-radius: 2px; color: var(--ink);
}
.navknopf:hover { color: var(--ink); background: var(--fl-4); }
/* Rand des sichtbaren Zeitraums (Nachtrag Punkt 4): sichtbar, Rand --linie,
   Pfeil --muted, nicht anklickbar. */
.navknopf.aus { color: var(--muted); border-color: var(--linie); cursor: default;
                pointer-events: none; }
.heuteknopf {
  height: 44px; padding: 0 16px; display: flex; align-items: center;
  background: var(--fl); border: 1px solid var(--feldrand); border-radius: 2px;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.heuteknopf:hover { color: var(--ink); background: var(--fl-4); }
.umschalter { display: flex; border: 1px solid var(--feldrand); border-radius: 2px; overflow: hidden; }
.umschalter > * { height: 42px; padding: 0 16px; display: flex; align-items: center; }
.umschalter > span { background: var(--marine); color: var(--auf-marine); font-weight: 600; }
.umschalter > a { background: var(--fl); color: var(--ink); text-decoration: none; }
.umschalter > a:hover { background: var(--fl-4); color: var(--ink); }
.stand { font-size: 13px; line-height: 18px; color: var(--muted); }
.aktualisieren-form { margin: 0; }
.aktualisieren {
  min-height: 44px; display: flex; align-items: center; gap: 8px; background: none; border: 0;
  padding: 0; color: var(--copper-t); font: inherit; font-weight: 600; cursor: pointer;
}
.aktualisieren:hover { color: var(--copper-d); }
.veraltet {
  display: flex; gap: 12px; align-items: flex-start; background: var(--copper-fl);
  border-radius: 10px; padding: 12px 16px; color: var(--ink);
}
.veraltet .punkt { flex: none; width: 8px; height: 8px; border-radius: 50%;
                   background: var(--copper); margin-top: 7px; }
.springen { display: flex; flex-wrap: wrap; gap: 8px; }
.springen a {
  min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--linie-s); border-radius: 999px; background: var(--fl);
  color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600;
}
.springen a .zahl { color: var(--muted); font-weight: 400; }

/* ---------------- Zustände ---------------- */
.laden { padding: 64px 16px; display: flex; flex-direction: column; align-items: center;
         gap: 12px; color: var(--muted); }
.niemand { padding: 48px 16px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.niemand-1 { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }

/* ---------------- Tagesansicht Handy ---------------- */
.tagliste { padding: 8px 16px 48px; display: flex; flex-direction: column; }
.person { padding: 24px 0; border-bottom: 1px solid var(--linie);
          display: flex; flex-direction: column; gap: 12px; }
.person-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.person-kopf h2 { display: flex; align-items: baseline; gap: 8px; font-size: 20px;
                  line-height: 26px; font-weight: 600; color: var(--ink); }
.schicht { color: var(--ink); font-weight: 600; }
.schicht.ohne { color: var(--muted); font-weight: 400; }
.sperre { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          padding: 10px 16px; border-radius: 10px; background: var(--fl-4); }
.sperre .zahl { color: var(--muted); }
.karte {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text);
  background: var(--fl); border-radius: 10px; box-shadow: var(--tiefe-1); padding: 12px 16px;
}
.karte:hover { color: var(--text); }
.karte.aussen { outline: 1px dashed var(--linie-s); outline-offset: -1px; }
.karte-zeile { display: flex; justify-content: space-between; gap: 12px; }
.karte-zeit { font-weight: 600; color: var(--ink); }
.karte-dauer { font-size: 13px; color: var(--muted); }
.karte-beh { color: var(--ink); }
.karte-aussen { font-size: 13px; line-height: 18px; color: var(--muted); }
.karte-notiz { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px;
               border-top: 1px solid var(--linie); color: var(--text); }
.ohne-schicht { padding: 24px 0 0; color: var(--muted); }

/* ---------------- Wochenansicht Handy ---------------- */
.wochenliste { padding: 0 16px 48px; display: flex; flex-direction: column; }
.tagblock { padding: 24px 0; border-bottom: 1px solid var(--linie);
            display: flex; flex-direction: column; gap: 12px; }
.tagblock-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tagblock-kopf a { min-height: 44px; display: flex; align-items: center; gap: 8px;
                   text-decoration: none; color: var(--ink); font-size: 20px; line-height: 26px;
                   font-weight: 600; }
.tagblock-kopf a svg { color: var(--copper-t); }
.wkarte { background: var(--fl); border-radius: 10px; box-shadow: var(--tiefe-1);
          padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wkarte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wkarte-name { font-weight: 600; color: var(--ink); }
.wkarte-schicht { color: var(--ink); }
.wtermin { display: flex; flex-direction: column; text-decoration: none; color: var(--text);
           padding-top: 8px; border-top: 1px solid var(--linie); min-width: 0; }
.wtermin:hover { color: var(--text); }
.wtermin-1 { display: flex; gap: 8px; min-width: 0; }
.wtermin-von { flex: none; color: var(--ink); font-weight: 600; }
.wtermin-beh { color: var(--ink); }
.eingerueckt { padding-left: 52px; }
.wtermin-notiz { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.wtermin-notiz .et { flex: none; }

/* ---------------- Ab 1024 px: Leiste und Raster ---------------- */
.leiste-gross {
  padding: 24px 32px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px; background: var(--fl-2);
  border-bottom: 1px solid var(--linie);
}
.leiste-titel { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.leiste-knoepfe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.leiste-gross .veraltet { flex-basis: 100%; align-items: center; }
.leiste-gross .veraltet .punkt { margin-top: 0; }
.raster-rahmen { padding: 24px 32px 48px; }

/* Tag: Zeitraster, 56 px je Stunde (Entwurf TagDesktop) */
.raster { display: flex; background: var(--fl); border-radius: 10px; box-shadow: var(--tiefe-1);
          overflow: hidden; }
.zeitspalte { flex: none; width: 56px; border-right: 1px solid var(--linie); }
.spaltenkopf { height: 64px; border-bottom: 1px solid var(--linie); }
.spaltenleib { position: relative; }
.stunde { position: absolute; right: 8px; font-size: 13px; line-height: 18px; color: var(--muted);
          transform: translateY(-9px); }
.zeitspalte .stunde:first-child { transform: none; }
.spalte { flex: 1 1 0; min-width: 0; border-right: 1px solid var(--linie); }
.spalte:last-child { border-right: 0; }
.spalte .spaltenkopf { padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; }
.spalte-name { font-weight: 600; color: var(--ink); }
.spalte-schicht { font-size: 13px; line-height: 18px; color: var(--muted); }
.spalte .spaltenleib { background: var(--fl-4); }
.schichtflaeche { position: absolute; left: 0; right: 0; background: var(--fl); }
.stundenlinie { position: absolute; left: 0; right: 0; border-top: 1px solid var(--linie-w); }
.r-sperre { position: absolute; left: 6px; right: 6px; padding: 4px 8px; border-radius: 2px;
            background: var(--fl-5); display: flex; align-items: center; justify-content: space-between;
            gap: 4px; overflow: hidden; }
.r-sperre .zahl { font-size: 13px; color: var(--muted); }
.r-termin { position: absolute; left: 6px; right: 6px; padding: 6px 10px; border-radius: 2px;
            background: var(--copper-fl); color: var(--text); text-decoration: none; overflow: hidden;
            display: flex; flex-direction: column; font-size: 13px; line-height: 18px; }
.r-termin:hover { color: var(--text); }
/* Zeilen dürfen in der festen Höhe nicht schrumpfen — sonst schiebt der
   Browser sie ineinander statt abzuschneiden (gesehen bei 30/60 min). */
.r-termin > *, .r-sperre > * { flex-shrink: 0; }
.r-termin.aussen { outline: 1px dashed var(--feldrand); outline-offset: -1px; }
.r-zeit { font-weight: 600; color: var(--ink); }
/* Kurze Termine (unter 60 min, Nachtrag Punkt 2): eine Zeile „Uhrzeit · Kundenname“. */
.r-termin.kurz { padding-top: 3px; padding-bottom: 3px; }
.r-beh { color: var(--ink); }

/* Woche: Raster Tage × Personen (Entwurf WocheDesktop) */
.wraster { background: var(--fl); border-radius: 10px; box-shadow: var(--tiefe-1); overflow: hidden; }
.wraster-zeile { display: grid; grid-template-columns: 112px repeat(7, minmax(0, 1fr));
                 border-bottom: 1px solid var(--linie); }
.wraster-zeile:last-child { border-bottom: 0; }
.wraster-kopf { background: var(--fl-3); border-bottom: 1px solid var(--linie); }
.wraster-tag { min-height: 48px; padding: 8px 12px; display: flex; align-items: center; gap: 8px;
               flex-wrap: wrap; text-decoration: none; color: var(--ink); font-weight: 600;
               border-left: 1px solid var(--linie); }
.wraster-tag:hover { color: var(--ink); }
.wraster-tag.heute { background: var(--fl); }
.wraster-name { padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wraster-zelle { min-width: 0; padding: 8px; border-left: 1px solid var(--linie);
                 background: var(--fl-3); display: flex; flex-direction: column; gap: 6px; }
.wraster-zelle.mit { background: var(--fl); }
.wraster-schicht { font-size: 13px; line-height: 18px; color: var(--muted); }
.wraster-zelle.mit .wraster-schicht { font-weight: 600; color: var(--ink); }
.wraster-termin { display: flex; flex-direction: column; min-width: 0; padding: 4px 6px;
                  border-radius: 2px; background: var(--copper-fl); color: var(--text);
                  text-decoration: none; font-size: 13px; line-height: 18px; }
.wraster-termin:hover { color: var(--text); }

/* ---------------- Termindetail ---------------- */
.zurueck-leiste { padding: 8px 16px 0; }
.zurueck-link { min-height: 44px; display: inline-flex; align-items: center; gap: 4px;
                text-decoration: none; font-weight: 600; }
.detail { padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 24px; }
.detail-weg { padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 8px; }
.detail-kopf { display: flex; flex-direction: column; gap: 4px; }
.detail-karte { margin: 0; background: var(--fl); border-radius: 10px; box-shadow: var(--tiefe-1);
                padding: 4px 16px; display: flex; flex-direction: column; }
.detail-karte > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 0;
                      border-bottom: 1px solid var(--linie); }
.detail-karte > div:last-child { border-bottom: 0; }
.detail-karte dd { margin: 0; font-size: 17px; line-height: 24px; color: var(--ink); }
.notizkarte { background: var(--fl); border-radius: 10px; box-shadow: var(--tiefe-1); padding: 16px;
              display: flex; flex-direction: column; gap: 8px; }
.notizkarte-kopf { display: flex; flex-direction: column; gap: 2px; }
.notiztext { padding-top: 8px; border-top: 1px solid var(--linie); font-size: 17px; line-height: 26px;
             color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------------- Formulare (Anmeldung, Mein Zugang) ---------------- */
.formular { display: flex; flex-direction: column; gap: 16px; }
.feldgruppe { display: flex; flex-direction: column; gap: 4px; }
.feldgruppe label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.feld { height: 44px; width: 100%; padding: 0 12px; border: 1px solid var(--feldrand);
        border-radius: 2px; background: var(--fl); color: var(--ink); font: inherit; font-size: 17px; }
.feld:focus { outline: none; border-color: var(--copper-d); box-shadow: 0 0 0 3px var(--ring-fokus); }
.feld.ungueltig { border-color: var(--rot); }
.feld.code { letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.knopf { min-height: 44px; padding: 0 16px; border: 1px solid var(--feldrand); border-radius: 2px;
         background: var(--fl); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
         display: inline-flex; align-items: center; justify-content: center; gap: 8px;
         text-decoration: none; }
.knopf:hover { color: var(--ink); background: var(--fl-4); }
.knopf.breit { height: 48px; width: 100%; }
.knopf.voll { background: var(--copper-d); border-color: var(--copper-d); color: var(--auf-farbe); }
.knopf.voll:hover { background: var(--copper-t); border-color: var(--copper-t); color: var(--auf-farbe); }
.knopf.leise { border-color: transparent; background: none; color: var(--copper-t); padding: 0 4px; }
.knopf.leise:hover { color: var(--copper-d); }
.meldung { padding: 12px 16px; border-radius: 10px; }
.meldung.fehler { background: var(--rot-fl); color: var(--rot); }
.meldung.hinweis { background: var(--copper-fl); color: var(--ink); }

/* Anmeldung */
.anmeldeseite { min-height: 100vh; display: flex; flex-direction: column; }
.anmelde-band { background: var(--marine); color: var(--auf-marine); padding: 48px 24px 32px;
                display: flex; flex-direction: column; gap: 4px; }
.anmelde-inhalt { flex: 1; padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; }
.trenner { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.trenner span { flex: 1; height: 1px; background: var(--linie); }
.titelblock { display: flex; flex-direction: column; gap: 4px; }

/* Mein Zugang */
.zugang { padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 32px; }
.abschnitt { display: flex; flex-direction: column; gap: 12px; }
.abschnitt h2 { font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); }
.abschnitt-trenn { padding-top: 24px; border-top: 1px solid var(--linie); }
.hinweisflaeche { padding: 12px 16px; border-radius: 10px; background: var(--fl-4); color: var(--ink); }
.erfolgsflaeche { padding: 12px 16px; border-radius: 10px; background: var(--gruen-fl); color: var(--gruen); }
.geraete { list-style: none; margin: 0; padding: 0 16px; background: var(--fl); border-radius: 10px;
           box-shadow: var(--tiefe-1); }
.geraete li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
              padding: 12px 0; border-bottom: 1px solid var(--linie); }
.geraete li:last-child { border-bottom: 0; }
.geraete form { margin: 0; }
.geraet { display: flex; flex-direction: column; }
.geraet-name { color: var(--ink); font-weight: 600; }
.rueckfrage { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 10px;
              background: var(--fl); box-shadow: var(--tiefe-1); }
.rueckfrage p { color: var(--ink); }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; }
.knopfreihe form { margin: 0; }

/* Anmeldung, Detail, Mein Zugang ab 768 px: schmale Spalte, höchstens
   480 px, zentriert (Nachtrag Punkt 6). */
@media (min-width: 768px) {
  .schmal { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
}