/* Basis fuer alle Seiten - Design "Bauplatz" (seit 09.09.2026):
   Die Oberflaeche ist eine Baustelle von Lehner Haus. Alles hat Tiefe:
   Tafeln sind "Bauklötze" mit sichtbarer Kante, Kacheln tragen ein
   Giebeldach, die Seitenleiste ist ein dunkelgruener Holzbalken mit
   feiner Maserung, der Grund ein Bauplan-Raster. Auf der Anmeldung und
   der Startseite baut sich ein Holzhaus in einer CSS-3D-Buehne auf
   (js/szene3d.js, ohne Fremdbibliothek). Bewegung nur als feste
   Animation - nichts folgt der Maus von selbst; einzig das Haus laesst
   sich bewusst anfassen und drehen.
   Logo: img/logo.png ist das Original des Kunden (schwarz, harte Kanten,
   weisser Pixelkranz um die Buchstaben). Fuer die Oberflaeche liegen
   daraus abgeleitete, gesaeuberte Ausschnitte bereit: logo-weiss.png
   (dunkle Flaechen) und logo-schwarz.png (helle Flaechen) - nie hoeher
   als 144px anzeigen (Original 288px hoch), nie per Filter einfaerben.
   Farben (Lehner-Haus-CD + Holz) NUR hier als Variablen pflegen. */

:root {
  --beige: #b1a699;          /* CD: Rahmen, Kanten, Benutzer-Nachricht */
  --gruen: #05402a;          /* CD: Seitenleiste, Primaerknoepfe, Links */
  --schwarz: #1d1d1b;        /* CD: Text */
  --grau: #6e6e6e;           /* Nebentext; das CD-Grau #878787 erreicht auf Weiss nur 3:1 und
                                 faellt bei 13-px-Hinweisen unter WCAG AA (21.09.2026) */
  --rot: #a00000;

  --holz: #c9b28f;           /* helles Bauholz */
  --holz-dunkel: #8f6d48;    /* Staender, Balken */
  --grund: #f3efe8;          /* Seitengrund (Sand) */
  --flaeche: #ffffff;        /* Tafeln */
  --rahmen: #ddd6cc;         /* Hairline */
  --beige-hell: #ece7df;     /* Hover, Chips */
  --beige-zart: #f7f4ef;     /* zarte Flaechen */
  --gruen-hell: #0a5a3b;     /* Hover Primaerknopf */
  --gruen-tief: #032c1d;     /* gedrueckt, Nacht */
  --leiste-text: rgba(255, 255, 255, 0.82);
  --leiste-rahmen: rgba(255, 255, 255, 0.12);
  --fokus: rgba(5, 64, 42, 0.45);   /* Fokusring; frueher 0.18, kaum sichtbar */

  /* Tiefe: jede Tafel liegt als Klotz auf dem Grund - Kante unten,
     weicher Schlagschatten, kleiner Hub beim Beruehren. */
  --kante: 0 3px 0 -1px var(--beige);
  --schatten: 0 18px 32px -22px rgba(3, 44, 29, 0.55);
  --schatten-hoch: 0 26px 40px -22px rgba(3, 44, 29, 0.6);
  --perspektive: 1100px;

  --radius: 8px;
  --leiste: 248px;           /* Breite der Seitenleiste */
  --chats: 264px;            /* Breite der Chat-Spalte */
  --kopf-mobil: 54px;        /* Hoehe der Kopfzeile auf dem Handy */
}

/* Arbeitsbereich „Architektur“. Bewusst nicht am :root: Anmeldung bleibt identisch. */
body.angemeldet, body.arbeitsbereich {
  --grund: #f5f6f3;
  --grau: #606c65;
  --rahmen: #dce3dc;
  --beige-hell: #eaf0e9;
  --beige-zart: #f5f7f3;
  --radius: 12px;
  --kante: 0 0 0 transparent;
  --schatten: 0 8px 30px -18px rgba(3, 44, 29, .15);
  --schatten-hoch: 0 12px 32px -20px rgba(3, 44, 29, .22);
  --architektur-licht: rgba(201, 178, 143, .18);
  --architektur-linie: rgba(5, 64, 42, .08);
  --hero-text: #ffffff;
  --hero-neben: #c9d8ce;
  --hero-akzent: #e1d0b2;
  --leiste-rahmen: rgba(255, 255, 255, .15);
  --leiste-text: #d0ded5;
}

