/* Haendlerportal (Plan 6a, Task 5). Eigene, kleine Datei: Das Portal laedt app.css des Tools nicht. Farben und Schrift wie
   im Tool (Inter, Flieder-Akzent von shopfair.de). Keine Inline-Stile (CSP); Zustaende nur ueber Klassen und ARIA. */

@font-face {
  font-family: "Inter";
  src: url("/oberflaeche/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --app: #f6f5f8;
  --flaeche: #ffffff;
  --flaeche-hover: #f4f2f7;
  --linie: #e7e4ec;
  --linie-stark: #d5d0dd;
  --rand-feld: #8a8296;
  --text: #1b1622;
  --text-2: #4a4453;
  --text-gedaempft: #66606f;
  --akzent: #6b4fa0;
  --akzent-hover: #5b4190;
  --akzent-hauch: #f4effb;
  --rot: #b3261e;
  --rot-hauch: #fdeceb;
  --gruen: #1f6b3a;
  --gruen-hauch: #e6f4ea;
  --gelb: #7a4b00;
  --gelb-hauch: #fdf3e1;
  --schatten-1: 0 1px 2px rgb(27 22 34 / 0.06), 0 1px 1px rgb(27 22 34 / 0.03);
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 24px;
  --a6: 32px;
  --radius: 8px;
  --radius-s: 6px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--app);
  color: var(--text);
  font-family: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; line-height: 1.3; letter-spacing: -0.011em; text-wrap: balance; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.0625rem; margin-top: var(--a5); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent-hover); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: var(--radius-s); }
main:focus, h1:focus { outline: none; }

.springen { position: absolute; left: var(--a4); top: -100px; padding: var(--a2) var(--a3); background: var(--flaeche); border-radius: var(--radius-s); z-index: 10; }
.springen:focus { top: var(--a2); }

/* Kopf */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--a3);
  padding: var(--a3) var(--a4);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.marke { display: flex; align-items: center; gap: var(--a3); min-width: 0; }
.logo { display: block; height: 28px; width: auto; }
.produkt { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.kopf-rechts { display: flex; align-items: center; gap: var(--a3); }
.sprachen, .filter { display: inline-flex; border: 1px solid var(--linie-stark); border-radius: var(--radius-s); overflow: hidden; }
.sprache, .filter-knopf {
  min-width: 44px;
  min-height: 34px;
  padding: 0 var(--a2);
  border: 0;
  background: var(--flaeche);
  color: var(--text-2);
  font-weight: 600;
  cursor: pointer;
}
.sprache + .sprache, .filter-knopf + .filter-knopf { border-left: 1px solid var(--linie-stark); }
.sprache[aria-pressed="true"], .filter-knopf[aria-pressed="true"] { background: var(--akzent); color: #ffffff; }
.sprache:focus-visible, .filter-knopf:focus-visible { outline-offset: -3px; }

/* Knoepfe und Felder */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--a4);
  border: 1px solid var(--akzent);
  border-radius: var(--radius-s);
  background: var(--akzent);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--schatten-1);
}
.knopf:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); }
.knopf:disabled { opacity: 0.6; cursor: progress; }
.knopf--leise { background: var(--flaeche); border-color: var(--linie-stark); color: var(--text); min-height: 34px; padding: 0 var(--a3); }
.knopf--leise:hover { background: var(--flaeche-hover); border-color: var(--linie-stark); }

/* Anmelde- und Link-Seite: eine Karte in der Mitte */
.mitte { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: var(--a6) var(--a4); }
.karte {
  width: 100%;
  max-width: 28rem;
  padding: var(--a6);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
}
.text { margin-top: var(--a2); color: var(--text-2); }
.formular { display: flex; flex-direction: column; gap: var(--a2); margin-top: var(--a5); }
.formular label { font-weight: 600; }
.formular input {
  min-height: 44px;
  padding: 0 var(--a3);
  border: 1px solid var(--rand-feld);
  border-radius: var(--radius-s);
  background: var(--flaeche);
}
.formular .knopf, .karte > .knopf { margin-top: var(--a3); width: 100%; }
.karte > .knopf { margin-top: var(--a5); }
.hinweis { margin-top: var(--a4); color: var(--text-gedaempft); font-size: 0.8125rem; }
.meldung:empty { display: none; }
.meldung { margin-top: var(--a4); padding: var(--a3); border-radius: var(--radius-s); background: var(--akzent-hauch); }
.meldung--erfolg { background: var(--gruen-hauch); color: var(--gruen); }
.meldung--fehler { background: var(--rot-hauch); color: var(--rot); }

