/* Gemeinsames Stylesheet für Impressum & Datenschutz
   Design-Tokens identisch zur Startseite (index.html) */

:root{
    --white:        #ffffff;
    --paper:        #fafbfc;
    --line:         #e6e9ef;
    --line-strong:  #cfd5e0;
    --ink:          #0b1b3a;
    --ink-soft:     #1a2748;
    --body:         #2b3550;
    --muted:        #5a6482;
    --blue:         #1d4ed8;
    --blue-strong:  #163bb0;
    --blue-tint:    #eef2ff;
    --focus:        #ffb703;

    --grid:         rgba(29,78,216,.05);
    --grid-size:    48px;

    --font-head: "Inter Tight", "Helvetica Neue", "Arial Narrow", Arial, system-ui, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Roboto Mono", "Courier New", monospace;

    --wrap: 820px;
    --gutter: clamp(20px, 4vw, 40px);
    --radius: 14px;
}

*, *::before, *::after{ box-sizing: border-box; }

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

body{
    margin: 0;
    background: var(--paper);
    color: var(--body);
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.wrap{
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
    z-index: 1;
}

/* ---------- Header ---------- */
.legal-header{
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.legal-header .wrap{
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.brand{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}
.brand img{ width: 63px; height: 36px; object-fit: contain; display: block; }
.brand span{
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 17px;
}
.back-link{
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.back-link:hover{ text-decoration: underline; }

/* ---------- Titelblock ---------- */
.legal-hero{
    background:
        linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
        var(--white);
    border-bottom: 1px solid var(--line);
    padding: 64px 0 52px;
}
.mono-label{
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 500;
    margin: 0 0 14px;
}
.legal-hero h1{
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -0.025em;
    font-size: clamp(32px, 5.5vw, 46px);
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
}
.legal-hero .stand{
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 14.5px;
}

/* ---------- Inhalt ---------- */
main{ padding: 56px 0 80px; }

h2{
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 23px;
    line-height: 1.25;
    color: var(--ink);
    margin: 48px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
h2:first-of-type{ margin-top: 0; border-top: 0; padding-top: 0; }

h3{
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17.5px;
    color: var(--ink-soft);
    margin: 30px 0 8px;
}

p{ margin: 0 0 15px; }
p:last-child{ margin-bottom: 0; }

a{ color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover{ color: var(--blue-strong); }

ul{ margin: 0 0 15px; padding-left: 22px; }
li{ margin-bottom: 7px; }

strong{ color: var(--ink-soft); font-weight: 700; }

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

/* Adress-/Hinweiskarte */
.card{
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin: 0 0 15px;
}
.card address{ font-style: normal; line-height: 1.75; }

/* Inhaltsverzeichnis */
.toc{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 44px;
}
.toc p{
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
}
.toc ol{ margin: 0; padding-left: 20px; }
.toc li{ margin-bottom: 5px; }

/* ---------- Footer ---------- */
.legal-footer{
    background: var(--ink);
    color: #cfd7ea;
    padding: 40px 0;
    font-size: 14.5px;
}
.legal-footer .wrap{
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
    justify-content: space-between;
}
.legal-footer a{ color: #fff; text-decoration: none; }
.legal-footer a:hover{ text-decoration: underline; }
.legal-footer nav{ display: flex; gap: 22px; flex-wrap: wrap; }

@media (max-width: 560px){
    body{ font-size: 16px; }
    main{ padding: 40px 0 60px; }
}