/* app/static/raster.css -- Rasterlayout fuer Objektformulare (Detail-/Anlegeseiten).
 *
 * Warum eine eigene Datei: scripts/build_static_css.py (Tailwind-Ersatz) kennt keine beliebigen
 * Rasterpositionen. Die Position kommt daher als CSS-Variablen am Element (--gz Zeile, --gs Spalte,
 * --gb Breite, --gh Hoehe), diese Datei setzt sie in grid-column/grid-row um. Markup siehe
 * app/templates/kern/formular/_objekt_formular.html (Klassen rz-*).
 *
 * Ohne Koordinaten im Layout (Altbestand) wird NICHTS davon ausgegeben -- die Seite bleibt im normalen Fluss.
 * Unter 640 px (Tailwind "sm") gilt keine Position: die Elemente stehen einspaltig in DOM-Reihenfolge
 * (= Lesereihenfolge zeile, spalte). */

/* Hoehe einer Rasterzeile im Abschnitt: immer 1 rem (app/module/kern/raster.py, ZEILEN_EINHEIT_REM). */
.rz-grid { --zh: 1rem; }

/* Element-Huelle: Spaltenlayout, damit "fuellende" Elemente (Textbereich, Listen) die Hoehe nutzen. */
.rz-el { min-width: 0; display: flex; flex-direction: column; }
.rz-el > * { min-width: 0; }
/* Ausgeblendetes Feld (Bedingung, data-sichtbar-wenn setzt .hidden am Innenelement): Zelle entfaellt. */
.rz-el:has(> .hidden:only-child) { display: none; }

/* Gestaltung und Aktionen: vertikal zentriert in ihrer Zelle. */
.rz-art-ueberschrift, .rz-art-link, .rz-art-aktion, .rz-art-trenner { justify-content: center; }
.rz-art-hinweis > * { flex: 1 1 auto; }

/* Fuellende Elemente: Inhalt waechst auf die Zellenhoehe (Langtext: Textbereich, Listen: Bildlauf). */
.rz-fuellt > * { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rz-fuellt textarea { flex: 1 1 auto; min-height: 3rem; resize: none; }

@media (min-width: 640px) {
  .rz-seite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: start; }
  .rz-seite > .rz-abschnitt { grid-column: var(--gs, 1) / span var(--gb, 2); grid-row: var(--gz, auto); margin-bottom: 0; }
  /* Spaltenzahl je Abschnitt (--sp, 1 bis 12) und Spannweite im Fluss (rz-b2 ... rz-b12; breite 1 braucht keine Klasse). */
  .rz-cols { grid-template-columns: repeat(var(--sp, 2), minmax(0, 1fr)); }
  .rz-b2 { grid-column: span 2; } .rz-b3 { grid-column: span 3; } .rz-b4 { grid-column: span 4; }
  .rz-b5 { grid-column: span 5; } .rz-b6 { grid-column: span 6; } .rz-b7 { grid-column: span 7; }
  .rz-b8 { grid-column: span 8; } .rz-b9 { grid-column: span 9; } .rz-b10 { grid-column: span 10; }
  .rz-b11 { grid-column: span 11; } .rz-b12 { grid-column: span 12; }
  /* Rasterzeilen zu 1 rem ohne senkrechten Zwischenraum; Abstand entsteht durch Elementhoehe und leere Zeilen. */
  .grid.rz-grid { grid-auto-rows: minmax(var(--zh, 1rem), auto); row-gap: 0; }
  .rz-el { grid-column: var(--gs) / span var(--gb); grid-row: var(--gz) / span var(--gh); }
  /* Scrollende Elemente (Kindtabellen, Bloecke, Mehrfachlisten): ihr Inhalt darf die Zeile NICHT
     aufblaehen -- die Hoehe kommt allein aus dem Raster, der Rest scrollt. */
  .rz-scroll { overflow: auto; contain: size; }
  /* Einzeilige Felder bleiben oben ausgerichtet (Leerraum darunter = bewusste Luecke). */
  .rz-art-feld { justify-content: flex-start; }
}

@media (max-width: 639px) {
  .rz-seite { display: block; }
  .rz-el { grid-column: auto; grid-row: auto; }
  /* Mobil: so hoch wie der Inhalt; Kindtabellen/Bloecke mit Hoechsthoehe aus hoehe x Zeilenhoehe. */
  .rz-scroll { overflow: auto; max-height: calc(var(--gh, 2) * var(--zh, 1rem)); }
  .rz-fuellt textarea { flex: none; min-height: calc(var(--gh, 2) * var(--zh, 1rem) - 2rem); }
}

