/* Landingpage — nur noch die Papyrusrolle, sonst nichts. Keine Drittanbieter-Ressourcen. */

/* ---------- Papyrusrolle ---------- */

.scroll {
    position: relative;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(12px, 4.5vw, 26px);
}

/* Holzstab oben/unten, um den das Papyrus gerollt ist */
.scroll-rod {
    position: relative;
    z-index: 2;
    height: clamp(18px, 5vw, 28px);
    border-radius: 999px;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 5px),
        linear-gradient(180deg, #7a4d28 0%, #9c6a3a 18%, #b98449 38%, #9c6a3a 58%, #7a4d28 78%, #4f3018 100%);
    box-shadow:
        inset 0 2px 2px rgba(255, 235, 200, 0.25),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

.scroll-rod-top { margin-bottom: -6px; }
.scroll-rod-bottom { margin-top: -6px; }

/* Knaeufe an den Enden der Staebe, ragen ueber das Papier hinaus */
.rod-knob {
    --knob-size: clamp(22px, 6.5vw, 36px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--knob-size);
    height: var(--knob-size);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #c99a5e, #7a4d28 60%, #3a2210 100%);
    box-shadow: inset 0 1px 1px rgba(255, 235, 200, 0.3);
}

.rod-knob-left { left: calc(var(--knob-size) / -2); }
.rod-knob-right { right: calc(var(--knob-size) / -2); }

.letter-frame {
    position: relative;
    z-index: 1;
}

.letter {
    position: relative;
    padding: clamp(26px, 7vw, 44px) clamp(20px, 6.5vw, 50px) clamp(30px, 7.5vw, 52px);
    color: #000000;

    /* Grundton: unregelmaessig gealtertes Papyrus */
    background-color: #d8c48e;
    background-image:
        /* Alterungsflecken */
        radial-gradient(circle at 34.1% 18.6%, rgba(101,72,35,0.06) 0%, transparent 125px),
        radial-gradient(circle at 53.2% 37.9%, rgba(101,72,35,0.1) 0%, transparent 66px),
        radial-gradient(circle at 8.4% 44.0%, rgba(101,72,35,0.06) 0%, transparent 67px),
        radial-gradient(circle at 43.2% 79.4%, rgba(101,72,35,0.07) 0%, transparent 72px),
        radial-gradient(circle at 61.5% 90.3%, rgba(101,72,35,0.09) 0%, transparent 118px),
        radial-gradient(circle at 92.9% 9.2%, rgba(101,72,35,0.08) 0%, transparent 146px),
        radial-gradient(circle at 18.0% 15.6%, rgba(101,72,35,0.12) 0%, transparent 91px),
        radial-gradient(circle at 21.3% 57.3%, rgba(101,72,35,0.08) 0%, transparent 124px),
        radial-gradient(circle at 54.3% 10.7%, rgba(101,72,35,0.07) 0%, transparent 66px),
        /* diagonale Streifen, wie bei den Buttons — aber deutlich schwaecher, damit der Text lesbar bleibt */
        repeating-linear-gradient(45deg, rgba(94,68,32,0.04) 0px, rgba(94,68,32,0.04) 2px, transparent 2px, transparent 6px),
        /* diagonale Farbunruhe fuer ungleichmaessige Faerbung */
        linear-gradient(128deg, #e4d3a0 0%, #d8c48e 45%, #c9ad74 78%, #d2b980 100%);
}

.letter p {
    font-family: 'Iowan Old Style', Palatino, Georgia, serif;
    font-style: italic;
    font-size: clamp(15.5px, 1.6vw + 12px, 18.5px);
    line-height: 1.78;
    margin: 0 0 22px;
    text-shadow: 0 0 3px rgba(230, 214, 174, 0.8), 0 0 1px rgba(230, 214, 174, 0.9);
}

.letter p:last-of-type { margin-bottom: 0; }

.letter .salutation {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    font-family: 'Iowan Old Style', Palatino, Georgia, serif;
    font-style: italic;
    color: #5a4020;
    font-size: clamp(19px, 1.8vw + 14px, 24px);
    margin-bottom: 28px;
}

.letter .salutation .cap {
    font-family: 'Iowan Old Style', Palatino, Georgia, serif;
    font-style: normal;
    font-size: 4em;
    font-weight: 700;
    line-height: 0.78;
    color: #7a3b12;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
}

.letter .closing {
    font-family: 'Iowan Old Style', Palatino, Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.2vw + 14px, 22px);
    color: #8a4414;
    text-align: center;
    margin-top: 8px !important;
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.6),
        2px 1px 0 rgba(0, 0, 0, 0.6);
}

/* ---------- Seiten-Grid: sidebar_left | Papyrus | sidebar_right ---------- */
/* Die mittlere Spalte ist auf max. 720px begrenzt und schrumpft mit,        */
/* sobald der verfügbare Platz kleiner wird — ganz ohne feste Pixel-Sprünge. */
.page-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: clamp(12px, 3vw, 32px);
    align-items: start;
    min-height: 100vh;
    padding: 0 clamp(12px, 3vw, 24px);
}

.sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}

.sidebar-left {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
}

.sidebar-right {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
}

.legal-links {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: sticky;
    top: 28px;
}

.landing {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    min-width: 0;
    padding: clamp(28px, 8vw, 72px) clamp(16px, 5vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ab hier wird's zu eng für drei Spalten nebeneinander — alles stapelt sich zentriert. */
@media (max-width: 1050px) {
    .page-layout {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-height: auto;
        row-gap: 24px;
        padding-top: 28px;
    }

    .sidebar-left,
    .sidebar-right,
    .legal-links,
    .landing {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
    }

    .sidebar {
        position: static;
        top: auto;
    }

    .legal-links {
        position: static;
        top: auto;
    }

    .sidebar-right { order: 1; }
    .sidebar-left { order: 2; }
    .legal-links { order: 3; }
    .landing { order: 4; align-self: auto; }
}