@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --public-canvas: #ffffff;
    --public-surface-soft: #f7f5fa;
    --public-surface-raised: #ffffff;
    --public-surface-strong: #eeeaf5;
    --public-ink: #1c1823;
    --public-body: #4b4554;
    --public-muted: #746d7d;
    --public-subtle: #918a99;
    --public-hairline: #ded9e5;
    --public-border-strong: #afa7b9;
    --public-input-border: #cfc8d8;
    --public-accent: #6d28d9;
    --public-accent-strong: #5b21b6;
    --public-accent-soft: #f0e9ff;
    --public-accent-ink: #ffffff;
    --public-signature: #3b176b;
    --public-signature-soft: #ede4fb;
    --public-signature-ink: #ffffff;
    --public-success: #137a46;
    --public-danger: #b42336;
    --public-warning: #9a5a00;
    --public-focus: #7c3aed;
    --public-shadow: 0 18px 45px rgba(38, 22, 55, 0.08);
    --landing-header-height: 72px;
    --landing-safe-top: env(safe-area-inset-top, 0px);
    --landing-safe-bottom: env(safe-area-inset-bottom, 0px);
    --landing-accent: var(--public-accent);
    --accent-secondary: var(--public-accent);
    --color-bg: var(--public-canvas);
    --color-bg-secondary: var(--public-surface-soft);
    --color-surface: var(--public-surface-raised);
    --color-surface-elevated: var(--public-surface-raised);
    --color-text: var(--public-ink);
    --color-text-secondary: var(--public-body);
    --color-border: var(--public-hairline);
}

html[data-theme="dark"] {
    --public-canvas: #0d0b14;
    --public-surface-soft: #131019;
    --public-surface-raised: #18141f;
    --public-surface-strong: #241b30;
    --public-ink: #f7f4fb;
    --public-body: #c9c3d0;
    --public-muted: #a39baa;
    --public-subtle: #7f7888;
    --public-hairline: #30283a;
    --public-border-strong: #51455f;
    --public-input-border: #40364b;
    --public-accent: #a78bfa;
    --public-accent-strong: #c4b5fd;
    --public-accent-soft: #251a37;
    --public-accent-ink: #171020;
    --public-signature: #34135f;
    --public-signature-soft: #2a2034;
    --public-signature-ink: #fbf8ff;
    --public-success: #5dcc8a;
    --public-danger: #ff8b9a;
    --public-warning: #f2bb5e;
    --public-focus: #b79cff;
    --public-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

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

html {
    min-width: 320px;
    scroll-behavior: smooth;
    background: var(--public-canvas);
    color: var(--public-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: background-color 160ms ease, color 160ms ease;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--public-canvas);
    color: var(--public-body);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

a {
    color: inherit;
}

img,
svg {
    display: block;
}

[hidden] {
    display: none !important;
}

::selection {
    background: color-mix(in srgb, var(--public-accent) 26%, transparent);
    color: var(--public-ink);
}

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

html.modal-open,
body.modal-open {
    overflow: hidden !important;
}

body.landing-active.modal-open {
    position: fixed;
    inset: 0;
    width: 100%;
}

#landingPage.landing-page {
    display: block;
    min-height: 100vh;
    overflow-x: clip;
    background: var(--public-canvas);
    color: var(--public-body);
    opacity: 1;
}

#landingPage h1,
#landingPage h2,
#landingPage h3,
#landingPage h4,
#landingPage strong {
    color: var(--public-ink);
}

#landingPage h1,
#landingPage h2,
#landingPage h3,
#landingPage h4 {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

#landingPage p {
    color: var(--public-body);
}

#landingPage .text-white,
#landingPage .text-slate-200,
#landingPage .text-slate-300 {
    color: var(--public-ink) !important;
}

#landingPage .text-slate-400 {
    color: var(--public-body) !important;
}

#landingPage .text-slate-500,
#landingPage .text-slate-600 {
    color: var(--public-muted) !important;
}

#landingPage .text-accent-secondary,
#landingPage [class*="text-blue-"],
#landingPage [class*="text-purple-"] {
    color: var(--public-accent) !important;
}

#landingPage .bg-clip-text.text-transparent,
#landingPage .text-gradient {
    background: none !important;
    color: var(--public-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

#landingPage section[id] {
    scroll-margin-top: calc(var(--landing-header-height) + 28px);
}

#landingPage .max-w-7xl {
    max-width: 1280px;
}

.landing-header {
    position: fixed;
    z-index: 80;
    top: 0;
    left: 0;
    right: 0;
    min-height: calc(var(--landing-header-height) + var(--landing-safe-top));
    padding-top: var(--landing-safe-top);
    border-bottom: 1px solid transparent;
    background: color-mix(in srgb, var(--public-canvas) 94%, transparent);
    transition: background-color 160ms ease, border-color 160ms ease;
}

.landing-header.is-scrolled {
    border-color: var(--public-hairline);
    background: color-mix(in srgb, var(--public-canvas) 98%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.landing-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    width: min(100%, 1376px);
    min-height: var(--landing-header-height);
    margin: 0 auto;
    padding: 0 48px;
}

.landing-brand,
.landing-footer-brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    text-decoration: none;
}

.landing-brand img {
    width: auto;
    height: 38px;
}

.landing-main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.landing-main-nav a {
    position: relative;
    padding: 25px 0 23px;
    color: var(--public-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 160ms ease;
}

.landing-main-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--public-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease;
}

.landing-main-nav a:hover,
.landing-main-nav a.active-link {
    color: var(--public-ink);
}

.landing-main-nav a.active-link::after {
    transform: scaleX(1);
}

.landing-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.landing-language-switcher {
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--public-hairline);
    border-radius: 999px;
    background: var(--public-surface-soft);
    color: var(--public-ink);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.landing-language-switcher:hover {
    border-color: var(--public-border-strong);
    background: var(--public-surface-strong);
}

.public-theme-toggle,
.landing-menu-toggle,
.auth-close-button {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--public-hairline);
    border-radius: 50%;
    background: var(--public-surface-soft);
    color: var(--public-ink);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.public-theme-toggle:hover,
.landing-menu-toggle:hover,
.auth-close-button:hover {
    border-color: var(--public-border-strong);
    background: var(--public-surface-strong);
}

.theme-icon,
.landing-menu-toggle svg,
.auth-close-button svg {
    width: 20px;
    height: 20px;
}

html[data-theme="dark"] .theme-icon-moon,
html:not([data-theme="dark"]) .theme-icon-sun {
    display: none;
}

.header-login-btn,
.header-register-btn,
.hero-btn,
.landing-free-cta,
.landing-final-cta button,
#authOverlay .btn,
.public-status-button,
.public-status-button-secondary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px !important;
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.header-login-btn,
.hero-btn-secondary,
.public-status-button-secondary {
    border: 1px solid var(--public-hairline);
    background: transparent;
    color: var(--public-ink);
}

.header-login-btn:hover,
.hero-btn-secondary:hover,
.public-status-button-secondary:hover {
    border-color: var(--public-border-strong);
    background: var(--public-surface-soft);
}

.header-register-btn,
.hero-btn-primary,
.landing-free-cta,
#authOverlay .btn-primary,
.public-status-button {
    border: 1px solid var(--public-accent);
    background: var(--public-accent);
    color: var(--public-accent-ink) !important;
}

.header-register-btn:hover,
.hero-btn-primary:hover,
.landing-free-cta:hover,
#authOverlay .btn-primary:hover,
.public-status-button:hover {
    border-color: var(--public-accent-strong);
    background: var(--public-accent-strong);
}

/*
 * Desktop landing header density.
 *
 * Adding the language switcher pushed the action row over its budget: the
 * register button lost horizontal room and its label wrapped onto two lines,
 * which is why "Kostenlos starten" suddenly looked twice as tall. Rather than
 * only patching that button, the whole row is toned down — 44px pill controls
 * are touch sizing and are oversized for a pointer-driven header.
 *
 * Only applies from 900px up, where the hamburger takes over and the menu
 * toggle / auth close button keep their full 44px touch targets.
 */
@media (min-width: 900px) {
    .landing-header-actions {
        gap: 8px;
    }

    .landing-header-actions .public-theme-toggle {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    .landing-header-actions .theme-icon {
        width: 18px;
        height: 18px;
    }

    .landing-header-actions > .header-login-btn,
    .landing-header-actions > .header-register-btn {
        min-height: 44px;
        padding: 7px 14px;
        font-size: 12px;
        /* The actual cause of the "thick" register button: without this the
           label wraps to two lines as soon as the row gets tight. */
        white-space: nowrap;
    }
}

.landing-menu-toggle,
.landing-mobile-menu {
    display: none;
}

#hero {
    min-height: auto !important;
    padding: calc(var(--landing-header-height) + var(--landing-safe-top) + 104px) 48px 96px !important;
    background: var(--public-canvas);
    text-align: center;
}

