/*
    elternlink.de — the public site.

    One stylesheet, no build step, no external requests. That last point is not tidiness:
    this is the marketing site of a product sold on data sovereignty, so it must not load a
    font from Google, a script from a CDN or an analytics beacon from anywhere. Everything
    here is served from the same origin, which is what lets the Datenschutzerklärung say
    "keine Cookies, kein Tracking" without a footnote.
*/

:root {
    --ink:        #16202b;
    --ink-soft:   #47576a;
    --ink-faint:  #6b7c90;
    --line:       #dfe5ec;
    --line-soft:  #eef2f6;
    --paper:      #ffffff;
    --paper-soft: #f6f8fa;
    --accent:     #1d5c8f;
    --accent-ink: #144569;
    --warn-bg:    #fff8e6;
    --warn-line:  #e8d9a8;
    --warn-ink:   #6b5310;

    --measure: 34rem;
    --page:    68rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink:        #e8edf3;
        --ink-soft:   #aebccc;
        --ink-faint:  #8494a6;
        --line:       #2a3644;
        --line-soft:  #202a35;
        --paper:      #131b23;
        --paper-soft: #0e151b;
        --accent:     #7db8e4;
        --accent-ink: #a8d2f2;
        --warn-bg:    #241f10;
        --warn-line:  #4a4023;
        --warn-ink:   #e0cd94;
    }
}

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

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--paper-soft);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* --- Grundelemente ------------------------------------------------------- */

h1, h2, h3 {
    line-height: 1.2;
    text-wrap: balance;
    font-weight: 640;
    letter-spacing: -0.012em;
    margin: 0;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.05vw, 1.85rem); }
h3 { font-size: 1.125rem; font-weight: 620; }

p, ul, ol, dl, table { margin: 0 0 1.1rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
    color: var(--accent);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-ink); }

/* Ein sichtbarer Fokusring, der nirgends entfernt wird — dieselbe Regel wie in der
   Elternoberfläche (BITV 2.0 / EN 301 549). */
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

strong { font-weight: 640; }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.5rem 0;
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.prose { max-width: var(--measure); }

section { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.band { background: var(--paper); border-block: 1px solid var(--line); }

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--paper);
    color: var(--ink);
    padding: 0.75rem 1.25rem;
    z-index: 10;
}
.skip:focus { left: 0; }

/* --- Kopf ---------------------------------------------------------------- */

.masthead {
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.masthead .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
}

.wordmark {
    font-size: 1.15rem;
    font-weight: 660;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}
.wordmark span { color: var(--accent); }

/* The masthead carried the operator's name beside the wordmark; removed with the markup. The
   provider is still named on every page in the footer, next to the Impressum link, so § 5 DDG
   is unaffected — that obligation is about the Impressum being easy to find, not about a line
   in the header. */

/* --- Hero ---------------------------------------------------------------- */

/*
    The hero, with the paper letter blurred behind it.

    **Decoration that must never cost legibility.** The heading sits at roughly 15:1 against
    `--paper`, and the image is allowed to spend a little of that and no more: it is masked away
    to nothing across the left two thirds, where the h1 and the lead actually sit, so the text
    never crosses the busy part of the sheet. What remains is a suggestion of the object the
    product replaces.

    `isolation: isolate` and a negative `z-index` put the pseudo-element behind the content
    without taking it out of the hero's own stacking context, so nothing here can end up over
    the skip link or the masthead.
*/
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
    background: var(--paper);
}

.hero::before {
    content: "";
    position: absolute;

    /* **Aligned to the text column, not to the viewport.** The section is full-bleed while the
       content sits in a centred `--page` column, so anchoring the sheet to the section's right
       edge parked it against the screen edge on a wide monitor — metres from the words it is
       supposed to sit behind. Matching `.wrap`'s own geometry keeps the two together at every
       width: the sheet lands just off the end of the heading, wherever that happens to be.

       `100% - 3rem` is `.wrap`'s horizontal padding, so the right edges line up exactly. */
    top: -10%;
    bottom: -14%;
    left: 50%;
    width: min(100% - 3rem, var(--page));
    /* `-50%` centres the box on the column; the added offset nudges the sheet outward, past the
       column's right edge and into the page margin. `.hero` clips the overflow, so this cannot
       widen the document or raise a horizontal scrollbar however far it is pushed. */
    transform: translateX(calc(-50% + 5rem));

    z-index: -1;
    /* **Longhand, not the `background` shorthand.** This first read
       `background: url(…) no-repeat right -4% center / contain`, and the three-value position
       before `/ <size>` is not parseable in the shorthand — so the whole declaration was
       dropped and nothing was painted at all. A shorthand fails silently and completely; four
       longhands fail one at a time, if ever. */
    background-image: url("/img/letter.svg?v=18642911f5");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    /* **No `filter` here — the blur lives in the SVG and is graded.** A flat CSS blur softened
       the tick boxes into the same grey as everything else, which lost the one detail the
       picture exists to convey. The file now carries the artwork twice, cross-faded from
       blurred at the top to sharp across the slip, so the letter stays scenery while the boxes
       read as boxes. Re-adding `filter: blur()` here would flatten that back out. */
    opacity: 0.5;
    /* Fades out towards the text rather than sitting under it. Doubled with the unprefixed
       property for WebKit, which still wants the prefix for mask-image. */
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 88%);
    mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 88%);
    pointer-events: none;
}

