/* =========================================================================
   dbvo.de — Erscheinungsbild
   =========================================================================

   Die Farbwerte stammen aus dem bisherigen Auftritt und wurden bewusst
   uebernommen: ink/soft/line/paper/plate und die vier Blautoene b1..b4.
   Neu ist genau EINE Signalfarbe, und die wird sparsam eingesetzt —
   fuer "verfuegbar" und fuer die verbundene Seite des Schaltplans.

   Es gibt kein JavaScript auf dieser Seite. Der Hell/Dunkel-Wechsel folgt
   der Einstellung des Betriebssystems; ein Umschalter muesste sich die Wahl
   merken, und Speicher auf dem Geraet des Besuchers ist juristisch
   dieselbe Ecke wie ein Cookie.
   ========================================================================= */

:root {
    --paper: #FBFCFD;
    --plate: #FFFFFF;
    --ink:   #001424;
    --soft:  #4B5C68;
    --line:  #E2E8ED;

    --b1: #144165;
    --b2: #275D87;
    --b3: #447098;
    --b4: #5B8CB5;

    --signal: #12855A;
    --signal-soft: rgba(18, 133, 90, 0.10);

    --shade: rgba(0, 20, 36, 0.06);
    --shade-strong: rgba(0, 20, 36, 0.13);

    /* Schriftrollen: Poppins traegt Display und Text, die Schreibmaschine
       traegt Etiketten, Zahlen und Status. Zweite Stimme ohne zweiten Download. */
    --font-text: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* Schriftskala, am 22.08.2026 eine deutliche Stufe verkleinert.
       Vorher: Fließtext 17,3 px, Einleitung 22,4 px, h1 45,6 px — objektiv
       im normalen Bereich, aber Peter empfand es zweimal als zu groß.
       Jetzt: 16 / 19,2 / 36 px. Die Größe des Fließtextes ist damit die
       Voreinstellung der Browser, darunter fängt es an, unangenehm zu werden. */
    --step-xs: 0.75rem;
    --step-sm: 0.875rem;
    --step-md: clamp(0.95rem, 0.92rem + 0.12vw, 1rem);
    --step-lg: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
    --step-xl: clamp(1.3rem, 1.16rem + 0.58vw, 1.65rem);
    --step-2xl: clamp(1.6rem, 1.3rem + 1.05vw, 2.25rem);

    --s-1: 0.5rem;
    --s-2: 0.875rem;
    --s-3: 1.35rem;
    --s-4: 2rem;
    --s-5: 3rem;
    --s-6: 4.5rem;
    --s-7: 6.5rem;

    --radius: 12px;
    --radius-sm: 5px;
    --container: 1180px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #071019;
        --plate: #0C1926;
        --ink:   #E9F0F5;
        --soft:  #9FB1BD;
        --line:  #1E2E3B;

        --b1: #3E7CAE;
        --b2: #5390BE;
        --b3: #74A8CE;
        --b4: #9AC3DE;

        --signal: #2FB884;
        --signal-soft: rgba(47, 184, 132, 0.12);

        --shade: rgba(0, 0, 0, 0.35);
        --shade-strong: rgba(0, 0, 0, 0.5);
    }
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--step-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    margin: 0 0 var(--s-2);
    line-height: 1.13;
    /* Enge Laufweite ist der ganze Trick, mit dem eine geometrische
       Grotesk wie Poppins nach Absicht aussieht statt nach Voreinstellung. */
    letter-spacing: -0.028em;
    font-weight: 700;
}

h1 { font-size: var(--step-2xl); }
h2 { font-size: var(--step-xl); }
h3 { font-size: var(--step-lg); letter-spacing: -0.018em; }
h4 { font-size: var(--step-md); letter-spacing: -0.012em; }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

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

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

ul { margin: 0 0 var(--s-3); padding-left: 1.15rem; }
li { margin-bottom: var(--s-1); }