#hero > div {
    max-width: 1280px !important;
}

.landing-eyebrow {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    margin-bottom: 24px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 32%, var(--public-hairline));
    border-radius: 6px;
    background: var(--public-accent-soft);
    color: var(--public-accent);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

#landingPage #hero .landing-hero-title {
    max-width: 920px;
    margin: 0 auto 24px !important;
    color: var(--public-ink) !important;
    font-size: clamp(40px, 5vw, 48px) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

#hero .landing-hero-title + p {
    max-width: 720px;
    margin: 0 auto 32px !important;
    color: var(--public-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

#hero .landing-hero-title + p strong {
    font-weight: 500;
}

.landing-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hero-btn {
    min-height: 44px;
    padding: 14px 22px;
    font-size: 16px;
}

.landing-hero-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    margin-top: 72px;
    text-align: left;
}

.landing-hero-slide {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--public-hairline);
    border-radius: 12px;
    background: var(--public-surface-raised);
}

.landing-hero-slide-featured {
    grid-row: 1 / 3;
}

.landing-hero-slide img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center top;
}

.landing-hero-slide figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--public-hairline);
    background: var(--public-surface-raised);
}

.landing-hero-slide figcaption span {
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--public-surface-soft);
    color: var(--public-muted);
    font-size: 12px;
    font-weight: 500;
}

#landingPage section:not(#hero) {
    position: relative;
}

#landingPage .py-20,
#landingPage .py-24,
#landingPage .py-32,
.landing-free-section,
.landing-security-section {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

#landingPage #features,
#landingPage .landing-pro-tools-section {
    background: var(--public-surface-soft) !important;
}

#landingPage #features {
    padding-top: 72px !important;
}

#landingPage #stats,
#landingPage #reasons {
    background: var(--public-canvas) !important;
}

#landingPage #features > div > .text-center,
#landingPage #reasons > .text-center {
    margin-bottom: 72px !important;
}

#landingPage #features > div > .text-center > p,
#landingPage #reasons > .text-center > p {
    color: var(--public-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65;
}

#landingPage #features > div > .text-center > p {
    margin-bottom: 48px !important;
}

#landingPage h2 {
    color: var(--public-ink) !important;
    line-height: 1.18 !important;
}

/* Nur Ueberschriften ohne eigene Tailwind-Groessenklasse (`text-3xl`,
   `text-4xl md:text-6xl`, ...) bekommen diesen Clamp-Fallback. Vorher galt
   er fuer JEDES h2 mit `!important` und hat damit z.B. "Ein System fuer alle
   Bereiche." (sollte 60px sein) und "Mehr als nur eine Band-App." (sollte
   48px sein) auf dieselben 40px gestaucht wie die kleineren Zwei-Spalten-
   Ueberschriften - die eigentliche Ursache der gemeldeten uneinheitlichen
   Schriftgroessen. */
#landingPage h2.landing-heading-default {
    font-size: clamp(30px, 3.2vw, 40px);
}

#landingPage h3 {
    color: var(--public-ink) !important;
    line-height: 1.3 !important;
}

#landingPage .inline-block,
#landingPage .inline-flex.items-center.gap-2 {
    border-color: color-mix(in srgb, var(--public-accent) 26%, var(--public-hairline)) !important;
    border-radius: 6px !important;
    background: var(--public-accent-soft) !important;
    color: var(--public-accent) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

.capability-card,
.feature-block,
.landing-feature-card,
.landing-org-point,
.edge-card,
.profi-feature-item,
.landing-free-benefit-card,
.landing-security-card,
.landing-showcase-visual,
#features .group[class*="rounded-"] {
    border: 1px solid var(--public-hairline) !important;
    border-radius: 10px !important;
    background: var(--public-surface-raised) !important;
    box-shadow: none !important;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .capability-card:hover,
    .feature-block:hover,
    .landing-feature-card:hover,
    .landing-org-point:hover,
    .edge-card:hover,
    .profi-feature-item:hover,
    .landing-free-benefit-card:hover,
    .landing-security-card:hover {
        border-color: color-mix(in srgb, var(--public-accent) 50%, var(--public-hairline)) !important;
        background: var(--public-accent-soft) !important;
        transform: translateY(-2px);
    }
}

.landing-card-heading-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.landing-card-heading-row > :first-child {
    flex: 0 0 auto;
    margin: 0 !important;
}

.landing-card-heading-row h3,
.landing-card-heading-row h4,
.landing-card-heading-row strong {
    margin: 0 !important;
    font-weight: 500 !important;
}

.landing-card-heading-row + p,
.landing-card-heading-row + span {
    margin-top: 14px !important;
}

#landingPage .capability-card > .landing-card-heading-row > div,
#landingPage .feature-block .landing-card-heading-row > div,
#landingPage .edge-card .landing-card-heading-row > div,
#landingPage .profi-feature-item .landing-card-heading-row > div {
    border-radius: 8px !important;
    background: var(--public-accent-soft) !important;
}

#landingPage .capability-card p,
#landingPage .feature-block p,
#landingPage .edge-card p,
#landingPage .profi-feature-item p {
    color: var(--public-muted) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

.landing-counter-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.landing-free-section {
    background: var(--public-canvas);
}

.landing-free-shell {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.4fr);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--public-accent) 48%, transparent);
    border-radius: 12px;
    background: var(--public-signature);
    color: var(--public-signature-ink);
}

.landing-free-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 420px;
    padding: 48px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
}

.landing-free-price-label,
.landing-free-price > span:last-child {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 500;
}

.landing-free-price strong {
    margin: 8px 0;
    color: #ffffff !important;
    font-size: clamp(68px, 9vw, 112px);
    font-weight: 500 !important;
    line-height: 0.9;
    letter-spacing: -0.06em;
}

.landing-free-copy {
    padding: 48px;
}

.landing-free-badge,
.landing-security-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 500;
}

.landing-free-badge svg,
.landing-security-badge svg,
.landing-free-cta svg {
    width: 16px;
    height: 16px;
}

.landing-free-copy h2,
.landing-security-intro h2 {
    margin: 24px 0 16px;
    color: #ffffff !important;
}

.landing-free-copy > p,
.landing-security-intro > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 16px;
    line-height: 1.65;
}

.landing-free-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 32px 0;
}

.landing-free-benefit-card {
    min-width: 0;
    padding: 16px;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.landing-free-benefit-card .landing-card-heading-row {
    gap: 10px;
}

.landing-free-benefit-card strong {
    color: #ffffff !important;
    font-size: 14px;
}

.landing-free-benefit-card > span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1.5;
}

.landing-free-cta {
    border-color: #ffffff;
    background: #ffffff;
    color: #291244 !important;
}

.landing-free-cta:hover {
    border-color: #eee7f8;
    background: #eee7f8;
}

.landing-showcase-visual {
    padding: 16px !important;
}

.landing-showcase-surface,
#landingPage .group > div[class*="overflow-hidden"] {
    overflow: hidden;
    border: 1px solid var(--public-hairline) !important;
    border-radius: 8px !important;
    background: var(--public-surface-soft) !important;
    box-shadow: none !important;
}

.landing-showcase-image,
#landingPage .group img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

.landing-security-section {
    background: var(--public-canvas);
}

.landing-security-shell {
    display: grid;
    gap: 32px;
    padding: 48px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 46%, transparent);
    border-radius: 12px;
    background: var(--public-signature);
    color: var(--public-signature-ink);
}

.landing-security-intro {
    max-width: 760px;
}

.landing-security-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.landing-security-card {
    padding: 24px;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.landing-security-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.landing-security-icon svg {
    width: 21px;
    height: 21px;
}

.landing-security-label {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 500;
}

.landing-security-card h3 {
    margin: 4px 0 0 !important;
    color: #ffffff !important;
    font-size: 16px!important;
}

.landing-security-card p {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.55;
}

.landing-security-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.landing-security-note svg {
    width: 22px;
    flex: 0 0 22px;
    color: #ffffff;
}

.landing-security-note p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72) !important;
}

.landing-security-note strong {
    color: #ffffff !important;
    font-weight: 500;
}

.landing-final-cta {
    padding: 48px !important;
    border: 1px solid color-mix(in srgb, var(--public-accent) 52%, transparent);
    border-radius: 10px !important;
    background: var(--public-signature) !important;
}

.landing-final-cta > .absolute {
    display: none;
}