/* Jost - offene Futura-Alternative (SIL OFL, Lizenztext liegt in
   fonts/). Wird LOKAL ausgeliefert, kein Font-CDN (DSGVO). */
@font-face {
  font-family: "Jost";
  src: url("/static/fonts/Jost.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--schwarz);
  font: 15.5px/1.55 "Jost", Futura, "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
  min-height: 100dvh;
  /* Bauplan-Raster: zwei isometrische Linienscharen ueber Sandgrund,
     oben ein heller Horizont. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 320px),
    repeating-linear-gradient(30deg, rgba(5, 64, 42, 0.045) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(150deg, rgba(5, 64, 42, 0.045) 0 1px, transparent 1px 38px),
    var(--grund);
}
/* hidden gewinnt IMMER - auch gegen eigene display-Regeln (Fallstrick
   aus V2: display:flex ueberstimmte das Attribut). */
[hidden] { display: none !important; }

/* ---------------- Barrierefreiheit (21.09.2026) ---------------- */
/* Nur fuer Screenreader: sichtbar weggeschoben, aber im Zugaenglichkeitsbaum. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Sprunglink: erstes Element der Seite, erscheint erst beim Tastaturfokus. */
.sprunglink { position: absolute; left: 12px; top: -200px; z-index: 100; padding: 10px 16px; background: var(--gruen); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 500; }
.sprunglink:focus { top: 12px; outline: 3px solid var(--holz); outline-offset: 2px; }
/* Sichtbarer Tastaturfokus fuer alles Bedienbare: kraeftiger Ring aussen um das
   Element (Gruen auf hellem Grund, Holz auf der dunklen Leiste und der Anmeldung). */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
:is(.seitenleiste, .mobilkopf, .login) :is(a, button, input, select, textarea):focus-visible { outline-color: var(--holz); }
/* Programmatisch fokussierte Ueberschriften und Bereiche (Sprungziele) brauchen keinen Ring. */
[tabindex="-1"]:focus-visible { outline: none; }
/* Kontrollkaestchen gross genug zum Treffen und in der Hausfarbe. */
label.kasten input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gruen); flex: 0 0 auto; }

h1, h2, h3 { font-weight: 600; letter-spacing: 0.005em; margin: 0; }
a { color: var(--gruen); }
code { font-family: Consolas, "Courier New", monospace; font-size: 0.92em; background: var(--beige-hell); padding: 0 4px; border-radius: 3px; }

/* ---------------- Seitenleiste: der Holzbalken ---------------- */
.seitenleiste {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--leiste);
  color: var(--leiste-text);
  display: flex; flex-direction: column; z-index: 20;
  overflow-y: auto; scrollbar-width: none;
  /* Maserung: feine dunkle Streifen laengs, dazu Lichtkante rechts,
     die den Balken vom Grund abhebt. */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0.22)),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.09) 0 2px, transparent 2px 11px, rgba(0, 0, 0, 0.05) 11px 12px, transparent 12px 27px),
    linear-gradient(180deg, var(--gruen), var(--gruen-tief));
  box-shadow: 8px 0 30px -14px rgba(3, 44, 29, 0.7);
}
.seitenleiste::-webkit-scrollbar { display: none; }
.marke {
  position: relative;
  padding: 26px 20px 20px; display: flex; flex-direction: column; gap: 12px;
  border-bottom: 1px solid var(--leiste-rahmen);
}
/* Giebel ueber der Marke: das Haus-Motiv als flache Dachlinie. */
.marke::before {
  content: ""; position: absolute; left: 20px; top: 10px; width: 34px; height: 12px;
  background: var(--holz); clip-path: polygon(0 100%, 50% 0, 100% 100%, 84% 100%, 50% 34%, 16% 100%);
  opacity: 0.9;
}
/* Gesaeuberte weisse Fassung des Kundenlogos (img/logo-weiss.png), im
   Markup gesetzt - kein Filter, kein Nachbau. */
.marke .logo { height: 64px; width: auto; align-self: flex-start; margin-top: 8px; }
.marke .titel { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leiste-text); }

