/* MuKi-Turnen Laufen — verspieltes Redesign v2.0 */

@font-face {
    font-family: "Fredoka";
    src: url("fonts/fredoka.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: "Nunito";
    src: url("fonts/nunito.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}

:root {
    --cream: #fff8ee;
    --paper: #ffffff;
    --ink: #3d3346;
    --ink-soft: #6a6070;
    --teal: #3dbdb5;
    --teal-dark: #16807a;
    --teal-soft: #d9f4f1;
    --sun: #ffd25a;
    --sun-soft: #fff1c4;
    --pink: #ff8fa3;
    --pink-soft: #ffe1e7;
    --peach-soft: #ffe6d6;
    --lilac: #b9a8f2;
    --lilac-soft: #ece6ff;
    --mint-soft: #ddf6ea;
    --sky-soft: #e1f2fc;
    --whatsapp: #1e9e50;
    --radius: 28px;
    --shadow: 0 10px 30px rgba(61, 51, 70, .10);
    --font-fun: "Fredoka", "Nunito", system-ui, sans-serif;
    --font-body: "Nunito", system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--cream);
    background-image:
        radial-gradient(circle at 12% 18%, rgba(61, 189, 181, .10) 0 6px, transparent 7px),
        radial-gradient(circle at 78% 42%, rgba(255, 143, 163, .12) 0 5px, transparent 6px),
        radial-gradient(circle at 40% 82%, rgba(255, 210, 90, .16) 0 7px, transparent 8px),
        radial-gradient(circle at 92% 88%, rgba(185, 168, 242, .14) 0 5px, transparent 6px);
    background-size: 260px 260px;
    overflow-x: hidden; /* Fallback für Safari < 16 */
    overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-dark); font-weight: 700; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

h1, h2, h3 {
    font-family: var(--font-fun);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 .5em;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

:focus-visible {
    outline: 3px dashed var(--teal-dark);
    outline-offset: 3px;
    border-radius: 8px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--paper);
    padding: 8px 14px;
    border-radius: 999px;
    z-index: 100;
}
.skip-link:focus { left: 12px; }

/* ---------- Sticker ---------- */

.sticker {
    position: absolute;
    width: var(--w, 96px);
    height: auto;
    z-index: 2;
    rotate: var(--r, 0deg);
    filter:
        drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
        drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
        drop-shadow(0 8px 10px rgba(61, 51, 70, .18));
    animation: bob 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.sticker:hover { animation: wiggle .6s ease-in-out; }
.sticker.is-bouncing { animation: boing .7s cubic-bezier(.3, 1.6, .5, 1); }

@keyframes bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}
@keyframes wiggle {
    0%, 100% { rotate: var(--r, 0deg); }
    25% { rotate: calc(var(--r, 0deg) - 8deg); }
    75% { rotate: calc(var(--r, 0deg) + 8deg); }
}
@keyframes boing {
    0% { scale: 1; }
    30% { scale: 1.25 .85; }
    55% { scale: .9 1.15; }
    100% { scale: 1; }
}

.say-bubble {
    position: absolute;
    z-index: 50;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-fun);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 6px 14px;
    border-radius: 999px;
    border: 3px solid var(--ink);
    white-space: nowrap;
    pointer-events: none;
    translate: -50% 0;
    animation: pop 1.4s ease forwards;
}
@keyframes pop {
    0% { opacity: 0; transform: translateY(8px) scale(.6); }
    15% { opacity: 1; transform: translateY(0) scale(1.05); }
    25% { transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-14px); }
}

@media (max-width: 760px) {
    .sticker { width: calc(var(--w, 96px) * .68); }
    .sticker.hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sticker, .sticker:hover, .sticker.is-bouncing, .say-bubble { animation: none; }
}

/* ---------- Wellen ---------- */