/* --- Bausteine ---------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--b1);
    color: #fff;
    padding: 0.7rem 1.1rem;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Etikett in Schreibmaschine — die zweite Stimme der Seite. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--b3);
    margin: 0 0 var(--s-2);
    display: block;
}

/* Satzspiegel — Breiten in rem, NICHT in ch.
   ch misst die Breite der Ziffer Null, und die ist bei Poppins rund ein
   Viertel breiter als ein Durchschnittsbuchstabe. "68ch" ergab deshalb
   85 Zeichen je Zeile statt der angepeilten 68. Gut lesbar sind 60–75;
   darüber verliert das Auge beim Zeilenwechsel die Spur, und der Text
   wirkt größer, als er ist. (Gemessen und berichtigt am 22.08.2026.) */
.lead {
    font-size: var(--step-lg);
    line-height: 1.5;
    color: var(--soft);
    max-width: 36rem;
}

.prose { max-width: 32rem; }
.prose h3 { margin-top: var(--s-4); }

/* Abschnittskopf mit Knoten-Linie: die Linie endet in einem Quadrat.
   Das Quadrat ist aus dem Logo geliehen — dort sind die Kacheln der
   Bildmarke dieselbe Form. */
.section-head { margin-bottom: var(--s-4); }
.section-head__rule {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: var(--s-2);
}
.section-head__rule::before {
    content: "";
    width: 2.6rem;
    height: 1px;
    background: var(--b4);
}
.section-head__rule::after {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--b3);
}

.section { padding-block: var(--s-6); }
.section--tight { padding-block: var(--s-5); }
.section--plate { background: var(--plate); border-block: 1px solid var(--line); }

/* Zweispalter für die textlastigen Seiten (Über uns, Impressum, Datenschutz).
   Ohne ihn steht dort eine schmale Textspalte links und die halbe Seite rechts
   ist leer — und genau das lässt den Text überdimensioniert wirken. Die
   Überschrift wandert deshalb in eine eigene Spalte daneben.

   Die linke Spalte bleibt beim Scrollen stehen (sticky). Auf langen Seiten wie
   der Datenschutzerklärung weiß man dadurch immer noch, worin man liest.
   6rem Abstand nach oben, damit sie nicht unter dem Kopfbereich klebt. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Umgekehrtes Verhältnis: dort, wo der FLIESSTEXT links steht und rechts nur
   eine Randspalte mit Zahlen. Der Text braucht die breitere Seite. */
.split--text-first { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

/* Kopf einer Unterseite: Überschrift links, Einleitung rechts. Braucht unten
   Abstand, weil danach im selben Abschnitt die Karten oder das Raster folgen. */
.split--head { margin-bottom: var(--s-5); }

.split__aside { position: sticky; top: 6rem; }

/* Deutsche Komposita sind länger als ihre Spalte: „Datenschutzerklärung" ist
   bei 45,6 px rund 520 px breit, die Spalte aber nur 455 px. Ohne diese zwei
   Zeilen läuft das Wort heraus und legt sich über den Text daneben.
   hyphens trennt sauber (die Sprache steht im <html lang>), overflow-wrap ist
   die Notbremse, falls der Browser kein Trennwörterbuch hat. */
.split__aside h1,
.split__aside h2 {
    hyphens: auto;
    overflow-wrap: break-word;
}

.split .section-head { margin-bottom: 0; }

/* In der Spalte darf der Text weiter laufen als in einer vollen Seitenbreite,
   aber nicht beliebig: Auf einem breiten Bildschirm ergab die freie Spalte
   wieder 76 Zeichen je Zeile. Diese Werte halten beides bei rund 65–70. */
.split .lead { max-width: 38rem; }
.split .prose { max-width: 33rem; }

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; gap: var(--s-3); }
    .split__aside { position: static; }
    .split .lead { max-width: 36rem; }
    .split .prose { max-width: 32rem; }
}

