/* DEMONTAGE24.de – Styles aus der Penpot-Vorlage
   1rem = 1px der jeweiligen Penpot-Zeichenflaeche. Jede Stufe skaliert proportional (W = Fensterbreite ohne Scrollbar):
   <=480: W/22.5 (Board 360) | 481-768: W/48 (Board 768) | 769-1024: W/64 (Board 1024) | 1025-1280: W/80 (Board 1280)
   1281-1440: W/90 (Board 1440) | 1441-1920: 16px, Inhalt 1440px zentriert | >1920: W/120 */

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url("../Fonts/roboto-latin-var.woff2") format("woff2");
}

:root {
    --c-bg: #f8f8f8;
    --c-text: #262626;
    --c-text-50: rgba(38, 38, 38, .5);
    --c-err: #ef0e0e;
    --c-green: #41ab5d;
    --c-success: #237a3b;
    --ls: .078125rem;   /* 1.25px */
    --ls2: .15625rem;   /* 2.5px */
    --sbw: 0px;
    --W: calc(100vw - var(--sbw));
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}
@media (max-width: 480px) { html { font-size: calc(var(--W) / 22.5); } }
@media (min-width: 481px) and (max-width: 768px) { html { font-size: calc(var(--W) / 48); } }
@media (min-width: 769px) and (max-width: 1024px) { html { font-size: calc(var(--W) / 64); } }
@media (min-width: 1025px) and (max-width: 1280px) { html { font-size: calc(var(--W) / 80); } }
@media (min-width: 1281px) { html { font-size: max(min(16px, var(--W) / 90), var(--W) / 120); } }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* body = volle Fensterhoehe; Wartungsbalken + Seite teilen sich die Hoehe, Footer bleibt im Bild */
body { min-height: 100vh; display: flex; flex-direction: column; }
.site { flex: 1 0 auto; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }

img, svg, picture { display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.maint-bar {
    position: sticky; top: 0; z-index: 9999;
    background: #e95454; color: #fff;
    font: 600 15px/1.4 Roboto, system-ui, sans-serif;
    text-align: center; padding: 10px 16px; min-height: 42px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.maint-bar a { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.375rem;
    padding: 0 .9375rem;
    border: 1px solid var(--c-text);
    border-radius: 100rem;
    font: inherit;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: var(--ls);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.btn-dark { background: var(--c-text); color: var(--c-bg); }
.btn-dark:hover, .btn-dark:focus-visible { background: var(--c-bg); color: var(--c-text); }
.btn-light { background: var(--c-bg); color: var(--c-text); }
.btn-light:hover, .btn-light:focus-visible { background: var(--c-text); color: var(--c-bg); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn .ico { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.btn-big { height: 2.75rem; padding: 0 1.4375rem; font-size: 1rem; font-weight: 500; }
.btn-square { height: 3.5rem; padding: 0 1.6875rem; font-size: 1.25rem; font-weight: 500; border-radius: 0; }

/* ---------- Hero (Startseite / Partner) ---------- */
.hero { position: relative; flex: 1 0 auto; color: var(--c-bg); }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #3a3a3a; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: 90rem; margin: 0 auto; }

.ticker { display: flex; justify-content: center; align-items: center; }
.ticker-list { display: flex; align-items: center; gap: 1rem; }
.ticker-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: var(--ls2);
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: .25rem .25rem .25rem rgba(0, 0, 0, .2);
}
.ticker-item + .ticker-item::before {
    content: "";
    width: .375rem;
    height: .125rem;
    background: var(--c-bg);
    box-shadow: .25rem .25rem .25rem rgba(0, 0, 0, .2);
}

.hero-logo { display: flex; align-items: center; justify-content: center; }
.hero-logo img { width: 100%; height: auto; }
.hero-logo a { display: block; width: 100%; }

/* Desktop: Formular als Karte im Hero */
@media (min-width: 1025px) {
    .ticker { height: 3.375rem; padding: 1rem 4rem; }
    /* Logo und Karte vertikal mittig zwischen Laufschrift und Footer (gleicher Abstand oben/unten, min. 64px) */
    .hero { display: flex; flex-direction: column; }
    .hero-inner { flex: 1 0 auto; display: flex; flex-direction: column; }
    /* Abstand oben/unten schrumpft bei niedrigen Fenstern (min. 16px), damit Hero + Footer ohne Scrollen passen:
       54 Laufschrift + 526 Karte + 74 Footer = 654 Penpot-px */
    .hero-main { --pad: clamp(1rem, calc((100vh - var(--mbh, 0px) - 40.875rem) / 2), 4rem); flex: 1 0 auto; display: flex; align-items: center; gap: 4rem; padding: var(--pad) 4rem; }
    .hero-logo { flex: 1 1 0; min-width: 0; justify-content: flex-start; }
    .hero-logo img, .hero-logo a { width: 39.9375rem; }
    .form-card {
        flex: 0 0 35.3125rem;
        width: 35.3125rem;
        min-width: 0;
        max-width: 35.3125rem;
        min-height: 32.875rem;
        padding: 2.25rem 2.25rem 1.9375rem;
        background: var(--c-bg);
        color: var(--c-text);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 .75rem 1rem -.25rem rgba(0, 0, 0, .08), 0 .25rem .375rem -.125rem rgba(0, 0, 0, .03);
    }
    .form-card.is-done { min-height: 32.3125rem; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
    .ticker { padding: 1rem 3rem; }
    .hero-main { gap: 3rem; padding: var(--pad) 3rem; }
    .hero-logo img, .hero-logo a { width: 34.1875rem; }
}

/* Tablet/Mobil: Hero-Band oben, Formular darunter auf hellem Grund */
@media (max-width: 1024px) {
    .hero-bg { bottom: auto; height: 15.5rem; }
    .hero-inner { padding-top: 1rem; }
    .ticker { height: 3.375rem; padding: 1rem 3rem; }
    .hero-logo { height: 5.125rem; margin: 3rem 0; }
    .hero-logo img, .hero-logo a { width: 26.0625rem; }
    .form-card { padding: 2rem 3rem 3rem; color: var(--c-text); }
}
@media (max-width: 768px) {
    .hero-bg { height: 13.5rem; }
    .ticker { height: 1.375rem; padding: 0 4rem; }
    .form-card { padding: 2rem 2rem 3rem; }
}
@media (max-width: 480px) {
    .hero-bg { height: 10.34375rem; }
    .hero-logo { height: 1.96875rem; }
    .hero-logo img, .hero-logo a { width: 17.556rem; }
    .form-card { padding: 1rem 1rem 3rem; }
}

/* Laufschrift bis 768px: ein Begriff, Wechsel wie eine Slotmaschine */
@media (max-width: 768px) {
    .ticker-list {
        position: relative;
        display: block;
        width: 100%;
        height: 1.375rem;
        padding-bottom: .5rem;
        margin-bottom: -.5rem;
        box-sizing: content-box;
        overflow: hidden;
    }
    .ticker-item {
        position: absolute;
        left: 0; right: 0; top: 0;
        justify-content: center;
        transform: translateY(calc(100% + .5rem));
        transition: transform .6s cubic-bezier(.45, 0, .2, 1);
    }
    .ticker-item + .ticker-item::before { display: none; }
    .ticker-item.is-current { transform: translateY(0); }
    .ticker-item.is-out { transform: translateY(calc(-100% - .5rem)); }
    .ticker-item.no-anim { transition: none; }
}

/* ---------- Formularkarte ---------- */
.form-title {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: var(--ls);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.125rem;
}
.br-title { display: none; }
@media (min-width: 1025px), (max-width: 480px) { .br-title { display: inline; } }
@media (max-width: 480px) { .form-title { font-size: 1.25rem; } }

/* Fortschritt (nur Desktop mit JS) */
.steps { display: none; }
.steps-bar { display: flex; align-items: center; height: 2rem; padding: 0 1.5rem; }
.step-dot {
    position: relative;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-bg);
    box-shadow: inset 0 0 0 1px var(--c-text-50), 0 0 0 1px var(--c-text-50);
    color: var(--c-text-50);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--ls);
    transition: background-color .25s, color .25s, box-shadow .25s;
}
.step-line { position: relative; flex: 1 1 0; height: .125rem; background: var(--c-text-50); overflow: hidden; }
.step-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-text);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s linear, background-color .4s;
}
.step-label {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--c-text);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
}
.form-auftrag .step-label.first { left: -1.5rem; transform: none; }