.landing-final-cta p,
.landing-final-cta p span {
    color: rgba(255, 255, 255, 0.82) !important;
}

.landing-final-cta p span {
    font-weight: 500 !important;
}

.landing-final-cta button {
    border-color: #ffffff;
    background: #ffffff;
    color: #291244 !important;
    box-shadow: none !important;
}

.landing-feature-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: min(100%, 1120px);
    margin: 0 auto 96px;
    text-align: left;
}

.landing-feature-card {
    --feature-accent: var(--public-accent);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 16px;
    min-height: 168px;
    padding: 22px;
}

.landing-feature-card:nth-child(2) {
    --feature-accent: #10b981;
}

.landing-feature-card:nth-child(3) {
    --feature-accent: #38bdf8;
}

.landing-feature-card:nth-child(4) {
    --feature-accent: #f59e0b;
}

.landing-feature-card:nth-child(5) {
    --feature-accent: #fb7185;
}

.landing-feature-card:nth-child(6) {
    --feature-accent: #8b5cf6;
}

.landing-feature-card:nth-child(7) {
    --feature-accent: #14b8a6;
}

.landing-feature-card:nth-child(8) {
    --feature-accent: #ec4899;
}

.landing-feature-card:nth-child(9) {
    --feature-accent: #60a5fa;
}

.landing-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--feature-accent) 38%, var(--public-hairline));
    border-radius: 8px;
    background: color-mix(in srgb, var(--feature-accent) 14%, var(--public-surface-soft));
    color: var(--feature-accent);
}

.landing-feature-card span {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--feature-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-feature-card h3 {
    margin: 0 0 10px !important;
    font-size: 16px!important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.landing-feature-card p {
    margin: 0;
    color: var(--public-body) !important;
    font-size: 14px !important;
    line-height: 1.55;
}

.landing-organization-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.landing-org-point {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
    min-height: 124px;
    padding: 16px;
}

.landing-org-point > svg {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--public-accent);
}

.landing-org-point strong,
.landing-org-point span {
    display: block;
}

.landing-org-point strong {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500 !important;
}

.landing-org-point span {
    color: var(--public-muted);
    font-size: 12px;
    line-height: 1.5;
}

#landingPage .reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition:
        opacity 560ms ease,
        transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

#landingPage .reveal.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.landing-footer {
    padding: 64px 48px calc(32px + var(--landing-safe-bottom));
    border-top: 1px solid var(--public-hairline);
    background: var(--public-canvas);
}

.landing-footer-grid,
.landing-footer-bottom {
    width: min(100%, 1280px);
    margin: 0 auto;
}

.landing-footer-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.6fr) repeat(3, minmax(120px, 0.55fr));
    gap: 48px;
}

.landing-footer-brand img {
    width: auto;
    height: 38px;
}

.landing-footer-intro p {
    max-width: 420px;
    margin: 24px 0 0;
    color: var(--public-muted);
    line-height: 1.65;
}

.landing-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.landing-footer-column h4 {
    margin: 0 0 8px;
    color: var(--public-ink);
    font-size: 14px;
    font-weight: 500;
}

.landing-footer-column a,
.landing-footer-column button,
.landing-footer-theme {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--public-muted);
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.landing-footer-column a:hover,
.landing-footer-column button:hover,
.landing-footer-theme:hover {
    color: var(--public-accent);
}

.landing-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid var(--public-hairline);
    color: var(--public-muted);
    font-size: 12px;
}

#authOverlay {
    /* This used to be a dimmed/blurred modal backdrop with a bordered card
       floating over the landing page. It is now presented as its own full
       page (see UI.toggleAuthOverlay in js/ui.js, which pushes a distinct
       ?auth=login/register URL when opening it): a solid canvas background
       and NO surrounding box around the form - content sits directly on
       the page, the same way the Impressum/Datenschutz pages do, with a
       "Zurück" link top-left instead of an X. See
       project_separate_login_page_20260907.md. */
    position: fixed;
    z-index: 100;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: calc(var(--landing-header-height) + var(--landing-safe-top) + 28px) 16px max(40px, var(--landing-safe-bottom));
    overflow-y: auto;
    background: var(--public-canvas) !important;
}

#authOverlay.active {
    display: flex !important;
}

/* .landing-header does the fixed-top/background/height/safe-area part -
   same class as the real landing page header, so this sits at exactly the
   same spot. Only the inner layout (logo left, "Zurück" right - no center
   nav) is specific to the auth page. */
#authOverlay .auth-page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(100%, 1376px);
    min-height: var(--landing-header-height);
    margin: 0 auto;
    padding: 0 24px;
}

#authOverlay .auth-page-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--public-hairline);
    border-radius: 10px;
    color: var(--public-ink);
    font-weight: 500;
    text-decoration: none;
}

#authOverlay .auth-page-back:hover {
    border-color: var(--public-border-strong);
    background: var(--public-surface-soft);
}

#authOverlay .auth-white-card {
    width: min(100%, 400px) !important;
    color: var(--public-body);
}

#authOverlay .auth-card-header {
    margin-bottom: 24px;
    text-align: center;
}

/* The title+subtitle ("Anmelden / Greife direkt wieder..." and "Registrieren
   / Lege dein Profil an...") are redundant with the Login/Registrieren tabs
   right below them - hidden on request. Scoped to just those two forms via
   :has() (not to the card's auth-mode-* class) because showForgotPassword()
   reuses whatever auth-mode-login/register class is already on the card
   without adding its own - "Passwort vergessen" and "Registrierung
   abgeschlossen" still need their own heading text visible. */
#authOverlay:has(#loginForm.active) .auth-card-header,
#authOverlay:has(#registerForm.active) .auth-card-header {
    display: none;
}

#authOverlay #authCardTitle {
    margin: 0 0 8px;
    color: var(--public-ink);
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.2;
}

#authOverlay #authCardSubtitle {
    max-width: 360px;
    margin: 0 auto;
    color: var(--public-muted) !important;
    font-weight: 400 !important;
    line-height: 1.5;
}

#authOverlay .auth-tab-row {
    display: flex;
    gap: 4px;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0;
    border-bottom: 1px solid var(--public-hairline);
    border-radius: 0 !important;
    background: transparent !important;
}

#authOverlay .auth-tab {
    min-height: 44px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0 !important;
    background: transparent;
    color: var(--public-muted);
    font-weight: 500 !important;
    cursor: pointer;
}

#authOverlay .auth-tab.active {
    background: transparent !important;
    color: var(--public-ink) !important;
    border-bottom-color: var(--public-accent);
    box-shadow: none;
}

#authOverlay .auth-form-container {
    padding: 0 !important;
}

/* Desktop: deutlich kompakter als die mobile Vollbild-Variante weiter unten. */
@media (min-width: 768px) {
    #authOverlay .auth-white-card {
        width: min(100%, 380px) !important;
    }

    #authOverlay #authCardTitle {
        font-size: 22px !important;
    }
}

#authOverlay .auth-form {
    display: none;
}

#authOverlay .auth-form.active {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}

#authOverlay .auth-form.active > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#authOverlay label:not(.auth-passkey-option) {
    display: block;
    margin: 0 0 7px !important;
    color: var(--public-muted) !important;
    font-size: 12px!important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#authOverlay input[type="text"],
#authOverlay input[type="email"],
#authOverlay input[type="password"],
#authOverlay input[type="file"] {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px !important;
    border: 1px solid var(--public-input-border) !important;
    border-radius: 6px !important;
    background: var(--public-surface-soft) !important;
    color: var(--public-ink) !important;
    /* iOS Safari zoomt die ganze Seite beim Fokussieren automatisch in jedes
       Formularfeld mit unter 16px Schriftgroesse hinein (und zoomt beim
       Verlassen nicht zuverlaessig zurueck) - das war der eigentliche Grund
       fuer das riesige, verschobene Login-Formular auf dem Handy, nicht ein
       Layout-Bug. 16px ist damit ein hartes Minimum, kein Stil-Wunsch. */
    font-size: 16px;
    font-weight: 400 !important;
    outline: none;
}

#authOverlay input::placeholder {
    color: var(--public-subtle);
}

#authOverlay input:focus {
    border-color: var(--public-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--public-focus) 18%, transparent);
}

#authOverlay .registration-travel-location-field .location-map-trigger {
    min-height: 46px;
    border: 1px solid var(--public-input-border);
    border-radius: 6px;
    background: var(--public-accent-soft);
    color: var(--public-accent);
    box-shadow: none;
}

