/* Gemeinsames Stylesheet für die Unterseiten (Impressum, Datenschutz).
   Eigene Datei, weil style.css und script.js auf die Startseite zugeschnitten sind. */

@font-face {
    font-family: 'LEMONMILK';
    src: url('../media/LEMONMILK/LEMONMILK-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --ink: #111111;
    --text: #2F3437;
    --muted: #787774;
    --line: rgba(0, 0, 0, 0.1);
    --accent: #5E2028;
    --mono: 'SF Mono', Consolas, 'Courier New', monospace;
    --serif: Baskerville, Georgia, serif;
}

body {
    margin: 0;
    background: #F7F6F3;
    color: var(--text);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.7;
}

.ds_header {
    background: #010101;
    padding: 14px 24px;
}

.ds_header_inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ds_back {
    font-family: LEMONMILK, sans-serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: #cbcbcb;
    text-decoration: none;
}

.ds_back:hover,
.ds_back:focus-visible {
    color: #f5f5f5;
}

.ds_header img {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    display: block;
}

main {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(56px, 9vw, 110px) 24px clamp(72px, 10vw, 130px);
}

h1 {
    font-family: LEMONMILK, Baskerville, serif;
    font-size: clamp(34px, 6vw, 60px);
    font-weight: normal;
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 16px;
}

.ds_stand {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 56px;
}

section {
    border-top: 1px solid var(--line);
    padding: 36px 0 8px;
}

section:first-of-type {
    border-top-color: var(--ink);
}

.ds_num {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 8px;
}

h2 {
    font-family: LEMONMILK, Baskerville, serif;
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: normal;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 16px;
}

p, ul {
    margin: 0 0 18px;
}

ul {
    padding-left: 1.2em;
}

li {
    margin-bottom: 6px;
}

a {
    color: var(--accent);
}

address {
    font-style: normal;
    margin: 0 0 18px;
}

.todo {
    background: #FBF3DB;
    color: #956400;
    padding: 0 4px;
    border-radius: 3px;
}

/* Fußzeile mit Links zwischen den Unterseiten */
.ds_footer {
    background: #1B1A1A;
    padding: 28px 24px;
}

.ds_footer_inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ds_footer a {
    color: #cbcbcb;
    text-decoration: none;
}

.ds_footer a:hover,
.ds_footer a:focus-visible,
.ds_footer a[aria-current="page"] {
    color: #f5f5f5;
    text-decoration: underline;
}

@media (max-width: 640px) {
    body {
        font-size: 17px;
    }

    .ds_header,
    main,
    .ds_footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}