/* bauteile/fenster.css — Fenster, Dialog, Blatt, Tafel (Pergament mit Papierrand, Fransen siehe material.css).
   Nr. 982 Stufe 1: aus material.css hierher VERSCHOBEN (eine Quelle), Regeln unveraendert. Materialien/Tokens: material.css, tokens.css.
   Galerie aller Zustaende: /admin/bauteile. Neue Ansicht = nur diese Bauteile + Layout-CSS. */

/* ============ ELEMENTE: nur Tokens, keine Materialnamen ============ */
.el-tafel { position: relative; isolation: isolate; padding: var(--sp-3); color: var(--mat-text); border-radius: var(--mat-radius); }
.el-tafel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--mat-radius); background: var(--mat-schicht), var(--mat-flaeche);
    box-shadow: var(--mat-schatten); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
/* Fenster */
.el-fenster { position: relative; box-sizing: border-box; padding: var(--sp-3); color: var(--mat-text); }
.el-fenster-fuss { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-3); }

/* ============ BLATT: alles, was von unten auffaehrt oder als Bearbeiten-Dialog aufgeht (Ticket #921) ============
   EIN Baustein, immer Pergament (data-material="pergament" am .el-blatt): Schleier (.el-blatt-schleier) + Blatt (.el-blatt) mit Kopf (Titel, Schliessen),
   scrollendem Inhalt und festem Fuss (el-haupt rechts, el-neben links). Aussenabstand rundum (--blatt-rand, mind. Sicherheitsrand), unten ueber der Eckenzeile (--menue-platz).
   Breite: Vorgabe mittel; --schmal / --breit lesen die drei Spielmodus-Breiten (sv-material.css). Kein Modul setzt Hintergrund, Rand oder Radius selbst.
   Unstrukturierter Inhalt (altes Markup) scrollt im Blatt selbst; mit .el-blatt-inhalt scrollt nur der Inhalt, Kopf und Fuss bleiben stehen. */
.el-blatt-schleier { position: fixed; inset: 0; z-index: var(--z-overlay, 950); display: flex; align-items: flex-end; justify-content: center; }
.el-blatt-schleier, .sv-schleier { --blatt-rand: var(--sp-2); box-sizing: border-box;
    padding: max(var(--blatt-rand), env(safe-area-inset-top, 0px)) max(var(--blatt-rand), env(safe-area-inset-right, 0px)) var(--blatt-rand) max(var(--blatt-rand), env(safe-area-inset-left, 0px));
    background: var(--ui-scrim, var(--abdunkeln-dicht)); animation: blattSchleier .2s ease; }
/* Nr. 954: EINE Regel für jeden Schleier: er endet über der Eckenzeile (--menue-platz), Zurück · ? · Menü liegen frei und bleiben antippbar (wie .hlm-bg, halle-welt.css).
   Der Zurück-Knopf schließt erst das offene Fenster (MFWeltRahmen.fensterZu), dann geht es zurück. */
body :is(.el-blatt-schleier, .sv-schleier) { inset: 0 0 var(--menue-platz, 0px) 0; }
.el-blatt { --blatt-breite: var(--sv-w-mittel, 32rem); position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; max-width: var(--blatt-breite); max-height: 100%; min-height: 0; min-width: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3);
    color: var(--mat-text); outline: none; animation: blattAuf .25s ease; }
.el-blatt:has(> .el-blatt-inhalt) { padding: 0; overflow: hidden; }
.el-blatt--unten { position: fixed; z-index: var(--z-sheet, 500); left: max(var(--sp-2), env(safe-area-inset-left, 0px)); right: max(var(--sp-2), env(safe-area-inset-right, 0px));
    bottom: max(var(--menue-platz, var(--sp-3)), env(safe-area-inset-bottom, 0px)); width: auto; margin: 0 auto;
    max-height: calc(100dvh - var(--menue-platz, var(--sp-3)) - var(--sp-2) - env(safe-area-inset-top, 0px)); }   /* ohne Schleier: die Karte dahinter bleibt tippbar (Setzen, Figur) */
