* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;
    background: #1c2b4a;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.scene { position: fixed; inset: 0; z-index: -1; }
.scene svg { width: 100%; height: 100%; display: block; }

.wrap { flex: 1; display: grid; place-items: center; padding: 2rem 1rem 1rem; }
.card {
    width: 100%; max-width: 26rem; text-align: center;
    padding: 2.5rem 2rem 2.25rem;
    background: rgba(255, 252, 245, .86);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(10, 18, 40, .45);
}
.eyebrow { margin: 0; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: #8a4b3a; }
h1 { margin: .35rem 0 0; font-size: 2.1rem; font-weight: 600; letter-spacing: .01em; color: #1c2b4a; }
.rule { width: 3.5rem; height: 3px; margin: 1.1rem auto; border-radius: 2px; background: linear-gradient(90deg, #8a4b3a, #d9a05b); }
.lead { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.55; color: #4b5563; }

.contact { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .75rem; text-align: left; }
.contact li {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 1rem; border-radius: .85rem;
    background: rgba(255, 255, 255, .7); border: 1px solid rgba(28, 43, 74, .08);
}
.contact svg { width: 1.5rem; height: 1.5rem; flex: none; fill: #8a4b3a; }
.contact .label { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.contact a { color: #1c2b4a; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact a:hover, .contact a:focus-visible { text-decoration: underline; }

.button {
    display: inline-block; padding: .7rem 1.6rem; border-radius: 999px;
    background: #1c2b4a; color: #fff; font-size: .9rem; text-decoration: none;
    transition: background .2s, transform .2s;
}
.button:hover, .button:focus-visible { background: #8a4b3a; transform: translateY(-1px); }

.foot { padding: 1rem; text-align: center; font-size: .85rem; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.foot a { color: inherit; text-decoration: none; padding: 0 .5rem; }
.foot a:hover, .foot a:focus-visible { text-decoration: underline; }

/* Rechtstexte */
.legal .card { max-width: 42rem; text-align: left; }
.legal h1 { font-size: 1.7rem; }
.legal h2 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; color: #1c2b4a; }
.legal p { line-height: 1.6; font-size: .95rem; margin: .4rem 0; }
.legal a { color: #8a4b3a; }
.legal .back { display: inline-block; margin-bottom: 1rem; font-size: .9rem; }
.todo { background: #fff3b0; padding: 0 .25rem; border-radius: .2rem; }

@media (max-width: 420px) { .card { padding: 2rem 1.25rem; } h1 { font-size: 1.8rem; } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }