/* DS Lead-Radar, Oberflaeche.
   Farben, Typografie und Abstaende nach dem DS Brand & Style Guide
   (docs/brand/ds-tokens.json im KAM-Board). Petrol traegt die Flaechen,
   DS-Gruen ist das Signal, Jade der Zweitakzent. Neon lebt auf Dunkel, auf
   Weiss nur als Flaeche und nie als Text. Zahlen immer tabellarisch. */

:root {
  --ds-green: #00e696;
  --ds-green-text: #007d52;
  --ds-green-solid: #00b878;
  --ds-green-tint: #d6fbec;
  --jade: #28f0d9;
  --jade-tint: #d7fbf3;
  --petrol: #004750;
  --petrol-tief: #00373e;
  --petrol-950: #00272c;
  --n1: #000; --n2: #343a3f; --n3: #697077; --n4: #a2a9b0;
  --n5: #ccc; --n6: #e5e5e5; --n7: #f2f2f2;
  --hell: #fafafb; --weiss: #fff;
  --warnung: #f2a93b; --gefahr: #e5484d; --info: #0e7c93;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --schatten: 0 1px 2px rgba(0,55,62,.06), 0 8px 24px rgba(0,55,62,.05);
  --schatten-hoch: 0 2px 4px rgba(0,55,62,.08), 0 16px 40px rgba(0,55,62,.08);
  --tempo: 200ms; --kurve: cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Inter, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--hell);
  color: var(--n2);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.zahl, .kennzahl-wert, td .zahl { font-variant-numeric: tabular-nums; }

/* Kopfband ---------------------------------------------------------------- */
header {
  background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-tief) 60%, var(--petrol-950) 100%);
  color: var(--weiss);
  padding: 22px 32px;
  position: relative;
  overflow: hidden;
}
header::after {
  /* Ein feiner Jade-Schimmer, wie im Styleguide fuer dunkle Flaechen */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 200px at 88% -40%, rgba(40,240,217,.18), transparent 70%);
  pointer-events: none;
}
.kopf-inhalt {
  max-width: 1560px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.marke { display: flex; align-items: center; gap: 12px; }
.marke h1 {
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
.marke .sub { color: rgba(255,255,255,.72); font-size: 12.5px; display: block; }
.marke .pin { display: flex; flex: 0 0 auto; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.plakette {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26); color: rgba(255,255,255,.9);
}
.plakette.an { background: var(--ds-green); color: var(--petrol-tief); border-color: transparent; }
.plakette.aus { opacity: .55; }

main { max-width: 1560px; margin: 0 auto; padding: 24px 32px 80px; }

/* Kennzahlen -------------------------------------------------------------- */
/* Feste Spaltenzahl statt auto-fit: Sechs Kacheln brachen sonst in fuenf
   plus eine um, und die einzelne Kachel unten sah aus wie ein Fehler. */
.kennzahlen {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 14px; margin-bottom: 22px;
}
@media (max-width: 1180px) { .kennzahlen { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .kennzahlen { grid-template-columns: repeat(2, 1fr); } }
.kennzahl {
  background: var(--weiss); border: 1px solid var(--n6); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--schatten);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.kennzahl:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.kennzahl-wert {
  font-family: Archivo, Inter, sans-serif;
  font-size: 30px; font-weight: 800; line-height: 1.05; color: var(--petrol);
  letter-spacing: -.02em;
}
.kennzahl.gut .kennzahl-wert { color: var(--ds-green-text); }
.kennzahl-schild { font-size: 12px; color: var(--n3); margin-top: 5px; }

/* Karten ------------------------------------------------------------------ */
.karte {
  background: var(--weiss); border: 1px solid var(--n6); border-radius: var(--r-lg);
  box-shadow: var(--schatten); padding: 22px 24px; margin-bottom: 20px;
}
.karte > h2 {
  font-size: 16px; color: var(--petrol); letter-spacing: -.01em; margin-bottom: 4px;
}
.karte .hinweis { color: var(--n3); font-size: 13.5px; margin-bottom: 16px; max-width: 82ch; }

/* Steuerung --------------------------------------------------------------- */
/* Oben ausgerichtet, nicht unten: Die Zielgruppen-Spalte ist die hoechste,
   und mit align-items:end rutschten die uebrigen Beschriftungen nach unten. */
.steuerung { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr auto; gap: 20px;
  align-items: start; }
.steuerung > div:last-child { align-self: end; }
@media (max-width: 1000px) { .steuerung { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .steuerung { grid-template-columns: 1fr; } }

/* Gilt auch fuer span.feld: Die Zielgruppen-Ueberschrift ist kein label,
   weil sie zu einer Gruppe von Kaestchen gehoert und nicht zu einem einzelnen
   Feld. Ohne diese Zeile stand sie als einzige Beschriftung klein geschrieben
   zwischen REGION und TREFFER JE ORT. */
.feld {
  display: block; font-size: 11px; font-weight: 700; color: var(--n3);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 7px;
}
select, input[type="number"], input[type="search"], input[type="text"], input[type="password"] {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14.5px; color: var(--n2);
  background: var(--weiss); border: 1px solid var(--n4); border-radius: var(--r-sm);
  transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
select:hover, input:hover { border-color: var(--n3); }
select:focus, input:focus {
  outline: none; border-color: var(--petrol);
  box-shadow: 0 0 0 3px rgba(0,71,80,.13);
}
select[multiple] { min-height: 104px; }

.schalter { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 14px; }
.schalter input { width: 18px; height: 18px; accent-color: var(--petrol); }

button {
  font: inherit; font-weight: 600; padding: 11px 20px; min-height: 44px;
  border: none; border-radius: var(--r-sm); background: var(--petrol); color: var(--weiss);
  cursor: pointer;
  transition: background var(--tempo) var(--kurve), transform var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve);
}
button:hover:not(:disabled) { background: var(--petrol-tief); box-shadow: var(--schatten); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { background: var(--n4); cursor: not-allowed; }
button.zweit { background: var(--weiss); color: var(--petrol); border: 1px solid var(--n5); }
button.zweit:hover:not(:disabled) { background: var(--jade-tint); border-color: var(--petrol); }
button.signal { background: var(--ds-green-solid); }
button.signal:hover:not(:disabled) { background: var(--ds-green-text); }

/* Fortschritt ------------------------------------------------------------- */
.protokoll {
  background: var(--petrol-950); color: #cdeee6; border-radius: var(--r-md);
  padding: 15px 17px; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 12.5px; line-height: 1.75; max-height: 280px; overflow-y: auto;
}
.protokoll div:last-child { color: var(--ds-green); }
.balken { height: 4px; background: var(--n6); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--petrol), var(--ds-green)); transition: width 400ms var(--kurve); }

/* Reiter ------------------------------------------------------------------ */
.reiter { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--n6); }
.reiter button {
  background: transparent; color: var(--n3); border: none; border-bottom: 2.5px solid transparent;
  border-radius: 0; min-height: 42px; padding: 9px 18px; font-weight: 600;
}
.reiter button:hover { background: transparent; color: var(--petrol); box-shadow: none; }
.reiter button.aktiv { color: var(--petrol); border-bottom-color: var(--ds-green); }
.reiter button .anzahl {
  display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px;
  background: var(--n7); color: var(--n3); font-size: 12px; font-variant-numeric: tabular-nums;
}
.reiter button.aktiv .anzahl { background: var(--ds-green-tint); color: var(--ds-green-text); }

/* Werkzeugleiste ---------------------------------------------------------- */
.werkzeuge { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.werkzeuge input[type="search"] { max-width: 320px; }
.werkzeuge select { max-width: 210px; }
.werkzeuge .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.treffer-zahl { color: var(--n3); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Tabelle ----------------------------------------------------------------- */
.tabellenrahmen {
  overflow: auto; border: 1px solid var(--n6); border-radius: var(--r-md);
  max-height: 74vh;
}
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
thead th {
  background: var(--petrol); color: var(--weiss); text-align: left; padding: 12px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
thead th.sortierbar { cursor: pointer; user-select: none; }
thead th.sortierbar:hover { background: var(--petrol-tief); }
thead th .pfeil { opacity: .5; margin-left: 5px; font-size: 10px; }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--n6); vertical-align: top; }
/* Ohne feste Breiten zieht die laengste Begruendung die ganze Zeile auf, und
   eine Bildschirmhoehe zeigt nur noch zwei Anbieter. Am 06.08. im Browser
   gesehen: Zeilen von 250 Pixeln. */
table { table-layout: auto; }
tbody td:first-child { width: 66px; }
.firma-name { display: block; }
tbody tr td { max-width: 34ch; }
tbody tr { transition: background var(--tempo) var(--kurve); }
tbody tr:nth-child(even) { background: #fcfdfd; }
tbody tr:hover { background: var(--jade-tint); }
tbody tr.freigegeben { background: var(--ds-green-tint); }
tbody tr.klein td { opacity: .82; }

.firma-name { font-weight: 700; color: var(--n2); font-size: 14px; line-height: 1.3; }
.firma-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
a.domain { color: var(--info); text-decoration: none; font-size: 12.5px; }
a.domain:hover { text-decoration: underline; }

.score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 30px; font-weight: 800; border-radius: 8px;
  font-variant-numeric: tabular-nums; font-size: 15px;
}
.score.hoch { background: var(--ds-green-tint); color: var(--ds-green-text); }
.score.mittel { background: #fff3cd; color: #8a6d00; }
.score.niedrig { background: var(--n7); color: var(--n3); }

.prio { font-size: 12.5px; font-weight: 600; color: var(--n2); white-space: nowrap; }
.prio-a { color: var(--ds-green-text); }
.prio-b { color: var(--info); }

.marker {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}
.marker.klein { background: #fff3cd; color: #8a6d00; }
.marker.kunde { background: var(--ds-green-tint); color: var(--ds-green-text); }
.marker.lead { background: var(--jade-tint); color: var(--info); }
.marker.sperre { background: #fde7e9; color: var(--gefahr); }
/* Woher der Anbieter kam. Bewusst zurueckhaltend, es ist eine
   Herkunftsangabe und keine Warnung. */
.marker.quelle { background: var(--n7); color: var(--n3); font-weight: 600; }

.ampel { border-left: 3px solid transparent; padding-left: 10px; }
.ampel.gruen { border-left-color: var(--ds-green-solid); }
.ampel.gelb { border-left-color: var(--warnung); }
.ampel.rot { border-left-color: var(--n5); color: var(--n4); }
.wert-gross { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Der Beleg steht klein unter dem Wert und darf nie mehr Platz brauchen als
   der Wert selbst. */
.beleg {
  display: block; font-size: 11px; color: var(--n3); margin-top: 2px;
  line-height: 1.4; max-width: 32ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.beleg a { color: var(--info); text-decoration: none; }
.beleg a:hover { text-decoration: underline; }

/* Zwei Zeilen reichen fuer den Ueberblick, der ganze Text steht im
   Mauszeiger-Hinweis und in der Excel-Datei. */
.begruendung {
  color: var(--n2); font-size: 12.5px; line-height: 1.45; max-width: 34ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.begruendung.offen { -webkit-line-clamp: unset; }
td:has(> .begruendung) { cursor: pointer; }
.kontakt-zeile { font-size: 12.5px; line-height: 1.45; }
.kontakt-zeile .person { font-weight: 600; }

.leer-hinweis { padding: 56px 24px; text-align: center; color: var(--n3); }
.leer-hinweis strong { display: block; color: var(--n2); margin-bottom: 6px; font-size: 15px; }

/* Salesforce-Kasten bei Aussortierten -------------------------------------- */
.sf-kasten { font-size: 12.5px; line-height: 1.6; }
.sf-kasten dt { display: inline; color: var(--n3); }
.sf-kasten dd { display: inline; margin: 0 10px 0 3px; color: var(--n2); }
.sf-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--info); text-decoration: none;
}
.sf-link:hover { text-decoration: underline; }

/* Fusszeile --------------------------------------------------------------- */
.legende {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px;
  font-size: 12.5px; color: var(--n3);
}
.legende span { display: flex; align-items: center; gap: 7px; }
.legende i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.legende i.gruen { background: var(--ds-green-solid); }
.legende i.gelb { background: var(--warnung); }
.legende i.rot { background: var(--n5); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* Kriterien und Einstellungen ------------------------------------------- */

/* Einstellungen als Dialog aus dem Kopf, das Muster des KAM-Boards. */
.marke { display: flex; align-items: center; gap: 12px; }
.marke .pin { display: flex; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kopf-knopf {
  background: transparent; border: 1px solid rgba(255,255,255,.4);
  color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13.5px;
  min-height: 0; font-weight: 500;
}
.kopf-knopf:hover:not(:disabled) {
  background: transparent; border-color: var(--jade-bright, #28F0D9);
  color: var(--jade-bright, #28F0D9); transform: none; box-shadow: none;
}
/* [hidden] muss display:flex schlagen, sonst steht der Dialog beim Laden
   offen: das UA-hidden ist nur display:none und verliert gegen die
   spezifischere Klassen-Regel. */
.dialog-grund[hidden] { display: none; }
.dialog-grund {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,39,44,.55);
  backdrop-filter: blur(3px); display: flex; align-items: flex-start;
  justify-content: center; padding: 6vh 16px; overflow-y: auto;
}
.dialog {
  background: var(--weiss); border-radius: var(--r-md); width: min(880px, 100%);
  box-shadow: 0 24px 80px rgba(0,55,62,.35); margin-bottom: 6vh;
}
.dialog-kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 26px; border-bottom: 1px solid var(--n6);
}
.dialog-kopf h2 {
  font-family: Archivo, Inter, sans-serif; font-size: 19px; font-weight: 700;
  color: var(--petrol); letter-spacing: -.01em;
}
.dialog-zu {
  background: transparent; border: 1px solid var(--n5); color: var(--n3);
  border-radius: 50%; width: 34px; height: 34px; min-height: 0; padding: 0;
  font-size: 14px; line-height: 1;
}
.dialog-zu:hover:not(:disabled) {
  background: var(--hell); color: var(--petrol); border-color: var(--petrol);
  transform: none; box-shadow: none;
}
.dialog-leib { padding: 22px 26px 28px; }

/* Info-Buttons: kleine Kreise, die per Klick eine Sprechblase zeigen.
   Ueberall dort, wo jemand zum ersten Mal fragt: was sehe ich hier? */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; min-height: 0; padding: 0; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--n4); color: var(--n3);
  font-size: 11.5px; font-weight: 600; font-style: normal;
  vertical-align: 2px; margin-left: 6px; cursor: pointer;
}
.info:hover:not(:disabled) {
  /* Feste Werte statt nirgends definierter Variablen (Review-Befund
     06.08.): --gruen-flaeche und --gruen-text existierten nicht, der
     Hover fiel still auf Browser-Defaults zurueck. */
  background: #EFFEFB; border-color: #00E696;
  color: #004750; transform: none; box-shadow: none;
}
.tip-blase {
  position: absolute; z-index: 60; max-width: 380px; margin-top: 8px;
  background: var(--petrol); color: #fff; font-size: 13.5px; font-weight: 400;
  line-height: 1.5; padding: 12px 16px; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,55,62,.3); letter-spacing: 0;
  text-transform: none;
}

.grenze {
  display: grid; grid-template-columns: minmax(260px, 34%) 1fr; gap: 20px 28px;
  align-items: start; padding: 18px 20px; margin-bottom: 26px;
  background: var(--hell); border: 1px solid var(--n6);
  border-left: 4px solid var(--ds-green-solid); border-radius: var(--r-sm);
}
.grenze-regler { display: flex; align-items: center; gap: 12px; }
.grenze-regler input[type="range"] { flex: 1; width: auto; accent-color: var(--petrol); }
.grenze-regler output {
  font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: 22px;
  color: var(--petrol); font-variant-numeric: tabular-nums; min-width: 2.6ch;
  text-align: right;
}
.grenze-regler span { font-size: 14px; color: var(--n3); }
.grenze .hinweis { margin: 0; align-self: center; }
@media (max-width: 820px) { .grenze { grid-template-columns: 1fr; } }

.kriterien-block { margin-bottom: 28px; }
.kriterien-block h3 {
  font-family: Archivo, Inter, sans-serif; font-size: 17px; font-weight: 700;
  color: var(--petrol); letter-spacing: -.01em; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--ds-green-tint);
}
.kriterien-liste {
  display: grid; grid-template-columns: minmax(180px, 22%) 1fr;
  gap: 8px 24px; align-items: start;
}
.kriterien-liste dt {
  font-weight: 650; color: var(--n2); font-size: 14px; line-height: 1.45;
}
.kriterien-liste dd {
  color: var(--n3); font-size: 14px; line-height: 1.5; margin: 0;
}
@media (max-width: 720px) {
  .kriterien-liste { grid-template-columns: 1fr; gap: 2px 0; }
  .kriterien-liste dd { margin-bottom: 12px; }
}


/* Zielgruppen-Kästchen --------------------------------------------------- */
.wahlliste { display: flex; flex-direction: column; gap: 6px; }
.wahlliste .wahl {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--n6); border-radius: var(--r-sm);
  font-size: 14px; color: var(--n2); cursor: pointer; background: #fff;
  transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
  min-height: 44px;
}
.wahlliste .wahl:hover { border-color: var(--ds-green-solid); background: var(--hell); }
.wahlliste .wahl:has(input:checked) {
  border-color: var(--ds-green-solid); background: var(--ds-green-tint);
  color: var(--petrol); font-weight: 600;
}
.wahlliste input { width: 18px; height: 18px; accent-color: var(--ds-green-solid); }

.kennzahl-wert { white-space: nowrap; }
.kennzahl-dazu {
  margin-top: 4px; font-size: 11.5px; color: var(--n4); line-height: 1.35;
}

/* Der Hinweis unter der Region ist ein Satz, keine Tabellenzelle. Die
   Zwei-Zeilen-Grenze der Belege gilt fuer ihn nicht. */
.schalter .beleg { -webkit-line-clamp: unset; max-width: none; }