/* dkans.de, öffentliche Seiten. CI der DKAN UG (DESIGN.md). Kein Build, keine externen Quellen. */

@font-face {
    font-family: "Geist";
    src: url("/site/fonts/geist.woff2?v=1") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --graphit: #1F2A37;
    --graphit-hover: #344151;
    --toenung-1: #F4F7FB;
    --toenung-2: #E9EEF5;
    --toenung-3: #D7DFE9;
    --text: #0A0A0A;
    --text-fliess: #404040;
    --text-grau: #737373;
    --flaeche: #FFFFFF;
    --grund: #FAFAFA;
    --rand: clamp(20px, 4vw, 48px);
    --weich: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--grund);
    color: var(--text);
    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01" 0;
}

a {
    color: inherit;
}

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

.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Kopf */

.kopf {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(16px, 2.4vw, 28px) var(--rand);
}

.kopf-marke {
    font-weight: 620;
    font-size: 19px;
    letter-spacing: -0.01em;
    text-decoration: none;
    line-height: 1;
    padding: 8px 0;
}

.anmelden {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: var(--graphit);
    transition: background-color 200ms var(--weich), transform 200ms var(--weich);
}

.anmelden svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.anmelden:hover {
    background: var(--toenung-2);
}

.anmelden:active {
    transform: scale(0.94);
}

.anmelden:focus-visible {
    border-radius: 999px;
}

/* Startseite */

.held {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 120px var(--rand) 64px;
}

.held-inhalt {
    width: 100%;
}

.wortmarke {
    margin: 0;
    font-weight: 620;
    font-size: clamp(6.5rem, 28vw, 22rem);
    line-height: 0.8;
    letter-spacing: -0.01em;
    color: var(--graphit);
    /* optischer Ausgleich: die Glyphe D sitzt mit Vorbreite im Kegel */
    margin-left: -0.055em;
}

.buchstaben {
    display: inline-flex;
    overflow: hidden;
    /* Platz für Unterlänge des Masks, damit nichts abgeschnitten wird */
    padding-bottom: 0.04em;
}

.buchstaben span {
    display: inline-block;
}

.linie {
    height: 1px;
    width: min(100%, 22rem);
    margin: clamp(28px, 4vw, 48px) 0 clamp(20px, 2.6vw, 28px);
    background: var(--toenung-3);
    transform-origin: left center;
}

.zeile {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    line-height: 1.3;
    font-weight: 420;
    letter-spacing: -0.012em;
    color: var(--text-fliess);
    text-wrap: balance;
}

/* Rechtstexte */

.dokument {
    flex: 1;
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(112px, 14vw, 160px) var(--rand) 72px;
    color: var(--text-fliess);
    font-size: 16px;
    line-height: 1.65;
}

.dokument h1 {
    margin: 0 0 clamp(32px, 4vw, 48px);
    color: var(--text);
    font-weight: 620;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.dokument section {
    padding: 28px 0;
    border-top: 1px solid var(--toenung-2);
}

.dokument h2 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.dokument p {
    margin: 0 0 12px;
    max-width: 65ch;
}

.dokument p:last-child {
    margin-bottom: 0;
}

.dokument a {
    color: var(--graphit);
    text-decoration-color: var(--toenung-3);
    text-underline-offset: 3px;
    transition: text-decoration-color 160ms ease;
}

.dokument a:hover {
    text-decoration-color: var(--graphit);
}

.vorspann {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 36px !important;
}

.angaben {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 24px;
    margin: 0;
}

.angaben dt {
    color: var(--text-grau);
}

.angaben dd {
    margin: 0;
}

.nummer,
.angaben dd {
    font-variant-numeric: tabular-nums;
}

.stand {
    margin-top: 28px !important;
    padding-top: 20px;
    border-top: 1px solid var(--toenung-2);
    font-size: 14px;
    color: var(--text-grau);
}

/* Fuß */

.fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 20px var(--rand) clamp(20px, 2.6vw, 28px);
    font-size: 13px;
    letter-spacing: 0.01em;
    color: var(--text-grau);
}

.fuss p {
    margin: 0;
}

.fuss-links {
    display: flex;
    gap: 20px;
}

.fuss-links a {
    text-decoration: none;
    padding: 6px 0;
    transition: color 160ms ease;
}

.fuss-links a:hover,
.fuss-links a[aria-current="page"] {
    color: var(--text);
}

@media (max-width: 520px) {
    .fuss {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .angaben {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .angaben dd {
        margin-bottom: 8px;
    }
}

/* Bewegung: ruhig, einmalig, nur ohne Wunsch nach reduzierter Bewegung */

@media (prefers-reduced-motion: no-preference) {
    .buchstaben span {
        animation: steigen 1100ms var(--weich) both;
    }

    .buchstaben span:nth-child(1) { animation-delay: 80ms; }
    .buchstaben span:nth-child(2) { animation-delay: 150ms; }
    .buchstaben span:nth-child(3) { animation-delay: 220ms; }
    .buchstaben span:nth-child(4) { animation-delay: 290ms; }

    .linie {
        animation: ziehen 1200ms var(--weich) 620ms both;
    }

    .zeile {
        animation: einblenden 900ms var(--weich) 760ms both;
    }

    .start .kopf,
    .start .fuss {
        animation: auftauchen 800ms ease 1000ms both;
    }

    .dokument {
        animation: einblenden 600ms var(--weich) both;
    }
}

@keyframes steigen {
    from { transform: translateY(105%); }
    to { transform: translateY(0); }
}

@keyframes ziehen {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes einblenden {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes auftauchen {
    from { opacity: 0; }
    to { opacity: 1; }
}