.navigation { display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; }
.navigation a {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  color: var(--leiste-text); text-decoration: none; cursor: pointer;
  padding: 10px 14px; border-radius: var(--radius); font-size: 15px;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.navigation a svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.85; }
.navigation a:hover {
  background: rgba(255, 255, 255, 0.08); color: #fff;
  transform: translateX(4px);
}
/* Aktiver Eintrag: eine helle Holzlatte, aus dem Balken herausgerueckt. */
.navigation a.aktiv {
  background: linear-gradient(180deg, #d6c3a4, var(--holz)); color: var(--gruen-tief);
  box-shadow: 0 3px 0 var(--holz-dunkel), 0 10px 18px -8px rgba(0, 0, 0, 0.6);
  transform: translateX(6px);
}
.navigation a.aktiv svg { opacity: 1; }

.benutzer {
  margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--leiste-rahmen);
  display: flex; flex-direction: column; gap: 4px; font-size: 13.5px;
}
.benutzer .benutzer-name { color: #fff; font-weight: 500; overflow-wrap: anywhere; }
.benutzer .benutzer-position { color: var(--leiste-text); font-size: 12.5px; min-height: 1em; }
.benutzer button {
  margin-top: 10px; align-self: flex-start;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 6px 14px; font-size: 13px; box-shadow: none;
}
.benutzer button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: #fff; transform: none; }
.leisten-fuss {
  padding: 12px 20px 18px; font-size: 12px; color: rgba(255, 255, 255, 0.55);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.leisten-fuss a { color: inherit; text-decoration: none; }
.leisten-fuss a:hover { color: #fff; text-decoration: underline; }

/* ---------------- Kopfzeile Handy (ersetzt die Leiste) ---------------- */
.mobilkopf {
  display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--kopf-mobil);
  background: linear-gradient(180deg, var(--gruen), var(--gruen-tief)); color: #fff; z-index: 21;
  align-items: center; gap: 12px; padding: 0 12px;
  box-shadow: 0 8px 24px -14px rgba(3, 44, 29, 0.8);
}
.mobilkopf .logo { height: 34px; width: auto; }
.mobilkopf .titel { font-size: 14px; letter-spacing: 0.04em; }
.mobilkopf button {
  background: transparent; border: none; color: #fff; padding: 8px; margin-left: -4px;
  display: flex; align-items: center; box-shadow: none;
}
.mobilkopf button svg { width: 24px; height: 24px; }

/* ---------------- Inhaltsbereich ---------------- */
.inhalt { margin-left: var(--leiste); min-height: 100dvh; display: flex; flex-direction: column; }
main {
  width: 100%; max-width: 940px; margin: 0 auto; padding: 34px 40px 44px;
  display: flex; flex-direction: column; gap: 24px; flex: 1;
  perspective: var(--perspektive);
}
main.breit { max-width: 1280px; }
.seitentitel { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.seitentitel :is(h1, h2) { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.seitentitel .neben { color: var(--grau); font-size: 14px; }

/* Bauklotz-Tafel: weisse Flaeche, beige Kante unten (die "Dicke"),
   Schlagschatten, hebt sich beim Beruehren. */
.tafel {
  position: relative;
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--kante), var(--schatten);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.tafel:hover { transform: translateY(-2px); box-shadow: var(--kante), var(--schatten-hoch); }
.tafel > h2, .tafel > h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gruen); display: flex; align-items: center; gap: 10px; }
/* Massstab-Strich vor Tafel-Ueberschriften */
.tafel > h2::before, .tafel > h3::before { content: ""; width: 18px; height: 3px; background: var(--holz); border-radius: 2px; }
.zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hinweis { font-size: 13px; color: var(--grau); }
.hinweis a { color: var(--grau); text-decoration: underline; cursor: pointer; }
.meldung { font-size: 14px; white-space: pre-wrap; min-height: 0; }
.meldung:empty { display: none; }
.meldung.problem { color: var(--rot); }
.meldung.passwort {
  border: 1px solid var(--beige); background: var(--beige-zart);
  border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--kante);
}

/* ---------------- Eingabefelder ---------------- */
input[type="text"], input[type="email"], input[type="password"], input:not([type]), select, textarea {
  font: inherit; color: var(--schwarz); background: var(--flaeche);
  border: 1px solid var(--rahmen); border-radius: var(--radius);
  padding: 9px 12px;
  box-shadow: inset 0 2px 3px rgba(29, 29, 27, 0.05);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gruen); box-shadow: inset 0 2px 3px rgba(29, 29, 27, 0.05), 0 0 0 3px var(--fokus);
}
label.kasten { display: flex; gap: 6px; align-items: center; font-size: 14px; }
label.kasten input { width: auto; }