.form-card[data-step="1"] .s1,
.form-card[data-step="2"] .s1, .form-card[data-step="2"] .s2,
.form-card[data-step="3"] .s1, .form-card[data-step="3"] .s2, .form-card[data-step="3"] .s3 {
    background: var(--c-text);
    box-shadow: inset 0 0 0 1px var(--c-text), 0 0 0 1px var(--c-text);
    color: var(--c-bg);
}
/* Zahl wird schwarz, sobald die Linie (1 s) bei ihr angekommen ist */
.form-card[data-step="2"] .s2, .form-card[data-step="3"] .s3 { transition-delay: .85s; }
.form-card[data-step="2"] .l2::after,
.form-card[data-step="3"] .l2::after, .form-card[data-step="3"] .l3::after,
.form-card[data-step="4"] .step-line::after { transform: scaleX(1); }
.form-card[data-step="4"] .step-dot {
    background: var(--c-green);
    box-shadow: inset 0 0 0 1px var(--c-green), 0 0 0 1px var(--c-green);
    color: var(--c-bg);
}
.form-card[data-step="4"] .step-line::after { background: var(--c-green); }

.form { position: relative; min-width: 0; }
.form-card, .panel, .panel-body { min-width: 0; }
.panel + .panel { margin-top: 0; }
.step-nav { display: none; }
.form-actions { display: flex; justify-content: center; padding-top: .375rem; }
.form-error {
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin-top: .25rem;
    color: var(--c-err);
    font-size: .875rem;
    line-height: 1.25;
    text-align: center;
}
/* Desktop-Karte: eine Zeile rechtsbuendig unter dem Absenden-Button, innerhalb des unteren Innenabstands */
@media (min-width: 1025px) { .js .form-error { margin-top: .375rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

@media (min-width: 1025px) {
    .form-title { margin-bottom: 1rem; }
    .js .steps { display: block; height: 3.3125rem; margin-bottom: 1rem; }
    .js .panel { display: none; }
    .js .panel-body { min-height: 16.875rem; }
    .js .form-partner .panel { padding-top: .78125rem; }
    .js .form-partner .panel-body { min-height: 17.65625rem; }
    .js .form-card[data-step="1"] .p1, .js .form-card[data-step="2"] .p2, .js .form-card[data-step="3"] .p3 { display: block; }
    .js .step-nav { display: flex; justify-content: space-between; padding-top: .375rem; }
    .js .p1 .step-nav { justify-content: flex-end; }
    .js .form-actions { display: none; }
}

/* ---------- Felder (kein flex-gap: Abstaende per margin an bekannten Kindern) ---------- */
.field { position: relative; display: flex; flex-direction: column; min-width: 0; }
.field > label, .field > .label {
    display: block;
    height: 1.6875rem;
    margin-bottom: .125rem;
    font-size: 1.125rem;
    line-height: 1.5;
    white-space: nowrap;
}
.req {
    display: inline-block;
    vertical-align: top;
    margin-left: .125rem;
    color: var(--c-err);
    font-size: .875rem;
    line-height: 1.25;
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
    display: block;
    width: 100%;
    height: 2.6875rem;
    margin: 0;
    padding: calc(.5rem - 1px);
    border: 1px solid var(--c-text-50);
    border-radius: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
    font-size: 1.125rem;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s;
}
.field textarea { height: 8rem; resize: none; overflow: auto; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-text-50); opacity: 1; }
.field input:hover, .field textarea:hover, .field input:focus, .field textarea:focus { border-color: var(--c-text); outline: none; box-shadow: none; }
.field.invalid input, .field.invalid textarea, .field.invalid input:focus, .field.invalid textarea:focus { border-color: var(--c-err); }
/* Fehlerzustand aus Penpot: Ausrufezeichen (20x20) rechts im Feld */
.field.invalid input[type="text"], .field.invalid input[type="email"], .field.invalid input[type="tel"], .field.invalid textarea {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ef0e0e' d='M18.823 10C18.823 5.203 14.995 1.3 10.227 1.179L10 1.177C5.127 1.177 1.176 5.127 1.176 10l.003.227C1.298 14.92 5.08 18.701 9.772 18.82l.228.003c4.797 0 8.7-3.828 8.82-8.596L18.823 10ZM20 10c0 5.523-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0s10 4.478 10 10Z'/%3E%3Cpath fill='%23ef0e0e' d='m11.06 2.963-.136 10.887h-1.74L9.038 2.963h2.022ZM8.976 16.422c0-.312.094-.576.281-.792.195-.215.479-.323.854-.323.369 0 .65.108.844.323.202.216.302.48.302.792 0 .299-.1.556-.302.771-.194.215-.475.323-.844.323-.375 0-.659-.108-.854-.323a1.108 1.108 0 0 1-.281-.771Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    background-position: right .5rem center;
}
.field.invalid textarea { background-position: right .5rem top .5rem; }

/* reservierte Fehlerzeile (18px) – liegt im Penpot-Abstand zwischen den Feldern, nichts springt */
.hint {
    display: block;
    height: 1rem;
    margin-top: .125rem;
    overflow: visible;
    white-space: nowrap;
    color: var(--c-err);
    font-size: .875rem;
    line-height: 1rem;
}

/* Upload */
.upload { margin-bottom: 1.125rem; }
.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.upload-row { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.btn-file { font-size: 1rem; text-transform: none; flex: 0 0 auto; }
.upload input[type="file"]:focus-visible + .upload-row .btn-file { background: var(--c-text); color: var(--c-bg); }
.upload.dragover .btn-file { background: var(--c-text); color: var(--c-bg); }
.upload-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; line-height: 1.5; }
.upload-hint { height: 1.125rem; margin-top: .375rem; line-height: 1.125rem; color: var(--c-text-50); }
.upload.invalid .upload-hint { color: var(--c-err); }
.upload.invalid .btn-file { border-color: var(--c-err); }
@media (max-width: 480px) {
    .upload-row { flex-direction: column; align-items: stretch; gap: .375rem; }
    .btn-file { width: 100%; }
    .upload-name { flex: 0 0 auto; }
}

/* Kontaktfelder: 6-Spalten-Raster wie Penpot */
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1.5rem; }
.grid > .field { grid-column: span 3; }
.grid-partner > .f-name { grid-column: span 6; }
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-partner > .f-firma, .grid-partner > .f-standort, .grid-partner > .f-name { grid-column: span 2; }
}
@media (max-width: 480px) {
    .grid { grid-template-columns: minmax(0, 1fr); }
    .grid > .field, .grid-partner > .f-name { grid-column: auto; }
    .grid-auftrag > .f-budget { order: 1; }
    .grid-auftrag > .f-standort { order: 2; }
    .grid-auftrag > .f-name { order: 3; }
    .grid-auftrag > .f-firma { order: 4; }
    .grid-auftrag > .f-email { order: 5; }
    .grid-auftrag > .f-telefon { order: 6; }
}