#authOverlay .registration-travel-location-field .location-map-trigger:hover {
    border-color: var(--public-accent);
    background: color-mix(in srgb, var(--public-accent) 16%, var(--public-surface-raised));
    color: var(--public-accent-strong);
    transform: none;
}

#authOverlay .registration-travel-location-field .location-map-trigger:focus-visible {
    outline: 2px solid var(--public-focus);
    outline-offset: 2px;
    box-shadow: none;
}

#authOverlay input[type="checkbox"] {
    accent-color: var(--public-accent);
}

#authOverlay .auth-form button[type="button"][class*="text-accent"],
#authOverlay .auth-form p button {
    color: var(--public-accent) !important;
    font-weight: 500 !important;
}

#authOverlay .auth-passkey-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--public-muted);
    font-size: 12px;
    font-weight: 500;
}

#authOverlay .auth-passkey-divider::before,
#authOverlay .auth-passkey-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--public-hairline);
}

#authOverlay .auth-provider-btn,
#authOverlay .auth-passkey-btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--public-input-border);
    border-radius: 10px;
    background: var(--public-surface-raised);
    color: var(--public-ink);
    font-weight: 500;
    cursor: pointer;
}

#authOverlay .auth-provider-btn:hover:not(:disabled),
#authOverlay .auth-passkey-btn:hover:not(:disabled) {
    border-color: var(--public-border-strong);
    background: var(--public-surface-soft);
}

.auth-provider-icon,
.auth-passkey-btn svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
}

.auth-provider-spinner,
.auth-passkey-spinner {
    display: none;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 2px solid color-mix(in srgb, var(--public-ink) 20%, transparent);
    border-top-color: var(--public-ink);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}

.auth-passkey-spinner {
    display: inline-block;
}

/* Registration already renders its dedicated inline auth spinner. Keep the
   accessible busy state without adding the shared button pseudo-spinner too. */
#registerSubmitBtn[aria-busy="true"]::before {
    display: none;
    content: none;
}

.auth-provider-btn.is-loading .auth-provider-icon {
    display: none;
}

.auth-provider-btn.is-loading .auth-provider-spinner {
    display: inline-block;
}

.auth-provider-help {
    margin: -4px 0 0 !important;
    color: var(--public-muted) !important;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.auth-passkey-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--public-hairline);
    border-radius: 10px;
    background: var(--public-surface-soft);
    cursor: pointer;
}

.auth-passkey-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-passkey-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--public-hairline);
    border-radius: 8px;
    background: var(--public-surface-raised);
    color: var(--public-accent);
}

.auth-passkey-option-icon svg {
    width: 18px;
    height: 18px;
}

.auth-passkey-option-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.auth-passkey-option-copy strong {
    color: var(--public-ink) !important;
    font-size: 14px;
    font-weight: 500 !important;
}

.auth-passkey-option-copy small {
    color: var(--public-muted);
    font-size: 12px;
    line-height: 1.45;
}

.auth-passkey-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--public-accent) 55%, var(--public-hairline));
    background: var(--public-accent-soft);
}

.auth-password-requirements {
    padding: 14px;
    border: 1px solid var(--public-hairline);
    border-radius: 10px;
    background: var(--public-surface-soft);
}

.auth-password-requirements-title {
    display: block;
    margin-bottom: 9px;
    color: var(--public-ink) !important;
    font-size: 12px;
    font-weight: 500 !important;
}

.auth-password-requirements-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-password-requirement {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--public-muted);
    font-size: 12px;
    line-height: 1.4;
}

.auth-password-requirement-icon {
    display: inline-flex;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border: 1px solid var(--public-input-border);
    border-radius: 50%;
    color: transparent;
}

.auth-password-requirement-icon svg {
    width: 10px;
    height: 10px;
}

.auth-password-requirement.is-valid {
    color: var(--public-success);
}

.auth-password-requirement.is-valid .auth-password-requirement-icon {
    border-color: var(--public-success);
    background: color-mix(in srgb, var(--public-success) 12%, transparent);
    color: var(--public-success);
}

.auth-password-requirement.is-invalid,
.is-warning {
    color: var(--public-danger) !important;
}

.is-success {
    color: var(--public-success) !important;
}

/* Public registration map picker. The authenticated app keeps location-map.css unchanged. */
body.landing-active #locationMapModal.location-map-modal {
    --color-primary: var(--public-accent);
    --color-primary-hover: var(--public-accent-strong);
    --color-primary-active: var(--public-accent-strong);
    --color-primary-soft: var(--public-accent-soft);
    --color-surface: var(--public-surface-raised);
    --color-surface-hover: var(--public-surface-soft);
    --color-bg-secondary: var(--public-surface-soft);
    --color-text: var(--public-ink);
    --color-text-secondary: var(--public-body);
    --color-text-muted: var(--public-muted);
    --color-border: var(--public-hairline);
    --color-border-hover: var(--public-border-strong);
    --color-danger: var(--public-danger);
    --color-success: var(--public-success);
    --color-warning: var(--public-warning);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--public-focus) 18%, transparent);
    z-index: 12000;
    padding: 24px;
    background: rgba(12, 8, 17, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.landing-active #locationMapModal .location-map-modal-content {
    width: min(920px, calc(100vw - 48px));
    max-width: 920px;
    height: min(820px, calc(100dvh - 48px));
    max-height: min(820px, calc(100dvh - 48px));
    overflow: hidden;
    border: 1px solid var(--public-hairline);
    border-radius: 12px;
    background: var(--public-surface-raised);
    color: var(--public-body);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

body.landing-active #locationMapModal .location-map-modal-header {
    min-height: 104px;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 24px 20px;
    border-bottom: 1px solid var(--public-hairline);
    background: var(--public-surface-raised);
}

body.landing-active #locationMapModal .location-map-modal-header .modal-title-copy {
    gap: 4px;
}

body.landing-active #locationMapModal .modal-kicker {
    color: var(--public-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

body.landing-active #locationMapModal .location-map-modal-header h2 {
    margin: 0;
    color: var(--public-ink);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
}

body.landing-active #locationMapModal .location-map-modal-header p {
    max-width: 620px;
    color: var(--public-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

body.landing-active #locationMapModal .modal-close {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--public-hairline);
    border-radius: 9px;
    background: var(--public-surface-soft);
    color: var(--public-muted);
    box-shadow: none;
}

body.landing-active #locationMapModal .modal-close:hover {
    border-color: var(--public-border-strong);
    background: var(--public-surface-strong);
    color: var(--public-ink);
}

body.landing-active #locationMapModal .modal-close:focus-visible {
    outline: 2px solid var(--public-focus);
    outline-offset: 2px;
}

body.landing-active #locationMapModal .modal-close svg {
    width: 18px;
    height: 18px;
}

body.landing-active #locationMapModal .location-map-modal-body {
    padding: 20px 24px 22px;
    background: var(--public-surface-soft);
    scrollbar-color: var(--public-border-strong) transparent;
}

body.landing-active #locationMapModal .location-map-search-field {
    gap: 6px;
    min-height: 52px;
    padding: 4px;
    border: 1px solid var(--public-input-border);
    border-radius: 10px;
    background: var(--public-surface-raised);
    box-shadow: none;
}

body.landing-active #locationMapModal .location-map-search-field:focus-within {
    border-color: var(--public-focus);
    background: var(--public-surface-raised);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--public-focus) 18%, transparent);
}

body.landing-active #locationMapModal .location-map-search-field input {
    min-height: 44px;
    padding: 9px 10px 9px 38px !important;
    border-radius: 6px !important;
    background: transparent;
    color: var(--public-ink);
    font-size: 14px;
    font-weight: 400;
}

body.landing-active #locationMapModal .location-map-search-field input::placeholder {
    color: var(--public-subtle);
}

body.landing-active #locationMapModal .location-map-search-icon {
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--public-muted);
}

body.landing-active #locationMapModal .location-map-search-button {
    min-width: 104px;
    min-height: 44px;
    padding: 9px 18px;
    border: 1px solid var(--public-accent);
    border-radius: 10px;
    background: var(--public-accent);
    color: var(--public-accent-ink);
    box-shadow: none;
    font-size: 12px;
    font-weight: 500;
}

body.landing-active #locationMapModal .location-map-search-button:hover {
    border-color: var(--public-accent-strong);
    background: var(--public-accent-strong);
    transform: none;
}

body.landing-active #locationMapModal .location-map-search-status {
    margin-top: 7px;
    color: var(--public-muted);
    font-size: 12px;
}

body.landing-active #locationMapModal .location-map-search-results {
    gap: 5px;
    margin: 8px 0 14px;
    padding: 6px;
    border: 1px solid var(--public-hairline);
    border-radius: 9px;
    background: var(--public-surface-raised);
    box-shadow: var(--public-shadow);
}

