/* ==========================================================================
   Drachenfest – Template
   Himmel, fliegende Drachen, Wimpelkette. Baut auf MDB5 / Bootstrap 5 auf.
   ========================================================================== */

/* Schriften lokal aus /mdb/font */
@font-face {
    font-family: "Nunito Sans";
    src: url("../../../mdb/font/nunito-sans/nunito-sans-latin.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Nunito Sans";
    src: url("../../../mdb/font/nunito-sans/nunito-sans-latin-italic.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Shadows Into Light Two";
    src: url("../../../mdb/font/shadows-into-light-two/shadows-into-light-two-v13-latin-regular.woff2") format("woff2"),
         url("../../../mdb/font/shadows-into-light-two/shadows-into-light-two-v13-latin-regular.woff") format("woff");
    font-display: swap;
}

:root {
    --df-sky-top: #0b4fb3;
    --df-sky-mid: #1b8cf0;
    --df-sky-low: #7fd6ff;
    --df-sun: #ffc531;
    --df-coral: #ff4d5e;
    --df-teal: #12c2a9;
    --df-violet: #7b4cff;
    --df-orange: #ff8a2b;
    --df-grass: #3bb273;
    --df-grass-dark: #258a55;
    --df-ink: #16233a;
    --df-paper: #fffaf0;
    --df-radius: 1.25rem;
    --mdb-primary: #1b6fd6;
    --mdb-primary-rgb: 27, 111, 214;
    --mdb-body-font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.df-body {
    font-family: var(--mdb-body-font-family);
    color: var(--df-ink);
    background: var(--df-paper);
    font-size: 1.0625rem;
    /* Fußbereich bleibt bei kurzen Seiten unten */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.df-body > .df-main {
    flex: 1 0 auto;
}
.df-body h1, .df-body h2, .df-body h3, .df-body h4 {
    font-weight: 900;
    letter-spacing: -.01em;
}
.df-script {
    font-family: "Shadows Into Light Two", cursive;
    font-weight: 400;
}
.df-skip {
    position: absolute;
    z-index: 2000;
    top: .5rem;
    left: .5rem;
    background: #fff;
    padding: .5rem 1rem;
    border-radius: .5rem;
}

/* --- Navigation -------------------------------------------------------- */
.df-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: background-color .3s, box-shadow .3s;
    background: var(--df-sky-top);
}
.df-body--start .df-header {
    position: fixed;
    left: 0;
    right: 0;
    background: transparent;
}
.df-header.is-scrolled,
.df-body--start .df-header.is-scrolled,
.df-body--start .df-header.is-open {
    background: rgba(11, 79, 179, .96);
    box-shadow: 0 6px 24px rgba(11, 40, 90, .25);
    backdrop-filter: blur(8px);
}
.df-nav {
    box-shadow: none;
    background: transparent !important;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.df-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 900;
    font-size: 1.35rem;
    color: #fff !important;
}
.df-brand__icon svg {
    width: 34px;
    height: 34px;
    display: block;
    animation: df-sway 4s ease-in-out infinite;
    transform-origin: 50% 90%;
}
.df-nav .nav-link {
    color: rgba(255, 255, 255, .9) !important;
    font-weight: 700;
    border-radius: 2rem;
    padding: .45rem .9rem !important;
    transition: background-color .2s;
}
.df-nav .nav-link:hover,
.df-nav .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .16);
}
.df-nav .navbar-toggler {
    color: #fff;
    border: 0;
    font-size: 1.4rem;
}

/* --- Buttons ----------------------------------------------------------- */
.df-btn {
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: transform .2s, box-shadow .2s;
}
.df-btn:hover {
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.df-btn--sun {
    background: var(--df-sun);
    color: var(--df-ink);
}
.df-btn--sun:hover, .df-btn--sun:focus {
    background: #ffd25a;
    color: var(--df-ink);
}
.df-btn--glass {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .7);
    backdrop-filter: blur(4px);
}
.df-btn--glass:hover, .df-btn--glass:focus {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

/* --- Himmel ------------------------------------------------------------ */
.df-sky {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 85% 18%, rgba(255, 230, 140, .55) 0, rgba(255, 230, 140, 0) 22%),
        linear-gradient(180deg, var(--df-sky-top) 0%, var(--df-sky-mid) 55%, var(--df-sky-low) 100%);
}
.df-hero {
    min-height: min(100vh, 860px);
    display: flex;
    align-items: center;
    padding: 7rem 0 9rem;
}
.df-hero::before {
    /* Festbild dezent im Himmel */
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--df-hero-image, none);
    background-size: cover;
    background-position: center;
    opacity: .28;
    mix-blend-mode: luminosity;
}
.df-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
}
.df-hero__kicker {
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    color: var(--df-sun);
    margin-bottom: .25rem;
    transform: rotate(-2deg);
}
.df-hero__title {
    font-size: clamp(2.6rem, 8vw, 5.5rem);
    line-height: 1;
    margin: 0 auto 1.25rem;
    max-width: 14ch;
    text-shadow: 0 4px 0 rgba(11, 40, 90, .25);
}
.df-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1.75rem;
}
.df-hero__meta span {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 2rem;
    padding: .4rem 1.1rem;
    backdrop-filter: blur(4px);
}
.df-hero__notice {
    font-size: 1.25rem;
    font-weight: 700;
}
.df-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Countdown */
.df-countdown {
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(4.5rem, 1fr));
    gap: .75rem;
}
.df-countdown div {
    background: #fff;
    color: var(--df-ink);
    border-radius: 1rem;
    padding: .6rem .5rem .5rem;
    box-shadow: 0 8px 0 rgba(11, 40, 90, .18);
    transform: rotate(var(--r, 0deg));
}
.df-countdown div:nth-child(1) { --r: -3deg; border-bottom: 6px solid var(--df-coral); }
.df-countdown div:nth-child(2) { --r: 2deg; border-bottom: 6px solid var(--df-sun); }
.df-countdown div:nth-child(3) { --r: -1deg; border-bottom: 6px solid var(--df-teal); }
.df-countdown div:nth-child(4) { --r: 3deg; border-bottom: 6px solid var(--df-violet); }
.df-countdown b {
    display: block;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.df-countdown span {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
}

/* Hügel */
.df-hills {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    line-height: 0;
}
.df-hills svg {
    width: 100%;
    height: 160px;
    display: block;
}
.df-hills--small svg { height: 60px; }
.df-hills__back { fill: var(--df-grass); }
.df-hills__front { fill: var(--df-paper); }

/* Wolken */
.df-clouds span {
    position: absolute;
    z-index: 1;
    width: 180px;
    height: 54px;
    background: rgba(255, 255, 255, .85);
    border-radius: 60px;
    filter: blur(1px);
    animation: df-cloud 70s linear infinite;
}
.df-clouds span::before,
.df-clouds span::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
}
.df-clouds span::before { width: 80px; height: 80px; top: -40px; left: 26px; }
.df-clouds span::after { width: 100px; height: 100px; top: -54px; right: 22px; }
/* Wolken ziehen oberhalb und unterhalb des Titels vorbei, nie durch die Schrift */
.df-clouds span:nth-child(1) { top: 13%; left: -220px; animation-duration: 80s; }
.df-clouds span:nth-child(2) { top: 74%; left: -220px; transform: scale(.6); opacity: .7; animation-duration: 110s; animation-delay: -45s; }
.df-clouds span:nth-child(3) { top: 5%; left: -220px; transform: scale(.8); opacity: .8; animation-duration: 95s; animation-delay: -70s; }
.df-pagehero .df-clouds span:nth-child(1) { top: 10%; }
.df-pagehero .df-clouds span:nth-child(2) { top: 62%; }