.wave {
    height: 46px;
    background: var(--wave, var(--teal));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V24C50 4 100 4 150 24S250 44 300 24 400 4 450 24 550 44 600 24V46Z'/%3E%3C/svg%3E") repeat-x bottom / 600px 46px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V24C50 4 100 4 150 24S250 44 300 24 400 4 450 24 550 44 600 24V46Z'/%3E%3C/svg%3E") repeat-x bottom / 600px 46px;
    margin-bottom: -1px;
}
.wave--flip { rotate: 180deg; margin: -1px 0 0; }

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(61, 51, 70, .07);
    border-bottom: 4px dotted var(--teal);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 78px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
}
.brand img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    transition: rotate .4s ease;
}
.brand:hover img { rotate: -12deg; }
.brand-name {
    font-family: var(--font-fun);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.1;
    display: block;
}
.brand-tag {
    font-size: .9rem;
    color: var(--ink-soft);
    font-weight: 600;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.main-nav a {
    display: block;
    padding: 9px 16px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-fun);
    font-weight: 500;
    font-size: 1.02rem;
    transition: background .2s, transform .2s;
}
.main-nav li:nth-child(1) a:hover { background: var(--teal-soft); }
.main-nav li:nth-child(2) a:hover { background: var(--sun-soft); }
.main-nav li:nth-child(3) a:hover { background: var(--pink-soft); }
.main-nav li:nth-child(4) a:hover { background: var(--lilac-soft); }
.main-nav a:hover { transform: translateY(-2px) rotate(-2deg); }
.main-nav a.active {
    background: var(--teal-dark);
    color: #fff;
}

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border: 3px solid var(--ink);
    border-radius: 16px;
    background: var(--sun);
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.nav-toggle span {
    width: 22px;
    height: 3px;
    background: var(--ink);
    border-radius: 3px;
    transition: transform .25s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 12px;
        right: 12px;
        background: var(--paper);
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: var(--shadow);
        padding: 12px;
    }
    .main-nav.is-open { display: block; }
    .main-nav ul { flex-direction: column; }
    .main-nav a { padding: 13px 18px; font-size: 1.1rem; }
    .brand-name { font-size: 1.15rem; }
    .brand img { width: 50px; height: 50px; }
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-fun);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 14px 26px;
    border-radius: 999px;
    border: 3px solid var(--ink);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--ink);
    transition: transform .15s, box-shadow .15s;
    color: var(--ink);
    background: var(--paper);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); color: var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn--primary { background: var(--sun); }