body.landing-active #locationMapModal .location-map-result {
    min-height: 48px;
    padding: 7px 9px;
    border-radius: 7px;
    color: var(--public-ink);
}

body.landing-active #locationMapModal .location-map-result:hover,
body.landing-active #locationMapModal .location-map-result:focus-visible {
    border-color: var(--public-hairline);
    background: var(--public-accent-soft);
}

body.landing-active #locationMapModal .location-map-result-icon {
    border: 1px solid color-mix(in srgb, var(--public-accent) 22%, var(--public-hairline));
    border-radius: 7px;
    background: var(--public-accent-soft);
    color: var(--public-accent);
}

body.landing-active #locationMapModal .location-map-result-copy span {
    color: var(--public-muted);
}

body.landing-active #locationMapModal .location-map-canvas-shell {
    height: clamp(320px, 46vh, 460px);
    min-height: 320px;
    border: 1px solid var(--public-hairline);
    border-radius: 10px;
    background: var(--public-surface-strong);
    box-shadow: none;
}

body.landing-active #locationMapModal .location-map-canvas-hint {
    top: 12px;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 30%, var(--public-hairline));
    border-radius: 8px;
    background: color-mix(in srgb, var(--public-surface-raised) 92%, transparent);
    color: var(--public-ink);
    box-shadow: 0 8px 24px rgba(24, 14, 34, 0.16);
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.landing-active #locationMapModal .location-map-canvas-hint svg,
body.landing-active #locationMapModal .location-map-marker {
    color: var(--public-accent);
}

body.landing-active #locationMapModal .leaflet-bar {
    overflow: hidden;
    border: 1px solid var(--public-hairline);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(24, 14, 34, 0.15);
}

body.landing-active #locationMapModal .leaflet-control-zoom a {
    border-color: var(--public-hairline);
    background: color-mix(in srgb, var(--public-surface-raised) 94%, transparent);
    color: var(--public-ink);
}

body.landing-active #locationMapModal .leaflet-control-zoom a:hover {
    background: var(--public-accent-soft);
    color: var(--public-accent);
}

body.landing-active #locationMapModal .location-map-selection {
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 28%, var(--public-hairline));
    border-radius: 9px;
    background: var(--public-accent-soft);
}

body.landing-active #locationMapModal .location-map-selection-icon {
    border: 1px solid color-mix(in srgb, var(--public-accent) 24%, var(--public-hairline));
    border-radius: 8px;
    background: var(--public-surface-raised);
    color: var(--public-accent);
}

body.landing-active #locationMapModal .location-map-selection-copy > span,
body.landing-active #locationMapModal .location-map-selection-copy small {
    color: var(--public-muted);
}

body.landing-active #locationMapModal .location-map-selection-copy strong {
    color: var(--public-ink);
    font-weight: 500;
}

body.landing-active #locationMapModal .location-map-attribution-note {
    margin-top: 10px;
    color: var(--public-muted);
    font-size: 12px;
}

body.landing-active #locationMapModal .location-map-attribution-note a {
    color: var(--public-accent);
}

body.landing-active #locationMapModal .location-map-modal-actions {
    gap: 10px;
    padding: 16px 24px 18px;
    border-top: 1px solid var(--public-hairline);
    background: var(--public-surface-raised);
}

body.landing-active #locationMapModal .location-map-modal-actions > .btn {
    min-width: 132px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--public-input-border);
    border-radius: 10px;
    box-shadow: none;
    font-size: 12px;
    font-weight: 500;
}

body.landing-active #locationMapModal .location-map-modal-actions > .btn-secondary {
    background: var(--public-surface-raised);
    color: var(--public-ink);
}

body.landing-active #locationMapModal .location-map-modal-actions > .btn-secondary:hover {
    border-color: var(--public-border-strong);
    background: var(--public-surface-soft);
    color: var(--public-ink);
    transform: none;
}

body.landing-active #locationMapModal .location-map-modal-actions > .btn-primary {
    border-color: var(--public-accent);
    background: var(--public-accent);
    color: var(--public-accent-ink);
}

body.landing-active #locationMapModal .location-map-modal-actions > .btn-primary:hover:not(:disabled) {
    border-color: var(--public-accent-strong);
    background: var(--public-accent-strong);
    transform: none;
}

body.landing-active #locationMapModal #locationMapConfirmBtn:disabled {
    border-color: var(--public-hairline);
    background: var(--public-surface-strong);
    color: var(--public-subtle);
    opacity: 1;
}

.custom-multiselect {
    position: relative;
    width: 100%;
    --color-primary: var(--public-accent);
    --border: var(--public-input-border);
    --border-strong: var(--public-border-strong);
    --input-bg: var(--public-surface-soft);
    --surface-elevated: var(--public-surface-raised);
    --hover-bg: var(--public-surface-soft);
    --accent-soft: var(--public-accent-soft);
    --color-text: var(--public-ink);
    --text-muted: var(--public-muted);
    --shadow-md: var(--public-shadow);
}

.multiselect-trigger {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    padding: 7px 13px !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    background: var(--input-bg) !important;
    color: var(--color-text) !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.multiselect-trigger.active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
}

.multiselect-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 24px;
}

.multiselect-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 7px !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 26%, transparent) !important;
    border-radius: 5px !important;
    background: var(--accent-soft) !important;
    color: var(--color-primary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.multiselect-placeholder,
.multiselect-arrow {
    color: var(--text-muted) !important;
    font-size: 14px !important;
}

.multiselect-arrow {
    display: inline-flex !important;
    transition: transform 160ms ease;
}

.multiselect-trigger.active .multiselect-arrow {
    transform: rotate(180deg);
}

.multiselect-menu {
    position: absolute;
    z-index: 9001;
    top: calc(100% + 6px);
    left: 0;
    display: none !important;
    width: 100%;
    max-height: min(280px, calc(100vh - 220px));
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface-elevated) !important;
    box-shadow: var(--shadow-md) !important;
}

.multiselect-menu.show {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
}

.multiselect-option {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--color-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}

.multiselect-option:hover,
.multiselect-option:has(input:checked) {
    border-color: var(--border) !important;
    background: var(--hover-bg) !important;
}

.multiselect-option input {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.multiselect-option-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    background: var(--input-bg) !important;
}

.multiselect-option:has(input:checked) .multiselect-option-indicator {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
}

.multiselect-option-indicator::before {
    content: "";
    width: 8px;
    height: 4px;
    border-bottom: 2px solid var(--public-accent-ink);
    border-left: 2px solid var(--public-accent-ink);
    opacity: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}

.multiselect-option:has(input:checked) .multiselect-option-indicator::before {
    opacity: 1;
}

.multiselect-option-label {
    color: var(--color-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

#authOverlay .auth-status-notice,
#authOverlay .band-invite-auth-notice {
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 35%, var(--public-hairline));
    border-radius: 8px;
    background: var(--public-accent-soft);
    color: var(--public-accent);
    font-size: 12px;
    line-height: 1.5;
}

#authOverlay .auth-status-notice[data-type="success"] {
    border-color: color-mix(in srgb, var(--public-success) 40%, var(--public-hairline));
    background: color-mix(in srgb, var(--public-success) 10%, transparent);
    color: var(--public-success);
}

#authOverlay .auth-status-notice[data-type="warning"] {
    color: var(--public-warning);
}

#authOverlay .auth-status-notice[data-type="error"],
#authOverlay .band-invite-auth-notice[data-state="error"] {
    border-color: color-mix(in srgb, var(--public-danger) 40%, var(--public-hairline));
    background: color-mix(in srgb, var(--public-danger) 10%, transparent);
    color: var(--public-danger);
}

#authOverlay .band-invite-auth-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 16px;
}

#authOverlay .band-invite-auth-notice-icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--public-accent) 12%, transparent);
}

#authOverlay .band-invite-auth-notice-icon svg {
    width: 18px;
    height: 18px;
}

#authOverlay .band-invite-auth-notice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

#authOverlay .band-invite-auth-notice-copy > span:first-child {
    color: currentColor;
    font-size: 12px;
    font-weight: 500;
}

#authOverlay .band-invite-auth-notice-copy strong {
    font-size: 14px;
    font-weight: 500 !important;
}

#authOverlay .band-invite-auth-notice-copy > span:last-child {
    color: var(--public-muted);
    font-size: 12px;
    line-height: 1.45;
}

#authOverlay .auth-registration-complete-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 10px 0;
    text-align: center;
}

#authOverlay .auth-tab-row[hidden] {
    display: none !important;
}