/* --- Schaltflaechen ----------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--step-sm);
    letter-spacing: -0.005em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn--primary { background: var(--b1); color: #fff; }
.btn--primary:hover { background: var(--b2); color: #fff; }

.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--plate); }
.btn--ghost:hover { border-color: var(--b4); color: var(--b1); }

/* --- Kopfbereich -------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: 4.4rem;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand picture, .site-footer__brand picture { display: block; }

/* Hoehe vorgeben, Breite folgt dem Seitenverhaeltnis der Datei (749:332).
   Die Attribute width und height stehen trotzdem im HTML — daran rechnet der
   Browser den Platz aus, bevor die Datei da ist, und die Seite ruckt beim
   Laden nicht.

   Die weisse Plakette, die das alte PNG im Dunkelmodus brauchte, ist seit dem
   22.08.2026 weg: Es gibt jetzt zwei SVG-Fassungen, hell und dunkel. */
.brand img { height: 2.5rem; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: var(--s-3); }
.nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav__link {
    text-decoration: none;
    color: var(--soft);
    font-size: var(--step-sm);
    font-weight: 500;
    padding-block: 0.35rem;
    border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--b2); }

.lang {
    font-family: var(--font-mono);
    font-size: var(--step-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.55rem;
}
.lang:hover { color: var(--b1); border-color: var(--b4); }

/* Klappmenue fuer schmale Bildschirme — <details>, damit es ohne
   JavaScript funktioniert. Tastaturbedienung bringt der Browser mit. */
.menu { display: none; position: relative; }
.menu__summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--step-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.75rem;
}
.menu__summary::-webkit-details-marker { display: none; }
.menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    min-width: 13rem;
    background: var(--plate);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px var(--shade);
    padding: var(--s-1);
    list-style: none;
    margin: 0;
}
.menu__panel li { margin: 0; }
.menu__panel a {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
    font-size: var(--step-sm);
}
.menu__panel a:hover { background: var(--paper); }

@media (max-width: 860px) {
    .nav__list { display: none; }
    .menu { display: block; }
}

/* --- Aufmacher und Schaltplan ------------------------------------------- */

.hero { padding-block: var(--s-6) var(--s-6); overflow: hidden; }

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.hero__text { max-width: none; }
.hero .lead { max-width: 44ch; }
.hero h1 { margin-bottom: var(--s-3); }
.hero .lead { margin-bottom: var(--s-4); }

@media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; gap: var(--s-5); }
    .hero__text { max-width: 52ch; }
}

/* Der Schaltplan.
   Links Systeme, die nichts voneinander wissen; rechts dieselben, verbunden
   ueber die dbvo-Achse. Die Leitungen zeichnen sich beim Laden selbst —
   das ist die einzige Bewegung auf der ganzen Seite, und sie sagt genau das,
   was die Firma tut. */
.schematic { width: 100%; height: auto; display: block; }

.schematic__node {
    fill: var(--plate);
    stroke: var(--line);
    stroke-width: 1.5;
}
.schematic__node--live { stroke: var(--b4); }

.schematic__hub {
    fill: var(--b1);
    stroke: none;
}

