/* OnlyCSV — Gestaltung nach der kelziholz-CI, beide Themes.
 *
 * Die CI faehrt zwei gegensaetzliche Welten (kelziholz-ci.md): der Shop
 * hell (weiss/schwarz, Sand-Baender, Buttons 40px), das Kundenportal dunkel
 * (#0E0E0E, weisse Pillen-Buttons). Geteilt sind Quicksand, der Sandton
 * #DDD0C0, Radius 4px und die durchgaengige Schattenlosigkeit.
 *
 * Hier tragen beide: `prefers-color-scheme` entscheidet. Alle Farben stehen
 * als Variablen auf :root (hell = Shop-Palette) und werden im
 * dark-Media-Block auf die Portal-Palette umgesetzt. Kein Farbwert steht
 * ausserhalb dieser beiden Bloecke -- sonst bricht eines der Themes
 * unbemerkt.
 *
 * Quicksand liegt in schrift/ auf diesem Server. Kein Abruf von
 * fonts.googleapis.com: das wuerde die IP-Adresse jedes Aufrufs an Google
 * melden, ohne dass es dafuer einen Grund gaebe (gleiche Entscheidung wie
 * im Kundenportal, siehe dortige kunde.css).
 */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/schrift/quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/schrift/quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hell = Shop-Palette (kelziholz.de) */
:root {
  color-scheme: light;
  --grund: #ffffff;
  --grund-2: #f7f7f7;
  --karte: #ffffff;
  --text: #000000;
  --text-2: #3c3c3c;
  --leise: #767676;
  --sand: #ddd0c0;
  --linie: #e9e9e9;
  --linie-stark: #cfcfcf;
  --feld: #ffffff;
  --feld-rand: #cfcfcf;
  --knopf: #000000;
  --knopf-text: #ffffff;
  --minus: #a11b1b;
  --warnung-grund: #fdf3e3;
  --warnung-rand: #e0c48b;
  --warnung-text: #6b4c11;
  --fehler-grund: #fbeaea;
  --fehler-rand: #e0a8a8;
  --fehler-text: #8c1f1f;
  --r: 4px;
  --pille: 999px;
}

/* Dunkel = Portal-Palette (kunde.kelziholz.de) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --grund: #0e0e0e;
    --grund-2: #161616;
    --karte: #161616;
    --text: #ffffff;
    --text-2: #d4d4d4;
    --leise: #9a9a9a;
    --sand: #ddd0c0;
    --linie: #2a2a2a;
    --linie-stark: #3e3e3e;
    --feld: #161616;
    --feld-rand: #3e3e3e;
    --knopf: #ffffff;
    --knopf-text: #161616;
    --minus: #ff8f8f;
    --warnung-grund: #2a2318;
    --warnung-rand: #6b5622;
    --warnung-text: #e7cf9a;
    --fehler-grund: #2a1717;
    --fehler-rand: #6b2a2a;
    --fehler-text: #ffb4b4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--text);
  font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16.8px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ Kopf */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--linie);
}

.marke { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.marke-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
.marke-zusatz { font-size: 0.82rem; color: var(--leise); }

/* Bei mehreren Zugaengen soll auf einen Blick klar sein, wer angemeldet ist
   -- sonst konvertiert jemand unbemerkt unter fremdem Namen weiter. */
.sitzung { display: flex; align-items: center; gap: 0.8rem; }
/* E-Mail-Adressen sind lang -- auf schmalen Schirmen abschneiden statt die
   Kopfzeile umbrechen zu lassen. Der volle Wert steht im title-Attribut. */
.sitzung-name {
  color: var(--leise);
  font-size: 0.88rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sitzung form { margin: 0; }

/* --------------------------------------------------------------- Inhalt */

.inhalt {
  flex: 1;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem);
}

h1 { font-weight: 500; font-size: 1.8rem; margin: 0 0 0.4rem; }
h2 { font-weight: 500; font-size: 1.15rem; margin: 1.6rem 0 0.4rem; }
.vorspann { color: var(--text-2); max-width: 46rem; margin: 0 0 1.8rem; }
.leise { color: var(--leise); font-size: 0.9rem; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.karte-schmal { max-width: 24rem; margin: 2rem auto; }
.karte-text { max-width: 44rem; }
.karte-text a { color: inherit; }

/* ----------------------------------------------------------- Bedienteile */

.knopf {
  display: inline-block;
  border: 0;
  border-radius: var(--pille);
  background: var(--knopf);
  color: var(--knopf-text);
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}
.knopf:hover { opacity: 0.85; }
.knopf:disabled { opacity: 0.45; cursor: default; }

.knopf-leise {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--linie-stark);
  font-weight: 500;
  padding: 0.4rem 1rem;
}

.formular { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1rem; }
.formular label { font-size: 0.85rem; color: var(--leise); margin-top: 0.6rem; }
.formular input {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r);
  border: 1px solid var(--feld-rand);
  background: var(--feld);
  color: var(--text);
}
.formular button { margin-top: 1.2rem; }

/* ------------------------------------------------------------- Ablage */

.ablage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 14rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--linie-stark);
  border-radius: var(--r);
  background: var(--grund-2);
  transition: border-color 0.12s, background 0.12s;
}
.ablage:hover { border-color: var(--sand); }
/* Beim Darueberziehen: Sandton als Flaeche -- der eine Akzent, den Shop und
   Portal teilen. */
.ablage.bereit { border-color: var(--sand); border-style: solid; background: var(--sand); color: #161616; }
.ablage.laeuft { opacity: 0.6; cursor: progress; }
.ablage-gross { font-size: 1.2rem; font-weight: 600; }
.ablage-klein { font-size: 0.88rem; color: var(--leise); }
.ablage.bereit .ablage-klein { color: #3c3c3c; }

/* ---------------------------------------------------------- Rueckmeldung */

.meldung {
  border-radius: var(--r);
  padding: 0.7rem 0.9rem;
  margin: 1rem 0 0;
  border: 1px solid transparent;
}
.meldung-fehler { background: var(--fehler-grund); border-color: var(--fehler-rand); color: var(--fehler-text); }
.meldung-hinweis { background: var(--warnung-grund); border-color: var(--warnung-rand); color: var(--warnung-text); }

.warnungen {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r);
  background: var(--warnung-grund);
  border: 1px solid var(--warnung-rand);
  color: var(--warnung-text);
}
.warnungen li + li { margin-top: 0.35rem; }

/* -------------------------------------------------------------- Ergebnis */

#ergebnis { margin-top: 2rem; }

.ergebnis-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.ergebnis-kopf h2 { margin: 0; font-size: 1.4rem; }

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin: 0 0 1.6rem;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
}
.kennzahlen > div { background: var(--karte); padding: 0.8rem 1rem; }
.kennzahlen dt { font-size: 0.8rem; color: var(--leise); }
.kennzahlen dd { margin: 0.1rem 0 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Breite Tabellen scrollen in ihrem eigenen Rahmen -- der Seitenkoerper
   darf nie waagerecht scrollen. */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--r);
}
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; white-space: nowrap; }
.tabelle th, .tabelle td { padding: 0.5rem 0.8rem; text-align: left; border-bottom: 1px solid var(--linie); }
.tabelle thead th { background: var(--grund-2); font-weight: 600; color: var(--text-2); position: sticky; top: 0; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle .rechts { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle .minus { color: var(--minus); }

/* ------------------------------------------------------------------ Fuss */

.fuss {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: 0.85rem;
}
.fuss nav { display: flex; gap: 1.2rem; }
.fuss a { color: inherit; }