/*
 * DiVe-Demo - Standalone-Styling
 *
 * Kein Bezug zur POS-App: alle Assets liegen in diesem Ordner.
 * Farbwerte des Verlaufs sind ans DiVe-Branding angelehnt.
 */

:root {
    /* Logo war 420px, jetzt +25% */
    --demo-logo-groesse: 525px;

    /* Silber-Metallic-Palette fuer den DEMO-Titel.
       Sanfter Chrom-Verlauf: Glanz oben, ruhige Mitte, mittlerer Tief-
       ton unten - keine harten Farbspruenge, damit keine "Streifen"
       in den Buchstaben entstehen. */
    --demo-silber-glanz:  #ffffff;
    --demo-silber-hell:   #dcdcdc;
    --demo-silber-mitte:  #b0b0b0;
    --demo-silber-tief:   #707070;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #1a1a1a;
    background: url('back.png') center/cover no-repeat;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.demo-anzeige {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    padding: 24px;
}

/* DEMO-Schriftzug: Silber-Metallic mit Schlagschatten.
 *
 * ## WARUM Chrom-Verlauf via background-clip: text:
 *   Ein echter Silbereffekt entsteht durch den vertikalen Uebergang
 *   Glanz -> Silbergrat -> Schatten - flat-Silber sieht wie Grau aus.
 *   background-clip: text fuellt die Buchstaben mit dem Verlauf,
 *   -webkit-text-fill-color: transparent schaltet die Standardfarbe ab.
 *
 * ## WARUM filter: drop-shadow statt text-shadow fuer den Schlagschatten:
 *   text-shadow rendert den Schatten der Buchstabenkontur - bei
 *   transparent-Text funktioniert das inkonsistent. drop-shadow folgt
 *   dem geclippten Verlauf sauber und ergibt einen echten Wurfschatten
 *   mit weichen Kanten (klassisch schraeg nach unten-rechts).
 */
.demo-anzeige__titel {
    margin: 0;
    font-family: 'Bahnschrift', 'Trebuchet MS', 'Century Gothic', 'Verdana', sans-serif;
    font-size: clamp(40px, 8vw, 110px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
    padding-right: 0.22em;

    background: linear-gradient(
        180deg,
        var(--demo-silber-glanz)  0%,
        var(--demo-silber-hell)  40%,
        var(--demo-silber-mitte) 70%,
        var(--demo-silber-tief) 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* Klassischer Schlagschatten schraeg nach unten-rechts.
       Kein zusaetzlicher text-stroke - das erzeugte harte Linien
       INNERHALB der Buchstaben. Der Schatten allein hebt den Titel
       genug vom Hintergrund ab. */
    filter: drop-shadow(4px 6px 6px rgba(0, 0, 0, 0.55));
}

/* Model-viewer braucht eine explizite Groesse (Canvas ohne intrinsisches
   Aspect-Ratio). Hintergrund transparent, damit der Verlauf durchscheint. */
model-viewer.demo-anzeige__logo {
    width: var(--demo-logo-groesse);
    height: var(--demo-logo-groesse);
    max-width: 70vw;
    max-height: 70vh;
    background-color: transparent;
    --poster-color: transparent;
    --progress-bar-color: transparent;
    --progress-bar-height: 0px;
    --progress-mask: transparent;
}

/* ## WARUM !important:
   model-viewer rendert den AR-Button ueber ::part(default-ar-button) mit
   interner Spezifitaet, die sich anders nicht ueberschreiben laesst. */
model-viewer.demo-anzeige__logo::part(default-ar-button) {
    display: none !important;
}

model-viewer.demo-anzeige__logo [slot="ar-button"] {
    display: none !important;
}