/* =============================
   THR Minimal Page – Base Styles (Light)
   ============================= */

/* 1) Self‑hosted Webfonts (Karla) */
@font-face {
    font-family: "karla-vf";
    src: url("../fonts/karla-variable.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "karla-vf";
    src: url("../fonts/karla-variableitalic.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

/* 2) Tokens */
:root{
    --bg: #ffffff;    /* White page */
    --fg: #0b0c0e;    /* Near-black text */
    --muted: #6b7280; /* Subtle gray */
    --accent: #e50914;/* THR Red (for focus/links) */
    --maxw: 88rem;
}

*{box-sizing:border-box}
html,body{height:100%}

/* 3) Base */
body{
    margin:0;
    font-family:"karla-vf", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    line-height:1.5;
    background:var(--bg);
    color:var(--fg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* 4) Layout: center logo; footer fixed spacing */
.page{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
}
.main{
    flex:1;
    display:grid;
    place-items:center;
    padding:clamp(24px, 6vw, 72px) 16px 16px;
}

/* 5) Logo (responsive) */
.logo{
    max-width:min(520px, 80vw);
    width:100%;
    height:auto;
    display:block;
}
@media (max-width: 480px){
    .logo{ max-width:min(280px, 84vw); }
}

.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.launch-hint {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--accent);
    margin: 0;
}

/* 6) Footer (Impressum / Datenschutz) */
.site-footer{
    text-align:center;
    padding: 20px 12px 28px;
    color:var(--muted);
    font-size:.95rem;
}
.site-footer nav{
    display:flex;
    gap:.5rem;
    justify-content:center;
    align-items:center;
}
.site-footer nav a{
    color:var(--muted);
    text-decoration:none;
    text-underline-offset:2px;
}
.site-footer nav a:hover{
    color:var(--fg);
    text-decoration:underline;
}

/* 7) Focus styles */
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* 8) Respect reduced motion (no animations here, but for completeness) */
@media (prefers-reduced-motion: reduce){
    *{animation: none !important; transition: none !important}
}