/* -----------------------------------------------------------------------------
   PLATZHALTER – darf komplett gelöscht werden.

   Diese Datei gehört nur zur Übergangs-Startseite ("Hier entsteht Tirisfal").
   Sobald das echte Design steht: index.php umbauen, diese Datei und den
   Eintrag in $pageCss entfernen. In assets/css/style.css steht absichtlich
   nichts davon drin, damit das spätere Stylesheet sauber startet.
----------------------------------------------------------------------------- */

:root {
    --ph-bg:      #0d1113;
    --ph-fog:     #17211f;
    --ph-text:    #e7ece9;
    --ph-muted:   #8b9a94;
    --ph-accent:  #9fb8ab;
    --ph-line:    rgba(159, 184, 171, 0.22);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;

    background-color: var(--ph-bg);
    /* Zwei weiche Lichtkegel – sonst wirkt die Fläche sehr tot. */
    background-image:
        radial-gradient(ellipse 80% 55% at 50% -10%, var(--ph-fog), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 115%, rgba(159, 184, 171, 0.10), transparent 70%);
    background-repeat: no-repeat;

    color: var(--ph-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- Kopfzeile ------------------------------------------------------------ */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 16px;
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--ph-text);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
}

.topbar-brand::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url("/assets/img/favicon.svg") center / contain no-repeat;
}

/* --- Mitte ---------------------------------------------------------------- */

.page {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.page-inner {
    width: 100%;
    max-width: 640px;
    text-align: center;
}

.ph-eyebrow {
    margin: 0 0 24px;
    color: var(--ph-accent);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.ph-title {
    margin: 0;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-size: clamp(2.75rem, 12vw, 5.5rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.05;
}

.ph-rule {
    width: 64px;
    height: 1px;
    margin: 28px auto;
    border: 0;
    background: var(--ph-line);
}

.ph-lead {
    margin: 0 auto;
    max-width: 42ch;
    color: var(--ph-muted);
    font-size: 1.0625rem;
}

.ph-note {
    margin: 40px auto 0;
    padding: 14px 18px;
    max-width: 42ch;

    border: 1px solid var(--ph-line);
    border-radius: 10px;

    color: var(--ph-muted);
    font-size: 0.875rem;
}

/* --- Fußzeile ------------------------------------------------------------- */

.sitefoot {
    padding: 20px 16px;
    color: var(--ph-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.sitefoot p { margin: 0; }

/* --- Meldungen (flash_set) ------------------------------------------------ */

.flash-stack {
    margin: 0 auto;
    padding: 12px 16px 0;
    max-width: 640px;
}

.flash {
    margin: 0 0 8px;
    padding: 10px 14px;
    border: 1px solid var(--ph-line);
    border-radius: 8px;
    font-size: 0.875rem;
}

.flash--error   { border-color: rgba(220, 110, 110, 0.45); }
.flash--success { border-color: rgba(120, 190, 150, 0.45); }

/* --- Eintreten ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .page-inner {
        animation: ph-fade 0.9s ease-out both;
    }

    @keyframes ph-fade {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: none; }
    }
}