.schematic__label {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.09em;
    fill: var(--soft);
    text-transform: uppercase;
}
/* Die Marke schreibt sich klein — das gilt auch mitten im Schaubild. */
.schematic__label--hub { fill: #fff; letter-spacing: 0.14em; font-size: 15px; text-transform: none; }

.schematic__wire {
    fill: none;
    stroke: var(--b3);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.schematic__wire--out { stroke: var(--signal); }

.schematic__dot { fill: var(--b3); }
.schematic__dot--out { fill: var(--signal); }

.schematic__caption {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    fill: var(--b4);
    text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
    .schematic__wire {
        stroke-dasharray: var(--len, 400);
        stroke-dashoffset: var(--len, 400);
        animation: draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
        animation-delay: calc(0.35s + var(--i, 0) * 0.13s);
    }
    .schematic__node,
    .schematic__label,
    .schematic__dot {
        opacity: 0;
        animation: settle 0.5s ease-out forwards;
        animation-delay: calc(var(--i, 0) * 0.08s);
    }
    .schematic__hub, .schematic__label--hub {
        opacity: 0;
        animation: settle 0.5s ease-out forwards;
        animation-delay: 0.25s;
    }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    @keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* --- Karten ------------------------------------------------------------- */

.grid { display: grid; gap: var(--s-3); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .grid--2 { grid-template-columns: 1fr; } }

.card {
    background: var(--plate);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.card--link { text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.card--link:hover { border-color: var(--b4); transform: translateY(-2px); color: inherit; }

.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.card__title { margin: 0; }
.card__tagline { font-family: var(--font-mono); font-size: var(--step-xs); letter-spacing: 0.06em; color: var(--b3); }
.card__text { color: var(--soft); font-size: var(--step-sm); margin: 0; }
.card__more { margin-top: auto; padding-top: 0.4rem; font-size: var(--step-sm); font-weight: 600; color: var(--b1); }

.card ul { margin: 0; padding-left: 1.1rem; color: var(--soft); font-size: var(--step-sm); }

/* Status: "verfuegbar" bekommt die einzige Signalfarbe der Seite,
   "in Entwicklung" bleibt bewusst farblos. Zwei Signalfarben waeren eine
   zu viel — und ein Produkt, das es noch nicht gibt, soll nicht leuchten. */
.chip {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 3px;
    border: 1px solid var(--line);
    color: var(--soft);
    white-space: nowrap;
}
.chip--available { color: var(--signal); border-color: transparent; background: var(--signal-soft); }

/* --- Ablauf in Schritten ------------------------------------------------ */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps__item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--s-3);
    padding-block: var(--s-3);
    border-top: 1px solid var(--line);
    margin: 0;
}
.steps__item:last-child { border-bottom: 1px solid var(--line); }
.steps__number {
    font-family: var(--font-mono);
    font-size: var(--step-sm);
    color: var(--b4);
    letter-spacing: 0.08em;
    padding-top: 0.15rem;
}
.steps__title { margin-bottom: 0.3rem; }
.steps__text { color: var(--soft); font-size: var(--step-sm); margin: 0; }

@media (max-width: 620px) {
    .steps__item { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* --- Zahlen und Referenz ------------------------------------------------ */

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.facts--stacked { grid-template-columns: 1fr; gap: var(--s-3); }
.fact { border-left: 2px solid var(--b4); padding-left: var(--s-2); }
.fact__label {
    font-family: var(--font-mono);
    font-size: var(--step-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--soft);
    display: block;
    margin-bottom: 0.2rem;
}
.fact__value { font-weight: 600; font-size: var(--step-sm); }

@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

.reference {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
.reference__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--plate);
    padding: var(--s-3);
}
.reference__logo img { max-height: 4.5rem; width: auto; }
.reference__name {
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
    color: var(--soft);
    font-size: var(--step-sm);
}
@media (max-width: 800px) { .reference { grid-template-columns: 1fr; } }

/* --- Aufforderungsband -------------------------------------------------- */

.band {
    background: var(--b1);
    color: #fff;
    border-radius: var(--radius);
    padding: clamp(1.6rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto;
    gap: var(--s-4);
    align-items: center;
}
.band h2 { color: #fff; margin-bottom: 0.5rem; }
.band p { color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 48ch; }
.band .btn { background: #fff; color: var(--b1); }
.band .btn:hover { background: rgba(255, 255, 255, 0.88); color: var(--b1); }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; gap: var(--s-3); } }

/* --- Personen ----------------------------------------------------------- */

.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.person { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-3); align-items: start; }
.person__photo {
    width: 7.5rem;
    height: 9.4rem;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--plate);
}
/* Platzhalter, solange kein Foto da ist: die Initialen in der Bildmarke.
   Besser als ein graues Rechteck und besser als ein Fremdbild. */
.person__placeholder {
    width: 7.5rem;
    height: 9.4rem;
    border-radius: var(--radius);
    border: 1px dashed var(--line);
    background: var(--plate);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--b4);
}
.person__role {
    font-family: var(--font-mono);
    font-size: var(--step-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--b3);
    display: block;
    margin-bottom: 0.4rem;
}
.person__text { color: var(--soft); font-size: var(--step-sm); margin: 0; }

@media (max-width: 900px) { .people { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
    .person { grid-template-columns: 1fr; }
    .person__photo, .person__placeholder { width: 6rem; height: 7.5rem; }
}

/* --- Formular ----------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li { margin-bottom: var(--s-3); }
.detail-list__label {
    font-family: var(--font-mono);
    font-size: var(--step-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--soft);
    display: block;
    margin-bottom: 0.15rem;
}

.form { display: grid; gap: var(--s-3); }

.field { display: grid; gap: 0.4rem; }
.field__label { font-size: var(--step-sm); font-weight: 600; }
.field__hint { font-size: var(--step-xs); color: var(--soft); }
.field__required { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--b4); text-transform: uppercase; }

.input, .textarea {
    width: 100%;
    font: inherit;
    font-size: var(--step-sm);
    color: var(--ink);
    background: var(--plate);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
}
.input:focus, .textarea:focus { border-color: var(--b3); outline: 2px solid var(--b2); outline-offset: 1px; }
.textarea { min-height: 10rem; resize: vertical; }

.field--invalid .input,
.field--invalid .textarea { border-color: #B3261E; }

.field__error { font-size: var(--step-xs); color: #B3261E; }
@media (prefers-color-scheme: dark) {
    .field__error { color: #F2938C; }
    .field--invalid .input, .field--invalid .textarea { border-color: #F2938C; }
}

.check { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: var(--step-sm); }
.check input { margin-top: 0.32rem; width: 1.05rem; height: 1.05rem; accent-color: var(--b1); }

/* Der Honigtopf. Nicht display:none — manche Programme erkennen das und
   lassen das Feld dann leer. So ist es fuer Menschen unsichtbar, fuer ein
   stumpfes Programm aber ein ganz normales Eingabefeld. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notice {
    border: 1px solid var(--line);
    border-left: 3px solid var(--b3);
    border-radius: var(--radius-sm);
    background: var(--plate);
    padding: var(--s-3);
}
.notice--good { border-left-color: var(--signal); background: var(--signal-soft); }
.notice--bad { border-left-color: #B3261E; }
.notice h3 { margin-bottom: 0.35rem; }
.notice p { margin: 0; color: var(--soft); font-size: var(--step-sm); }

.status-note {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: var(--step-xs);
    letter-spacing: 0.06em;
    color: var(--soft);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.8rem;
}

/* --- Fussbereich -------------------------------------------------------- */

.site-footer {
    margin-top: var(--s-6);
    border-top: 1px solid var(--line);
    background: var(--plate);
    padding-block: var(--s-5) var(--s-3);
    font-size: var(--step-sm);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
}
.site-footer h2 {
    font-family: var(--font-mono);
    font-size: var(--step-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--soft);
    font-weight: 500;
    margin-bottom: var(--s-2);
    letter-spacing: 0.12em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--soft); text-decoration: none; }
.site-footer a:hover { color: var(--b1); text-decoration: underline; }
.site-footer__brand img { height: 2rem; width: auto; margin-bottom: var(--s-2); }
.site-footer__tagline { color: var(--soft); max-width: 30ch; margin: 0; }

.site-footer__bottom {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    justify-content: space-between;
    align-items: center;
    color: var(--soft);
    font-size: var(--step-xs);
}
.site-footer__cookies { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-footer__cookies::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal);
}

@media (max-width: 860px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* --- Seite nicht gefunden ----------------------------------------------- */

.notfound { padding-block: var(--s-7); text-align: center; }
.notfound__code {
    font-family: var(--font-mono);
    font-size: clamp(4rem, 14vw, 8rem);
    line-height: 1;
    color: var(--line);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: var(--s-3);
}
.notfound .actions { justify-content: center; }