/* =============================
   THR Legal Pages (Impressum, Datenschutz)
   ============================= */

@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 & Base (Dark + THR Red)
   ====================== */
:root{
    --bg: #0b0c0e;
    --fg: #f6f7f9;
    --muted: #b9bec7;
    --card: #121418;
    --border: #1d2026;
    --accent: #D92128;
    --radius: 16px;
    --maxw: 72rem;
}

/* Generic media defaults */
img{max-width:100%;height:auto;display:block}


* { box-sizing: border-box; }

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

.page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    padding: clamp(1.5rem, 4vw, 3rem) 1rem;
    max-width: var(--maxw);
    margin: 0 auto;
}

h1, h2, h3 {
    font-weight: 600;
    line-height: 1.3;
    margin: 1.5rem 0 1rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

p, ul, ol {
    margin: 0 0 1rem;
}

ul, ol {
    padding-left: 1.25rem;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover {
    color: #b40810;
}

.site-footer {
    text-align: center;
    padding: 1.5rem 1rem 2.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    border-top: 1px solid #e5e7eb;
}
.site-footer nav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.site-footer nav a {
    color: var(--muted);
    text-decoration: none;
}
.site-footer nav a:hover {
    color: var(--fg);
    text-decoration: underline;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* =============================
   Header / Logo
   ============================= */
.site-header{display:flex;justify-content:center;align-items:center;padding:clamp(24px,6vw,48px) 16px 8px}
.site-header .logo{max-width:280px;width:100%;height:auto}
@media (max-width:768px){.site-header .logo{max-width:200px}}
@media (max-width:480px){.site-header .logo{max-width:160px}}

/* Optional: content container if used */
.container{max-width:var(--maxw);margin:0 auto;padding:0 1rem}


/* =============================
   LEGAL (Impressum/Datenschutz) – derived from index
   ============================= */
body.theme-light{ background:#fff; color:#0b0c0e; }

/* page wrapper to keep footer at bottom */
body.theme-light.legal .page{ min-height:100dvh; display:flex; flex-direction:column; }
body.theme-light.legal main{ flex:1; }

/* layout: centered content column, no grid */
body.theme-light.legal .container{ max-width:72ch; margin:0 auto; padding:clamp(24px,5vw,48px) 16px; display:block; }

/* header + logo */
body.theme-light.legal .site-header{ display:flex; justify-content:center; align-items:center; padding:clamp(24px,6vw,48px) 16px 0; }
body.theme-light.legal .logo{ max-width:260px; width:100%; height:auto; display:block; margin:0 auto; }

/* panel becomes transparent, no frame */
body.theme-light.legal .panel{ background:transparent; border:0; box-shadow:none; padding:0; text-align:left; max-width:none; }

/* type hierarchy */
body.theme-light.legal h1{ font-weight:700; font-size:1.75rem; margin:0 0 1rem; }
body.theme-light.legal h2{ font-weight:600; font-size:1.35rem; margin:1.5rem 0 .75rem; }
body.theme-light.legal h3{ font-weight:600; font-size:1.15rem; margin:1.25rem 0 .5rem; }
body.theme-light.legal p, body.theme-light.legal ul, body.theme-light.legal ol{ margin:0 0 1rem; }
body.theme-light.legal ul, body.theme-light.legal ol{ padding-left:1.25rem; }
body.theme-light.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
body.theme-light.legal a:hover{ color:#b40810; }

/* footer: no top border, stick to bottom via .page flex */
body.theme-light.legal .site-footer{ border-top:0; color:#6b7280; padding:1.25rem 1rem 2rem; }
body.theme-light.legal .site-footer a{ color:#6b7280; }
body.theme-light.legal .site-footer a:hover{ color:#0b0c0e; }