.el-blatt--schmal { --blatt-breite: var(--sv-w-schmal, 20rem); }
.el-blatt--breit { --blatt-breite: var(--sv-w-breit, 45rem); }
.el-blatt-kopf { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--mat-rand); }
.el-blatt-titel { flex: 1; min-width: 0; margin: 0; font: 700 var(--fs-lg) 'Cinzel', serif; color: var(--mat-akzent); overflow-wrap: break-word; hyphens: auto; }
.el-blatt-zu { flex: 0 0 auto; }      /* Aussehen: runder Knopf-Baustein in knopf.css */
.el-blatt-zu.mf-blatt-zurueck { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--mat-leise); font-size: 1.5rem; line-height: 1; cursor: pointer; }      /* Text-Variante „‹ Zurück“ (kein Rundknopf) */
.el-blatt-zu.mf-blatt-zurueck:hover, .el-blatt-zu.mf-blatt-zurueck:focus-visible { color: var(--mat-akzent); background: var(--mat-hover); border-radius: 50%; }
.el-blatt-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3); }
.el-blatt-fuss { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mat-rand); }
.el-blatt-fuss > :is(button, .btn) { flex: 1 1 8rem; }
.el-blatt :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) { box-sizing: border-box; max-width: 100%; border: 1px solid var(--mat-rand); border-radius: var(--mat-radius-klein); background: var(--mat-feld); color: var(--mat-text); font-family: inherit; }
.el-blatt ::placeholder { color: var(--mat-leise); opacity: 1; }
/* Altes Knopf-Markup (.btn-*) im Blatt: Pergament-Knoepfe, damit nicht jede Aufrufstelle umgeschrieben werden muss (neu: el-haupt / el-neben) */
.el-blatt :is(.btn-primary, .btn-danger) { min-height: var(--tap); border: 1px solid var(--abdunkeln-leicht); border-radius: var(--mat-radius-klein); background: var(--mat-haupt); color: var(--mat-haupt-text); font: 700 var(--fs-md) 'Cinzel', serif; box-shadow: none; }
.el-blatt :is(.btn-primary, .btn-danger):hover { background: var(--mat-haupt-h); }
.el-blatt :is(.btn-ghost, .btn-secondary) { min-height: var(--tap); border: 1px solid var(--mat-rand); border-radius: var(--mat-radius-klein); background: transparent; color: var(--mat-text); font: 600 var(--fs-md) 'Cinzel', serif; }
.el-blatt :is(.btn-ghost, .btn-secondary):hover { background: var(--mat-hover); }
@keyframes blattAuf { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes blattSchleier { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) { .el-blatt-schleier { align-items: center; } }   /* Desktop: mittig im freien Bereich, Abstand rundum bleibt */
@media (prefers-reduced-motion: reduce) { .el-blatt, .el-blatt-schleier { animation: none; } }
/* Nr. 959 (SM-02): Handy quer (Querformat, höchstens 520 px hoch) — EINE Regel für jedes Blatt: Kopf und Fuß schmal, der Fuß bleibt in EINER Zeile stehen (Hauptknopf immer sichtbar),
   der Inhalt bekommt die Resthöhe zwischen oberer Kante und Eckenzeile und scrollt. Vorher fraßen Kopf (80 px) und Fuß (136 px) 30–50 px Inhalt übrig. */
@media (orientation: landscape) and (max-height: 520px) {
    .el-blatt-kopf { padding-block: var(--sp-1); }
    .el-blatt-inhalt { padding: var(--sp-2) var(--sp-3); }
    .el-blatt-fuss { flex-wrap: nowrap; padding-block: var(--sp-1); }
    .el-blatt-fuss > :is(button, .btn) { flex: 1 1 0; min-width: 0; }
}