.btn--teal { background: var(--teal-dark); color: #fff; }
.btn--teal:hover { color: #fff; }
.btn--whatsapp { background: var(--whatsapp); color: #fff; width: 100%; }
.btn--whatsapp:hover { color: #fff; }
.btn--ghost { width: 100%; }
.btn:disabled { opacity: .6; cursor: wait; }

/* ---------- Hero (Start) ---------- */

.hero {
    position: relative;
    padding: 56px 0 30px;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
}
.hero-badge {
    display: inline-block;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 6px 16px;
    font-family: var(--font-fun);
    font-weight: 500;
    rotate: -3deg;
    margin-bottom: 14px;
}
.hero-title {
    font-size: clamp(2.8rem, 6.4vw, 5.6rem);
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.hero-title span { display: inline-block; }
.hero-title .c1 { color: var(--teal-dark); rotate: -4deg; }
.hero-title .c2 { color: #e8607a; rotate: 3deg; }
.hero-title .c3 { color: #e39a12; rotate: -3deg; }
.hero-title .c4 { color: #8a6fe0; rotate: 4deg; }
.hero-title .c5 { color: var(--ink); }
.hero-sub {
    font-family: var(--font-fun);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 500;
    color: var(--ink-soft);
    margin: 0 0 22px;
}
.hero-sub mark {
    background: linear-gradient(transparent 55%, var(--sun) 55%);
    color: var(--ink);
    padding: 0 4px;
}
.fact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0 0 28px;
    list-style: none;
}
.fact-chips li {
    background: var(--paper);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: .98rem;
    box-shadow: var(--shadow);
}
.fact-chips li:nth-child(1) { background: var(--teal-soft); }
.fact-chips li:nth-child(2) { background: var(--pink-soft); }
.fact-chips li:nth-child(3) { background: var(--sun-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 600px) {
    .hero-badge { font-size: .9rem; margin-bottom: 8px; }
    .hero-sub { margin-bottom: 16px; }
    .fact-chips { gap: 8px; margin-bottom: 20px; }
    .fact-chips li { padding: 6px 12px; font-size: .9rem; }
    .hero-actions { gap: 10px; }
    .hero-actions .btn { font-size: 1rem; padding: 11px 18px; }
}

.hero-photo {
    position: relative;
    padding: 20px;
}
.blob {
    border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
    overflow: hidden;
    border: 8px solid var(--paper);
    box-shadow: 0 0 0 4px var(--teal), var(--shadow);
    rotate: 2deg;
    aspect-ratio: 1 / 1;
}
.blob img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; }

@media (max-width: 860px) {
    .hero { padding-top: 34px; }
    .hero-grid { grid-template-columns: 1fr; gap: 20px; }
    .hero-title { font-size: clamp(2.8rem, 13vw, 4.4rem); }
    .hero-photo { max-width: 460px; margin: 0 auto; }
}

/* ---------- Abschnitte ---------- */

.section { position: relative; padding: 64px 0; }
.section-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    text-align: center;
}
.section-title .squiggle {
    display: block;
    width: 120px;
    height: 12px;
    margin: 10px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 6c10-8 18 8 28 0s18 8 28 0 18 8 28 0 18 8 28 0' fill='none' stroke='%23ff8fa3' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.lead {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 32px;
    color: var(--ink-soft);
    font-weight: 600;
}

.card {
    position: relative;
    background: var(--paper);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow);
}
@media (max-width: 600px) { .card { padding: 24px 20px; } }

.intro-card {
    max-width: 820px;
    margin: 0 auto;
    font-size: 1.1rem;
    border: 3px dashed var(--teal);
}
.intro-card p:first-of-type::first-letter {
    font-family: var(--font-fun);
    font-weight: 700;
    font-size: 3.2em;
    float: left;
    line-height: .9;
    margin: 4px 10px 0 0;
    color: var(--teal-dark);
}
.intro-card p:last-child { margin-bottom: 0; }

.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.fact {
    position: relative;
    border-radius: var(--radius);
    padding: 64px 24px 26px;
    text-align: center;
    margin-top: 40px;
}
.fact:nth-child(1) { background: var(--sun-soft); rotate: -1.5deg; }
.fact:nth-child(2) { background: var(--mint-soft); rotate: 1deg; }
.fact:nth-child(3) { background: var(--lilac-soft); rotate: -1deg; }
.fact img {
    position: absolute;
    top: -44px;
    left: 50%;
    translate: -50% 0;
    width: 92px;
    filter:
        drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
        drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
        drop-shadow(0 6px 8px rgba(61, 51, 70, .15));
}
.fact h3 { font-size: 1.5rem; margin-bottom: 6px; }
.fact p { margin: 0; font-weight: 600; }
@media (max-width: 860px) {
    .facts { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

/* ---------- Anmeldung ---------- */

.signup {
    background: var(--teal);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .18) 0 4px, transparent 5px),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .14) 0 6px, transparent 7px);
    background-size: 120px 120px;
    padding: 40px 0 70px;
}
.signup .section-title { color: #fff; text-shadow: 0 3px 0 var(--teal-dark); }
.signup .section-title .squiggle { filter: brightness(0) invert(1); }
.signup .lead { color: #fff; }
.start-badge {
    display: grid;
    place-items: center;
    width: 130px;
    height: 130px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--sun);
    border: 4px solid var(--ink);
    font-family: var(--font-fun);
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
    rotate: -8deg;
    box-shadow: 0 6px 0 var(--ink);
}
.start-badge small { display: block; font-size: .95rem; font-weight: 500; }
.start-badge strong { font-size: 1.45rem; }

.form-card {
    max-width: 760px;
    margin: 0 auto;
    border: 4px solid var(--ink);
}

.preview-note {
    background: var(--sun-soft);
    border: 3px dashed #e39a12;
    border-radius: 18px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-weight: 700;
}

.form-fieldset {
    border: 0;
    margin: 0 0 22px;
    padding: 22px 20px 6px;
    border-radius: 22px;
    background: var(--cream);
    position: relative;
}
.form-fieldset:nth-of-type(1) { background: var(--teal-soft); }
.form-fieldset:nth-of-type(2) { background: var(--sun-soft); }
.form-fieldset:nth-of-type(3) { background: var(--pink-soft); }
.form-fieldset:nth-of-type(4) { background: var(--mint-soft); }
.form-fieldset:nth-of-type(5) { background: var(--lilac-soft); }
.form-fieldset legend {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-fun);
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 12px;
}
.form-fieldset legend img { width: 42px; height: 42px; }
.form-fieldset legend + * { clear: both; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 16px; }
.form-group > label, .group-label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    padding: 13px 16px;
    border-radius: 16px;
    border: 3px solid rgba(61, 51, 70, .18);
    background: var(--paper);
    transition: border-color .2s, box-shadow .2s;
    min-height: 52px;
}
input:focus, textarea:focus {
    outline: none;
    border-color: var(--teal-dark);
    box-shadow: 0 0 0 4px rgba(61, 189, 181, .25);
}
input::placeholder { color: #a39aa8; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.chip { position: relative; }
.chip input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}
.chip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--paper);
    border: 3px solid rgba(61, 51, 70, .18);
    font-weight: 700;
    transition: all .2s;
    cursor: pointer;
}
.chip span::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid rgba(61, 51, 70, .35);
    background: #fff;
    transition: all .2s;
}
.chip input:checked + span {
    border-color: var(--ink);
    background: var(--sun);
}
.chip input:checked + span::before {
    border-color: var(--ink);
    background: var(--ink);
    box-shadow: inset 0 0 0 3px var(--sun);
}
.chip input:focus-visible + span { outline: 3px dashed var(--teal-dark); outline-offset: 3px; }