/* Drachen */
.df-kite {
    position: absolute;
    z-index: 2;
    width: 90px;
    animation: df-float 7s ease-in-out infinite;
    filter: drop-shadow(0 10px 12px rgba(11, 40, 90, .25));
}
.df-kite svg {
    width: 100%;
    display: block;
    overflow: visible;
    animation: df-sway 3.5s ease-in-out infinite;
    transform-origin: 50% 30%;
}
.df-kite__sail { fill: var(--k1); }
.df-kite__accent { fill: var(--k2); }
.df-kite__spar { stroke: rgba(22, 35, 58, .45); stroke-width: 2; fill: none; }
.df-kite__tail { stroke: var(--k2); stroke-width: 3; fill: none; stroke-linecap: round; animation: df-tail 1.6s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.df-kite__bows path { fill: var(--k1); }
.df-kite__line {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 1px;
    height: 120vh;
    background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%);
    transform-origin: top;
    transform: rotate(var(--line, 18deg));
}
.df-kite--a { --k1: var(--df-coral); --k2: var(--df-sun); top: 16%; left: 7%; width: 110px; --line: 22deg; }
.df-kite--b { --k1: var(--df-teal); --k2: var(--df-violet); top: 10%; right: 9%; width: 130px; animation-delay: -2s; --line: -20deg; }
.df-kite--c { --k1: var(--df-violet); --k2: var(--df-orange); top: 52%; left: 16%; width: 70px; animation-delay: -4s; --line: 30deg; }
.df-kite--d { --k1: var(--df-sun); --k2: var(--df-coral); top: 48%; right: 15%; width: 80px; animation-delay: -1s; --line: -28deg; }
.df-kite--small { --k1: var(--df-sun); --k2: var(--df-coral); top: 18%; right: 8%; width: 64px; --line: -24deg; }