/* Checkbox Datenschutz */
.check { position: relative; display: flex; align-items: flex-start; gap: .375rem; }
.check input { position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; margin: 0; opacity: 0; pointer-events: none; }
.check .box {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--c-text-50);
    background: var(--c-bg) no-repeat center / 1.3125rem 1.3125rem;
    cursor: pointer;
    transition: border-color .15s;
}
.check .box:hover, .check input:focus + .box { border-color: var(--c-text); }
.check input:checked + .box {
    border-color: var(--c-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath fill='%23262626' d='M8.497 15.252a.9.9 0 0 1-.637-.263L3.957 11.085a.9.9 0 0 1 1.274-1.273l3.266 3.266 7.17-7.169a.9.9 0 0 1 1.273 1.273l-7.806 7.807a.9.9 0 0 1-.637.263Z'/%3E%3C/svg%3E");
}
.field.invalid .check .box { border-color: var(--c-err); }
.check-text { flex: 1 1 0; min-width: 0; font-size: 1.125rem; line-height: 1.5; cursor: pointer; }
.check-text a { text-decoration: underline; text-underline-offset: .12em; }

/* Captcha: ab 768px Eingabe links, Neu-laden dazwischen, Bild exakt mittig */
.captcha-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .5rem; justify-items: center; }
.captcha-input { display: flex; align-items: center; gap: .5rem; width: 100%; }
.captcha-input input { flex: 1 1 0; min-width: 0; text-transform: uppercase; letter-spacing: .15em; }
.captcha-input input::placeholder { text-transform: none; letter-spacing: normal; }
.captcha-reload {
    flex: 0 0 2.6875rem;
    width: 2.6875rem;
    height: 2.6875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--c-text-50);
    border-radius: 0;
    background: var(--c-bg);
    color: var(--c-text);
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}
.captcha-reload .ico { width: 1.25rem; height: 1.25rem; }
.captcha-reload:hover, .captcha-reload:focus-visible { border-color: var(--c-text); background: var(--c-text); color: var(--c-bg); outline: none; }
.captcha-reload.spin .ico { animation: spin .6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }
#captcha-img {
    width: 9.25rem;
    height: 2.6875rem;
    border: 1px solid var(--c-text-50);
    background: #eee;
    cursor: pointer;
}
@media (min-width: 768px) {
    .captcha-row { grid-template-columns: minmax(0, 1fr) 9.25rem minmax(0, 1fr); column-gap: .5rem; justify-items: stretch; }
}

