/* Verwaltung von konfigurator.textil.team – Markenfarben aus site/content/brand.json, ohne Fremdquellen */
:root {
  --t: #1f1a1d; --m: #6b5a64; --f: #faf5f8; --flaeche: #f2e1eb; --l: #e7d4df; --l2: #f0e4eb;
  --primaer: #56384b; --akzent: #7a4b69; --mauve: #a0738f; --blau: #7a4b69;
  --rot: #b42318; --gelb: #fff4d6; --gruen: #e7f6ec;
  --radius: 14px; --schatten: 0 1px 2px rgb(86 56 75 / 0.05), 0 6px 20px rgb(86 56 75 / 0.06);
  --schrift: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--f); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--schrift); color: var(--t); background: var(--f); line-height: 1.45; font-size: 15px; }
a { color: var(--akzent); text-underline-offset: 0.15em; }
h1 { font-size: 1.6rem; margin: 0 0 0.5rem; letter-spacing: -0.015em; }
h2 { font-size: 1.1rem; margin: 0 0 0.4rem; }
code { font-size: 0.85em; background: var(--l2); padding: 0.05rem 0.35rem; border-radius: 5px; }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.78rem; }
.v-innen { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 1rem; }

/* Obere Leiste: alle Systeme der TEXTIL-Team-Familie */
.v-systeme { background: var(--primaer); color: #fff; font-size: 0.8rem; }
.v-systeme .v-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; min-height: 2.1rem; }
.v-systeme__titel { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.v-systeme nav { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; }
.v-systeme a { color: #fff; text-decoration: none; opacity: 0.8; padding: 0.15rem 0; }
.v-systeme a:hover { opacity: 1; text-decoration: underline; }
.v-systeme a[aria-current] { opacity: 1; font-weight: 600; }

/* Kopf mit Logo, Benutzer und Bereichen */
.v-kopf { background: #fff; border-bottom: 1px solid var(--l); position: sticky; top: 0; z-index: 10; }
.v-kopf__oben { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; padding-block: 0.7rem; }
.v-marke { display: flex; align-items: center; gap: 0.75rem; color: var(--t); text-decoration: none; }
.v-marke img { height: 2.6rem; width: auto; display: block; }
.v-marke span { display: grid; line-height: 1.15; font-size: 0.85rem; color: var(--m); }
.v-marke strong { font-size: 1.05rem; color: var(--primaer); }
.v-ich { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; font-size: 0.85rem; color: var(--m); }
.v-ich__name { color: var(--t); font-weight: 600; }
.v-rolle { display: inline-block; margin-left: 0.3rem; font-size: 0.72rem; font-weight: 600; padding: 0.08rem 0.5rem; border-radius: 999px; background: var(--flaeche); color: var(--primaer); }
.v-ich a { text-decoration: none; }
.v-ich a:hover { text-decoration: underline; }
.v-ich form { margin: 0; }
.v-link { background: none; border: 0; padding: 0; color: var(--akzent); cursor: pointer; font: inherit; }
.v-link:hover { text-decoration: underline; }
.v-nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.v-nav::-webkit-scrollbar { display: none; }
.v-nav a { flex: none; color: var(--m); text-decoration: none; padding: 0.6rem 0.75rem 0.55rem; border-bottom: 3px solid transparent; font-weight: 500; white-space: nowrap; }
.v-nav a:hover { color: var(--primaer); background: var(--f); }
.v-nav a[aria-current="page"] { color: var(--primaer); border-bottom-color: var(--mauve); font-weight: 650; }

.v-main { width: 100%; max-width: 76rem; margin: 0 auto; padding: 1.75rem 1rem 3rem; display: grid; gap: 1.1rem; align-content: start; flex: 1; }
.v-fuss { border-top: 1px solid var(--l); color: var(--m); font-size: 0.8rem; padding-block: 1rem; background: #fff; }

.v-karte { background: #fff; border: 1px solid var(--l2); border-radius: var(--radius); padding: 1.15rem 1.3rem; display: grid; gap: 0.7rem; box-shadow: var(--schatten); }
.v-schmal { max-width: 30rem; }
.v-titelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.v-titelzeile h1 { margin: 0 auto 0 0; }
.v-titelzeile form { margin: 0; }
.v-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.85rem; }
.v-kachel { display: grid; gap: 0.2rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--l2); border-radius: 12px; color: var(--t); text-decoration: none; box-shadow: var(--schatten); transition: border-color 0.15s ease, transform 0.15s ease; }
.v-kachel:hover { border-color: var(--mauve); transform: translateY(-1px); }
.v-kachel strong { font-size: 1.7rem; color: var(--primaer); }
.v-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0; }
.v-zeile select, .v-zeile input[type="number"] { max-width: 20rem; }

.v-hinweis { margin: 0; padding: 0.6rem 0.9rem; border-radius: 10px; background: var(--gruen); }
.v-fehler { margin: 0; padding: 0.6rem 0.9rem; border-radius: 10px; background: #fdecea; color: var(--rot); font-weight: 600; }
.v-fehler[hidden] { display: none; }
.v-klein { font-size: 0.85rem; color: var(--m); font-weight: 400; margin: 0; }
.v-marke-offen { display: inline-block; justify-self: start; font-size: 0.75rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--gelb); color: #7a5300; font-weight: 600; }
.v-inaktiv { opacity: 0.55; }

.v-formular { margin: 0; }
.v-formular label { display: grid; gap: 0.25rem; font-weight: 600; font-size: 0.9rem; }
.v-formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.v-gitter { display: grid; gap: 0.8rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); align-items: start; }
.v-breit { grid-column: 1 / -1; }
.v-gruppe { border: 1px solid var(--l) !important; border-radius: 10px; padding: 0.6rem 0.8rem !important; display: grid; gap: 0.5rem; }
.v-gruppe legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.3rem; }
.v-haken-liste { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.v-formular .v-haken { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  font: inherit; padding: 0.5rem 0.65rem; border: 1px solid var(--l); border-radius: 9px; background: #fff; width: 100%; min-width: 0;
}
input:hover, select:hover, textarea:hover { border-color: var(--mauve); }
input[readonly] { background: var(--f); color: var(--m); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--akzent); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.v-knopf { display: inline-block; font: inherit; font-weight: 600; padding: 0.55rem 1.1rem; border-radius: 999px; border: 0; background: var(--primaer); color: #fff; cursor: pointer; text-decoration: none; justify-self: start; transition: background 0.15s ease; }
.v-knopf:hover { background: var(--akzent); }
.v-knopf--zweit { background: #fff; color: var(--primaer); border: 1px solid var(--primaer); }
.v-knopf--zweit:hover { background: var(--flaeche); }
.v-knopf:disabled { opacity: 0.5; cursor: default; }

.v-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; background: #fff; border: 1px solid var(--l2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.v-tabelle th, .v-tabelle td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--l2); vertical-align: top; }
.v-tabelle tbody tr:last-child td { border-bottom: 0; }
.v-tabelle thead th { font-size: 0.72rem; color: var(--m); background: var(--f); font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; }
.v-tabelle tbody tr:hover td { background: #fdfafc; }
.v-leer td { text-align: center; color: var(--m); padding: 2rem 1rem; }
.v-staffeln input[type="number"] { max-width: 7rem; }
.v-staffeln input[type="text"] { max-width: 7rem; }
.v-neu td { background: var(--f); }
.v-protokoll td { font-size: 0.8rem; }
.v-tabelle .v-zahl { white-space: nowrap; text-align: right; }
.v-filter { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.v-filter a[aria-current="page"] { font-weight: 700; color: var(--t); }
@media (max-width: 40rem) {
  .v-tabelle { display: block; overflow-x: auto; }
  .v-ich { margin-left: 0; }
  .v-marke img { height: 2.2rem; }
  .v-raster { grid-template-columns: repeat(2, 1fr); }
}
.v-abweichung > * { background: #fdecea; }
.v-diff { color: var(--rot); font-weight: 700; }