.special-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: clamp(110px, 14vw, 180px) var(--edge) 90px;
    overflow: hidden;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(67, 193, 218, .35), transparent 35%),
        linear-gradient(145deg, #00354f, #006a83);
}

.special-page--legal {
    display: block;
    color: var(--ink);
    background: var(--surface, #f4f8fa);
}

.special-page__card {
    position: relative;
    z-index: 1;
    width: min(920px, 100%);
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-xl);
    background: rgba(0, 43, 62, .78);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
}

.special-page--legal .special-page__card {
    margin: 0 auto;
    color: var(--ink);
    background: #fff;
}

.special-page h1 {
    margin: .45rem 0 1rem;
    font: 700 clamp(2.5rem, 7vw, 5rem)/1.04 var(--font-heading);
}

.special-page:not(.special-page--legal) h1 {
    color: #fff;
}

.special-page:not(.special-page--legal) .eyebrow {
    color: #43d1ef;
}

.special-page:not(.special-page--legal) .btn--primary {
    border-color: #31c3df;
    color: #fff;
    background: #007a9e;
}

.special-page--legal h1 {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
}

.special-page__lead {
    max-width: 720px;
    margin: 0 0 2rem;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.65;
}

.special-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.legal-content {
    line-height: 1.72;
}

.legal-content h2 {
    margin: 2.4rem 0 .7rem;
    font: 700 clamp(1.4rem, 3vw, 2rem)/1.2 var(--font-heading);
}

.legal-content h3 {
    margin: 1.7rem 0 .5rem;
}

.legal-content a {
    color: #006f9b;
    text-decoration: underline;
    text-underline-offset: .18em;
}

.special-preview-footer {
    padding: 24px var(--edge);
    color: #d8edf3;
    background: #002b3e;
}

.special-preview-footer__inner {
    display: flex;
    width: min(var(--container), 100%);
    margin: 0 auto;
    justify-content: space-between;
    gap: 20px;
}

.special-preview-footer nav {
    display: flex;
    gap: 16px;
}

.special-preview-footer a {
    color: inherit;
}

@media (max-width: 640px) {
    .special-preview-footer__inner {
        flex-direction: column;
    }
}


/* ---------------------------------------------------------
   Sonderseiten mit Menü und Footer (Danke, 404, Impressum,
   Datenschutz, AGB), Feinschliff nach der Layoutprüfung (08.10.2026)
   --------------------------------------------------------- */
/* Footer sitzt immer am unteren Rand: Der Inhaltsbereich wächst nur so weit, wie der
   Bildschirm es verlangt (statt pauschal 100vh), kurze Seiten haben keinen Streifen unter dem Footer. */
body.lp--special {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

body.lp--special > .site-footer {
    flex-shrink: 0;
}

/* Inhaltsbereich: Höhe aus dem Inhalt, Karte mittig im verbleibenden Raum,
   gleiche Außenkante wie die Menüleiste (90 % der Breite). */
.lp--special .special-page {
    display: grid;
    flex: 1 0 auto;
    min-height: 0;
    padding-inline: 0;
    padding-bottom: clamp(56px, 4vw + 2rem, 120px);
    place-items: center;
    align-content: center;
}

.lp--special .special-page__card {
    width: min(920px, 90%);
    min-width: 0;
}

/* Überschriften: auf dem Handy kleiner, damit nichts über die Karte hinausläuft */
.lp--special .special-page:not(.special-page--legal) h1 {
    font-size: clamp(2.1rem, 1.25rem + 4vw, 4.5rem);
}

/* Rechtstexte im Größenraster der übrigen Textseiten */
.lp--special .special-page--legal h1 {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
    line-height: 1.1;
    /* Weiches Trennzeichen (Geschäfts-bedingungen, Datenschutz-erklärung) nur auf dem Handy nutzen */
    -webkit-hyphens: none;
    hyphens: none;
}

@media (max-width: 560px) {
    .lp--special .special-page--legal h1 {
        -webkit-hyphens: manual;
        hyphens: manual;
    }
}

.lp--special .eyebrow {
    text-wrap: balance;
}

/* Buttons auf dem Handy untereinander und gleich breit */
@media (max-width: 520px) {
    .lp--special .special-page__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .lp--special .special-page__actions .btn {
        width: 100%;
    }
}

/* AGB in WordPress: Passwortabfrage statt Text, als ruhiges Formular in der Karte */
.lp--special .post-password-form {
    margin: 0;
}

.lp--special .post-password-form p {
    max-width: 40rem;
    margin: 0 0 1.25rem;
}

/* WordPress erzeugt vor dem Hinweis einen leeren Absatz */
.lp--special .post-password-form p:empty {
    display: none;
}

.lp--special .post-password-form p:has(input) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    max-width: 34rem;
    margin: 0;
}

.lp--special .post-password-form label {
    display: grid;
    flex: 1 1 15rem;
    gap: .4rem;
    font-size: .95rem;
    font-weight: 600;
}

.lp--special .post-password-form input[type="password"] {
    width: 100%;
    min-height: 3.25rem;
    padding: 0 1rem;
    border: 1px solid #c8d9e2;
    border-radius: var(--radius-sm);
    color: inherit;
    font: 400 1rem/1.2 var(--font-body);
    background: #f6fafc;
}

.lp--special .post-password-form input[type="password"]:focus {
    outline: 3px solid rgba(0, 122, 158, .25);
    outline-offset: 1px;
    border-color: #007a9e;
    background: #fff;
}

.lp--special .post-password-form input[type="submit"] {
    min-height: 3.25rem;
    padding: 0 1.6rem;
    border: 0;
    border-radius: var(--radius-pill);
    color: #fff;
    font: 700 .98rem/1.1 var(--font-body);
    letter-spacing: .01em;
    background: var(--grad-primary);
    box-shadow: 0 12px 30px -14px rgba(0, 69, 98, .7);
    cursor: pointer;
}

@media (max-width: 520px) {
    .lp--special .post-password-form input[type="submit"] {
        width: 100%;
    }
}

/* Kein doppelter Abstand am Kartenende (Absatzabstand plus Innenabstand) */
.lp--special .special-page__card > :last-child,
.lp--special .legal-content > :last-child {
    margin-bottom: 0;
}