/* famozy website: tokens and rules from docs/design (design-guidelines.md, "Website"). No external requests. */
@font-face {
    font-family: "Figtree";
    src: url("/fonts/Figtree-Variable.woff") format("woff");
    font-weight: 300 900;
    font-display: swap;
}

:root {
    --coral: #E86252;
    --dusk: #485696;
    --dusk-hover: #394478;
    --dusk-pressed: #2B335A;
    --cyan: #1B9AAA;
    --blush: #FDE8E9;
    --surface: #F5F6FA;
    --raised: #FFFFFF;
    --ink: #1F2433;
    --ink-muted: #5B6178;
    --line: #D9DCE6;
    --font: "Figtree", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The footer stays at the bottom of short pages. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--raised);
    color: var(--ink);
    font: 18px/28px var(--font);
}

main { flex: 1 0 auto; }

a { color: var(--dusk); font-weight: 600; }
a:hover { color: var(--dusk-hover); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 12px; background: var(--raised); }

/* Header and hero on coral; white wordmark, ink links (white small text on coral fails contrast). */
.site-header { background: var(--coral); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { display: block; height: 28px; width: auto; }





.site-footer { background: var(--dusk-pressed); color: #FFFFFF; padding: 16px 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer a { display: inline-block; padding: 12px 0; color: #FFFFFF; }
/* The ink focus ring would vanish on the dark footer. */
.site-footer :focus-visible { outline-color: #FFFFFF; }
.site-footer p { margin: 0; font-size: 14px; line-height: 20px; }

/* Landing page: one coral screen with the promise and a flat illustration in the palette. */
.home { background: var(--coral); }
.landing { display: flex; align-items: center; background: var(--coral); color: #FFFFFF; padding: 48px 0 96px; }
.landing-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; width: 100%; }
.badge {
    display: inline-block;
    margin: 0 0 24px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--ink);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}
.landing h1 { margin: 0 0 24px; max-width: 16ch; font-size: 56px; line-height: 64px; font-weight: 800; }
.landing .sub { margin: 0; max-width: 32ch; font-size: 24px; line-height: 32px; }

.art { position: relative; height: 360px; }
.sheet { position: absolute; border-radius: 16px; }
.sheet-back { inset: 0 18% 22% 22%; background: var(--blush); transform: rotate(-8deg); }
.sheet-mid { inset: 8% 10% 14% 30%; background: var(--dusk); transform: rotate(5deg); }
.sheet-front {
    inset: 16% 22% 4% 14%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    background: #FFFFFF;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14);
}
.tile { width: 48px; height: 48px; border-radius: 12px; background: var(--cyan); }
.line { height: 12px; border-radius: 999px; background: var(--line); }
.w80 { width: 80%; } .w60 { width: 60%; } .w70 { width: 70%; }
.pill { width: 96px; height: 24px; margin-top: auto; border-radius: 999px; background: var(--blush); }

/* Text pages (Impressum) */
.page { padding: 48px 0 96px; background: var(--surface); }
.page article { max-width: 72ch; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.page h1 { margin: 0 0 24px; font-size: 40px; line-height: 48px; font-weight: 700; }
.page h2 { margin: 32px 0 8px; font-size: 20px; line-height: 28px; font-weight: 600; }
.page p, .page address { margin: 0 0 16px; font-style: normal; }

@media (max-width: 1023.98px) {
    .landing-grid { grid-template-columns: 1fr; }
    .art { width: 100%; max-width: 420px; height: 280px; }
}

@media (max-width: 599.98px) {
    body { font-size: 16px; line-height: 24px; }
    .wrap { padding: 0 16px; }
    .landing { padding: 24px 0 48px; }
    .landing h1 { font-size: 40px; line-height: 48px; }
    .art { display: none; }
    .page article { padding: 24px 16px; }
    .page h1 { font-size: 28px; line-height: 36px; }
}