/* =========================================================================
   PROJEKTE 3
   Eine Seite, ein schwebender Knopf für die Liste. Auf dem Handy wie am
   Schreibtisch derselbe Aufbau - nur die Breiten ändern sich.
   ========================================================================= */

/* Siehe Wissen: In einer Flex-Spalte verhindert "margin: 0 auto" das
   Strecken auf volle Breite - deshalb die Breite ausdrücklich setzen. */
.p3-inhalt {
  width: 100%;
  box-sizing: border-box;
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 16px 120px;   /* unten Platz für den schwebenden Knopf */
}

.p3-kopf { margin-bottom: 18px; }
.p3-kopf h2 { margin: 0 0 4px; font-size: 1.5rem; }
.p3-strasse {
  display: inline-block;
  padding: 3px 9px;
  margin: 2px 0;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 7px;
}

.p3-block {
  border: 1px solid var(--border, #ddd6cd);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.p3-block-titel {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b645d;
}

/* --- Unterlagen --- */
.p3-hochladen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.p3-pdf-knopf { cursor: pointer; }
.p3-upload-stand { font-size: 0.9rem; color: #6b645d; margin-bottom: 8px; }

.p3-dokument { border-top: 1px solid #f0ece6; padding-top: 10px; margin-top: 10px; }
.p3-dokument-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.p3-dokument-art {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}
/* Auftrag und eigene Arbeitsmappe farblich trennen - man greift oft
   schnell danach und soll nicht lesen müssen. */
.p3-art-auftrag { background: #e3edf6; color: #234a6b; }
.p3-art-arbeitsmappe { background: #e5f2e8; color: #2f6b43; }
.p3-dokument-name { font-size: 0.88rem; color: #6b645d; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.p3-seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.p3-seite {
  position: relative;
  padding: 0;
  border: 1px solid #e2dcd4;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.p3-seite img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.p3-seite-nr {
  position: absolute;
  bottom: 4px;
  right: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.76rem;
  font-weight: 700;
}

/* --- Eingaben --- */
.p3-felder { display: flex; flex-wrap: wrap; gap: 12px; }
.p3-feld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: #6b645d; }
.p3-feld input, .p3-feld select {
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #23201d;
  border: 1px solid var(--border, #ddd6cd);
  border-radius: 8px;
  background: #fff;
}

.p3-mitarbeiterliste { display: flex; flex-wrap: wrap; gap: 8px; }
.p3-mitarbeiter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border, #ddd6cd);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}
.p3-mitarbeiter.ist-dabei { background: #e5f2e8; border-color: #9ec9a8; font-weight: 700; }
.p3-mitarbeiter input { width: 18px; height: 18px; margin: 0; }

.p3-abschluss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.p3-fertig-btn { min-height: 52px; padding: 0 28px; font-size: 1.05rem; }

/* --- Schwebender Knopf und Liste --- */
.p3-schwebe-btn {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: #2f6b43;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* "hidden" muss hier ausdrücklich greifen: Die Anzeigeregel darunter würde
   es sonst überstimmen, und die Liste läge immer offen. */
.p3-liste-schicht[hidden] { display: none !important; }
.p3-liste-schicht {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(20, 18, 16, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.p3-liste-fenster {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: 85vh;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 14px 14px 0 0;
}
@media (min-width: 700px) {
  .p3-liste-schicht { align-items: center; }
  .p3-liste-fenster { border-radius: 14px; max-height: 80vh; }
}
.p3-liste-kopf { display: flex; align-items: center; justify-content: space-between; }
.p3-liste-kopf h2 { margin: 0; font-size: 1.1rem; }
.p3-neu-btn { width: 100%; min-height: 48px; margin: 10px 0 8px; }
.p3-suche {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 12px;
  margin-bottom: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--border, #ddd6cd);
  border-radius: 9px;
}
.p3-liste { overflow-y: auto; }
.p3-eintrag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border, #ddd6cd);
  border-radius: 9px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
}
.p3-eintrag.ist-offen { border-color: #9ec9a8; background: #f4faf5; }
.p3-eintrag-name { font-weight: 700; font-size: 1rem; }
.p3-nummer {
  align-self: flex-start;
  padding: 0 8px;
  border: 1px solid #cfe0d4;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2f6b43;
}

/* --- Seite groß ansehen ---
   Mit zwei Fingern vergrößern: Das Bild darf über den Bildschirm
   hinauswachsen, der Kasten lässt sich in beide Richtungen schieben. */
.p3-gross {
  position: fixed;
  inset: 0;
  z-index: 2400;
  background: rgba(15, 14, 13, 0.94);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
}
.p3-gross img { max-width: 100%; height: auto; }
.p3-gross-zu {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 2410;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem;
  cursor: pointer;
}

/* Projektkacheln deutlich umrahmt.
 *
 * Mit Auftraggeber in DESSEN Farbe - so sieht man schon an der Umrandung,
 * mit wem man es zu tun hat, ohne die Vorschaufelder zu lesen. Ohne
 * Auftraggeber bleibt es schwarz: Irgendeine kräftige Umrandung braucht die
 * Kachel, damit sie sich auf dem Handy vom hellen Untergrund abhebt. */
.wi-kachel.p3-kachel {
  border-width: 2px;
  border-color: #23201d;
}
.wi-kachel.p3-kachel.hat-auftraggeber,
.wi-kachel.p3-kachel.hat-auftraggeber:hover {
  border-color: var(--auftraggeber-farbe);
}
.wi-kachel.p3-kachel:hover { border-color: #23201d; }

/* Der Suchknopf, wie in der Fotogalerie. */
.wi-schwebe-suche { bottom: calc(144px + env(safe-area-inset-bottom, 0px)); background: #3f72b5; }
.wi-schwebe-suche svg { display: block; }

/* Kategoriekacheln schwarz umrandet - das trennt sie deutlich voneinander.
   Ausnahme: "Rechnung offen" mit Inhalt, die bleibt rot (Regel weiter
   oben, sie kommt später und gewinnt deshalb). */
.wi-kachel.p3-kategorie { border-width: 2px; border-color: #23201d; }
.wi-kachel.p3-kategorie:hover { border-color: #23201d; }

/* --- "Rechnung offen" faellt auf, solange etwas darin liegt ---
   Rot umrandet und mit rotem Indikator. Ist die Kategorie leer, bleibt sie
   unauffällig - dann gibt es ja nichts zu tun. Weiß auf diesem Rot ergibt
   6,0:1 Kontrast, also reichlich. */
.wi-kachel.ist-offen-rechnung {
  border-width: 3px;
  border-color: #b5342c;
}
.wi-kachel.ist-offen-rechnung:hover { border-color: #b5342c; }
.wi-kachel.ist-offen-rechnung .wi-kachel-seiten {
  background: #b5342c;
  color: #fff;
}


/* Rückmeldung beim Zuweisen von Kategorie und Auftraggeber. */
.p3-merker { margin: 8px 0 0; color: #2f6b43; font-weight: 600; }
.p3-merker.ist-fehler { color: #b5342c; }
.p3-merker[hidden] { display: none; }
.wi-schwebe[hidden] { display: none; }


/* --- Die vier Vorschaufelder einer KATEGORIEkachel ---
   Sie zeigen Kunde, Straße und Etage der vier obersten Projekte. Jedes Feld
   steht für ein eigenes Projekt, deshalb lohnt sich Text: Vier Farbflächen
   sagten nur, welche Auftraggebertypen vorkommen; vier Namen sagen, WELCHE
   Projekte oben liegen.

   Lesbar ist das auf dem Handy nicht, und das soll es auch nicht sein - man
   erkennt die Form und tippt zum Lesen hinein. Auf dem Schreibtisch, wo die
   Felder deutlich größer sind, lässt es sich lesen.

   Die Schrift wächst deshalb MIT dem Feld: 1cqw ist ein Hundertstel seiner
   Breite. Ohne diese Bindung wäre die Schrift auf dem Handy entweder
   lächerlich groß oder am Schreibtisch unleserlich klein. Dafür muss das
   Feld selbst Bezugsgröße sein ("container-type") - gesetzt wird das NUR an
   den Textfeldern, nicht an allen: Dieselbe Klasse ".wi-mini-feld" benutzen
   auch Wissen und Fotogalerie, und dort stehen Bilder darin.

   Diese Regeln stehen bewusst HIER und nicht in wissen/assets/style.css:
   Jene Datei teilen sich alle drei Bereiche. */
.wi-mini-feld.p3-mini-text {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.15em;
  padding: 6%;
  /* Der Text darf nie über die abgerundete Ecke hinausragen. */
  overflow: hidden;
  /* Weiß als Grundton. Darüber legt der Browser die Auftraggeberfarbe als
     Hauch - sie kommt als "background" am Element selbst, siehe
     p3HauchFarbe() in app.js. Ohne bekannten Auftraggeber bleibt es weiß. */
  background: #fff;
  /* Mittig, waagerecht wie senkrecht: Die drei Zeilen sind verschieden
     lang, linksbündig stünden sie als ausgefranster Block in der Ecke. */
  text-align: center;
  line-height: 1.15;
}
.wi-mini-feld.p3-mini-text > span {
  display: block;
  /* Volle Breite, damit das Abschneiden langer Namen greift: Ein Element,
     das sich nach seinem Inhalt richtet, wird nie zu schmal und bekommt
     deshalb nie die drei Punkte. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Rückfall für Browser ohne Container-Abfragen: feste, sehr kleine
     Größen. Sie werden unten überschrieben, wo es geht. */
  font-size: 7px;
}
.p3-mini-kunde   { font-weight: 700; color: #23201d; }
.p3-mini-strasse { font-weight: 600; color: #3f3a35; }
.p3-mini-etage   { font-weight: 400; color: #6b645d; }

@supports (font-size: 1cqw) {
  /* Obergrenzen, damit die Schrift in einer sehr breiten Kachel am
     Schreibtisch nicht ins Klobige wächst.

     Die Auswahl ist ABSICHTLICH so umständlich geschrieben: Der Rückfall
     oben steht an ".wi-mini-feld.p3-mini-text > span" und wiegt damit
     schwerer als ein einzelner Klassenname. Stünde hier nur
     ".p3-mini-kunde", bliebe es bei den 7 Pixeln - die Regel hier käme
     gar nicht zum Zug. Genau das war beim ersten Versuch der Fall. */
  .wi-mini-feld.p3-mini-text > .p3-mini-kunde   { font-size: min(13cqw, 0.82rem); }
  .wi-mini-feld.p3-mini-text > .p3-mini-strasse { font-size: min(11.5cqw, 0.74rem); }
  .wi-mini-feld.p3-mini-text > .p3-mini-etage   { font-size: min(10.5cqw, 0.68rem); }
}