/* =====================================================================
   DEVFOXX Lead-Desk
   Eine Arbeitsoberflaeche, keine Marketingseite: ruhige Flaechen,
   klare Zustaende, lesbare Tabellen. Die Farben der Zustaende sind so
   gewaehlt, dass sie sich auch bei Rot-Gruen-Schwaeche unterscheiden —
   und jeder Zustand traegt zusaetzlich seinen Namen im Klartext.
   ===================================================================== */

:root {
  color-scheme: light;

  --grund:        #f6f7f9;
  --flaeche:      #ffffff;
  --flaeche-2:    #f0f2f5;
  --linie:        #d9dee5;
  --linie-stark:  #b8c1cc;

  --text:         #1a1f26;
  --text-leise:   #5c6672;
  --text-sehrleise:#8a94a0;

  --akzent:       #1f4fd8;
  --akzent-dunkel:#173aa3;
  --akzent-leicht:#e8eeff;

  /* Zustaende */
  --ok:           #0f7a4d;
  --ok-flaeche:   #e4f4ec;
  --warn:         #8a5a00;
  --warn-flaeche: #fdf1dc;
  --stop:         #b3261e;
  --stop-flaeche: #fceceb;
  --wait:         #5b46b8;
  --wait-flaeche: #ece9fa;
  --done:         #4a5561;
  --done-flaeche: #eceff3;

  /* Kalender: vier klar getrennte Familien, je mit eigener Form-Marke */
  --cal-talent:   #0f9e8c;
  --cal-lead:     #6152de;
  --cal-kamp:     #b65b08;
  --cal-other:    #4a5561;

  /* Diagramme */
  --viz1: #0f9e8c;
  --viz2: #6152de;
  --viz3: #b65b08;

  --radius: 8px;
  --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --grund:        #14171c;
    --flaeche:      #1c2027;
    --flaeche-2:    #242932;
    --linie:        #333a45;
    --linie-stark:  #48515e;
    --text:         #e8ebef;
    --text-leise:   #a7b0bb;
    --text-sehrleise:#7c8593;
    --akzent:       #7d9bff;
    --akzent-dunkel:#a8bcff;
    --akzent-leicht:#1e2740;
    --ok:           #4fc48c;  --ok-flaeche:   #11291f;
    --warn:         #e5a53c;  --warn-flaeche: #2b2113;
    --stop:         #f2766b;  --stop-flaeche: #2e1715;
    --wait:         #a596f5;  --wait-flaeche: #201c33;
    --done:         #9aa4b0;  --done-flaeche: #232830;
    --cal-talent:   #28ab99;
    --cal-lead:     #8177ec;
    --cal-kamp:     #c87b2c;
    --cal-other:    #94a0ad;
    --viz1: #28ab99; --viz2: #8177ec; --viz3: #c87b2c;
    --schatten: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--akzent);
  color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .7rem clamp(16px, 3vw, 28px);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.kopf__marke { display: flex; align-items: center; gap: .6rem; }
.kopf__logo {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--akzent); color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.kopf__titel { font-weight: 650; letter-spacing: -.01em; }
.kopf__konto { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kopf__wer { display: flex; flex-direction: column; line-height: 1.2; margin-right: .3rem; }
.kopf__rolle { font-size: 12px; color: var(--text-leise); }

/* --------------------------------------------------------------- Navigation */
.nav {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
}
.nav ul {
  display: flex; gap: .15rem; list-style: none;
  margin: 0; padding: 0 clamp(10px, 3vw, 22px);
  min-width: max-content;
}
.nav__link {
  display: block; padding: .6rem .75rem;
  color: var(--text-leise); text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap; font-size: 14px;
}
.nav__link:hover { color: var(--text); background: var(--flaeche-2); }
.nav__link--aktiv { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600; }

/* ------------------------------------------------------------------ Inhalt */
.inhalt {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 26px) clamp(16px, 3vw, 24px) 60px;
}

h1 { font-size: clamp(20px, 3vw, 25px); margin: 0 0 .2rem; letter-spacing: -.015em; }
h2 { font-size: 17px; margin: 1.8rem 0 .7rem; letter-spacing: -.01em; }
h3 { font-size: 15px; margin: 1.2rem 0 .5rem; }
.lead { color: var(--text-leise); margin: 0 0 1.4rem; max-width: 70ch; }

.kopfzeile {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}

/* ------------------------------------------------------------------ Karten */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(14px, 2.4vw, 20px);
  box-shadow: var(--schatten);
  margin-bottom: 1.1rem;
}
.karte--mitte { max-width: 400px; margin: 12vh auto; }
.karte__marke {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 650; margin-bottom: 1.2rem;
}
.karte h2:first-child, .karte h3:first-child { margin-top: 0; }
body.schmal { padding: 0 16px; }