.form-actions { display: grid; gap: 14px; margin-top: 8px; }
.form-hint { text-align: center; color: var(--ink-soft); font-size: .95rem; margin: 6px 0 0; }

/* E-Mail-Dialog */
.email-dialog {
    position: fixed;
    inset: 0;
    background: rgba(61, 51, 70, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 60;
}
.email-dialog[hidden] { display: none; }
.email-dialog-inner {
    background: var(--paper);
    border-radius: var(--radius);
    border: 4px solid var(--ink);
    padding: 26px;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
}
.email-dialog-field { margin-bottom: 12px; }
.email-dialog-field label { display: block; font-weight: 700; margin-bottom: 4px; }
.email-dialog-field input, .email-dialog-field textarea { background: var(--cream); }
.email-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.email-dialog-actions .btn { font-size: 1rem; padding: 10px 18px; }

/* ---------- Kontakt ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 340px));
    justify-content: center;
    gap: 24px;
}
.person {
    text-align: center;
    padding-top: 30px;
}
.person-icon {
    width: 76px;
    margin: 0 auto 10px;
    filter: drop-shadow(0 4px 6px rgba(61, 51, 70, .15));
}
.person h3 { font-size: 1.5rem; margin-bottom: 8px; }
.person .btn { font-size: 1rem; padding: 10px 20px; }
.contact-mail { text-align: center; margin-top: 26px; font-size: 1.1rem; }
.contact-mail a {
    display: inline-block;
    background: var(--paper);
    padding: 10px 22px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    word-break: break-all;
}
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Karte ---------- */

.map-frame {
    max-width: 920px;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    border: 8px solid var(--paper);
    box-shadow: 0 0 0 4px var(--lilac), var(--shadow);
    aspect-ratio: 16 / 9;
    background: var(--sky-soft);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 600px) { .map-frame { aspect-ratio: 4 / 5; } }
.map-cta { text-align: center; margin-top: 26px; }

/* ---------- Unterseiten-Kopf ---------- */

.page-hero {
    position: relative;
    text-align: center;
    padding: 56px 0 50px;
    background: var(--page-bg, var(--sun-soft));
}
.page-hero h1 {
    font-size: clamp(2.3rem, 7vw, 3.8rem);
    margin: 0;
    overflow-wrap: anywhere;
    hyphens: manual;
}
.page-hero p { margin: 8px 0 0; font-weight: 700; color: var(--ink-soft); }
.page-hero + .wave { --wave: var(--page-bg, var(--sun-soft)); rotate: 180deg; margin: -1px 0 0; }

/* ---------- Polaroids ---------- */

.polaroid {
    background: var(--paper);
    padding: 12px 12px 18px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    rotate: var(--r, -2deg);
    position: relative;
}
.polaroid::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    translate: -50% 0;
    rotate: -3deg;
    width: 96px;
    height: 28px;
    background: rgba(255, 210, 90, .75);
    border-radius: 4px;
}
.polaroid img { border-radius: 4px; width: 100%; }
.polaroid figcaption {
    font-family: var(--font-fun);
    text-align: center;
    margin-top: 10px;
    font-weight: 500;
}

/* ---------- Lieder ---------- */

