/* ───────────────────────────────────────────────────────────────────────────
   Design-System "Industry" aus dem Claude-Design-Mockup, angepasst auf
   Baustellenbetrieb: größere Tap-Ziele, mehr Kontrast, nichts hinter Menüs.
   Referenz: Android-Tablet im Hochformat, 800 px.
   ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root {
  --bg: #f2f2f3;
  --flaeche: #e9e9ea;
  --text: #1d1f20;
  --akzent: #5980a6;
  --akzent-dunkel: #416180;
  --akzent-hell: #eef6ff;
  --linie: rgba(29, 31, 32, 0.16);
  --gut: #2e7d4f;
  --warnung: #b06a1c;

  --font-h: "Barlow Condensed", system-ui, sans-serif;
  --font: "Barlow", system-ui, sans-serif;

  /* Tap-Ziele: nie unter 56 px. Handschuhe, Sonne, unruhiger Untergrund. */
  --tap: 56px;
  --luft: 14px;
}

* , *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  /* Doppeltipp-Zoom aus — auf der Baustelle sonst ständig aus Versehen. */
  touch-action: manipulation;
}

body.gross { font-size: 20px; --tap: 64px; }

h1, h2, h3 { font-family: var(--font-h); font-weight: 600; line-height: 1.1; margin: 0 0 8px; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 10;
  /* `flex-wrap` und `justify-content` gehören zur Flaggenreihe: Wird es eng,
     rutscht sie in eine zweite Zeile und bleibt dort in der Ecke, statt die
     Flaggen unter 56 px zu drücken. Auf der ersten Zeile hat
     `justify-content` keine Wirkung — dort verteilt die Marke den Platz. */
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; justify-content: flex-end;
  padding: 10px var(--luft);
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid var(--linie);
}

.zurueck {
  width: var(--tap); height: var(--tap); flex: none;
  font-size: 26px; line-height: 1;
  background: transparent; color: var(--text);
  border: 1px solid var(--linie); border-radius: 0;
}
.zurueck:active { background: var(--flaeche); }