/* Portal */
.inhalt { flex: 1; width: 100%; max-width: 56rem; margin: 0 auto; padding: var(--a5) var(--a4) var(--a6); }
.wer { margin-bottom: var(--a4); color: var(--text-gedaempft); font-size: 0.8125rem; overflow-wrap: anywhere; }
.wer-adresse { color: var(--text-2); font-weight: 600; }
.leer { margin-top: var(--a5); color: var(--text-gedaempft); }
.vorgaenge { display: flex; flex-direction: column; gap: var(--a3); margin-top: var(--a5); }
.vorgang {
  display: block;
  padding: var(--a4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
  color: var(--text);
  text-decoration: none;
}
.vorgang:hover { border-color: var(--linie-stark); background: var(--flaeche-hover); color: var(--text); }
.vorgang-titel { display: block; font-weight: 600; color: var(--akzent); overflow-wrap: anywhere; }
.vorgang-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--a2); }
.vorgang-kopf .vorgang-titel { min-width: 0; }
.vorgang-haendler { display: block; color: var(--text-2); font-size: 0.8125rem; }
.vorgang-daten, .daten { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a5); margin-top: var(--a2); font-size: 0.8125rem; }
.vorgang-daten dt, .daten dt { color: var(--text-gedaempft); }
.vorgang-daten dd, .daten dd { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.daten { margin-top: var(--a3); }

.zurueck { display: inline-block; margin-bottom: var(--a4); }
.verlauf { display: flex; flex-direction: column; gap: var(--a3); margin-top: var(--a3); }
.nachricht {
  padding: var(--a4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  max-width: 44rem;
}
.nachricht--shopfair { border-left: 3px solid var(--akzent); }
.nachricht--sie { align-self: flex-end; background: var(--akzent-hauch); border-color: var(--linie-stark); }
.nachricht-kopf { color: var(--text-gedaempft); font-size: 0.8125rem; }
.nachricht-kopf strong { color: var(--text); }
.nachricht-text { margin-top: var(--a2); white-space: pre-wrap; overflow-wrap: anywhere; }
.anhaenge { margin-top: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--linie); font-size: 0.8125rem; }
.anhaenge-titel { font-weight: 600; color: var(--text-2); }
.anhaenge li { margin-top: 4px; overflow-wrap: anywhere; }
.anhang-groesse { color: var(--text-gedaempft); }

/* Plan 6b: Auswahl der Liste, Status, Vermerke und Antwort */
.filter { margin-top: var(--a4); }
.filter-knopf { padding: 0 var(--a3); }
.status, .marke-neu {
  display: inline-block;
  padding: 1px var(--a2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.status { background: var(--akzent-hauch); color: var(--akzent); }
.status--in_pruefung { background: var(--gelb-hauch); color: var(--gelb); }
.status--beim_hersteller { background: var(--flaeche-hover); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.status--erledigt { background: var(--gruen-hauch); color: var(--gruen); }
.status--abgelehnt { background: var(--rot-hauch); color: var(--rot); }
.marke-neu { background: var(--akzent); color: #ffffff; }

.status-bereich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3); margin-top: var(--a4); }
.status-bereich label { font-weight: 600; }
.status-bereich .meldung { flex-basis: 100%; margin-top: 0; }
.wahl, .antwort textarea {
  border: 1px solid var(--rand-feld);
  border-radius: var(--radius-s);
  background: var(--flaeche);
}
.wahl { min-height: 40px; padding: 0 var(--a3); }
.wahl:disabled { opacity: 0.6; cursor: progress; }

.vermerk { align-self: center; color: var(--text-gedaempft); font-size: 0.8125rem; text-align: center; }

.antwort {
  display: flex;
  flex-direction: column;
  gap: var(--a2);
  margin-top: var(--a5);
  padding: var(--a4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
}
.antwort h2 { margin-top: 0; }
.antwort label { margin-top: var(--a2); font-weight: 600; }
.antwort textarea { min-height: 8rem; padding: var(--a3); resize: vertical; }
.antwort input[type="file"] { max-width: 100%; font-size: 0.8125rem; }
.antwort .hinweis { margin-top: 0; }
.antwort .knopf { align-self: flex-start; margin-top: var(--a2); }
.antwort .meldung { margin-top: 0; }

/* Plan 6c: Reklamation an den Hersteller */
.nachricht--hersteller { border-left: 3px solid var(--linie-stark); }
.reklamation { margin-top: var(--a5); }
.reklamation-liste { display: flex; flex-direction: column; gap: var(--a2); margin-top: var(--a3); }
.reklamation-liste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3); padding: var(--a3);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-s); font-size: 0.8125rem;
}
.reklamation-an { font-weight: 600; overflow-wrap: anywhere; }
.reklamation .knopf--leise { margin-top: var(--a3); }
.reklamation-liste .knopf--leise { margin-top: 0; }
.zustand--fehler, .zustand--unklar, .zustand--abgelehnt { background: var(--rot-hauch); color: var(--rot); }
.zustand--gesendet { background: var(--gruen-hauch); color: var(--gruen); }
.zustand--wartet, .zustand--laeuft { background: var(--gelb-hauch); color: var(--gelb); }
.antwort h3 { margin: 0; font-size: 1rem; }
.antwort input[type="email"], .antwort input[type="text"] {
  min-height: 40px; padding: 0 var(--a3); border: 1px solid var(--rand-feld); border-radius: var(--radius-s); background: var(--flaeche);
}
.uebersetzung { display: flex; flex-direction: column; gap: var(--a2); }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--a2); }
.antwort .knoepfe .knopf { margin-top: var(--a2); }

.fuss { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--a4); padding: var(--a5) var(--a4); font-size: 0.8125rem; }
.fuss a { color: var(--text-gedaempft); }

@media (max-width: 480px) {
  .karte { padding: var(--a5) var(--a4); }
  .logo { height: 24px; }
  .nachricht { max-width: none; }
}