/* Editor-Vorschaumodus (layout_editor=1): Eingaben stumm, Platzhalter fuer ausgeblendete Elemente. */
.rz-editor-seite [data-layout-element] input,
.rz-editor-seite [data-layout-element] select,
.rz-editor-seite [data-layout-element] textarea,
.rz-editor-seite [data-layout-element] button,
.rz-editor-seite [data-layout-element] a { pointer-events: none; }
.rz-ghost { align-self: stretch; }

/* ===== Raster-Editor (app/static/layout_editor.js) =====
 * Rahmen, Rasterzellen, Reserve und Abschnittsleiste sind Kinder des Grid-Containers bzw. des Abschnitts und tragen
 * dieselben Variablen (--gz/--gs/--gb/--gh) wie das Element -- so sitzen sie ohne Berechnung exakt auf der Elementflaeche. */
.rz-editor-seite .rz-abschnitt { position: relative; }
/* Abschnitt ohne Titel: Platz fuer die Abschnittsleiste ueber dem ersten Feldrahmen. */
.rz-editor-seite .rz-abschnitt:not(:has(> h2)) { padding-top: 1.75rem; }
/* Seitenraster (Abschnitte nebeneinander): Bezugspunkt der Zielmarkierung beim Verschieben/Vergroessern eines Abschnitts.
   Ohne eigene Positionierung landet das absolut gesetzte `.le-ziel` oben links im Fenster statt auf dem Abschnitt. */