#authOverlay .auth-registration-complete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid color-mix(in srgb, var(--public-success) 40%, var(--public-hairline));
    border-radius: 12px;
    background: color-mix(in srgb, var(--public-success) 10%, transparent);
    color: var(--public-success);
}

#authOverlay .auth-registration-complete-icon svg {
    width: 30px;
    height: 30px;
}

#authOverlay .auth-registration-complete-copy h3,
#authOverlay .auth-registration-complete-copy p {
    margin: 0;
}

#authOverlay .auth-registration-complete-copy h3 {
    color: var(--public-ink);
    font-size: 20px;
}

#authOverlay .auth-registration-complete-copy p {
    margin-top: 8px;
    color: var(--public-muted);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   E-Mail-Bestätigung per 6-stelligem Code (#emailVerifyForm)
   Identisch in App und Browser - die "6 Slots" sind dekorativ, dahinter
   liegt EIN echtes <input> (ein Einfüge-/Autofill-Ziel, ein Fokusziel).
   --------------------------------------------------------------------------- */
#authOverlay .auth-email-verify.active {
    align-items: stretch;
}

#authOverlay .auth-email-verify-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 4px 0;
    text-align: center;
}

#authOverlay .auth-email-verify-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 40%, var(--public-hairline));
    border-radius: 12px;
    background: color-mix(in srgb, var(--public-accent) 10%, transparent);
    color: var(--public-accent);
}

#authOverlay .auth-email-verify-icon svg {
    width: 26px;
    height: 26px;
}

#authOverlay .auth-email-verify-lead {
    margin: 0;
    color: var(--public-muted);
    font-size: 14px;
    line-height: 1.55;
}

#authOverlay .auth-email-verify-lead strong {
    display: block;
    margin-top: 4px;
    color: var(--public-ink);
    font-weight: 600 !important;
    word-break: break-all;
}

#authOverlay .otp-input {
    position: relative;
    width: 100%;
    max-width: 320px;
}

/* Das echte Feld liegt unsichtbar über den 6 Slots: ein Einfüge-/Fokusziel,
   ein Autofill-Ziel. Text + Cursor sind transparent, die Slots zeigen die
   Ziffern. !important, weil die Tailwind-/Auth-Basisstile für <input> sonst
   Rahmen, Fläche und Textfarbe zurücksetzen. */
#authOverlay .otp-input input.otp-input-field {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important; /* iOS-Zoom-Schutz, Text bleibt unsichtbar */
    letter-spacing: 0 !important;
    text-align: center !important;
    outline: none !important;
    cursor: text;
}

#authOverlay .otp-input input.otp-input-field::selection {
    background: transparent;
    color: transparent;
}

#authOverlay .otp-input-slots {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    pointer-events: none;
}

#authOverlay .otp-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-height: 46px;
    border: 1px solid var(--public-hairline);
    border-radius: 12px;
    background: var(--public-surface-soft);
    color: var(--public-ink);
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#authOverlay .otp-input:focus-within .otp-slot.is-active {
    border-color: var(--public-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--public-accent) 22%, transparent);
}

#authOverlay .otp-input.is-invalid .otp-slot {
    border-color: color-mix(in srgb, var(--public-danger) 60%, var(--public-hairline));
}

#authOverlay .auth-email-verify-resend {
    margin: 0;
    color: var(--public-muted);
    font-size: 13px;
    line-height: 1.5;
}

#authOverlay .auth-email-verify-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--public-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

#authOverlay .auth-email-verify-link:disabled {
    color: var(--public-muted);
    cursor: default;
}

#authOverlay .auth-email-verify-hint {
    display: block;
    margin-top: 4px;
    color: var(--public-muted);
    font-size: 12px;
}

#authOverlay .auth-email-verify-back {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--public-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#authOverlay .auth-email-verify-back:hover {
    color: var(--public-ink);
}

/* Legal pages */
.privacy-page-body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--public-canvas);
}

.privacy-header,
.public-page-header {
    position: sticky;
    z-index: 40;
    top: 0;
    padding-top: var(--landing-safe-top);
    border-bottom: 1px solid var(--public-hairline);
    background: color-mix(in srgb, var(--public-canvas) 96%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.privacy-header-shell,
.public-page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100%, 1280px);
    min-height: var(--landing-header-height);
    margin: 0 auto;
    padding: 0 48px;
}

.privacy-logo-link,
.public-page-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.privacy-logo,
.public-page-brand img {
    width: auto;
    height: 38px;
}

.privacy-header-side-end,
.public-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.privacy-back-link,
.public-page-back {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--public-hairline);
    border-radius: 10px;
    color: var(--public-ink);
    font-weight: 500;
    text-decoration: none;
}

.privacy-back-link:hover,
.public-page-back:hover {
    border-color: var(--public-border-strong);
    background: var(--public-surface-soft);
}

.privacy-main {
    flex: 1;
    width: min(100%, 1000px);
    margin: 0 auto;
    padding: 88px 48px 96px;
}

.privacy-panel {
    position: relative;
}

.privacy-content {
    color: var(--public-body);
}

.privacy-title {
    max-width: 760px;
    margin: 0;
    color: var(--public-ink);
    font-size: clamp(36px, 5vw, 48px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.privacy-updated {
    margin: 16px 0 64px;
    color: var(--public-muted);
    font-size: 14px;
}

.privacy-section {
    display: grid;
    grid-template-columns: minmax(200px, 0.52fr) minmax(0, 1fr);
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid var(--public-hairline);
}

.privacy-section-title {
    margin: 0;
    color: var(--public-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.privacy-card {
    padding: 0;
    color: var(--public-body);
}

.privacy-card p {
    margin: 0;
    line-height: 1.7;
}

.privacy-card-spacious {
    display: grid;
    gap: 18px;
}

.privacy-card strong {
    color: var(--public-ink);
    font-weight: 500;
}

.privacy-list {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding-left: 20px;
}

.privacy-link {
    color: var(--public-accent);
    text-underline-offset: 3px;
}

.privacy-footer {
    padding: 28px 48px calc(28px + var(--landing-safe-bottom));
    border-top: 1px solid var(--public-hairline);
    color: var(--public-muted);
    text-align: center;
}

/* Confirmation and password reset pages */
.public-status-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--public-canvas);
}

.public-status-main {
    flex: 1 0 auto;
    min-height: calc(100vh - var(--landing-header-height) - var(--landing-safe-top));
    min-height: calc(100dvh - var(--landing-header-height) - var(--landing-safe-top));
    background: var(--public-canvas);
}

.public-status-hero {
    display: flex;
    min-height: calc(100vh - var(--landing-header-height) - var(--landing-safe-top));
    min-height: calc(100dvh - var(--landing-header-height) - var(--landing-safe-top));
    align-items: center;
    justify-content: center;
    padding: 64px 24px calc(64px + var(--landing-safe-bottom));
}

.public-status-card {
    width: min(100%, 540px);
    padding: 40px;
    border: 1px solid var(--public-hairline);
    border-radius: 12px;
    background: var(--public-surface-raised);
    box-shadow: var(--public-shadow);
}

.public-status-kicker {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 32%, var(--public-hairline));
    border-radius: 6px;
    background: var(--public-accent-soft);
    color: var(--public-accent);
    font-size: 12px;
    font-weight: 500;
}

.public-status-copy {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.public-status-copy h1 {
    margin: 0;
    color: var(--public-ink);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.public-status-copy p {
    margin: 0;
    color: var(--public-body);
    line-height: 1.65;
}

.public-status-form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.public-status-field label,
.public-status-resend label {
    display: block;
    margin-bottom: 7px;
    color: var(--public-muted);
    font-size: 12px;
    font-weight: 500;
}

.public-status-field input,
.public-status-resend input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--public-input-border);
    border-radius: 6px;
    background: var(--public-surface-soft);
    color: var(--public-ink);
    outline: none;
}

.public-status-field input:focus,
.public-status-resend input:focus {
    border-color: var(--public-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--public-focus) 18%, transparent);
}

.public-status-message {
    margin-top: 24px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--public-accent) 30%, var(--public-hairline));
    border-radius: 8px;
    background: var(--public-accent-soft);
    color: var(--public-body);
    line-height: 1.55;
}

.public-status-message[data-state="success"] {
    border-color: color-mix(in srgb, var(--public-success) 40%, var(--public-hairline));
    background: color-mix(in srgb, var(--public-success) 10%, transparent);
    color: var(--public-success);
}

.public-status-message[data-state="error"] {
    border-color: color-mix(in srgb, var(--public-danger) 40%, var(--public-hairline));
    background: color-mix(in srgb, var(--public-danger) 10%, transparent);
    color: var(--public-danger);
}

