/* Kundenportal — Gestaltung wie die Wochenkarte in MDS.ONE (office/woche.css):
   blauer Verlaufskopf, helle Karten, Zustand als Marke, nie als farbiger Rand.
   Farben aus den Token von src/mdsone/theme.css. */
@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url("/geist-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-display: swap; src: url("/geist-600.woff2") format("woff2"); }

:root {
  --grund: #f5f7fb; --flaeche: #ffffff; --rand: #e4e8f0;
  --text: #0f1b34; --text-2: #64748b; --blau: #004DFF;
  --gut: #0f8a5f; --gut-flaeche: #e7f6ef; --warn: #a15c00; --warn-flaeche: #fdf3e2;
  --schlecht: #b4232a; --schlecht-flaeche: #fdecec; --info: #0a2fa8; --info-flaeche: #e8eeff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0b1220; --flaeche: #1e293b; --rand: #334155;
    --text: #f8fafc; --text-2: #94a3b8; --blau: #6b94ff;
    --gut: #4ade80; --gut-flaeche: #12301f; --warn: #fbbf24; --warn-flaeche: #33270c;
    --schlecht: #fca5a5; --schlecht-flaeche: #3a1618; --info: #a5b8ff; --info-flaeche: #1b2550;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.55; color: var(--text); background: var(--grund);
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--blau); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; font-weight: 600; }
h1 { font-size: 24px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; margin-bottom: 4px; }
p { margin: 0 0 12px; }
code { font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; }

/* ---------------------------------------------------------------- Kopf */
.kopf {
  color: #fff; padding: 18px 16px 0;
  background: linear-gradient(135deg, #004DFF 0%, #0A2FA8 60%, #071C66 100%);
}
.kopf-innen, .nav { max-width: 960px; margin: 0 auto; }
.kopf-innen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; }
.marke { display: flex; flex-direction: column; }
.marke-name { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.marke-zusatz { font-size: 13px; opacity: .8; }
.wer { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; }
.wer-firma { opacity: .8; font-size: 13px; }
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding-bottom: 10px; }
.nav a {
  color: #fff; text-decoration: none; padding: 7px 13px; border-radius: 999px; font-size: 14px; opacity: .85;
}
.nav a:hover { background: rgba(255,255,255,.14); opacity: 1; }
.nav a[aria-current="page"] { background: #fff; color: #004DFF; opacity: 1; font-weight: 600; }
.abmelden { margin: 0 0 0 auto; }

/* ---------------------------------------------------------------- Inhalt */
main { flex: 1; width: 100%; margin: 0 auto; padding: 24px 16px 40px; }
main.breit { max-width: 960px; }
main.schmal { max-width: 460px; }
.seitentitel { margin-top: 4px; }
.einleitung { color: var(--text-2); }
.fuss { text-align: center; color: var(--text-2); font-size: 13px; padding: 16px; }

.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 20px;
  margin-bottom: 16px; box-shadow: 0 10px 28px -20px rgba(10, 30, 90, .45), 0 1px 3px rgba(10, 30, 90, .06);
}
.klein { font-size: 13px; color: var(--text-2); }
.mitte { text-align: center; }
.leer { color: var(--text-2); margin: 0; }

/* ---------------------------------------------------------------- Formulare */
.formular { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 12px; }
.formular label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.formular input {
  font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rand);
  background: var(--flaeche); color: var(--text);
}
.formular input:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: transparent; }
.formular input[readonly] { color: var(--text-2); background: var(--grund); }
.feldhilfe { font-weight: 400; font-size: 13px; color: var(--text-2); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600;
  padding: 10px 18px; min-height: 42px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  color: #fff; background: #004DFF; box-shadow: 0 6px 14px -8px rgba(0,77,255,.8);
}
.knopf:hover { background: #0A2FA8; }
.knopf-hell { background: rgba(255,255,255,.16); box-shadow: none; min-height: 34px; padding: 6px 14px; font-weight: 500; font-size: 14px; }
.knopf-hell:hover { background: rgba(255,255,255,.26); }
.hinweis { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.hinweis-fehler { background: var(--schlecht-flaeche); color: var(--schlecht); }
.hinweis-ok { background: var(--gut-flaeche); color: var(--gut); }
.qr { display: flex; justify-content: center; margin: 8px 0 12px; }
.qr svg { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 6px; }
.schluessel { display: inline-block; margin-top: 4px; letter-spacing: .06em; word-break: break-all; }

/* ---------------------------------------------------------------- Status */
.lage {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; margin-bottom: 16px;
  background: var(--gut-flaeche); color: var(--gut); font-weight: 600;
}
.lage[data-lage="wartung"] { background: var(--info-flaeche); color: var(--info); }
.lage[data-lage="eingeschraenkt"], .lage[data-lage="teilausfall"] { background: var(--warn-flaeche); color: var(--warn); }
.lage[data-lage="ausfall"] { background: var(--schlecht-flaeche); color: var(--schlecht); }
.lage-stand { margin-left: auto; font-weight: 400; font-size: 13px; opacity: .85; }
.dienste, .leistungen { list-style: none; margin: 0; padding: 0; }
.dienst { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); }
.dienst:first-child { border-top: 0; padding-top: 0; }
.dienst-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dienst-gruppe {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); padding: 16px 0 4px;
}
.dienst-gruppe:first-child { padding-top: 0; }
.dienst-gruppe + .dienst { border-top: 0; padding-top: 4px; }
.dienst-text { font-size: 13px; color: var(--text-2); }
.dienst-verf { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.marke-zustand {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--gut-flaeche); color: var(--gut); vertical-align: middle;
}
.marke-zustand[data-ton="info"] { background: var(--info-flaeche); color: var(--info); }
.marke-zustand[data-ton="warn"] { background: var(--warn-flaeche); color: var(--warn); }
.marke-zustand[data-ton="schlecht"] { background: var(--schlecht-flaeche); color: var(--schlecht); }
.eintrag { padding: 12px 0; border-top: 1px solid var(--rand); }
.eintrag:first-of-type { border-top: 0; padding-top: 0; }