.gitter { display: grid; gap: 1rem; }
.gitter--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gitter--3 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.gitter--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ------------------------------------------------------------------ Kacheln */
.kachel {
  display: block; text-decoration: none; color: inherit;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  box-shadow: var(--schatten);
}
a.kachel:hover { border-color: var(--akzent); background: var(--akzent-leicht); }
a.kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Zahl und Beschriftung stehen untereinander — sie sind <span>, also
   braucht es display:block, sonst laufen sie in einer Zeile. */
.kachel__zahl { display: block; font-size: 30px; font-weight: 680; line-height: 1.1; letter-spacing: -.02em; }
.kachel__text { display: block; color: var(--text-leise); font-size: 13.5px; margin-top: .15rem; }
.kachel--warn .kachel__zahl { color: var(--warn); }
.kachel--stop .kachel__zahl { color: var(--stop); }
.kachel--ok   .kachel__zahl { color: var(--ok); }

/* ------------------------------------------------------------------ Tabellen */
.tabellenrahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th {
  background: var(--flaeche-2); font-size: 12.5px; font-weight: 640;
  color: var(--text-leise); text-transform: uppercase; letter-spacing: .03em;
  position: sticky; top: 0; z-index: 1;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--flaeche-2); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.leer { padding: 2rem 1rem; text-align: center; color: var(--text-leise); }

/* ------------------------------------------------------------------ Marken */
.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 99px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge--neutral { background: var(--flaeche-2); color: var(--text-leise); border-color: var(--linie); }
.badge--ok      { background: var(--ok-flaeche);   color: var(--ok);   border-color: var(--ok); }
.badge--warn    { background: var(--warn-flaeche); color: var(--warn); border-color: var(--warn); }
.badge--stop    { background: var(--stop-flaeche); color: var(--stop); border-color: var(--stop); }
.badge--wait    { background: var(--wait-flaeche); color: var(--wait); border-color: var(--wait); }
.badge--done    { background: var(--done-flaeche); color: var(--done); border-color: var(--done); }

.marke-kanal { font-size: 12px; color: var(--text-leise); }

/* ------------------------------------------------------------------ Hinweise */
.hinweis {
  border: 1px solid var(--linie); border-left-width: 4px;
  border-radius: var(--radius); padding: .7rem .9rem;
  margin-bottom: 1rem; font-size: 14px;
}
.hinweis--ok    { background: var(--ok-flaeche);   border-color: var(--ok);   color: var(--text); border-left-color: var(--ok); }
.hinweis--warn  { background: var(--warn-flaeche); border-color: var(--warn); color: var(--text); border-left-color: var(--warn); }
.hinweis--error { background: var(--stop-flaeche); border-color: var(--stop); color: var(--text); border-left-color: var(--stop); }
.hinweis--info  { background: var(--akzent-leicht); border-color: var(--akzent); color: var(--text); border-left-color: var(--akzent); }
.hinweis ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.hinweis__titel { font-weight: 650; display: block; margin-bottom: .2rem; }

/* ------------------------------------------------------------------ Formulare */
.feld { margin-bottom: .9rem; }
.feld label, .feld > .label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: .25rem; color: var(--text);
}
.feld__hilfe { font-size: 12.5px; color: var(--text-leise); margin-top: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=date], input[type=datetime-local], input[type=number], input[type=search],
input[type=tel], input[type=file], select, textarea {
  width: 100%; padding: .48rem .6rem;
  border: 1px solid var(--linie-stark); border-radius: 6px;
  background: var(--flaeche); color: var(--text);
  font: inherit; font-size: 14px;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
textarea.gross { min-height: 220px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--flaeche-2); color: var(--text-sehrleise); cursor: not-allowed;
}
fieldset { border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1rem; }
legend { font-size: 13px; font-weight: 640; padding: 0 .35rem; }

.wahl { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .4rem; font-size: 14px; }
.wahl input { width: auto; margin-top: .2rem; flex: none; }

