/* ============================================================================
   Stile des gemeinsamen Zeichen-Bausteins (EquiDeck.Showboard.Darstellung) - NEU am 2026-10-31 (ShowBoard2).
   Unverändert verschoben aus EquiDeck.Showboard.Display\wwwroot\css\app.css (Seitenübergänge und Lauftext),
   damit Display und Designer-Vorschau dieselben Regeln laden. Adresse in beiden Programmen:
   _content/EquiDeck.Showboard.Darstellung/css/darstellung.css
   Das Display bindet die Datei direkt hinter app.css ein - an der Stelle, an der diese Regeln vorher am Ende von
   app.css standen; die Reihenfolge der Regeln bleibt damit gleich.
   Die Hinweise auf "DisplayRenderer.razor" in den Kommentaren meinen heute Zeichnen\SeitenZeichner.razor.
   ============================================================================ */

/* Page Transition Animations */
.page-fade-out {
    animation: fadeOut var(--transition-duration, 300ms) ease-in-out forwards;
}

.page-fade-in {
    animation: fadeIn var(--transition-duration, 300ms) ease-in-out forwards;
}

.page-slide-out {
    animation: slideOut var(--transition-duration, 300ms) ease-in-out forwards;
}

.page-slide-in {
    animation: slideIn var(--transition-duration, 300ms) ease-in-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ============================================================================
   Lauftext (Marquee) fuer zu lange Texte - nur Videoanzeige (VAZ), 07/2026
   Ueberarbeitet 2026-08-01 (v1.5.1.6)
   ----------------------------------------------------------------------------
   Zusammenspiel mit js/marquee.js und DisplayRenderer.razor:
   - .sb-marquee ist die an der Feldbreite clippende Box (overflow-x: clip,
     Inline-Style aus dem Renderer). Die innere Schiene .sb-marquee-track
     enthaelt den Text zweimal (Kopie 2 mit Luecke als padding-left).
   - Solange marquee.js KEINEN Ueberlauf gemessen hat, fehlt das Attribut
     data-sb-marquee-run: Kopie 2 ist versteckt, nichts bewegt sich - die Optik
     ist identisch zum klassischen Textfeld.
   - Die BEWEGUNG selbst steht seit dem 2026-08-01 nicht mehr hier, sondern
     kommt aus der Web-Animations-API (js/marquee.js, Element.animate).
     Hier bleiben nur noch Sichtbarkeit und Ausrichtung.

   Warum das Aktiv-Merkmal ein ATTRIBUT ist und keine Klasse:
   Die Klasse .sb-marquee-active musste von JS auf ein Element gesetzt werden,
   dessen class-Attribut Blazor rendert (DisplayRenderer.razor:346). Das ging
   bisher nur gut, weil dort ein unveraenderlicher Literal steht und Blazors
   Diff bei gleichem Wert gar nichts schreibt - also aus Zufall, nicht aus
   Konstruktion. Ein Attribut, das im Render-Tree ueberhaupt nicht vorkommt,
   kann Blazor dagegen unter keinen Umstaenden entfernen: RemoveAttribute
   entsteht nur fuer Attribute, die im alten Baum standen.
   ============================================================================ */

/* Grundzustand (Text passt): zweite Kopie unsichtbar, keine Bewegung.
   UMGESTELLT 2026-08-01 auf das Attribut, Begruendung siehe oben.
   ALT: .sb-marquee:not(.sb-marquee-active) .sb-marquee-copy2 { display: none; } */
.sb-marquee:not([data-sb-marquee-run]) .sb-marquee-copy2 {
    display: none;
}

/* Aktiver Lauftext: Der Text startet immer buendig am linken Feldrand
   ("erster Buchstabe am Anfang der Zeile"), egal welche Ausrichtung das Feld
   im statischen Zustand hat (center/right wuerde die Schiene sonst verschieben).
   Das !important schlaegt den normalen Inline-Style aus DisplayRenderer.razor:351
   - genau wie bisher. Dadurch beginnt die Schiene garantiert bei Offset 0 und die
   Animation kann bei translateX(0px) anfangen, ohne einen Startversatz aus der
   Ausrichtung herausrechnen zu muessen.
   ALT: .sb-marquee.sb-marquee-active { justify-content: flex-start !important; } */
.sb-marquee[data-sb-marquee-run] {
    justify-content: flex-start !important;
}

/* will-change haelt die Schiene auf einer eigenen Compositing-Ebene - die
   Bewegung laeuft dadurch am Hauptthread vorbei und ruckelt nicht, wenn Blazor
   gerade rendert. Bleibt also, auch wenn die Animation selbst jetzt aus dem JS kommt. */
.sb-marquee[data-sb-marquee-run] .sb-marquee-track {
    will-change: transform;
}

/* --- ERSETZT am 2026-08-01 (v1.5.1.6): Die Bewegung kommt jetzt aus der
   Web-Animations-API in js/marquee.js. ---

   Grund fuer den Wechsel: Diese Loesung uebergab Strecke, Dauer und Anlaufpause
   als CSS-Variablen im style-Attribut der Schiene. Dieses Attribut gehoert aber
   Blazor (DisplayRenderer.razor:352 - dort stehen Schriftgroesse, Farbe,
   Schriftschnitt und Schriftart). Schreibt Blazor es neu, sind die drei Variablen
   weg, die Strecke faellt auf den Vorgabewert 0px zurueck und das Band bleibt
   stehen. Der Merk-Zustand im JS haette das nie bemerkt und nie repariert.
   Eine Animation aus Element.animate() haengt dagegen am Element-OBJEKT; ein
   setAttribute('style', ...) kann sie weder loeschen noch anhalten.

.sb-marquee.sb-marquee-active .sb-marquee-track {
    animation: sb-marquee-run var(--sb-marquee-duration, 10s) linear var(--sb-marquee-delay, 0ms) infinite;
    will-change: transform;
}

@keyframes sb-marquee-run {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--sb-marquee-distance, 0px))); }
}
   --- Ende des ersetzten Blocks --- */

/* ============================================================================
   NEU am 2026-10-31: Grundlage der Zeichenfläche in der Designer-Vorschau (Showboard).
   Warum: Die Wand (Display) lädt bootstrap.min.css; dessen Grundregeln wirken auch auf die Felder der Seite
   (box-sizing: border-box für alles, Zeilenhöhe 1.5, keine Außenabstände an Überschriften/Absätzen, Grundschrift).
   Das Showboard lädt bootstrap nicht. Diese Klasse setzt dieselben Grundwerte NUR innerhalb der Vorschau-Hülle,
   damit die Felder dort gleich groß und gleich gesetzt erscheinen wie an der Wand. Im Display wird die Klasse
   nicht benutzt - an der Wand ändert sich dadurch nichts.
   ============================================================================ */
.sb-darstellung-grund,
.sb-darstellung-grund *,
.sb-darstellung-grund *::before,
.sb-darstellung-grund *::after {
    box-sizing: border-box;
}

.sb-darstellung-grund {
    /* Grundschrift wie app.css des Displays (html, body). */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}

.sb-darstellung-grund img,
.sb-darstellung-grund svg,
.sb-darstellung-grund video {
    vertical-align: middle;
}

/* Hülle und Fläche der Vorschau (SeitenVorschau.razor): Die Fläche hat die echte Seitengröße und wird als Ganzes verkleinert;
   den Faktor setzt js/vorschau.js an der Hülle (Hüllenbreite / Seitenbreite). Keine Maus: Auswahl und Ziehen macht die Bedienebene
   des Designers darüber. */
.sb-vorschau {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sb-vorschau-flaeche {
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(var(--sb-vorschau-massstab, 1));
    transform-origin: 0 0;
}

.sb-darstellung-grund p,
.sb-darstellung-grund h1,
.sb-darstellung-grund h2,
.sb-darstellung-grund h3 {
    margin: 0;
}