/* On a phone the sheet would sit directly under the heading, where the mask cannot save it —
   there is no horizontal room to fade into. Better absent than faint and in the way. */
@media (max-width: 48rem) {
    .hero::before { display: none; }
}

/* On dark it is a sheet of white paper on near-black: the same opacity reads as a glare rather
   than a suggestion, so it drops to a third of it. */
@media (prefers-color-scheme: dark) {
    .hero::before { opacity: 0.17; }
}

.hero .lead {
    margin-top: 1.5rem;
    font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    color: var(--ink-soft);
    max-width: 38rem;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    font-weight: 620;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

/* The `.slip` and `.slip-note` rules lived here — the paper slip set as monospace text under
   the heading. Removed with the markup they styled: the blurred sheet behind the hero now says
   the same thing in the same place, and two of them was one too many. */

/* --- Raster -------------------------------------------------------------- */

.grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin-top: 2.5rem;
}

.card {
    padding: 1.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.band .card { background: var(--paper-soft); }

.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.96875rem; margin: 0; }

.step {
    display: block;
    font-size: 0.75rem;
    font-weight: 660;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

/* --- Listen -------------------------------------------------------------- */

.ticks { list-style: none; padding: 0; }

.ticks li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.7rem;
    color: var(--ink-soft);
}

.ticks li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.62em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
}

.ticks li strong { color: var(--ink); }

/* Kein `style`-Attribut irgendwo im Markup — die CSP in `_headers` erlaubt
   `style-src 'self'` ohne `'unsafe-inline'`, und das soll so bleiben. */
.spaced { margin-top: 1.75rem; }

/* --- Tabelle (E-Mail-Arten) ---------------------------------------------- */

.table-scroll { overflow-x: auto; margin-top: 2rem; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    min-width: 34rem;
}

caption {
    text-align: left;
    color: var(--ink-faint);
    font-size: 0.9375rem;
    padding-bottom: 0.85rem;
}

th, td {
    text-align: left;
    vertical-align: top;
    padding: 0.7rem 1rem 0.7rem 0;
    border-bottom: 1px solid var(--line);
}

thead th {
    font-size: 0.78125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom-color: var(--ink-faint);
}

td { color: var(--ink-soft); }
td:first-child { color: var(--ink); font-weight: 560; white-space: nowrap; }

/* --- Hinweiskasten ------------------------------------------------------- */

.note {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--warn-bg);
    border: 1px solid var(--warn-line);
    border-radius: 6px;
    color: var(--warn-ink);
    font-size: 0.96875rem;
}
.note p { margin-bottom: 0.6rem; }
.note :last-child { margin-bottom: 0; }

/* --- Rechtstexte --------------------------------------------------------- */

.legal { max-width: 44rem; padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.legal h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.35rem); margin-bottom: 1.75rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.legal h3 { margin-top: 1.75rem; margin-bottom: 0.4rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }

.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; }
.legal dt { font-weight: 600; color: var(--ink); }
.legal dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 34rem) {
    .legal dl { grid-template-columns: 1fr; gap: 0.1rem; }
    .legal dd { margin-bottom: 0.7rem; }
}

.updated { color: var(--ink-faint); font-size: 0.9375rem; }

/* Offene Angabe. Rot und in Grossbuchstaben, damit niemand sie versehentlich
   veroeffentlicht — ein Impressum mit einer Luecke ist abmahnfaehig. */
.todo {
    background: #ffe1e1;
    color: #8a1010;
    padding: 0.05em 0.35em;
    border-radius: 2px;
    font-weight: 620;
    font-size: 0.9em;
}

@media (prefers-color-scheme: dark) {
    .todo { background: #4a1414; color: #ffc9c9; }
}

/* --- Fuss ---------------------------------------------------------------- */

.footer {
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding-block: 2.5rem;
    font-size: 0.9375rem;
    color: var(--ink-faint);
}

.footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin-bottom: 1rem;
}

/* 44 px Ziel — dieselbe Untergrenze wie in der Elternoberflaeche. */
.footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.footer p { margin: 0; max-width: var(--measure); }