.rz-editor-seite .rz-seite { position: relative; }
.rz-editor-seite .rz-grid { position: relative; isolation: isolate; }
/* Hilfsraster: ein Overlay je Abschnitt -- Spaltenstreifen (gestrichelt) und feine Zeilenlinien im 1-rem-Takt. */
.le-linien {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--sp, 12), minmax(0, 1fr)); column-gap: 1rem;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--zh, 1rem) - 1px), rgba(209, 213, 219, 0.45) calc(var(--zh, 1rem) - 1px), rgba(209, 213, 219, 0.45) var(--zh, 1rem));
}
.le-linien > span { border-left: 1px dashed #d1d5db; border-right: 1px dashed #d1d5db; background: rgba(243, 244, 246, 0.35); }
.le-reserve { grid-column: 1 / -1; min-height: 0; pointer-events: none; }
.le-rahmen {
  position: absolute; inset: 0; z-index: 2; box-sizing: border-box; cursor: grab; outline: none; touch-action: pan-y;
  grid-column: var(--gs) / span var(--gb); grid-row: var(--gz) / span var(--gh);
  border: 1px solid #93c5fd; border-radius: 4px; background: transparent;
}
.le-rahmen:hover { background: rgba(147, 197, 253, 0.12); z-index: 3; }
.le-rahmen:focus-visible, .le-rahmen.le-gewaehlt { border: 2px solid #2563eb; background: rgba(37, 99, 235, 0.06); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }
.le-rahmen.le-zieht { opacity: 0.4; }
/* Der Ziehgriff sitzt rechts oben: links oben steht die Beschriftung des Felds, die er sonst verdecken wuerde (der ganze Rahmen ist Griff). */
.le-griff, .le-griff-seite {
  position: absolute; top: 2px; right: 2px; z-index: 3; padding: 0 3px; font-size: 10px; line-height: 14px; color: #6b7280;
  background: rgba(255, 255, 255, 0.9); border-radius: 3px; cursor: grab; touch-action: none; user-select: none;
}
.le-marken { position: absolute; top: 2px; right: 26px; display: flex; gap: 2px; pointer-events: none; }
.le-marke { padding: 0 4px; font-size: 10px; line-height: 14px; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 3px; }
.le-anf { position: absolute; z-index: 3; background: #2563eb; opacity: 0; touch-action: none; border-radius: 3px; }
/* Die Anfasser liegen INNERHALB des Rahmens: Rahmen benachbarter Zeilen grenzen ohne Zwischenraum aneinander, ein ueber den unteren
   Rand ragender Anfasser laege halb unter dem Rahmen darunter und griffe dort den falschen Rahmen (Verschieben statt Vergroessern). */
.le-anf-e { top: 20%; bottom: 20%; right: 0; width: 8px; cursor: ew-resize; }
.le-anf-s { left: 20%; right: 20%; bottom: 0; height: 8px; cursor: ns-resize; }
.le-anf-se { right: 0; bottom: 0; width: 12px; height: 12px; cursor: nwse-resize; border-radius: 50%; }
.le-rahmen:hover .le-anf, .le-rahmen.le-gewaehlt .le-anf, .le-rahmen:focus-visible .le-anf { opacity: 0.85; }
.le-ziel { z-index: 4; background: rgba(37, 99, 235, 0.18); border: 2px dashed #2563eb; border-radius: 4px; box-sizing: border-box; }
body.rz-zieht, body.rz-zieht * { cursor: grabbing !important; user-select: none; }
.rz-zone-aktiv { outline: 2px dashed #2563eb; outline-offset: -3px; }
.le-abschnitt-leiste {
  position: absolute; top: 4px; right: 8px; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 0 4px;
  font-size: 11px; background: rgba(255, 255, 255, 0.92); border: 1px solid #bfdbfe; border-radius: 4px;
}
.le-griff-seite { position: static; }
.le-leiste-titel { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1d4ed8; background: none; border: 0; cursor: pointer; font-size: 11px; }
.le-leiste-titel:hover { text-decoration: underline; }
.le-abschnitt-anf { position: absolute; top: 20%; bottom: 20%; right: -12px; width: 8px; z-index: 5; cursor: ew-resize; background: #2563eb; opacity: 0; border-radius: 4px; touch-action: none; }
.rz-editor-seite .rz-abschnitt:hover > .le-abschnitt-anf, .rz-editor-seite .rz-abschnitt.le-gewaehlt-abschnitt > .le-abschnitt-anf { opacity: 0.6; }
.rz-editor-seite .rz-abschnitt.le-gewaehlt-abschnitt { box-shadow: 0 0 0 2px #2563eb; }
.le-mobil-rahmen { display: block; margin: 0 auto; width: 390px; max-width: 100%; height: calc(100vh - 9rem); border: 1px solid #d1d5db; border-radius: 12px; background: #fff; }
/* Tabellenvorschau der Listenansicht */
.le-lt-huelle { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 4px; }
.le-lt-tabelle { border-collapse: collapse; min-width: 100%; font-size: 12px; }
.le-lt-kopf { position: relative; padding: 4px 10px 4px 4px; text-align: left; white-space: nowrap; background: #f3f4f6; border-right: 1px solid #e5e7eb; }
.le-lt-kopf.le-gewaehlt { background: #dbeafe; box-shadow: inset 0 -2px 0 #2563eb; }
.le-lt-aus { opacity: 0.55; }
.le-lt-zelle { display: flex; align-items: center; gap: 4px; }
.le-lt-label { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; background: none; border: 0; cursor: pointer; font-weight: 600; color: #1f2937; }
.le-lt-anf { position: absolute; top: 0; bottom: 0; right: -4px; width: 9px; z-index: 2; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none; }
.le-lt-anf:hover, .le-lt-anf:focus-visible { background: rgba(37, 99, 235, 0.45); outline: none; }
.le-lt-wert { padding: 6px 8px; border-top: 1px solid #f3f4f6; border-right: 1px solid #f3f4f6; }
.le-lt-balken { display: block; height: 8px; border-radius: 4px; background: #e5e7eb; }

/* Ruhemodus (ohne "Elemente bewegen"): sieht aus wie das Formular, ein Klick waehlt nur aus. */
.le-ruhig .le-linien, .le-ruhig .le-griff, .le-ruhig .le-griff-seite, .le-ruhig .le-anf, .le-ruhig .le-abschnitt-anf { display: none; }
.le-ruhig .le-rahmen { border-color: transparent; cursor: pointer; }
.le-ruhig .le-rahmen:hover { border-color: #93c5fd; }
/* Die Abschnittsleiste erscheint im Ruhemodus nur unter dem Mauszeiger oder bei Auswahl; ohne Titel bleibt kein Platz dafuer frei. */
.le-ruhig .rz-abschnitt:not(:hover):not(.le-gewaehlt-abschnitt) > .le-abschnitt-leiste { display: none; }
.rz-editor-seite.le-ruhig .rz-abschnitt:not(:has(> h2)) { padding-top: 0; }