.songs-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 40px;
    align-items: start;
}
.song-list { display: grid; gap: 30px; }
.songs-photo { margin: 20px 0 0; }
.song-card {
    background:
        repeating-linear-gradient(transparent 0 33px, rgba(61, 189, 181, .22) 33px 35px),
        var(--paper);
    background-position: 0 14px;
    border-left: 10px solid var(--pink);
}
.song-card:nth-child(2) { border-left-color: var(--teal); }
.song-card h2 {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.song-note {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--sun);
    border: 3px solid var(--ink);
    font-size: 1.4rem;
}
.song-lyrics {
    font-size: 1.2rem;
    line-height: 35px;
    font-weight: 600;
    margin: 0 0 12px;
}
.song-outro {
    font-family: var(--font-fun);
    font-weight: 600;
    color: var(--teal-dark);
    font-size: 1.15rem;
    margin: 0;
}
@media (max-width: 860px) {
    .songs-grid { grid-template-columns: 1fr; }
    .songs-grid .songs-photo { order: 2; max-width: 320px; margin: 10px auto 0; }
}

/* ---------- Teilnahmebedingungen ---------- */

.terms-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 44px;
    align-items: start;
}
.terms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: t;
}
.terms-list li {
    counter-increment: t;
    position: relative;
    padding: 0 0 18px 60px;
    min-height: 44px;
}
.terms-list li::before {
    content: counter(t);
    position: absolute;
    left: 0;
    top: -4px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-fun);
    font-weight: 700;
    font-size: 1.2rem;
    border: 3px solid var(--ink);
    background: var(--sun);
}
.terms-list li:nth-child(2)::before { background: var(--pink); }
.terms-list li:nth-child(3)::before { background: var(--teal); }
.terms-list li:nth-child(4)::before { background: var(--lilac); }
.terms-confirm {
    background: var(--teal-soft);
    border-radius: 18px;
    padding: 16px 18px;
    margin: 6px 0 0;
}
.terms-photos { display: grid; gap: 34px; }
.terms-photos .polaroid:nth-child(2) { --r: 2.5deg; }
@media (max-width: 860px) {
    .terms-grid { grid-template-columns: 1fr; }
    .terms-photos { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 480px) { .terms-photos { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }

/* ---------- Das erwartet dich ---------- */

.prose-card { max-width: 860px; margin: 0 auto; }
.prose-card p:last-child { margin-bottom: 0; }

.info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.info-card { text-align: center; }
.info-card:nth-child(1) { background: var(--pink-soft); }
.info-card:nth-child(2) { background: var(--sun-soft); }
.info-card:nth-child(3) { background: var(--mint-soft); }
.info-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    font-size: 2.1rem;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--ink);
    rotate: -6deg;
}
.info-card h3 { font-size: 1.4rem; }
.info-card p { margin: 0 0 10px; }
.info-card p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .info-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

.final {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.final h2 { font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--teal-dark); }
.final .signature {
    font-family: var(--font-fun);
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0 0 22px;
}
@media (max-width: 860px) { .final { grid-template-columns: 1fr; text-align: center; } .final .polaroid { max-width: 420px; margin: 0 auto; } }

/* ---------- Impressum ---------- */

.legal { display: grid; gap: 26px; max-width: 860px; margin: 0 auto; }
.legal h2 { font-size: 1.6rem; margin-top: 1.1em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.2rem; margin-top: 1.2em; }

/* ---------- Footer ---------- */

.site-footer {
    background: var(--teal-dark);
    color: #fff;
    text-align: center;
    padding: 20px 0 34px;
}
.footer-wave { --wave: var(--teal-dark); }
.parade {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(5px, 2vw, 22px);
    margin: 0 0 18px;
}
.parade img {
    width: clamp(34px, 8.5vw, 70px);
    filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
    animation: hop 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * .18s);
}
@keyframes hop {
    0%, 70%, 100% { translate: 0 0; }
    80% { translate: 0 -10px; }
}
@media (prefers-reduced-motion: reduce) { .parade img { animation: none; } }
.site-footer p { margin: 4px 0; }
.site-footer a { color: #fff; }
.site-footer .footer-title {
    font-family: var(--font-fun);
    font-size: 1.4rem;
    font-weight: 600;
}
.version-number { opacity: .6; font-size: .85rem; }