/* Inomatic Spleiß-Konfigurator - Gestaltung
 *
 * Weiß als Grundfläche, RGB(200, 30, 30) als Akzent (TR-060/TR-061).
 * Weitere Farben nur dort, wo sie einen Zustand tragen (TR-063):
 * Grau für Gesperrtes, Bernstein für Hinweise, Rot für Fehler.
 */

:root {
  --akzent: rgb(200, 30, 30);
  --akzent-dunkel: rgb(160, 22, 22);
  --akzent-blass: rgb(252, 240, 240);

  --text: #1f2933;
  --text-leise: #5b6672;
  --linie: #d9dee3;
  --flaeche-leise: #f6f7f8;

  --hinweis: #8a5a00;
  --hinweis-flaeche: #fdf6e6;

  --radius: 4px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
}

/* ---------------------------------------------------------------- Kopfzeile */

.kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 3px solid var(--akzent);
  background: #fff;
}

.kopf__marke {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

/* Der Göbel-Schriftzug ist 500x94 - die Breite ergibt sich aus der Höhe. */
.kopf__marke img {
  height: 22px;
  width: auto;
}

/* Trennt die Kundenmarke sichtbar vom Produktnamen. */
.kopf__marke-produkt {
  padding-left: 10px;
  border-left: 1px solid var(--linie);
}

.kopf__navigation {
  display: flex;
  gap: 18px;
  margin-left: 8px;
}

.kopf__navigation a {
  color: var(--text-leise);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.kopf__navigation a:hover {
  color: var(--text);
}

.kopf__navigation a[aria-current="page"] {
  color: var(--akzent);
  border-bottom-color: var(--akzent);
}

.kopf__konto {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  color: var(--text-leise);
  font-size: 14px;
}

/* ------------------------------------------------------------------- Layout */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  font-size: 22px;
  margin: 0 0 4px;
}

h2 {
  font-size: 17px;
  margin: 28px 0 10px;
}

h3 {
  font-size: 15px;
  margin: 20px 0 8px;
}

.seitenkopf {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.seitenkopf__aktionen {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.brotkrumen {
  font-size: 13px;
  color: var(--text-leise);
  margin-bottom: 12px;
}

.brotkrumen a {
  color: var(--text-leise);
}

.leise {
  color: var(--text-leise);
}

.klein {
  font-size: 13px;
}

.leer {
  padding: 28px;
  text-align: center;
  color: var(--text-leise);
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------- Kennzahlen */

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 24px;
  padding: 0;
  list-style: none;
}

.kennzahl {
  min-width: 130px;
  padding: 10px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.kennzahl__wert {
  display: block;
  font-size: 22px;
  font-weight: 600;
}

.kennzahl__text {
  font-size: 13px;
  color: var(--text-leise);
}

/* ---------------------------------------------------------------- Bedienung */

.knopf {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--akzent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.knopf:hover {
  background: var(--akzent-dunkel);
  border-color: var(--akzent-dunkel);
}

.knopf--zweit {
  background: #fff;
  color: var(--text);
  border-color: var(--linie);
}

.knopf--zweit:hover {
  background: var(--flaeche-leise);
  border-color: var(--text-leise);
}

.knopf--klein {
  padding: 3px 9px;
  font-size: 13px;
}

.knopf--verweis {
  padding: 0;
  border: 0;
  background: none;
  color: var(--akzent);
  text-decoration: underline;
  font-size: 13px;
  cursor: pointer;
}

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

label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

input[type="text"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
  color: var(--text);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.knopf:focus-visible,
a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

.feld {
  margin-bottom: 14px;
}

.feld__hinweis {
  font-size: 13px;
  color: var(--text-leise);
  font-weight: 400;
}

.formular {
  max-width: 560px;
}

.formular__zeile {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.formular__zeile .feld {
  flex: 1;
  margin-bottom: 0;
}

/* Ausklappbares Formular - eingeklappt bleibt die Seite auf ihre eigentliche
   Aufgabe konzentriert, die Änderung ist trotzdem einen Klick entfernt. */
.ausklapp {
  margin-bottom: 20px;
}

.ausklapp > summary {
  font-size: 14px;
  color: var(--akzent-dunkel);
  cursor: pointer;
  width: fit-content;
}

.ausklapp > summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.ausklapp__inhalt {
  margin-top: 10px;
  max-width: 520px;
}

/* -------------------------------------------------------------- Meldungen */

.meldung {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  margin-bottom: 16px;
  font-size: 14px;
}

.meldung--fehler {
  border-color: var(--akzent);
  background: var(--akzent-blass);
  color: var(--akzent-dunkel);
}

.meldung--hinweis {
  border-color: #e6d9b0;
  background: var(--hinweis-flaeche);
  color: var(--hinweis);
}

/* --------------------------------------------------------------- Tabellen */

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabelle th,
.tabelle td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

.tabelle th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-leise);
  border-bottom: 2px solid var(--linie);
  white-space: nowrap;
}

.tabelle tbody tr:hover {
  background: var(--flaeche-leise);
}

.tabelle__zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Sortierbare Spaltenüberschrift: der Knopf entsteht erst im Browser
   (app/static/js/app.js) und übernimmt das Aussehen der Überschrift. */

.sortierknopf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.tabelle__zahl .sortierknopf {
  flex-direction: row-reverse;
}

.sortierknopf:hover {
  color: var(--text);
}

.sortierknopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Der Pfeil bleibt als leerer Platzhalter stehen, damit die Spalte beim
   Sortieren nicht springt. */
.sortierknopf__pfeil::before {
  content: "95";
  opacity: 0.35;
}

th[aria-sort] .sortierknopf {
  color: var(--text);
}

th[aria-sort="ascending"] .sortierknopf__pfeil::before {
  content: "91";
  opacity: 1;
}

th[aria-sort="descending"] .sortierknopf__pfeil::before {
  content: "93";
  opacity: 1;
}

.tabelle--fest {
  table-layout: auto;
}

tr.gesperrt {
  color: var(--text-leise);
  background: var(--flaeche-leise);
}

tr.gesperrt:hover {
  background: var(--flaeche-leise);
}

/* ------------------------------------------------------------- Kennzeichen */

.marke {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid var(--linie);
  color: var(--text-leise);
  background: #fff;
}

.marke--belegt {
  border-color: var(--akzent);
  background: var(--akzent-blass);
  color: var(--akzent-dunkel);
}

.marke--hinweis {
  border-color: #e6d9b0;
  background: var(--hinweis-flaeche);
  color: var(--hinweis);
}

/* ------------------------------------------------------------------ Karten */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.karte {
  display: block;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.karte:hover {
  border-color: var(--akzent);
}

.karte__titel {
  font-weight: 600;
  margin-bottom: 2px;
}

.block {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}

.block__kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--flaeche-leise);
  border-bottom: 1px solid var(--linie);
}

.block__titel {
  font-weight: 600;
}

.block__inhalt {
  padding: 0 4px;
}

/* --------------------------------------------------------------- Anmeldung */

.anmeldung {
  max-width: 340px;
  margin: 12vh auto;
  padding: 0 24px;
}

/* In der schmalen Anmeldespalte steht der breite Schriftzug über dem Produktnamen. */
.anmeldung__marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.anmeldung__marke img {
  height: 30px;
  width: auto;
}

/* ------------------------------------------------------------------- Druck */

.nur-druck {
  display: none;
}

@media print {
  @page {
    margin: 14mm;
  }

  .kopf,
  .seitenkopf__aktionen,
  .nicht-drucken {
    display: none !important;
  }

  .nur-druck {
    display: block;
  }

  body {
    font-size: 11pt;
  }

  main {
    max-width: none;
    padding: 0;
  }

  .block {
    break-inside: avoid;
  }

  .tabelle thead {
    display: table-header-group;
  }

  /* Auf Papier wird nicht sortiert. */
  .sortierknopf__pfeil {
    display: none;
  }

  .tabelle tr {
    break-inside: avoid;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}