/* ---------------- Knoepfe: kleine Kloetze ---------------- */
button {
  font: inherit; font-weight: 500; cursor: pointer;
  padding: 9px 18px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--gruen-hell), var(--gruen)); color: #fff; border: 1px solid var(--gruen);
  box-shadow: 0 3px 0 var(--gruen-tief), 0 8px 16px -8px rgba(3, 44, 29, 0.7);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
button:hover:not(:disabled) { background: var(--gruen-hell); border-color: var(--gruen-hell); transform: translateY(-1px); }
button:active:not(:disabled) { background: var(--gruen-tief); transform: translateY(2px); box-shadow: 0 1px 0 var(--gruen-tief); }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible { outline: none; box-shadow: 0 3px 0 var(--gruen-tief), 0 0 0 3px var(--fokus); }
button.leise, button.klein {
  background: var(--flaeche); color: var(--gruen); border-color: var(--rahmen);
  box-shadow: 0 3px 0 var(--rahmen);
}
button.leise:hover:not(:disabled), button.klein:hover:not(:disabled) {
  background: var(--beige-hell); border-color: var(--beige); color: var(--gruen);
}
button.leise:active:not(:disabled), button.klein:active:not(:disabled) { box-shadow: 0 1px 0 var(--rahmen); }
button.klein { padding: 6px 14px; font-size: 13.5px; }
button.gefahr {
  background: var(--flaeche); color: var(--rot); border-color: var(--rahmen); box-shadow: 0 3px 0 var(--rahmen);
}
button.gefahr:hover:not(:disabled) { background: #fbf1f1; border-color: rgba(160, 0, 0, 0.4); color: var(--rot); }
/* nackte Textknoepfe (x zum Entfernen) */
button.nackt { background: none; border: none; color: inherit; padding: 0 4px; line-height: 1; box-shadow: none; }
button.nackt:hover:not(:disabled) { background: rgba(29, 29, 27, 0.07); transform: none; }
button.nackt:active:not(:disabled) { transform: none; box-shadow: none; }

/* ---------------- Handy / Tablet ---------------- */
@media (max-width: 900px) {
  .seitenleiste {
    transform: translateX(-100%); transition: transform 0.2s ease;
    top: var(--kopf-mobil); width: min(300px, 84vw);
  }
  body.menue-offen .seitenleiste { transform: none; }
  body.menue-offen::after {
    content: ""; position: fixed; inset: var(--kopf-mobil) 0 0 0;
    background: rgba(29, 29, 27, 0.35); z-index: 19;
  }
  .mobilkopf { display: flex; }
  .mobilkopf[hidden] { display: none !important; }
  .inhalt { margin-left: 0; padding-top: var(--kopf-mobil); }
  main { padding: 18px 14px 28px; gap: 16px; }
  .tafel { padding: 16px; }
  .tafel:hover { transform: none; }
  .seitentitel h2 { font-size: 22px; }
  input, select, textarea { font-size: 16px; }   /* kein Auto-Zoom auf iOS */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tafel:hover, .navigation a:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* Wunsch nach mehr Kontrast (Systemeinstellung): dunklerer Nebentext, kraeftigere Linien. */
@media (prefers-contrast: more) {
  :root, body.angemeldet, body.arbeitsbereich { --grau: #454545; --rahmen: #8a8a8a; --beige-hell: #e2ddd3; }
}

/* Windows-Kontrastmodus: Hintergrundfarben fallen weg, Zustaende brauchen Linien. */
@media (forced-colors: active) {
  .navigation a.aktiv, .ll-chip.aktiv, button[aria-pressed="true"] { outline: 2px solid; outline-offset: -2px; }
  .status, .ll-warnung, .ll-meldung, .anhang-chip, .datei-chip { border: 1px solid; }
  .sprunglink:focus { outline: 3px solid; }
}