.public-status-card > .public-status-button {
    width: 100%;
    margin-top: 24px;
}

.public-status-form > .public-status-button {
    width: 100%;
    margin-top: 6px;
}

.public-status-resend {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--public-hairline);
}

.public-status-resend .public-status-button-secondary {
    width: 100%;
    margin-top: 10px;
}

.public-status-resend [role="status"] {
    margin: 12px 0 0;
    color: var(--public-muted);
    font-size: 12px;
    line-height: 1.5;
}

.public-status-resend [role="status"][data-state="success"] {
    color: var(--public-success);
}

.public-status-resend [role="status"][data-state="error"] {
    color: var(--public-danger);
}

.public-status-hint {
    margin: 16px 0 0;
    color: var(--public-muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.public-status-hint a {
    color: var(--public-accent);
    font-weight: 500;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    .landing-header-inner {
        padding-right: 32px;
        padding-left: 32px;
    }

    .landing-main-nav {
        gap: 20px;
    }

    .landing-footer-grid {
        grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(110px, 0.55fr));
        gap: 32px;
    }
}

@media (max-width: 899px) {
    .landing-header-inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .landing-main-nav,
    .landing-header-actions > .header-login-btn,
    .landing-header-actions > .header-register-btn {
        display: none;
    }

    .landing-menu-toggle {
        display: inline-flex;
    }

    /* The header's own compact language switcher is redundant once the menu
       is open - the full one already sits inside the open panel, directly
       above "Anmelden". Toggled by App.setMobileMenuOpen (js/landing.js) via
       a class on #mainHeader rather than the menu itself, since
       #languageSwitcher is a PRECEDING sibling of the hamburger button and
       CSS can't react to a following sibling's state without :has(). */
    .landing-header.mobile-menu-open #languageSwitcher {
        display: none;
    }

    /* Grid-row collapse instead of the old hidden/display:none toggle - the
       menu now stays rendered at all times (JS only toggles .is-open and
       `inert`, see App.setMobileMenuOpen in js/landing.js), so this can
       actually transition instead of jumping instantly. 0fr collapses the
       single grid row to nothing; 1fr grows it to the content's natural
       height. Sits directly under headerInner inside the same fixed header,
       so as it collapses back to 0fr it visually retracts up into that seam
       - reads as disappearing behind the header rather than just shrinking
       in place. 2026-09-04. */
    .landing-mobile-menu {
        display: grid;
        grid-template-rows: 0fr;
        width: 100%;
        background: var(--public-canvas);
        transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .landing-mobile-menu.is-open {
        grid-template-rows: 1fr;
    }

    /* A grid row can collapse to 0, but only if the item filling it is
       allowed to shrink below its own content size (min-height: 0) and gets
       clipped while it does (overflow: hidden) - a grid item defaults to
       min-height: auto, which would floor the row at the content's height
       and defeat the collapse entirely. This wrapper carries ONLY that job -
       no padding/border of its own, since padding+border stay part of an
       element's box regardless of min-height and would floor the collapse at
       their own size (measured: it stalled at 34px, exactly padding 8+24px
       plus the two 1px borders below, instead of reaching 0). Those live one
       level further in instead, on .landing-mobile-menu-content, which is
       free to keep them because IT has nothing left to collapse to 0 for. */
    .landing-mobile-menu-inner {
        min-height: 0;
        overflow: hidden;
    }

    /* The visible content: padding/border plus the slide+fade that actually
       reads as "extending downward" - the grid-row math alone looks a bit
       mechanical on its own. */
    .landing-mobile-menu-content {
        display: grid;
        gap: 18px;
        padding: 8px 32px 24px;
        border-top: 1px solid var(--public-hairline);
        border-bottom: 1px solid var(--public-hairline);
        transform: translateY(-10px);
        opacity: 0;
        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
    }

    .landing-mobile-menu.is-open .landing-mobile-menu-content {
        transform: translateY(0);
        opacity: 1;
        transition-delay: 40ms;
    }

    .landing-mobile-menu nav {
        display: grid;
    }

    .landing-mobile-menu nav a {
        padding: 13px 4px;
        border-bottom: 1px solid var(--public-hairline);
        color: var(--public-ink);
        font-weight: 500;
        text-decoration: none;
    }

    .landing-mobile-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /*
     * C1: the burger did not close into a clean X. Two separate bugs:
     *
     * 1. `transform-origin: center` on an SVG <path> resolves against that
     *    path's own bounding box, and a horizontal line has zero height — so
     *    each stroke rotated around a degenerate box and the two halves never
     *    met. `transform-box: view-box` makes the origin the 24x24 viewBox
     *    centre, which is what the rotation assumes.
     *
     * 2. `translateY(5px) rotate(45deg)` applies rotate() first (CSS transform
     *    lists apply right-to-left), so the translate then shifts the
     *    already-rotated line straight down/up in screen space rather than
     *    along its own axis — the two strokes ended up crossing about 2px off
     *    from the icon's true centre instead of through it. Listing rotate()
     *    first makes translateY() run first instead: it slides the line to
     *    the centre point while it's still horizontal, and the subsequent
     *    rotation (around that same centre point) leaves it there. Matches
     *    the already-correct app-side burger
     *    (.workspace-mobile-menu-line in organizations.css).
     */
    .landing-menu-toggle .menu-line {
        transform-box: view-box;
        transform-origin: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
    }

    .landing-menu-toggle.is-open .menu-line-top {
        transform: rotate(45deg) translateY(5px);
    }

    .landing-menu-toggle.is-open .menu-line-middle {
        opacity: 0;
    }

    .landing-menu-toggle.is-open .menu-line-bottom {
        transform: rotate(-45deg) translateY(-5px);
    }

    .landing-hero-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
    }

    .landing-hero-slide-featured {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .landing-free-shell {
        grid-template-columns: 1fr;
    }

    .landing-free-price {
        min-height: 300px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .landing-free-benefits {
        grid-template-columns: 1fr;
    }

    .landing-security-grid {
        grid-template-columns: 1fr;
    }

    .landing-feature-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-footer-intro {
        grid-column: 1 / 4;
    }
}

@media (max-width: 767px) {
    #hero {
        padding: calc(var(--landing-header-height) + var(--landing-safe-top) + 64px) 20px 72px !important;
    }

    #landingPage #hero .landing-hero-title {
        font-size: clamp(36px, 11vw, 44px) !important;
    }

    .landing-header-inner,
    .privacy-header-shell,
    .public-page-header-inner {
        padding-right: 20px;
        padding-left: 20px;
    }

    .landing-mobile-menu-content {
        padding-right: 20px;
        padding-left: 20px;
    }

    .landing-brand img,
    .privacy-logo,
    .public-page-brand img {
        height: 34px;
    }

    .landing-header-actions {
        gap: 8px;
    }

    .landing-hero-actions {
        display: grid;
        width: 100%;
    }

    .hero-btn {
        width: 100%;
    }

    .landing-hero-gallery {
        grid-template-columns: 1fr;
        margin-top: 48px;
    }

    .landing-hero-slide-featured {
        grid-column: auto;
    }

    .landing-hero-slide img {
        aspect-ratio: 16 / 10;
    }

    #landingPage .py-20,
    #landingPage .py-24,
    #landingPage .py-32,
    .landing-free-section,
    .landing-security-section {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }

    #landingPage .px-6,
    #landingPage section.px-6 {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    #landingPage #stats > .grid,
    #landingPage #reasons > .grid,
    #landingPage #features .grid-cols-1,
    #landingPage #features .grid-cols-2,
    #landingPage #features .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    #landingPage .gap-10,
    #landingPage .gap-20 {
        gap: 32px !important;
    }

    #landingPage .mb-40,
    #landingPage .mb-32 {
        margin-bottom: 72px !important;
    }

    #landingPage .mt-32,
    #landingPage .mt-24,
    #landingPage .mt-20 {
        margin-top: 72px !important;
    }

    .landing-free-price,
    .landing-free-copy,
    .landing-security-shell,
    .landing-final-cta {
        padding: 28px !important;
    }

    .landing-free-price {
        min-height: 250px;
    }

    .landing-security-note {
        padding-right: 0;
        padding-left: 0;
    }

    .landing-feature-matrix {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 72px;
    }

    #landingPage #features {
        padding-top: 48px !important;
    }

    #landingPage #features > div > .text-center > p {
        margin-bottom: 40px !important;
    }

    .landing-feature-card {
        min-height: auto;
        padding: 18px;
    }

    .landing-organization-points {
        grid-template-columns: 1fr;
    }

    .landing-org-point {
        min-height: auto;
        padding: 16px;
    }

    #landingPage .reveal {
        transform: translate3d(0, 22px, 0);
    }

    .landing-footer {
        padding: 48px 20px calc(24px + var(--landing-safe-bottom));
    }

    .landing-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 24px;
    }

    .landing-footer-intro {
        grid-column: 1 / 3;
    }

    .landing-footer-column:last-child {
        grid-column: 2;
    }

    .landing-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 48px;
    }

    /* C2: was align-items: flex-end, which stuck the auth card (and therefore
       the "Registrierung abgeschlossen" panel) to the bottom edge instead of
       centring it like on desktop. */
    #authOverlay {
        align-items: center;
        padding: calc(var(--landing-header-height) + var(--landing-safe-top) + 20px) 10px max(24px, var(--landing-safe-bottom));
    }

    #authOverlay .auth-page-header-inner {
        padding: 0 16px;
    }

    #authOverlay .auth-white-card {
        width: 100% !important;
    }

    #authOverlay #authCardTitle {
        font-size: 24px !important;
    }

    .privacy-main {
        padding: 64px 20px 72px;
    }

    .privacy-updated {
        margin-bottom: 48px;
    }

    .privacy-section {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 28px 0;
    }

    .privacy-footer {
        padding-right: 20px;
        padding-left: 20px;
    }

    .public-status-hero {
        align-items: flex-start;
        padding: 32px 16px calc(48px + var(--landing-safe-bottom));
    }

    .public-status-card {
        padding: 28px 22px;
    }

    .public-status-copy h1 {
        font-size: 24px;
    }
}