/* ---------------------------------------------------------------- Leistungen und Konto */
.leistung { padding: 12px 0; border-top: 1px solid var(--rand); }
.leistung:first-child { border-top: 0; padding-top: 0; }
.leistung p { margin: 4px 0 0; }
.leistung-kopf { display: flex; gap: 12px; align-items: baseline; }
.menge { margin-left: auto; color: var(--text-2); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 12px; }
.angaben dt { color: var(--text-2); }
.angaben dd { margin: 0; }
.karte-anliegen { background: var(--info-flaeche); border-color: transparent; }

/* ---------------------------------------------------------------- Bühne (ohne Anmeldung)
   Links der Verlauf der Wochenkarte mit Logo und »One«, rechts die Karte.
   Unter 880 px steht der blaue Teil oben und die Liste fällt weg. */
body.buehne { display: grid; grid-template-columns: minmax(380px, 46%) 1fr; }
.buehne-bild {
  position: relative; overflow: hidden; color: #fff; padding: 40px 48px 32px;
  display: flex; flex-direction: column; gap: 32px; min-height: 100vh;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(150deg, #004DFF 0%, #0A2FA8 55%, #071C66 100%);
}
.buehne-logo { display: block; width: 168px; height: auto; }
.buehne-text { margin: auto 0; max-width: 440px; animation: erscheinen .5s ease-out both; }
.buehne-name { font-size: 76px; line-height: 1; font-weight: 600; letter-spacing: -.035em; margin: 0 0 14px; }
.buehne-beschreibung { font-size: 19px; line-height: 1.5; opacity: .9; margin: 0 0 32px; }
.buehne-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.buehne-punkte li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.buehne-symbol {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.14);
}
.buehne-fuss { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; opacity: .75; }
.buehne-inhalt {
  display: flex; align-items: center; justify-content: center; padding: 40px 24px; min-height: 100vh;
  /* Echtes Teamfoto aus dem MDSYSTEC-Büro, blau abgetönt, damit die Karte trägt. */
  background:
    linear-gradient(160deg, rgba(10, 47, 168, .42) 0%, rgba(7, 28, 102, .72) 100%),
    url("/hintergrund.jpg") 0% 30% / cover no-repeat, #0A2FA8;
}
.buehne-inhalt > .buehne-spalte > .klein { color: rgba(255,255,255,.88); }
.buehne-inhalt > .buehne-spalte > .klein a { color: #fff; }
.buehne-spalte { width: 100%; max-width: 420px; animation: erscheinen .5s .08s ease-out both; }
.buehne-spalte .karte { padding: 28px; border-radius: 20px; border-color: transparent; box-shadow: 0 30px 60px -24px rgba(4, 14, 60, .65), 0 2px 6px rgba(4, 14, 60, .18); }
.buehne-spalte h1 { font-size: 26px; margin-bottom: 6px; }
.buehne-spalte .einleitung { margin-bottom: 18px; }
.buehne-spalte .knopf { min-height: 46px; }
@keyframes erscheinen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .buehne-text, .buehne-spalte { animation: none; } }

@media (max-width: 880px) {
  body.buehne { display: block; }
  .buehne-bild { min-height: 0; padding: 24px 20px 28px; gap: 22px; }
  .buehne-logo { width: 132px; }
  .buehne-name { font-size: 48px; }
  .buehne-beschreibung { font-size: 16px; margin: 0; }
  .buehne-punkte, .buehne-fuss { display: none; }
  .buehne-inhalt { min-height: 0; padding: 0 16px 32px; align-items: flex-start; background: none; }
  .buehne-inhalt > .buehne-spalte > .klein { color: var(--text-2); }
  .buehne-inhalt > .buehne-spalte > .klein a { color: var(--blau); }
  .buehne-spalte { margin-top: -14px; }
  .buehne-spalte .karte { padding: 20px; }
}

@media (max-width: 560px) {
  .wer { margin-left: 0; align-items: flex-start; }
  .abmelden { margin-left: 0; }
  .karte { padding: 16px; border-radius: 16px; }
  .angaben { grid-template-columns: 1fr; gap: 2px; }
  .angaben dd { margin-bottom: 8px; }
  .dienst { flex-wrap: wrap; }
}