:root {

--bg-dark: #0b1f3a;
--bg-mid: #123a6b;
--bg-light: #1d5b9e;

--text: #ffffff;
--text-soft: rgba(255,255,255,.85);

--card: rgba(255,255,255,.08);
--border: rgba(255,255,255,.12);

--shadow:
0 20px 40px rgba(0,0,0,.15);

--radius: 24px;

--max-width: 850px;
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {

margin: 0;

min-height: 100vh;

font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

color: var(--text);

background:
linear-gradient(
180deg,
var(--bg-dark) 0%,
var(--bg-mid) 45%,
var(--bg-light) 100%
);

overflow-x: hidden;
}

/* Hintergrundwolken */

.background-clouds {

position: fixed;

inset: 0;

pointer-events: none;

overflow: hidden;

z-index: 0;
}

.bg-cloud {

position: absolute;

background:
rgba(255,255,255,.05);

border-radius: 999px;

filter: blur(35px);
}

.cloud-1 {

width: 280px;
height: 90px;

top: 10%;
left: -300px;

animation:
drift1 120s linear infinite;
}

.cloud-2 {

width: 220px;
height: 80px;

top: 40%;
left: -250px;

animation:
drift2 180s linear infinite;
}

.cloud-3 {

width: 300px;
height: 100px;

top: 70%;
left: -350px;

animation:
drift3 160s linear infinite;
}

@keyframes drift1 {

from {
transform: translateX(0);
}

to {
transform: translateX(160vw);
}
}

@keyframes drift2 {

from {
transform: translateX(0);
}

to {
transform: translateX(150vw);
}
}

@keyframes drift3 {

from {
transform: translateX(0);
}

to {
transform: translateX(170vw);
}
}

/* Layout */

main {

position: relative;

z-index: 2;

width: min(100% - 2rem, var(--max-width));

margin: auto;

padding-bottom: 3rem;
}

.hero {

min-height: 75vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

padding: 3rem 0;
}

.logo {

width: 160px;

margin-bottom: 1rem;
}

h1 {

font-size: clamp(2.8rem, 8vw, 5rem);

margin-bottom: 1rem;
}

h2 {

margin-top: 0;
}

.hero-text {

max-width: 600px;

font-size: 1.2rem;

line-height: 1.8;
}

.subtitle {

    margin-top: -0.5rem;
    margin-bottom: 2rem;

    font-size: 1.4rem;
    font-weight: 300;

    color: rgba(255,255,255,.85);

    letter-spacing: .03em;
}

.privacy-note {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: 6px;
  text-align: center;
}

/* Karten */

.card {

background: var(--card);

border: 1px solid var(--border);

backdrop-filter: blur(12px);

border-radius: var(--radius);

padding: 2rem;

margin-bottom: 2rem;

box-shadow: var(--shadow);
}

.card p {

line-height: 1.8;

color: var(--text-soft);
}

/* Formular */

textarea {

width: 100%;

min-height: 300px;

margin-top: 1rem;

padding: 1rem;

border-radius: 16px;

border:
1px solid rgba(255,255,255,.15);

background:
rgba(255,255,255,.05);

color: white;

font-size: 1rem;

resize: vertical;
}

textarea::placeholder {

color:
rgba(255,255,255,.5);
}

.button {

display: inline-flex;

justify-content: center;

align-items: center;

margin-top: 1.5rem;

padding:
1rem 1.6rem;

border: none;

border-radius: 999px;

background: white;

color: var(--bg-mid);

font-weight: 600;

cursor: pointer;

text-decoration: none;

transition: .3s ease;
}

.button:hover {

transform:
translateY(-2px);
}

/* Animation */

.animation-container {

    display: none;

    position: relative;

    width: 250px;

    height: 260px;

    margin: 2rem auto;

    text-align: center;
}

.animation-container.active {

    display: block;
}

.cloud-animation {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 150px;

    opacity: 0;

    animation:

        fadeCloud 1.2s ease forwards;

    animation-delay: .8s;
}

.letter-animation {

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 110px;

    opacity: 0;

    animation:

        letterJourney 3s ease forwards;
}

@keyframes letterJourney {

    0% {

        opacity: 0;

        transform:
            translate(-50%, 30px)
            scale(.8);
    }

    20% {

        opacity: 1;

        transform:
            translate(-50%, 0)
            scale(1);
    }

    70% {

        opacity: 1;

        transform:
            translate(-50%, -130px)
            scale(.8);
    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, -170px)
            scale(.5);
    }

}

@keyframes fadeCloud {

    from {

        opacity: 0;

        transform:
            translateX(-50%)
            scale(.9);
    }

    to {

        opacity: 1;

        transform:
            translateX(-50%)
            scale(1);
    }

}

70% {

    transform:
        translate(-35%, -120px)
        rotate(-6deg);
}

85% {

    transform:
        translate(-55%, -150px)
        rotate(4deg);
}

100% {

    transform:
        translate(-50%, -170px)
        rotate(0deg)
        scale(.5);

    opacity: 0;
}

/* Footer */

footer {

position: relative;

z-index: 2;

text-align: center;

padding:
2rem 1rem 3rem;
}

.footer-sub {

opacity: .75;
}

.footer-links {

display: flex;

justify-content: center;

gap: 1.5rem;

margin-top: 1rem;
}

.footer-links a {

color: white;

text-decoration: none;
}

/* Mobile */

@media (max-width: 600px) {

.card {

```
padding: 1.4rem;
```

}

textarea {

```
min-height: 240px;
```

}

.logo {

```
width: 120px;
```

}
}