@media (max-height: 820px) {
    .public-status-hero {
        align-items: flex-start;
        padding-top: 32px;
    }
}

@media (max-width: 480px) {
    .landing-brand img {
        height: 31px;
    }

    .public-theme-toggle,
    .landing-menu-toggle {
        flex-basis: 42px;
        width: 42px;
        height: 44px;
    }

    .landing-mobile-actions {
        grid-template-columns: 1fr;
    }

    .landing-footer-grid {
        grid-template-columns: 1fr;
    }

    .landing-footer-intro,
    .landing-footer-column:last-child {
        grid-column: auto;
    }

}

@media (max-width: 767px) {
    body.landing-active #locationMapModal.location-map-modal {
        padding: max(10px, var(--landing-safe-top)) 10px max(10px, var(--landing-safe-bottom)) !important;
    }

    body.landing-active #locationMapModal .location-map-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - max(20px, var(--landing-safe-top)) - max(20px, var(--landing-safe-bottom))) !important;
        max-height: calc(100dvh - max(20px, var(--landing-safe-top)) - max(20px, var(--landing-safe-bottom))) !important;
        border-radius: 12px !important;
        box-shadow: 0 22px 62px rgba(0, 0, 0, 0.36) !important;
    }

    body.landing-active #locationMapModal .location-map-modal-header {
        min-height: 0;
        padding: 17px 18px 15px !important;
        background: var(--public-surface-raised) !important;
    }

    body.landing-active #locationMapModal .location-map-modal-header h2 {
        font-size: 20px;
    }

    body.landing-active #locationMapModal .location-map-modal-header p {
        font-size: 12px;
    }

    body.landing-active #locationMapModal .modal-close {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    body.landing-active #locationMapModal .location-map-modal-body {
        padding: 14px 16px 16px !important;
        background: var(--public-surface-soft) !important;
    }

    body.landing-active #locationMapModal .location-map-search-field {
        grid-template-columns: minmax(0, 1fr) 86px;
        min-height: 50px;
        padding: 4px;
    }

    body.landing-active #locationMapModal .location-map-search-button {
        min-width: 86px;
        min-height: 44px;
        padding-inline: 10px;
    }

    body.landing-active #locationMapModal .location-map-canvas-shell {
        height: min(38dvh, 310px);
        min-height: 240px;
        border-radius: 9px;
    }

    body.landing-active #locationMapModal .location-map-canvas-hint {
        top: 9px;
        max-width: calc(100% - 18px);
        padding: 7px 9px;
        white-space: normal;
        text-align: center;
    }

    body.landing-active #locationMapModal .location-map-selection {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 11px;
    }

    body.landing-active #locationMapModal .location-map-selection-icon {
        width: 36px;
        height: 36px;
    }

    body.landing-active #locationMapModal .location-map-modal-actions {
        gap: 10px !important;
        padding: 13px 16px calc(13px + var(--landing-safe-bottom)) !important;
        background: var(--public-surface-raised) !important;
    }

    body.landing-active #locationMapModal .location-map-modal-actions > .btn {
        min-height: 44px;
        border-radius: 10px;
    }
}

@media (max-width: 420px) {
    body.landing-active #locationMapModal .location-map-modal-header {
        padding: 15px 15px 13px !important;
    }

    body.landing-active #locationMapModal .modal-kicker {
        font-size: 12px;
    }

    body.landing-active #locationMapModal .location-map-modal-header h2 {
        font-size: 16px;
    }

    body.landing-active #locationMapModal .location-map-modal-header p {
        line-height: 1.4;
    }

    body.landing-active #locationMapModal .location-map-modal-body {
        padding: 12px 14px 14px !important;
    }

    body.landing-active #locationMapModal .location-map-search-field input {
        padding-left: 34px !important;
        font-size: 12px;
    }

    body.landing-active #locationMapModal .location-map-search-icon {
        left: 12px;
    }

    body.landing-active #locationMapModal .location-map-canvas-shell {
        min-height: 225px;
    }

    body.landing-active #locationMapModal .location-map-modal-actions {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    body.landing-active #locationMapModal .location-map-modal-actions > .btn {
        min-width: 0;
        padding-inline: 10px;
    }
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #landingPage .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Public reset-password acknowledgement dialog. The authenticated variant lives in app-shell.css. */
body.public-status-page.toast-dialog-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(28, 24, 35, 0.46);
    pointer-events: auto;
}

html[data-theme="dark"] body.public-status-page.toast-dialog-open::after {
    background: rgba(5, 3, 9, 0.72);
}

.public-status-page .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    width: min(calc(100vw - 32px), 500px);
    max-height: min(calc(100dvh - 32px), 620px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--public-hairline);
    border-radius: 10px;
    background: var(--public-surface-raised);
    color: var(--public-body);
    box-shadow: var(--public-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-50% + 8px));
    transition: opacity 160ms ease, transform 160ms ease;
}

.public-status-page .toast[hidden] {
    display: none;
}

.public-status-page .toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

.public-status-page .toast-dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--public-hairline);
}

.public-status-page .toast-dialog-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--public-accent) 28%, var(--public-hairline));
    border-radius: 10px;
    background: var(--public-accent-soft);
    color: var(--public-accent);
}

.public-status-page .toast-dialog-icon svg {
    width: 20px;
    height: 20px;
}

.public-status-page .toast.success .toast-dialog-icon {
    border-color: color-mix(in srgb, var(--public-success) 30%, var(--public-hairline));
    background: color-mix(in srgb, var(--public-success) 12%, transparent);
    color: var(--public-success);
}

.public-status-page .toast.error .toast-dialog-icon {
    border-color: color-mix(in srgb, var(--public-danger) 30%, var(--public-hairline));
    background: color-mix(in srgb, var(--public-danger) 12%, transparent);
    color: var(--public-danger);
}

.public-status-page .toast.warning .toast-dialog-icon {
    border-color: color-mix(in srgb, var(--public-warning) 30%, var(--public-hairline));
    background: color-mix(in srgb, var(--public-warning) 12%, transparent);
    color: var(--public-warning);
}

.public-status-page .toast-dialog-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.public-status-page .toast-dialog-kicker {
    color: var(--public-muted);
    font-size: 12px;
    font-weight: 500;
}

.public-status-page .toast-dialog-title {
    color: var(--public-ink);
    font-size: 16px;
    font-weight: 500;
}

.public-status-page .toast-dialog-message {
    margin: 0;
    padding: 16px;
    color: var(--public-body);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.public-status-page .toast-dialog-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--public-hairline);
    background: var(--public-surface-soft);
}

.public-status-page .toast-dialog-confirm {
    display: inline-flex;
    min-width: 112px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid var(--public-accent);
    border-radius: 12px;
    background: var(--public-accent);
    color: var(--public-accent-ink);
    font: 500 14px/1.4 Inter, system-ui, sans-serif;
    cursor: pointer;
}

.public-status-page .toast-dialog-confirm:focus-visible {
    outline: 2px solid var(--public-focus);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .public-status-page .toast-dialog-confirm {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-status-page .toast {
        transition: none;
    }
}