/* Mandanten-Portal des Vergabe-Monitors.
   Nuechtern gehalten: die Nutzer sind Handwerks- und Ingenieurbetriebe, die hier
   arbeiten und nicht browsen. Die Frist ist die wichtigste Zahl auf jeder Seite,
   deshalb ist sie die einzige, die Farbe bekommt. */

:root {
  --tinte:    #16202b;
  --grau:     #5a6672;
  --leise:    #7b8794;
  --linie:    #dfe4ea;
  --grund:    #ffffff;
  --seite:    #f4f6f8;
  --akzent:   #23486b;
  --akzent-hell: #eaf0f6;
  --knapp:    #8a2a2a;
  --knapp-grund: #fbeeee;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--seite);
  color: var(--tinte);
  font: 16.5px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

/* --- Kopf --- */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.3rem;
  background: var(--akzent);
  color: #fff;
}
.marke strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.marke span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.78;
  margin-top: 0.1rem;
}
.abmelden { color: #fff; opacity: 0.85; font-size: 0.9rem; }

/* --- Rahmen --- */

main {
  max-width: 54rem;
  margin: 0 auto;
  padding: 1.6rem 1.1rem 3rem;
}

.kopfzeile { margin-bottom: 1.1rem; }
.kopfzeile h1 { margin: 0 0 0.15rem; font-size: 1.4rem; font-weight: 600; }

h1 { font-size: 1.45rem; font-weight: 600; line-height: 1.3; }
h2 { font-size: 1rem; font-weight: 600; margin: 1.6rem 0 0.4rem; color: var(--grau); }

.leise { color: var(--leise); font-size: 0.9rem; }
.fliess { max-width: 34rem; }

.karte {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 5px;
  padding: 1.4rem 1.5rem;
}
.karte.schmal { max-width: 26rem; margin: 2rem auto; }
.karte h1 { margin-top: 0; }

/* --- Formular --- */

label {
  display: block;
  font-size: 0.85rem;
  color: var(--grau);
  margin: 1.1rem 0 0.3rem;
}
input[type="email"] {
  width: 100%;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}
input[type="email"]:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  border-color: var(--akzent);
}
button, .knopf {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.62rem 1.2rem;
  background: var(--akzent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .knopf:hover { background: #1b3855; }

.fehler {
  background: var(--knapp-grund);
  border-left: 3px solid var(--knapp);
  color: var(--knapp);
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
}

.zurueck { font-size: 0.92rem; text-decoration: none; }
.zurueck:hover { text-decoration: underline; }

/* --- Trefferliste --- */

ul.treffer { list-style: none; margin: 0; padding: 0; }
ul.treffer li { margin-bottom: 0.55rem; }
ul.treffer a {
  display: block;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 5px;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: inherit;
}
ul.treffer a:hover { border-color: var(--akzent); }
ul.treffer li.abgelaufen a { opacity: 0.55; }

.zeile-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.titel { font-weight: 500; line-height: 1.35; }
.score {
  flex: none;
  font-size: 0.76rem;
  color: var(--grau);
  background: var(--akzent-hell);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
}
.zeile-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  color: var(--grau);
}
.frist { font-weight: 500; }
.frist.knapp { color: var(--knapp); }
.frist.ohne { color: var(--leise); font-weight: 400; }

/* --- Detail --- */

.frist-gross {
  margin: 0.9rem 0 1.3rem;
  padding: 0.7rem 0.9rem;
  background: var(--akzent-hell);
  border-left: 3px solid var(--akzent);
  font-weight: 500;
}
.frist-gross.knapp {
  background: var(--knapp-grund);
  border-left-color: var(--knapp);
  color: var(--knapp);
}
.frist-gross.ohne {
  background: var(--seite);
  border-left-color: var(--linie);
  color: var(--leise);
  font-weight: 400;
}
.frist-gross .rest {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.8;
  margin-top: 0.1rem;
}

dl.daten {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.45rem 1rem;
  margin: 0;
  font-size: 0.94rem;
}
dl.daten dt { color: var(--grau); }
dl.daten dd { margin: 0; overflow-wrap: anywhere; }
dl.daten dd.cpv { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; }

.beschreibung {
  white-space: pre-wrap;
  font-size: 0.94rem;
  color: #2b3743;
  max-height: 32rem;
  overflow-y: auto;
}

.aktionen { margin-top: 1.6rem; }

/* --- Fuss --- */

footer {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0 1.1rem 2.5rem;
  color: var(--leise);
  font-size: 0.8rem;
}

@media (max-width: 34rem) {
  dl.daten { grid-template-columns: 1fr; gap: 0.1rem; }
  dl.daten dt { margin-top: 0.5rem; font-size: 0.82rem; }
  .zeile-kopf { flex-direction: column; }
}

/* ======================================================================
   Werkbank — geteilte Fläche, links Treffer, rechts Arbeitsvorrat
   ====================================================================== */

.kopf-rechts { display: flex; align-items: center; gap: 1rem; }

.layout-wahl { display: flex; gap: 0.15rem; }
.layout-wahl button {
  margin: 0;
  padding: 0.2rem 0.5rem;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 3px;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.layout-wahl button:hover { background: rgba(255,255,255,0.22); }
.layout-wahl button[aria-pressed="true"] { background: #fff; color: var(--akzent); }

/* Die Werkbank fuellt den Schirm; gescrollt wird in den Spalten, nicht auf
   der Seite. Sonst wandert beim Ziehen der Kopf weg. */
body:has(.werkbank) { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body:has(.werkbank) main { max-width: none; flex: 1; min-height: 0; padding: 0; }
body:has(.werkbank) footer { display: none; }

.werkbank {
  --breite-liste: 32%;
  --breite-mitte: 30%;
  display: grid;
  grid-template-columns: var(--breite-liste) 6px 1fr;
  height: 100%;
  min-height: 0;
  background: var(--linie);
  gap: 0;
}
.werkbank[data-layout="drei"] {
  grid-template-columns: var(--breite-liste) 6px var(--breite-mitte) 6px 1fr;
}
.werkbank[data-layout="zwei"] .vorschau-spalte,
.werkbank[data-layout="zwei"] .trenner[data-trenner="2"] { display: none; }
.werkbank[data-layout="schmal"] {
  grid-template-columns: 1fr;
  grid-template-rows: 45% 6px 1fr;
  overflow-y: auto;
}
.werkbank[data-layout="schmal"] .vorschau-spalte,
.werkbank[data-layout="schmal"] .trenner[data-trenner="2"] { display: none; }
.werkbank[data-layout="schmal"] .trenner { cursor: row-resize; }

.spalte {
  background: var(--grund);
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.flaeche-spalte { background: var(--seite); }

.spalten-kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem 0.55rem;
  background: inherit;
  border-bottom: 1px solid var(--linie);
}
.spalten-kopf h2 { margin: 0; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; color: var(--grau); }

/* --- Trennlinien --- */

.trenner { background: var(--linie); cursor: col-resize; }
.trenner:hover, .trenner:focus-visible { background: var(--akzent); outline: none; }
body.schiebt { cursor: col-resize; user-select: none; }

/* --- Trefferliste --- */

.trefferliste { list-style: none; margin: 0; padding: 0.4rem 0.5rem 2rem; }
.treffer-zeile {
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.15rem;
  touch-action: pan-y;
}
.treffer-zeile:hover { background: var(--akzent-hell); }
/* Liegt schon auf der Flaeche. Frueher 0.45 -- bei zehn gezogenen Treffern
   waren zehn Zeilen kaum noch lesbar, obwohl sie anklickbar blieben. Ein
   Randstreifen sagt dasselbe, ohne den Text zu opfern. */
.treffer-zeile.drauf { opacity: 0.72; box-shadow: inset 3px 0 0 var(--akzent); }
.treffer-zeile.wird-gezogen { opacity: 0.3; }

.zeile-oben { display: flex; align-items: flex-start; gap: 0.4rem; }
.zeilen-griff {
  flex: none;
  color: var(--linie);
  font-size: 0.8rem;
  line-height: 1.5;
  cursor: grab;
  /* Der einzige Fleck der Zeile, auf dem der Browser das Scrollen NICHT fuer
     sich reklamiert -- sonst bricht jeder Fingerzug ab, sobald er leicht
     vertikal wandert. */
  touch-action: none;
}
.treffer-zeile:hover .zeilen-griff { color: var(--leise); }
body.zieht .zeilen-griff { cursor: grabbing; }
.aufklappen {
  flex: 1;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-align: left;
  line-height: 1.32;
  cursor: pointer;
}
.rueber {
  flex: none;
  margin: 0;
  padding: 0.05rem 0.4rem;
  background: none;
  color: var(--leise);
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.95rem;
  line-height: 1.3;
}
.treffer-zeile:hover .rueber { border-color: var(--linie); color: var(--akzent); }
.rueber:hover { background: var(--akzent); color: #fff; border-color: var(--akzent); }

.zeile-unten {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--grau);
}
.zeile-unten .frist.knapp, .frist-zeile.knapp { color: var(--knapp); font-weight: 500; }
.zeile-unten .frist.vorbei, .frist-zeile.vorbei { color: var(--leise); text-decoration: line-through; }
.punkte { color: var(--leise); }

/* display:grid schlaegt das hidden-Attribut des Browsers -- ohne diese Zeile
   steht die Liste dauerhaft aufgeklappt da, und genau das soll sie nicht. */
.mehr[hidden] { display: none; }
.mehr {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0.1rem 0.6rem;
  margin: 0.4rem 0 0.2rem;
  font-size: 0.84rem;
}
.mehr dt { color: var(--leise); }
.mehr dd { margin: 0; overflow-wrap: anywhere; }
.trefferliste .leer { padding: 1rem 0.5rem; color: var(--leise); font-size: 0.9rem; }

/* --- Vorschau --- */

.vorschau-inhalt { padding: 0.9rem; }
.vorschau-inhalt h3 { margin: 0 0 0.5rem; font-size: 1.02rem; line-height: 1.3; }
.vorschau-inhalt .mehr { margin-top: 0.7rem; }

/* --- Arbeitsfläche --- */

.flaeche { padding: 0.6rem; flex: 1; }
.flaeche-spalte.bereit { background: var(--akzent-hell); }
.flaeche-spalte.bereit .flaeche { outline: 2px dashed var(--akzent); outline-offset: -6px; border-radius: 6px; }
.flaeche-leer[hidden] { display: none; }
.flaeche-leer { padding: 1.4rem 0.9rem; font-size: 0.88rem; max-width: 26rem; }

.karte-flaeche {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 5px;
  padding: 0.7rem 0.8rem 0.6rem;
  margin-bottom: 0.55rem;
  touch-action: pan-y;
}
.karte-flaeche.abgelaufen { opacity: 0.6; }
.karte-flaeche.wird-gezogen { opacity: 0.4; border-color: var(--akzent); }
.karte-flaeche.frisch { animation: karte-an 0.55s ease-out; }
@keyframes karte-an {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.karte-flaeche > header { cursor: grab; }
body.zieht .karte-flaeche > header { cursor: grabbing; }
.karte-flaeche header { display: flex; align-items: flex-start; gap: 0.45rem; }
.karte-flaeche h3 { flex: 1; margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.32; }
.griff, .weg {
  flex: none;
  margin: 0;
  padding: 0 0.25rem;
  background: none;
  border: 0;
  color: var(--leise);
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
}
.griff { cursor: grab; touch-action: none; }
body.zieht .griff { cursor: grabbing; }
.weg:hover { color: var(--knapp); background: none; }

.frist-zeile { margin: 0.4rem 0 0.5rem; font-size: 0.87rem; }
.kurzdaten {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0.08rem 0.6rem;
  margin: 0 0 0.6rem;
  font-size: 0.83rem;
}
.kurzdaten dt { color: var(--leise); }
.kurzdaten dd { margin: 0; overflow-wrap: anywhere; }

.status-wahl { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem; }
.status {
  margin: 0;
  padding: 0.22rem 0.55rem;
  background: var(--seite);
  color: var(--grau);
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 400;
}
.status:hover { background: var(--akzent-hell); }
.status.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.status.abgelehnt.an { background: var(--knapp); border-color: var(--knapp); }

.notiz-feld textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font: inherit;
  font-size: 0.87rem;
  resize: vertical;
  min-height: 2.6rem;
}
.notiz-feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }

.karten-fuss {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  margin-top: 0.45rem;
  font-size: 0.78rem;
}
.klein { font-size: 0.78rem; text-decoration: none; }
.klein:hover { text-decoration: underline; }
.gespeichert { color: var(--leise); margin-left: auto; }
.spur { color: var(--leise); }
.verborgen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Ziehen --- */

.zieh-geist {
  position: fixed;
  z-index: 100;
  max-width: 17rem;
  padding: 0.3rem 0.6rem;
  background: var(--akzent);
  color: #fff;
  border-radius: 4px;
  font-size: 0.82rem;
  pointer-events: none;
  box-shadow: 0 3px 12px rgba(0,0,0,0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.zieht { user-select: none; }

/* Schmale Schirme: die Aufteilung ist dort keine Wahl mehr. */
@media (max-width: 900px) {
  .werkbank, .werkbank[data-layout="zwei"], .werkbank[data-layout="drei"] {
    grid-template-columns: 1fr;
    grid-template-rows: 45% 6px 1fr;
    overflow-y: auto;
  }
  .werkbank .vorschau-spalte, .werkbank .trenner[data-trenner="2"] { display: none; }
  .werkbank .trenner { cursor: row-resize; }
  .layout-wahl { display: none; }
}

/* Die Knoepfe stecken in Formularen; die duerfen im Fluss nicht auftragen. */
.rueber-form, .weg-form { display: contents; }

.hinweis-naeherung {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--leise);
}
.nachfrage {
  margin: -0.2rem 0 0.5rem;
  font-size: 0.83rem;
  color: var(--grau);
}