.hp { position: absolute; left: -200vw; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* Erfolgsmeldung (Stufe 4) */
.form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    text-align: center;
}
@media (min-width: 1025px) {
    .form-success { min-height: 18.75rem; }
    .form-partner .form-success { min-height: 20.625rem; }
}
.success-title { color: var(--c-success); font-size: 1.25rem; line-height: 1.25; letter-spacing: var(--ls); }
.success-text { color: #000; font-size: 1rem; line-height: 1.5; }
.plane { width: 6.5rem; height: 6.5rem; overflow: visible; }
/* Papierflieger: einfliegen, dann ruhig schweben (bewusst ohne prefers-reduced-motion) */
.form-success:not([hidden]) .plane { animation: plane-in 1.1s cubic-bezier(.2, .8, .3, 1) both, plane-float 3s ease-in-out 1.1s infinite; }
.form-success:not([hidden]) .plane-lines path { animation: plane-lines 1.5s ease-in-out 1.1s infinite; }
.form-success:not([hidden]) .plane-lines path:nth-child(2) { animation-delay: 1.35s; }
.form-success:not([hidden]) .plane-lines path:nth-child(3) { animation-delay: 1.6s; }
@keyframes plane-in {
    from { transform: translate(-3rem, 3rem) scale(.55) rotate(-8deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@keyframes plane-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(.25rem, -.375rem); }
}
@keyframes plane-lines {
    0%, 100% { opacity: 1; transform: translate(0, 0); }
    50% { opacity: .35; transform: translate(-.25rem, .25rem); }
}

/* ---------- Kopf der Unterseiten ---------- */
.topbar { width: 100%; max-width: 90rem; margin: 0 auto; height: 6.1875rem; padding: 2rem 2.5rem; }
.topbar-logo { display: inline-block; }
.page-impressum .topbar, .page-datenschutz .topbar { display: flex; justify-content: center; }
.topbar-logo img { width: 19.9375rem; height: auto; }
@media (max-width: 480px) {
    .topbar { height: 5.9375rem; }
    .topbar-logo { display: block; }
    .topbar-logo img { width: 17.5rem; }
}

/* ---------- Footer ---------- */
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.625rem;
    padding: 0 4rem;
    background: var(--c-text);
    color: var(--c-bg);
}
.footer-nav { display: flex; align-items: center; gap: 1.5rem; }
.footer-nav a {
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: var(--ls);
    text-transform: uppercase;
    text-decoration: none;
}
.footer-nav a:hover, .footer-nav a:focus-visible { text-decoration: underline; text-underline-offset: .25rem; }
@media (max-width: 768px) { .footer-nav a { font-size: 1rem; } }
@media (max-width: 480px) {
    .footer { height: auto; padding: 2rem 4rem; }
    .footer-nav { flex-direction: column; gap: .75rem; }
}

/* ---------- Impressum / Datenschutz ---------- */
.legal {
    flex: 1 0 auto;
    justify-content: center;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 2.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.legal h1, .error-page h1 {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: var(--ls2);
    text-transform: uppercase;
    text-align: center;
}
.legal-text { width: 100%; font-style: normal; font-size: 1.125rem; line-height: 1.5; text-align: center; }
.legal-text a { text-decoration: none; }
.legal-text a:hover { text-decoration: underline; }
.legal-text.left { text-align: left; }
.legal-text.left h2 { margin: 2rem 0 .75rem; font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: var(--ls); }
.legal-text.left h2:first-child { margin-top: 0; }
.legal-text.left p + p, .legal-text.left ul + p, .legal-text.left p + ul { margin-top: .75em; }
.legal-text.left ul { margin: 0; padding-left: 1.5em; list-style: disc; }
.legal-text.left li + li { margin-top: .25em; }
.legal-text.left a { text-decoration: underline; text-underline-offset: .12em; word-break: break-word; }
.ds-long { display: none; }
@media (min-width: 1281px) { .ds-long { display: inline; } }
@media (max-width: 768px) {
    .legal { padding: 2rem 2.5rem 3rem; }
    .datenschutz { padding-top: 1.5rem; }
}
@media (max-width: 480px) {
    .legal, .datenschutz { padding: 1rem 2.5rem 3rem; }
    .legal h1 { font-size: 1.25rem; }
}

/* ---------- 404 ---------- */
.error-page {
    flex: 1 0 auto;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 2.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}
@media (min-width: 1281px) { .error-page { justify-content: center; } }
.err-digits { display: flex; align-items: flex-start; gap: 1.4889rem; height: 7.9375rem; margin-bottom: 2rem; }
.err-digits img { height: 100%; width: auto; }
.error-page h1 { margin-bottom: 2rem; }
.err-text { font-size: 1.5rem; line-height: 1.5; margin-bottom: 2rem; }
@media (min-width: 1281px) { .err-digits { gap: 1.7964rem; height: 9.5625rem; } }
@media (max-width: 768px) {
    .error-page { padding: 3rem 2.5rem; }
    .err-digits { gap: 1.0975rem; height: 5.875rem; }
    .error-page h1 { font-size: 1.25rem; font-weight: 400; line-height: 1.25; letter-spacing: var(--ls); text-transform: none; }
    .err-text { font-size: 1.125rem; }
}
@media (max-width: 480px) {
    .error-page { padding: 1rem 1rem 3rem; }
    .err-digits { gap: .8374rem; height: 4.4375rem; }
}