.zeile { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.zeile > * { flex: 1 1 160px; min-width: 0; }
.zeile > .schmal-feld { flex: 0 1 130px; }

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-block; padding: .45rem .9rem;
  border: 1px solid var(--akzent); border-radius: 6px;
  background: var(--akzent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.knopf[disabled], .knopf--aus {
  background: var(--flaeche-2); border-color: var(--linie);
  color: var(--text-sehrleise); cursor: not-allowed;
}
.knopf--leise { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.knopf--leise:hover { background: var(--flaeche-2); color: var(--text); border-color: var(--linie-stark); }
.knopf--gefahr { background: var(--stop); border-color: var(--stop); }
.knopf--gefahr:hover { background: var(--stop); border-color: var(--stop); filter: brightness(.92); }
.knopf--klein { padding: .25rem .6rem; font-size: 13px; }
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ------------------------------------------------------------------ Details */
details.block {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); margin-bottom: .7rem;
}
details.block > summary {
  padding: .65rem .9rem; cursor: pointer; font-weight: 600; font-size: 14px;
  list-style: none; display: flex; justify-content: space-between; gap: .6rem; align-items: center;
}
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary::after { content: "▾"; color: var(--text-leise); }
details.block[open] > summary::after { content: "▴"; }
details.block > .inhalt-block { padding: 0 .9rem .9rem; border-top: 1px solid var(--linie); padding-top: .8rem; }

/* ------------------------------------------------------------------ Definitionsliste */
.daten { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: .35rem .9rem; font-size: 14px; margin: 0; }
.daten dt { color: var(--text-leise); }
.daten dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Kalender */
.kal { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); }
.kal__kopf { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--flaeche-2); }
.kal__kopf div {
  padding: .45rem .4rem; font-size: 12px; font-weight: 640; color: var(--text-leise);
  text-transform: uppercase; letter-spacing: .03em; text-align: center;
}
.kal__gitter { display: grid; grid-template-columns: repeat(7, 1fr); }
.kal__tag {
  min-height: 92px; border-top: 1px solid var(--linie); border-right: 1px solid var(--linie);
  padding: .3rem .35rem; font-size: 12px;
}
.kal__tag:nth-child(7n) { border-right: none; }
.kal__tag--fremd { background: var(--flaeche-2); color: var(--text-sehrleise); }
.kal__tag--heute { background: var(--akzent-leicht); }
.kal__nr { font-weight: 640; color: var(--text-leise); display: block; margin-bottom: .2rem; }
.kal__tag--heute .kal__nr { color: var(--akzent); }
.kal__eintrag {
  display: block; margin-bottom: .18rem; padding: .12rem .3rem;
  border-radius: 4px; font-size: 11.5px; line-height: 1.35;
  text-decoration: none; color: #fff;
  border-left: 3px solid rgba(0,0,0,.25);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kal__eintrag--talent { background: var(--cal-talent); }
.kal__eintrag--lead   { background: var(--cal-lead); }
.kal__eintrag--kamp   { background: var(--cal-kamp); }
.kal__eintrag--other  { background: var(--cal-other); }
.kal__eintrag .kal__form { font-weight: 700; margin-right: .18rem; }

.legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 13px; margin: .8rem 0; }
.legende span { display: inline-flex; align-items: center; gap: .35rem; }
.legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ------------------------------------------------------------------ Balken */
.balken { background: var(--flaeche-2); border-radius: 4px; height: 10px; overflow: hidden; min-width: 60px; }
.balken > i { display: block; height: 100%; background: var(--viz2); }
.balken--1 > i { background: var(--viz1); }
.balken--3 > i { background: var(--viz3); }

/* ------------------------------------------------------------------ Matrix */
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix button {
  border: 1px solid var(--linie-stark); background: var(--flaeche);
  width: 26px; height: 26px; border-radius: 5px; cursor: pointer;
  font-size: 14px; line-height: 1; color: var(--text-sehrleise);
}
.matrix button[aria-pressed="true"] {
  background: var(--ok-flaeche); border-color: var(--ok); color: var(--ok); font-weight: 700;
}

/* ------------------------------------------------------------------ Kleinkram */
.leise { color: var(--text-leise); }
.sehrleise { color: var(--text-sehrleise); font-size: 13px; }
.klein { font-size: 13px; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; }
.abstand-oben { margin-top: 1.4rem; }
.zitat {
  border-left: 3px solid var(--linie-stark); padding-left: .8rem;
  font-style: italic; color: var(--text-leise); margin: .5rem 0;
}
pre.text {
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 6px;
  padding: .8rem; overflow-x: auto; font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; margin: 0;
}
.filterleiste {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: .8rem .9rem; margin-bottom: 1rem;
}
.filterleiste .feld { margin-bottom: 0; flex: 1 1 140px; }
.filterleiste .feld--breit { flex: 2 1 240px; }

.fuss {
  border-top: 1px solid var(--linie); background: var(--flaeche);
  padding: 1rem clamp(16px, 3vw, 28px);
  font-size: 12.5px; color: var(--text-sehrleise);
}
.fuss p { margin: 0; max-width: 90ch; }

@media (max-width: 640px) {
  .daten { grid-template-columns: 1fr; gap: .1rem .9rem; }
  .daten dt { margin-top: .5rem; }
  .kal__tag { min-height: 64px; }
}