@keyframes df-float {
    0%, 100% { translate: 0 0; }
    25% { translate: 12px -18px; }
    50% { translate: -6px -8px; }
    75% { translate: -14px -22px; }
}
@keyframes df-sway {
    0%, 100% { rotate: -6deg; }
    50% { rotate: 7deg; }
}
@keyframes df-tail {
    from { transform: skewX(-8deg); }
    to { transform: skewX(10deg); }
}
@keyframes df-cloud {
    to { translate: calc(100vw + 440px) 0; }
}

/* Unterseiten */
.df-pagehero {
    padding: 3.5rem 0 5rem;
}
.df-pagehero .container {
    position: relative;
    z-index: 3;
}
.df-pagehero__kicker {
    color: var(--df-sun);
    font-size: 1.35rem;
    margin: 0;
    transform: rotate(-1.5deg);
    display: inline-block;
}
.df-pagehero__title {
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    margin: 0;
}

/* --- Inhalt ------------------------------------------------------------ */
.df-main {
    padding: 2.5rem 0 5rem;
    min-height: 40vh;
}
.df-main h2,
.df-heading {
    position: relative;
    display: inline-block;
    margin: 2.5rem 0 1.5rem;
    padding-bottom: .4rem;
}
.df-main h2::after,
.df-heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: -.5rem;
    bottom: 0;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 4 Q 5 0 10 4 T 20 4 T 30 4 T 40 4' fill='none' stroke='%23ffc531' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
    background-size: 40px 8px;
}
.df-main > .container > :first-child h2:first-child,
.df-main .df-heading:first-child {
    margin-top: 0;
}
.df-lead {
    font-size: 1.35rem;
    font-weight: 700;
}
.df-main a:not(.btn):not(.list-group-item) {
    color: #1060c4;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Info-Karten */
.df-fact {
    position: relative;
    background: #fff;
    border-radius: var(--df-radius);
    padding: 1.5rem 1.4rem 1.3rem;
    box-shadow: 0 10px 30px rgba(22, 35, 58, .08);
    border-top: 6px solid var(--c);
    transition: transform .25s, box-shadow .25s;
}
.df-fact:hover {
    transform: translateY(-4px) rotate(-.5deg);
    box-shadow: 0 16px 36px rgba(22, 35, 58, .14);
}
.df-fact h3 {
    font-size: 1.15rem;
    margin: .6rem 0 .25rem;
}
.df-fact p { margin: 0; font-weight: 700; }
.df-fact .df-fact__extra { font-weight: 400; opacity: .75; margin-top: .25rem; }
.df-fact__icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 18%, white);
    color: var(--c);
    font-size: 1.3rem;
}
.df-fact a { display: inline-block; margin-top: .5rem; font-weight: 800; }
.df-fact--sun { --c: #e0a400; }
.df-fact--coral { --c: var(--df-coral); }
.df-fact--teal { --c: #0ea18c; }
.df-fact--violet { --c: var(--df-violet); }

/* Programm */
.df-body .drachenfest-programm {
    gap: .6rem;
}
.df-body .drachenfest-programm .list-group-item {
    border: 0;
    border-radius: 1rem !important;
    background: #fff;
    box-shadow: 0 4px 16px rgba(22, 35, 58, .06);
    border-left: 6px solid var(--df-sky-mid);
    padding: 1rem 1.25rem;
}
.df-body .drachenfest-programm .list-group-item:nth-child(4n+2) { border-left-color: var(--df-coral); }
.df-body .drachenfest-programm .list-group-item:nth-child(4n+3) { border-left-color: var(--df-sun); }
.df-body .drachenfest-programm .list-group-item:nth-child(4n+4) { border-left-color: var(--df-teal); }
.df-body .drachenfest-programm-section h2 { margin-top: 1.5rem; }

/* Formulare und Karten */
.df-body .drachenfest-anmeldung form {
    background: #fff;
    border-radius: var(--df-radius);
    padding: 1.75rem;
    box-shadow: 0 10px 30px rgba(22, 35, 58, .08);
}
.df-body .drachenfest .drachenfest-map {
    border-radius: var(--df-radius);
    box-shadow: 0 10px 30px rgba(22, 35, 58, .1);
}
.df-body .drachenfest-rueckblick img {
    border-radius: var(--df-radius);
    transform: rotate(-1.5deg);
    box-shadow: 0 10px 0 var(--df-sun);
}

/* --- Fußbereich -------------------------------------------------------- */
.df-footer {
    position: relative;
    background: var(--df-ink);
    color: rgba(255, 255, 255, .85);
    padding: 4.5rem 0 2rem;
    margin-top: 2rem;
}
.df-footer a { color: #fff; }
.df-footer a:hover { color: var(--df-sun); }
.df-footer__name { font-size: 1.5rem; font-weight: 900; color: #fff; margin: 0; }
.df-footer__claim { font-size: 1.6rem; color: var(--df-sun); margin-bottom: 1rem; }
.df-footer__head { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--df-sun); }
.df-footer__links li { margin-bottom: .35rem; }
.df-footer__social a {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    margin-right: .4rem;
    font-size: 1.15rem;
    transition: background-color .2s, transform .2s;
}
.df-footer__social a:hover { background: var(--df-coral); color: #fff; transform: rotate(-8deg); }
.df-footer__team a {
    opacity: .6;
    font-size: .9rem;
}
.df-footer__copy { margin: 2.5rem 0 0; font-size: .875rem; opacity: .6; }

/* Wimpelkette */
.df-bunting {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    height: 44px;
    background: linear-gradient(transparent 4px, rgba(255, 255, 255, .5) 4px, rgba(255, 255, 255, .5) 6px, transparent 6px);
}
.df-bunting span {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 34px solid var(--df-coral);
    margin-top: 5px;
    transform-origin: top center;
    animation: df-flutter 2.4s ease-in-out infinite;
}
.df-bunting span:nth-child(4n+2) { border-top-color: var(--df-sun); animation-delay: -.6s; }
.df-bunting span:nth-child(4n+3) { border-top-color: var(--df-teal); animation-delay: -1.2s; }
.df-bunting span:nth-child(4n+4) { border-top-color: var(--df-violet); animation-delay: -1.8s; }
@keyframes df-flutter {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* Beim Einblenden leicht hochschweben (template.js setzt .is-visible) */
.df-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.df-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* --- Fehlerseite (404): Der Wind hat gedreht ---------------------------- */
.df-sky--windy {
    background:
        radial-gradient(circle at 80% 15%, rgba(255, 230, 140, .35) 0, rgba(255, 230, 140, 0) 20%),
        linear-gradient(180deg, #123a7a 0%, #1f6fd0 50%, #8fd3f5 100%);
}
.df-404 .df-hero__content { padding-bottom: 2rem; }
.df-404__code {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .1em;
    font-size: clamp(6rem, 22vw, 13rem);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.04em;
    text-shadow: 0 8px 0 rgba(11, 40, 90, .3);
    margin: .25rem 0 .4em; /* Platz für die verhedderte Leine */
}
.df-404__code > span:not(.df-404__kite) {
    display: inline-block;
    animation: df-wobble 3.2s ease-in-out infinite;
}
.df-404__code > span:last-child { animation-delay: -1.6s; }
.df-404__kite {
    position: relative;
    display: inline-block;
    width: .72em;
    height: 1em;
    --k1: var(--df-coral);
    --k2: var(--df-sun);
}
.df-404__kite > svg:first-child {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 10px 10px rgba(11, 40, 90, .3));
    animation: df-tumble 4.5s cubic-bezier(.45, .05, .55, .95) infinite;
    transform-origin: 50% 40%;
}
.df-404__tangle {
    position: absolute;
    left: 50%;
    top: 88%;
    width: .5em;
    translate: -50% 0;
    overflow: visible;
}
.df-404__tangle path {
    fill: none;
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: df-tangle 4.5s ease-in-out infinite;
}
.df-404__title {
    max-width: none;
    font-size: clamp(2rem, 5.5vw, 3.6rem);
}
.df-404__text {
    font-size: 1.2rem;
    font-weight: 600;
    max-width: 40rem;
    margin: 0 auto;
    opacity: .95;
}
.df-404__tree {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 40px;
    width: clamp(110px, 16vw, 220px);
    pointer-events: none;
}
.df-404__tree svg { display: block; width: 100%; }
.df-404__stuck {
    transform-origin: 120px 110px;
    animation: df-stuck 2.2s ease-in-out infinite;
}
.df-404__links .df-fact h3 { margin-bottom: 0; }

/* Windstreifen */
.df-wind span {
    position: absolute;
    z-index: 1;
    left: -30%;
    height: 2px;
    width: 26%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
    animation: df-gust 3.6s linear infinite;
}
.df-wind span:nth-child(1) { top: 22%; animation-delay: 0s; }
.df-wind span:nth-child(2) { top: 36%; animation-delay: -1.1s; width: 18%; }
.df-wind span:nth-child(3) { top: 58%; animation-delay: -2.3s; }
.df-wind span:nth-child(4) { top: 68%; animation-delay: -.6s; width: 14%; }
.df-wind span:nth-child(5) { top: 12%; animation-delay: -2.9s; width: 20%; }

@keyframes df-tumble {
    0% { transform: translate(0, 0) rotate(-10deg); }
    20% { transform: translate(.04em, -.08em) rotate(25deg); }
    35% { transform: translate(-.02em, .02em) rotate(200deg); }
    50% { transform: translate(.03em, .1em) rotate(340deg); }
    65% { transform: translate(-.04em, -.04em) rotate(370deg); }
    80% { transform: translate(.02em, -.06em) rotate(345deg); }
    100% { transform: translate(0, 0) rotate(350deg); }
}
@keyframes df-tangle {
    0%, 15% { stroke-dashoffset: 520; }
    60%, 100% { stroke-dashoffset: 0; }
}
@keyframes df-wobble {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50% { transform: rotate(5deg) translateY(-.05em); }
}
@keyframes df-stuck {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(8deg); }
}
@keyframes df-gust {
    from { translate: 0 0; }
    to { translate: 160vw 0; }
}
@media (max-width: 767.98px) {
    /* Untere Wolke würde auf dem Handy hinter den Knöpfen durchscheinen */
    .df-clouds span:nth-child(2) { display: none; }
    .df-404__tree { width: 90px; right: 2%; bottom: 30px; opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
    .df-404__kite > svg:first-child, .df-404__code > span, .df-404__stuck, .df-wind span { animation: none !important; }
    .df-404__tangle path { animation: none !important; stroke-dashoffset: 0; }
}

/* --- Kleine Bildschirme ------------------------------------------------ */
@media (max-width: 991.98px) {
    .df-body--start .df-header { background: rgba(11, 79, 179, .35); }
    .df-nav .navbar-collapse { padding-bottom: .75rem; }
}
@media (max-width: 575.98px) {
    .df-hero { padding: 6rem 0 7rem; }
    .df-kite--c, .df-kite--d { display: none; }
    .df-kite--a { width: 70px; top: 12%; left: 3%; }
    .df-kite--b { width: 80px; top: 9%; right: 3%; }
    .df-countdown { grid-template-columns: repeat(4, minmax(3.6rem, 1fr)); gap: .5rem; }
    .df-hills svg { height: 90px; }
    .df-main { padding-top: 1.5rem; }
}

/* Weniger Bewegung, wenn im System so eingestellt */
@media (prefers-reduced-motion: reduce) {
    .df-kite, .df-kite svg, .df-kite__tail, .df-clouds span, .df-bunting span, .df-brand__icon svg {
        animation: none !important;
    }
    .df-reveal { opacity: 1; transform: none; transition: none; }
}