.marke { margin-right: auto; font-family: var(--font-h); line-height: 1.05; }
.marke strong { display: block; font-size: 22px; letter-spacing: 0.02em; }
.marke span { font-size: 13px; color: #6f7072; letter-spacing: 0.14em; text-transform: uppercase; }

.status { font-size: 13px; text-align: right; min-width: 90px; }
.status .punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.status.online  .punkt { background: var(--gut); }
.status.offline .punkt { background: var(--warnung); }
.status .offen { display: block; font-weight: 700; color: var(--warnung); }

/* ── Sprachwahl: fünf Flaggen in der Ecke ──────────────────────────────────

   Kein Dropdown, kein Menü, keine Einstellungsseite — ein Tap auf die Flagge
   und die App spricht die Sprache. Das ist derselbe Grundsatz wie bei den
   Auswahlfeldern (Invariante 8), nur dass hier eine Flagge zeigt, was der Knopf
   tut: Sie ist in jeder Sprache lesbar, ein Wort wäre es nicht.

   Die inaktiven Flaggen stehen in Graustufen. Dadurch sticht die aktive hervor,
   ohne dass man Text lesen muss — und man sieht mit einem Blick, in welcher
   Sprache das Tablet gerade läuft.

   Die Kopfzeile darf umbrechen (`flex-wrap`): Auf einem schmalen Gerät rutscht
   die Flaggenreihe in eine zweite Zeile, statt die Knöpfe unter 56 px zu
   drücken. Tap-Ziele werden nicht kleiner, nur weil der Bildschirm es ist. */
.flaggen { display: flex; gap: 4px; }
.flaggen button {
  width: 52px; height: var(--tap); flex: none; padding: 0;
  font-size: 26px; line-height: 1;
  background: transparent;
  border: 1px solid transparent; border-radius: 0;
  filter: grayscale(1); opacity: 0.5;
}
.flaggen button[aria-pressed="true"] {
  filter: none; opacity: 1;
  background: var(--akzent-hell); border-color: var(--akzent);
}
.flaggen button:active { background: var(--flaeche); }

/* ── Leserichtung rechts nach links (Dari) ─────────────────────────────────

   Die Screens sind durchweg mit Flexbox gebaut und spiegeln sich damit von
   selbst. Nachzuhelfen ist nur dort, wo eine Seite fest benannt ist: der
   Zurück-Pfeil zeigt sonst in die falsche Richtung, und die farbigen
   Merkstreifen an Regeln und Kategorien sitzen sonst auf der Außenseite. */
[dir="rtl"] .zurueck { transform: scaleX(-1); }
[dir="rtl"] .marke { margin-right: 0; margin-left: auto; }
[dir="rtl"] .grundregeln { padding: 12px 30px 12px 14px; border-left: 0; border-right: 3px solid var(--akzent); }
[dir="rtl"] .aufnahmeregel { border-left: 0; border-right: 3px solid var(--akzent); }
[dir="rtl"] .warnbox { border-left: 0; border-right: 3px solid var(--warnung); }
[dir="rtl"] .katkachel.begonnen { border-left: 1px solid var(--linie); border-right: 4px solid var(--akzent); }
[dir="rtl"] .suche input { padding: 0 14px 0 44px; }
[dir="rtl"] .suche .leeren { right: auto; left: 0; }
[dir="rtl"] .abschlussliste li.bilderzeile { padding: 8px 48px 0 12px; }

/* ── Bühne ─────────────────────────────────────────────────────────────── */

main { padding: var(--luft); padding-bottom: 48px; max-width: 900px; margin: 0 auto; }
.laden { padding: 40px 0; text-align: center; color: #6f7072; }

/* ── Suche und Filter ──────────────────────────────────────────────────── */

.suche { position: relative; margin-bottom: 12px; }
.suche input {
  width: 100%; height: var(--tap); padding: 0 44px 0 14px;
  font: inherit; font-size: 18px;
  background: #fff; color: var(--text);
  border: 1px solid var(--linie); border-radius: 0;
}
.suche input:focus { outline: 2px solid var(--akzent); outline-offset: -2px; }
.suche .leeren {
  position: absolute; right: 0; top: 0; width: 44px; height: var(--tap);
  background: none; border: 0; font-size: 22px; color: #6f7072;
}

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tabs button {
  min-height: 48px; padding: 0 16px;
  font-family: var(--font-h); font-weight: 600; font-size: 16px;
  background: transparent; color: var(--text);
  border: 1px solid var(--linie); border-radius: 0;
}
.tabs button[aria-pressed="true"] { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.tabs button .zahl { opacity: 0.65; margin-left: 6px; font-size: 14px; }

.treffer { font-size: 14px; color: #6f7072; margin-bottom: 10px; }

/* ── Projektraster ─────────────────────────────────────────────────────── */

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

.kachel {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 150px; padding: 12px; text-align: left;
  background: transparent; color: var(--text);
  border: 1px solid var(--linie); border-radius: 0;
  font: inherit;
}
.kachel:active { background: var(--flaeche); }
.kachel .nummer {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700; font-size: 15px; color: var(--akzent);
}
.kachel .name { font-family: var(--font-h); font-size: 19px; line-height: 1.15; flex: 1; }
.kachel .ag { font-size: 13px; color: #6f7072; }
.kachel.fertig .name { color: #8a8b8d; }

/* ── Projektseite ──────────────────────────────────────────────────────── */

.projektkopf { margin-bottom: 18px; }
.projektkopf .nummer { font-family: ui-monospace, Menlo, monospace; color: var(--akzent); font-weight: 700; }
.projektkopf .ag { color: #6f7072; }

.block { border: 1px solid var(--linie); padding: var(--luft); margin-bottom: 12px; }
.block h2 { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f7072; margin-bottom: 12px; }

.zeile { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(29,31,32,0.07); }
.zeile:last-child { border-bottom: 0; }
.zeile dt { color: #6f7072; font-size: 14px; }
.zeile dd { margin: 0; text-align: right; font-weight: 500; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.grosskachel {
  min-height: 104px; padding: 14px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  font-family: var(--font-h); font-weight: 600; font-size: 21px; text-align: left;
  background: transparent; color: var(--text);
  border: 1px solid var(--linie); border-radius: 0;
}
.grosskachel:active { background: var(--flaeche); }
.grosskachel .unterzeile { font-family: var(--font); font-weight: 400; font-size: 13px; color: #6f7072; }
.grosskachel[disabled] { opacity: 0.4; }

/* ── Auswahl-Knöpfe statt Dropdown ─────────────────────────────────────── */

.feld { margin-bottom: 20px; }
.feld > label { display: block; font-size: 14px; color: #6f7072; margin-bottom: 8px; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.knopfreihe button {
  min-height: var(--tap); padding: 0 18px; flex: 1 1 auto;
  font-family: var(--font-h); font-weight: 600; font-size: 17px;
  background: transparent; color: var(--text);
  border: 1px solid var(--linie); border-radius: 0;
}
.knopfreihe button[aria-pressed="true"] { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.knopfreihe button:active { background: var(--flaeche); }
.knopfreihe button[aria-pressed="true"]:active { background: var(--akzent-dunkel); }

textarea, input[type="text"] {
  width: 100%; padding: 12px; font: inherit; font-size: 17px;
  background: #fff; color: var(--text);
  border: 1px solid var(--linie); border-radius: 0;
}
textarea { min-height: 130px; resize: vertical; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap); padding: 0 20px;
  font-family: var(--font-h); font-weight: 600; font-size: 19px;
  background: var(--akzent); color: #fff;
  border: 1px solid var(--akzent); border-radius: 0;
}
.knopf:active { background: var(--akzent-dunkel); }
.knopf.sekundaer { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf[disabled] { opacity: 0.45; }

/* ── Fotodokumentation ─────────────────────────────────────────────────── */

.fortschritt { height: 8px; background: var(--flaeche); margin: 4px 0 16px; }
.fortschritt i { display: block; height: 100%; background: var(--akzent); }

/* Die drei Grundregeln aus dem Katalog. Gelten für jedes Foto, stehen deshalb
   über allem — kurz genug, dass man sie im Vorbeigehen liest. */
.grundregeln {
  margin: 0 0 16px; padding: 12px 14px 12px 30px;
  background: var(--akzent-hell); border-left: 3px solid var(--akzent);
  font-size: 15px;
}
.grundregeln li { margin: 2px 0; }

/* Eine Kachel je Fotokategorie. Früher ein Akkordeon: Aufklappen war ein Tap,
   der nur Text zeigte. Jetzt führt jeder Tap direkt in den Assistenten. */
.katkacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.katkachel {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 108px; padding: 14px; text-align: left;
  background: transparent; color: var(--text);
  border: 1px solid var(--linie); border-radius: 0;
  font: inherit;
}
.katkachel:active { background: var(--flaeche); }
.katkachel .titel { font-family: var(--font-h); font-weight: 600; font-size: 21px; line-height: 1.15; }
.katkachel .unterzeile { font-size: 13px; color: #6f7072; }
.katkachel .stand { margin-top: auto; font-size: 14px; color: #6f7072; }
.katkachel.begonnen { border-left: 4px solid var(--akzent); }
.katkachel.begonnen .stand { color: var(--akzent-dunkel); font-weight: 500; }

/* ── Assistent ─────────────────────────────────────────────────────────── */

.assistentkopf {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: 14px; color: #6f7072;
}
.assistentkopf .schrittzahl { white-space: nowrap; font-weight: 500; }

.aufnahmetitel { margin: 14px 0 12px; text-align: center; font-size: 27px; }

.feldlabel { display: block; font-size: 14px; color: #6f7072; margin-bottom: 8px; }

/* Beispielfotos NICHT beschneiden: Ein Bild, das zeigen soll, WIE zu
   fotografieren ist, darf nicht angeschnitten sein — deshalb contain statt
   cover und kein festes Seitenverhältnis.

   max-width, weil die Bilder von Abschlusspunkt, Kabelverteiler und
   Netzwerkschrank nativ nur rund 372 x 496 px groß sind; mehr steckt in der
   Katalog-PDF nicht drin. Bildschirmfüllend wären sie matschig.

   Mehrere Beispiele stehen nebeneinander in einer wischbaren Reihe statt im
   Raster: Es sind höchstens zwei, und so bleiben beide groß. */
.beispielreihe {
  display: flex; gap: 10px; margin: 0 auto 14px; max-width: 500px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.beispielreihe img {
  flex: 0 0 100%; scroll-snap-align: center;
  width: 100%; max-width: 500px;
  object-fit: contain; display: block;
  border: 1px solid var(--linie); background: #fff;
}

.aufnahmeregel {
  max-width: 500px; margin: 0 auto 16px; padding: 12px;
  background: var(--akzent-hell); border-left: 3px solid var(--akzent);
  font-size: 16px;
}

.knopf.gross { min-height: calc(var(--tap) + 12px); font-size: 22px; }

.eigenezahl { margin: 10px 0 18px; font-size: 14px; color: #6f7072; text-align: center; }

.assistentnavi { display: flex; gap: 8px; }
.assistentnavi .knopf { flex: 1; }

/* Abschluss: was ist da, was fehlt. Jede Zeile führt zurück zu ihrem Schritt. */
.abschlussliste { list-style: none; margin: 0 0 18px; padding: 0; }
.abschlussliste li {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 8px 12px;
  border: 1px solid var(--linie); border-bottom: 0;
  cursor: pointer;
}
.abschlussliste li:last-child { border-bottom: 1px solid var(--linie); }
.abschlussliste li:active { background: var(--flaeche); }
.abschlussliste .haken { font-size: 20px; width: 24px; flex: none; text-align: center; }
.abschlussliste .was { flex: 1; }
.abschlussliste .wieviel { font-size: 14px; color: #6f7072; }
.abschlussliste li.da .haken { color: var(--gut); }
.abschlussliste li.offen { color: #6f7072; }
.abschlussliste li.offen .haken { color: var(--warnung); }

/* Die eigenen Fotos. Anders als die Beispielbilder dürfen diese beschnitten
   werden (cover): Hier zählt der Überblick „was habe ich schon", nicht das
   Bilddetail — und gleich große Kacheln lassen sich schneller überfliegen. */
.eigene { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-bottom: 12px; }
.eigene .bild { position: relative; }
.eigene img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--linie); display: block; }
/* Das Wort kommt aus `data-wartet` und nicht als `content: "wartet"` aus dem
   CSS: Eine Stylesheet-Zeichenkette kann nicht übersetzt werden, und dieser
   Hinweis stand dann als einziges Wort im Bild auf Deutsch da. */
.eigene .wartet::after {
  content: attr(data-wartet); position: absolute; left: 0; bottom: 0;
  padding: 2px 6px; font-size: 11px; background: var(--warnung); color: #fff;
}
[dir="rtl"] .eigene .wartet::after { left: auto; right: 0; }
/* Ein Foto, das in Ninox steht, dessen Bild aber nicht auf diesem Tablet liegt —
   aufgenommen von einem anderen Bauleiter oder mit längst abgeräumter Vorschau. */
.eigene .ohnebild {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; border: 1px dashed var(--linie); background: var(--flaeche);
  color: var(--gut); font-size: 22px;
}

/* Bilderstreifen in der Abschlussliste: gehört zur Zeile darüber, deshalb
   ohne eigenen Rahmen und etwas eingerückt. */
.abschlussliste li.bilderzeile {
  display: block; min-height: 0; padding: 8px 12px 0 48px; cursor: default;
}
.abschlussliste li.bilderzeile:active { background: transparent; }
.abschlussliste li.bilderzeile .eigene { margin-bottom: 8px; }

.warnbox { padding: 12px; margin-bottom: 12px; background: #fff3e0; border-left: 3px solid var(--warnung); font-size: 15px; }

/* ── Anmeldung ─────────────────────────────────────────────────────────── */

.anmeldung { max-width: 420px; margin: 40px auto; }
.anmeldung .feld { margin-bottom: 16px; }