/* ---------------------------------------------------------------------------
   Content Bescherung – seitenspezifische Styles inkl. Weihnachtsdeko
   --------------------------------------------------------------------------- */

/* Sprungziele unter der Sticky-Navbar freihalten */
#anmeldung,
#anmeldung-final {
    scroll-margin-top: 95px;
}

@media (min-width: 992px) {
    #anmeldung,
    #anmeldung-final {
        scroll-margin-top: 130px;
    }
}

/* Inhalte liegen grundsätzlich über der Deko */
.section-content {
    position: relative;
    z-index: 1;
}


/* =========================================================================
   Hero
   ========================================================================= */

/* Textspalte begrenzen, damit sie nicht unter das Ramona-Bild läuft,
   das ab „md“ in die gelbe Fläche hineinragt. */
@media (min-width: 768px) {
    .hero-copy {
        max-width: 26rem;
    }
}

@media (min-width: 992px) {
    .hero-copy {
        max-width: 34rem;
    }
}

@media (min-width: 1200px) {
    .hero-copy {
        max-width: 40rem;
    }
}

@media (min-width: 1400px) {
    .hero-copy {
        max-width: 45rem;
    }
}

#img-20-ramona {
    object-position: center;
    width: auto;
    max-width: 100%;
    height: 330px;
    margin-left: -20px;
}

@media (min-width: 768px) {
    #img-20-ramona {
        position: absolute;
        left: -95%;
        bottom: -60px;
        height: 400px;
        width: auto;
        max-width: none;
        margin: 0;
        /* Das Bild hängt mit bottom:-60px am unteren Rand. Die Deckelung sorgt
           dafür, dass die Oberkante immer bei 60px + 30px = 90px liegt, also
           rund 45px unterhalb der 46px hohen Lichterkette – unabhängig davon,
           wie hoch der Hero bei der jeweiligen Breite gerade ist. */
        max-height: calc(100% - 30px);
    }
}

@media (min-width: 992px) {
    #img-20-ramona {
        left: -110%;
        height: 600px;
    }
}

@media (min-width: 1200px) {
    #img-20-ramona {
        height: 700px;
    }
}


/* =========================================================================
   Weihnachtsdeko: Goldflocken-Schneefall
   ========================================================================= */

.snowfall {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.snowflake {
    position: absolute;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffdf2 0%, #f9c736 60%, rgba(249, 199, 54, 0) 100%);
    animation-name: cb-snowflake;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes cb-snowflake {
    0% {
        transform: translate3d(0, -40px, 0);
        opacity: 0;
    }
    10% {
        opacity: var(--o, .8);
    }
    90% {
        opacity: var(--o, .8);
    }
    100% {
        transform: translate3d(var(--drift, 20px), var(--fall, 600px), 0);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .snowfall {
        display: none;
    }
}


/* =========================================================================
   Weihnachtsdeko: Lichterkette / Girlande
   ========================================================================= */

/* Liegt bündig an der Oberkante des jeweiligen Containers und wird waagerecht
   gekachelt. background-size: auto 100% skaliert die Kachel proportional zur
   Elementhöhe – girlande.png ist 2172 × 125 (17.4:1), die Kachel wird damit
   625px bzw. 799px breit. Vorteil: beim Höhenwechsel im Breakpoint unten muss
   nur ein Wert gepflegt werden, das Seitenverhältnis bleibt automatisch heil. */
.string-lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background-image: url("../images/deko/girlande.png");
    background-repeat: repeat-x;
    background-position: center top;
    background-size: auto 100%;
    pointer-events: none;
    z-index: 3;
}

@media (min-width: 768px) {
    .string-lights {
        height: 46px;
    }
}


/* Girlande am Uebergang Hero -> schwarze Flaeche.
   girlande-01.png (2144 x 335) ist kein kachelbarer Streifen wie girlande.png,
   sondern ein Einzelstueck mit ausgefransten Enden und mittiger Schleife –
   deshalb no-repeat und einmal ueber die volle Containerbreite.
   aspect-ratio haelt die Hoehe proportional zur Breite; translateY verschiebt
   um einen Anteil der EIGENEN Hoehe (Prozentwerte in transform beziehen sich
   auf das Element selbst, anders als bei top). So liegt der groessere Teil
   der Girlande oberhalb der Kante ueber Hero und Foto, ohne dass der untere
   Teil in die Ueberschrift laeuft.
   Voraussetzung: der schwarze Container traegt kein overflow-hidden mehr. */
.garland {
    position: absolute;
    top: 30px;
    left: -70px;
    right: -70px;
    /* -70% statt der optisch mittigen -50%: bei voller Containerbreite (1320px)
       ist die Girlande gut 200px hoch, und die Ueberschrift bzw. das Logo
       darunter beginnt rund 77px unter der Kante. Erst ab etwa -68% bleibt
       sie in jedem Breakpoint frei. */
    transform: translateY(-70%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 4;
}

/* top: 0 statt der 30px der oberen Girlande: im Abschlussband beginnt das
   Logo schon 77px unter der Kante (py-5 der Zeile + pt-4 der Spalte), während
   die Überschrift in Sektion 2 erst bei 153px anfängt. Mit den 30px Versatz
   säße das Laub bei voller Containerbreite direkt auf dem Logo. */
.garland-bottom {
    top: 65px;
    aspect-ratio: 2154 / 341;
    background-image: url("../images/deko/girlande-02.png");
}

/* Unterhalb von md liegt das Hero-Foto im Textfluss statt absolut. Die
   30px Versatz wuerden dort die Unterkante des Fotos freilegen, deshalb
   rutscht die Girlande hier bis an die Kante. */
@media (max-width: 767.98px) {
    .garland {
        top: 0;
    }

    .garland-bottom {
        top: 25px;
    }
}

/* Zwischen md und lg ist der Container 720px breit, die Girlande also nur rund
   zwei Drittel so hoch wie ab xxl – der Versatz liegt entsprechend zwischen den
   25px darunter und den 65px darueber. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .garland-bottom {
        top: 44px;
    }
}

/* Die Girlande ist per left/right: -70px absichtlich breiter als der
   Container, damit ihre ausgefransten Enden ausserhalb liegen. Sobald der
   Container fast die volle Viewport-Breite einnimmt, wuerde das die Seite
   waagerecht scrollbar machen. overflow-x: clip schneidet sie an der
   Sektionskante ab, ohne einen Scroll-Container zu erzeugen – und anders
   als overflow: hidden bleibt overflow-y dabei sichtbar, sodass die
   Girlande weiterhin nach oben aus der Sektion herausragen darf. */
.garland-section {
    overflow-x: clip;
    overflow-y: visible;
}

.garland-top {
    aspect-ratio: 2144 / 335;
    background-image: url("../images/deko/girlande-01.png");
}


/* =========================================================================
   Weihnachtsdeko: Kugeln & Schneemänner im Hintergrund
   ========================================================================= */

/* z-index: -1 legt die Deko HINTER die Flächen der Section darüber. Dadurch
   dürfen die Grafiken ein paar Pixel in die schwarze bzw. gelbe Kante hinein
   ragen – das verhindert Haarlinien-Lücken durch Subpixel-Rundung –, ohne
   dass die Bänder sichtbar auf der Fläche liegen.
   Das funktioniert, weil html keinen eigenen Hintergrund hat: der von body
   wird aufs Canvas übertragen und liegt damit noch unter z-index: -1.
   Wichtig: .decor darf deshalb NICHT in .section-content liegen, denn dessen
   z-index: 1 spannt einen Stacking Context auf, in dem -1 gefangen bliebe. */
.decor {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

.decor img {
    display: block;
    width: 100%;
    height: auto;
}

/* Hängt an der Unterkante des schwarzen Bandes darüber, das bündig im
   Container sitzt. top: -6px lässt die Bänder 6px in die schwarze Fläche
   laufen, damit zwischen Band und Kante keine Lücke aufblitzt.
   Der Abstand rechts hält alle Bänder auf dem geraden Teil der Kante und
   von der Rundung weg (rounded-bottom-5 = 2rem). Er ist von 2.6rem auf
   2.15rem gerückt, weil kugeln-02.png rechts 24.2% transparenten Rand
   mitbringt, das frühere SVG dagegen nur 17.7% – so setzt das rechte Band
   wieder an derselben Stelle an wie vorher. */
.decor-baubles-right {
    top: -80px;
    right: 2.15rem;
    width: 98px;
}

.decor-baubles-right-bottom {
    top: -80px;
    right: 2.15rem;
    width: 98px;
}

/* Mobil sitzen die drei gelben Kästen unterschiedlich tief verschachtelt und
   stehen dadurch auf unterschiedlichen Kanten: 16,8 / 10,5 / 6,3 px vom Rand.
   Bündig sein sollen sie mit der cremefarbenen Fläche im schwarzen Kasten von
   „Ho Ho Hol dir die Content Bescherung!“ – die liegt bei 24,5 px, also
   Container-Innenabstand plus dessen p-3.

   Die Werte hier sind genau diese Differenz. Sie gelten über die ganze mobile
   Breite, weil alle beteiligten Abstände fest sind (Container-Gutter und
   Bootstrap-Paddings, keine prozentualen Anteile). */

/* Der Geschenk-Kasten behaelt den Rand, solange er ueber die volle Breite
   unter Bild und Textspalte steht – ab xl sitzt er in der rechten Spalte, dort
   wuerde der Rand ihn gegen den Text darueber versetzen. */
@media (max-width: 766.98px) {
    .box-flush-gift {
        margin-inline: .55rem;
    }
}

@media (max-width: 991.98px) {
    .box-flush-challenge {
        margin-inline: 1rem;
    }

    /* Als Rasterspalte hat der FAQ-Kasten eine gesetzte Breite; ohne die
       Korrektur würde er durch die Ränder breiter statt schmaler. */
    .box-flush-faq {
        margin-inline: 1.3rem;
        width: calc(100% - 2.6rem);
    }
}

/* Im FAQ hängen die Kugeln an der schwarzen Anmelde-Fläche darüber. Die ist
   zusätzlich um px-lg-5 (3rem) eingerückt und hat rounded-5 (2rem), darüber
   liegen pb-5 des Anmelde-Containers (3rem) als Abstand.
   5.35rem statt 6rem, weil kugeln-00.png rechts 27.3% transparenten Rand hat
   (SVG: 17.7%) – gleiche Rechnung wie oben, damit die Bänder unverändert
   dort ansetzen, wo die Kante schon gerade ist. */
.decor-baubles-right-bottom {
    top: calc(-3rem - 40px);
    right: 6.35rem;
}

/* Hängt an der Unterkante der gelben Karte der Section darüber.
   -3rem = deren pb-5. Der Abstand links setzt sich aus px-lg-5 des Containers
   und px-lg-5 des Karten-Wrappers (je 3rem) zusammen plus Luft für die
   abgerundete Ecke. 7.1rem statt 6.75rem, weil kugeln-03.png links 18.9%
   transparenten Rand mitbringt, das frühere SVG dagegen 23.8% – dadurch setzt
   das linke Band wieder an derselben Stelle an wie vorher. */
.decor-baubles-left {
    top: calc(-3rem - 65px);
    left: 7.1rem;
    width: 89px;
}

/* Unterhalb von lg stehen beide Kugelgrafiken als eigene Spalte im Textfluss:
   oben rechts neben der Überschrift, unten links neben Überschrift und
   Einstiegsabsatz. Beide sitzen in einer col-4 und sind damit gleich groß.
   Ab lg blendet d-lg-none sie aus, dort übernehmen die .decor-Elemente in den
   Außenrändern der Container. */
.baubles-column {
    display: block;
    width: 100%;
    height: auto;
}

/* Beide Grafiken sollen an der farbigen Fläche darüber hängen wie ihre
   Desktop-Pendants. Die Negativwerte holen genau die Abstände zurück, die
   zwischen Flächenunterkante und Spalte liegen – oben py-5 des Containers plus
   mt-4 der Zeile, unten pb-5 der Section darüber plus pt-2 der Zeile.

   Bewusst nur bis auf 0 und nicht darüber hinaus: die Spalten liegen in
   .section-content, dessen z-index einen eigenen Stacking Context aufspannt.
   Ein negativer z-index käme dort nicht mehr hinter die Fläche, die Bänder
   lägen also sichtbar darauf. Sie laufen ohnehin bis an die Oberkante der
   PNGs, dadurch schließen sie bündig an. */
@media (max-width: 991.98px) {
    .baubles-column-top {
        margin-top: calc(-3rem - 1.5rem);
        /* rund 30 % breiter als die eigene Spalte. Die Überschriftsspalte kann
           dafür nichts abgeben – „Adventskalender“ füllt sie als unteilbares
           Wort schon fast vollständig aus –, deshalb wächst das Bild nach links
           in den Zwischenraum der beiden Spalten. Unten geht es dagegen über
           die Spaltenbreite (col-5 statt col-4). */
        width: 132%;
        /* zusätzlich zum Überhang noch etwas weiter nach links an den Text
           heran. Über margin-left und nicht margin-right, weil bei gesetzter
           Breite der rechte Rand ohnehin überschrieben würde. */
        margin-left: -42%;
    }

    .baubles-column-bottom {
        margin-top: calc(-3rem - .5rem);
        /* nach rechts an den Text heran; die Grafik ragt dabei aus ihrer
           Spalte heraus, der Abstand zum linken Rand wächst entsprechend.
           Bewusst ein fester Wert und kein Prozentsatz: der Abstand zur
           Textspalte ist über alle mobilen Breiten konstant 34px (die beiden
           Spalten-Innenabstände), eine prozentuale Verschiebung würde ihn bei
           991px überholen. */
        margin-left: 0.8rem;
        width: 106%;
    }
}

/* Zwischen md und lg sind beide Grafiken kleiner als in der Mobilansicht.
   Die Ankerkante der oberen bleibt dabei stehen: sie hängt rechts, dort wandert
   der negative linke Rand um genau den Betrag mit, den die Breite verliert
   (90 % Rechtskante wie im Block darüber: −42 % + 132 % = 5,5 % + 84,5 %).

   Die untere rückt dagegen nach rechts an den Text: ihre Rechtskante liegt mit
   5,65rem linkem Rand wieder dort, wo sie vor der Verkleinerung lag
   (0,8rem + 106 % der Spalte). Ein fester rem-Wert genügt, weil der Container
   in diesem Bereich konstant 720 px breit ist. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .baubles-column-top {
        width: 84.5%;
        margin-left: 5.5%;
    }

    .baubles-column-bottom {
        width: 80%;
        margin-left: 5.65rem;
    }
}

/* Ab „lg“ stehen die Grafiken in den Außenrändern der Container.
   Die Breiten richten sich nach der jeweiligen Bootstrap-Containerbreite
   (lg 960, xl 1140, xxl 1320), damit sie nie in die Textspalten laufen.
   Alle Werte sind gegenüber der ersten Fassung um 20 % gewachsen. Die
   waagerechten Abstände (right/left) mussten dafür nicht nach: die
   transparenten Ränder der PNGs sind Prozentwerte der Breite, die Bänder
   rücken dadurch von selbst weiter von den abgerundeten Ecken weg. */
@media (min-width: 992px) {
    /* Ausgemessene Obergrenze: die Grafik hängt an der Oberkante und darf
       weder die linksbündige Überschrift schneiden noch in die Textspalte
       darunter laufen – .decor liegt zwar hinter dem Text, dunkle Kugeln unter
       dem Fließtext wären aber nicht lesbar. Bei lg begrenzt die Überschrift
       (sie endet 207px vor der rechten Kante), ab xl die Textspalte. */
    .decor-baubles-right {
        width: 200px;
        /* etwas weiter von der Containerkante weg Richtung Überschrift als die
           2.15rem der Grundregel. Von der abgerundeten Ecke rückt die Grafik
           damit ohnehin nur weiter weg. Zum längsten Überschriftszug bleiben
           auch im engsten Fall (lg, dreizeilig) rund 90px. */
        right: 5.1rem;
    }

    .decor-baubles-right-bottom {
        width: 300px;
    }

    .decor-baubles-left {
        width: 410px;
    }
}

/* Zwischen lg und xl ist der Container mit 960px am schmalsten: die
   Überschrift „Der Content Bescherung Adventskalender“ braucht drei Zeilen und
   lässt rechts daneben viel Fläche frei, während die linke Grafik der Sektion
   „Für wen sind die 24 Türchen?“ in die Textspalte läuft.

   Deshalb hier eigene Werte statt der gemeinsamen ab lg:
   - rechts oben 280 statt 200px und 30px tiefer. Die Grafik endet damit 30px
     über der Textspalte, hängt aber weiter mit 50px hinter der schwarzen
     Fläche und bleibt so an deren Kante. Zur Überschrift bleiben 54px.
   - links unten 350 statt 410px: die Grafik endet dadurch 20px vor der
     Textspalte statt 40px in sie hineinzulaufen. Die Aufzählung darunter
     beginnt noch weiter rechts, sie bleibt damit ebenfalls frei. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .decor-baubles-right {
        top: -50px;
        width: 280px;
    }

    .decor-baubles-left {
        width: 350px;
    }

    /* Die FAQ-Kugeln ragten mit 300px 60px in den gelben Kasten links hinein.
       Statt sie allein kleiner zu machen, ruecken sie zusaetzlich nach rechts:
       4,25rem statt 6,35rem Abstand zur Containerkante. Damit bleiben bei
       255px Breite 20px Luft zum Kasten, und die groesste Kugel misst 117px –
       sie passt damit zu den beiden anderen Grafiken der Seite (108px oben
       rechts, 119px unten links).
       Weiter nach rechts ginge auch noch: das rechte Band setzt erst bei 72,9 %
       der Grafikbreite an und bleibt damit 56px vor der abgerundeten Ecke der
       schwarzen Flaeche, an der die Kugeln haengen. */
    .decor-baubles-right-bottom {
        width: 255px;
        right: 4.25rem;
    }
}

/* Ab xl bricht die Überschrift früher um und der Container wird breiter –
   dort passt die Grafik bis an die Oberkante der Textspalte. */
@media (min-width: 1200px) {
    .decor-baubles-right {
        width: 275px;
    }
}

/* Zwischen xl und xxl ist der Container 180px breiter, die FAQ-Kugeln ragen
   deshalb nur noch 6px in den gelben Kasten. 275 statt 300px genuegt, damit
   auch hier 20px Luft bleiben. Ab xxl steht die Grafik ohnehin frei. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .decor-baubles-right-bottom {
        width: 275px;
    }
}


/* =========================================================================
   Weihnachtsdeko: Formular-Karten als eingepackte Geschenke
   ========================================================================= */
.gift-card {
    position: relative;
    /* kein overflow:hidden – das Band soll über die Kartenkanten hinausragen */
    /* Platz für das Geschenkband über dem Text. geschenkband-schleife.png ist
       1750 × 484; auf Kartenbreite plus Überstand skaliert ist es 27.99 % der
       Kartenbreite hoch, davon ragen 0.6 % oben über die Kante hinaus – bleiben
       27.39 %. Prozentwerte im padding beziehen sich auf die Breite des
       umgebenden Blocks, und die entspricht hier genau der Kartenbreite.
       Dadurch wächst der Freiraum automatisch mit der Karte mit und braucht
       keine eigenen Werte je Breakpoint mehr; auch die schmalere Abschluss-Karte
       bekommt so von allein ein passend kleineres Band.
       Die 2.5rem sind die Luft zwischen Schleifenzipfeln und Überschrift. */
    padding-top: calc(27.39% + 2.5rem) !important;
}

/* Läuft an allen drei Kanten ein Stück über die Karte hinaus, damit das Band
   wirkt, als wäre es um die Karte gelegt: seitlich je 0.6 % der Kartenbreite
   über left/width, oben derselbe Betrag über translateY.
   Warum nicht top: -0.6 %? Prozentwerte bei top beziehen sich auf die HÖHE des
   umgebenden Blocks, bei transform dagegen auf das Element selbst. Das Bild ist
   27.99 % der Kartenbreite hoch, 0.6 % davon sind 2.14 % der Bildhöhe.
   Feste Breite statt left+right: bei ersetzten Elementen wie <img> würde right
   bei width:auto ignoriert.
   z-index: 0 hält das Band unter .section-content (z-index: 1), also hinter
   dem Text. */
.gift-bow {
    position: absolute;
    top: 0;
    left: -.6%;
    width: 101.2%;
    height: auto;
    transform: translateY(-2.14%);
    z-index: 1;
    pointer-events: none;
}

/* Deko-Hintergrund für die Anmeldekarte (Bokeh/Warmes Licht) */
.signup-decor-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    border-radius: var(--bs-border-radius-xl, 1rem);
    pointer-events: none;
    z-index: 0;
}

/* Unten stehen die Geschenke auf dem Holzboden – in der Anmeldekarte der
   Startseite und in der Karte der Bestätigungsseite (bestaetigen.html). Beide
   brauchen denselben Freiraum und teilen sich deshalb die Regeln bis zum Ende
   des Mobil-Blocks unten. */
#anmeldung .gift-card,
.confirmation .gift-card {
    padding-bottom: 12rem !important;
}

@media (min-width: 576px) {
    #anmeldung .gift-card,
    .confirmation .gift-card {
        padding-bottom: 15rem !important;
    }
}

@media (min-width: 992px) {
    #anmeldung .gift-card,
    .confirmation .gift-card {
        padding-bottom: 20rem !important;
    }
}

@media (min-width: 1400px) {
    #anmeldung .gift-card,
    .confirmation .gift-card {
        padding-bottom: 24rem !important;
    }
}

/* Mobil ist die Anmeldekarte kompakter: die Ueberschrift rueckt dicht unter
   das Band, die Geschenke werden groesser und reichen weiter nach oben.

   Alle Werte sind Prozente der Kartenbreite und wachsen deshalb von allein mit.
   Die Rechnung dahinter:
   - Band: unveraendert 101,2 % breit wie ab lg, es ragt also genauso weit ueber
     die Karte. Nur die Luft darunter faellt kleiner aus – 0,75rem statt 2,5rem.
   - Geschenke: geschenke-auf-boden.png ist 83,2 % seiner Breite hoch. Der
     erste sichtbare Inhalt – die Schleife auf dem hohen 24er-Paket – beginnt
     bei 66,8 % der Bildhoehe, darueber liegt nur weicher Lichtschein. Bei
     112 % Kartenbreite steht diese Spitze 30,9 % der Kartenbreite hoch; unten
     bleibt die Grafik vollstaendig stehen.
     Mehr als 112 % gehen nicht: die aeusseren Pakete beginnen schon bei 4,8 %
     der Bildbreite, bei staerkerer Vergroesserung schneidet der Wrapper sie
     seitlich ab.
   - Innenabstand unten: genau diese 30,9 % plus 0,85rem Luft. Der Hinweistext
     liegt damit ueber dem Lichtschein, aber frei von den Geschenken. */
@media (max-width: 991.98px) {
    #anmeldung .gift-card,
    .confirmation .gift-card {
        padding-top: calc(27.39% + .75rem) !important;
        padding-bottom: calc(30.9% + .85rem) !important;
    }

    #anmeldung .signup-gifts-floor,
    .confirmation .signup-gifts-floor {
        width: 112%;
        margin-left: -6%;
    }
}

/* Zwischen lg und xl faellt die Karte ebenfalls kompakter aus. Die Rechnung
   ist dieselbe wie im Mobilblock, nur steht die Bodengrafik hier auf 100 %
   Kartenbreite: sie ist 83,2 % ihrer Breite hoch, ihr erster sichtbarer Inhalt
   beginnt bei 66,8 % der Bildhoehe – sichtbar sind also 27,6 % der
   Kartenbreite, dazu 0,85rem Luft bis zum Hinweistext unter dem Button.
   Oben bleibt es bei der vollen Bandhoehe, nur die Luft bis zur Ueberschrift
   faellt von 2,5rem auf 1rem. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #anmeldung .gift-card,
    .confirmation .gift-card {
        padding-top: calc(27.39% + 1rem) !important;
        padding-bottom: calc(27.6% + .85rem) !important;
    }
}

.gift-card .section-content {
    position: relative;
    z-index: 2;
}

/* Geschenke auf Holzboden am unteren Rand der Anmeldekarte */
.signup-floor-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    border-bottom-left-radius: var(--bs-border-radius-xl, 1rem);
    border-bottom-right-radius: var(--bs-border-radius-xl, 1rem);
    line-height: 0;
    pointer-events: none;
}

.signup-gifts-floor {
    display: block;
    width: 100%;
    height: auto;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    pointer-events: none;
}


/* =========================================================================
   „Der Content Bescherung Adventskalender“ – Bild, Text und gelber Kasten
   ========================================================================= */
/* Der gelbe Kasten steht je nach Breite an zwei Stellen: zwischen md und lg
   ueber die volle Breite unter beiden Spalten, ab lg rechts unter dem Text.
   Als Bootstrap-Spalte ginge das nicht ohne zweite Kopie im Markup – eine
   umbrechende Spalte begaenne immer unterhalb der hoechsten Zelle der Zeile,
   also unter dem Bild. Im Raster ist es dieselbe Zelle mit zwei Platzierungen.

   Unter md liegt alles schlicht untereinander, dafuer braucht es keine
   Zuweisung: die Zellen fuellen die einzige Spalte in Quelltextreihenfolge. */
.calendar-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .calendar-grid {
        grid-template-columns: 7fr 5fr;
    }

    .calendar-image {
        grid-area: 1 / 1;
    }

    .calendar-text {
        grid-area: 1 / 2;
    }

    /* ueber beide Spalten */
    .calendar-box {
        grid-area: 2 / 1 / 3 / -1;
    }
}

@media (min-width: 992px) {
    /* entspricht dem frueheren Bootstrap-Zwischenraum plus ps-lg-4 */
    .calendar-grid {
        column-gap: 3rem;
    }
}

@media (min-width: 1200px) {
    /* Das Bild spannt sich ueber beide Zeilen, Text und Kasten stapeln sich
       rechts daneben – der Kasten sitzt dadurch direkt unter dem Text und
       nicht erst unter dem Bild. Bis dahin bleibt er ueber die volle Breite
       unter beiden Spalten. */
    .calendar-image {
        grid-area: 1 / 1 / 3 / 2;
    }

    .calendar-box {
        grid-area: 2 / 2 / 3 / 3;
    }
}

/* =========================================================================
   Adventskalender – rein dekoratives Bild, ohne Funktion oder Interaktion
   ========================================================================= */
.advent-calendar {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================================
   „AUS … WIRD …“ – die beiden Fragekreise
   ========================================================================= */
/* Der Schein ist derselbe wie auf den MasterSheet-Kreisen: ein weicher
   Kugelverlauf, dessen Licht oben links sitzt und der zum unteren rechten Rand
   hin ins tiefe Gold laeuft.

   Die Stopps sind aus der dortigen Grafik ausgelesen – gemessen entlang der
   Achse vom Lichtpunkt durch die Kreismitte, umgerechnet auf den Radius, den
   der Verlauf zur weitesten Ecke des Kastens spannt:

     Lichtpunkt   0 %  #f3e4a5
                 20 %  #efd47d
                 60 %  #eecf6a
     Rand        84 %  #dfbc66

   Die Rundung endet bei rund 84 %; der Wert bei 100 % liegt also ausserhalb
   und haelt den Verlauf bis dahin nur geradlinig. Faellt der Verlauf aus,
   bleibt --yellow-dark aus .bg-yellow-dark als Flaeche stehen.

   Die Groesse haengt an rem statt an der Spaltenbreite. Sonst waere der Kreis
   zwischen sm und lg so breit wie die ganze Spalte, also bis zu 640 px. */
.question-circle {
    position: relative;
    width: 100%;
    /* Untergrenze bei gleichbleibender Schriftgroesse: ab 12,5rem braucht die
       laengere Frage eine fuenfte Zeile und stoesst an das Label darueber. */
    max-width: 13rem;
    aspect-ratio: 1 / 1;
    background-image: radial-gradient(circle at 25% 30%,
    #f3e4a5 0%,
    #efd47d 20%,
    #eecf6a 60%,
    #dfbc66 84%,
    #d5ae58 100%);
}

/* Der Inhalt bleibt im einbeschriebenen Quadrat (70,7 % des Durchmessers) und
   laeuft damit nie in die Rundung. Als Breite der Kinder statt als Padding des
   Kreises, weil sich prozentuale Innenabstaende auf das umgebende Element
   beziehen wuerden – und das ist hier die volle Zeilenbreite. */
.question-circle > * {
    width: 72%;
    margin-inline: auto;
}

/* Die beiden Kreise stehen auf jeder Breite nebeneinander. Sie tragen dafür
   flex-basis 0 statt ihrer eigenen Breite: mit flex-wrap entscheidet sich der
   Umbruch an der Basisbreite, nicht am geschrumpften Ergebnis – mit width: 100 %
   als Basis landete jeder Kreis auf einer eigenen Zeile. Aus der Basis 0
   wachsen sie auf die halbe Zeile, gedeckelt von der max-width in
   .question-circle. */
.question-comparison {
    flex-direction: row;
}

.question-comparison .question-circle {
    flex: 1 1 0;
}

/* Der Fazitsatz ist die dritte Spalte neben den Kreisen – aber erst ab xl.
   Bei lg ist der schwarze Kasten nach drei Ebenen Innenabstand nur 654 px
   breit; neben den beiden 255-px-Kreisen blieben davon keine 90 px uebrig.
   Bis dahin umbricht er als volle Zeile unter die Kreise. */
.question-conclusion {
    flex: 0 0 100%;
}

/* Solange er unter den Kreisen steht, laeuft er nur so breit wie diese beiden
   zusammen – ueber die ganze Kastenbreite waere die Zeile sonst deutlich
   laenger als das Paar darueber. Der Wert ist zweimal die Breite eines Kreises
   plus der Spaltenabstand.

   Bewusst ueber den Innenabstand und nicht ueber max-width: max-width zaehlt
   bei Flex zur Umbruchbreite, der Satz haette damit neben die Kreise gepasst
   und waere nicht mehr darunter gelandet. Das Element bleibt so volle Zeile,
   nur sein Textbereich ist schmaler. Unter md greift nichts davon, dort ist
   der Kasten ohnehin schmaler als die Grenze – max() faengt das zusaetzlich
   ab. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .question-conclusion {
        /* 2 × 11,75rem + 1,5rem */
        padding-inline: max(0px, calc((100% - 25rem) / 2));
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .question-conclusion {
        /* ab lg sind die Kreise 13rem breit: 2 × 13rem + 1,5rem */
        padding-inline: max(0px, calc((100% - 27.5rem) / 2));
    }
}

@media (min-width: 1200px) {
    .question-conclusion {
        flex: 1 1 0;
        min-width: 0;
        max-width: 24rem;
        /* zusaetzlich zum gap: die beiden Kreise sollen als Paar
           zusammenbleiben, der Satz deutlicher daneben stehen */
        margin-left: 1.5rem;
    }
}

/* AUS und WIRD haengen an einer festen Hoehe im Kreis und stehen dadurch in
   beiden Kreisen auf einer Linie – waeren sie Teil des zentrierten Blocks,
   wuerde die laengere Frage ihr Label nach oben schieben. Prozentwerte
   beziehen sich hier auf den Kreis selbst, weil der der Bezugsrahmen der
   absoluten Position ist; das Label waechst also mit ihm mit.
   Die Frage bleibt davon unberuehrt in der Kreismitte. */
.question-circle > h4 {
    position: absolute;
    top: 12%;
    left: 14%;
    margin: 0;
}

/* Mobil deutlich kleiner als die 15rem ab lg. Damit die Kreise trotzdem
   schrumpfen können, ohne dass die Frage eine Zeile mehr braucht, nutzt der
   Inhalt hier 88 % statt 72 % des Durchmessers und einen engeren Zeilenabstand.
   Der Text läuft dadurch bewusst nah an den Rand.

   Weil die beiden Kreise sich auch auf schmalen Displays die Zeile teilen,
   sind sie dort nur noch halb so breit wie der Kasten. Ab etwa 152 px stösst
   die Frage bei fester Schriftgroesse an die Rundung – deshalb haengt die
   Schrift hier an der Kugelbreite (cqw) statt an rem. Bis zur vollen Groesse
   deckelt min() sie bei 1rem, darunter schrumpft sie mit dem Kreis mit. */
@media (max-width: 991.98px) {
    .question-circle {
        max-width: 11.75rem;
        /* Bezugsgroesse fuer die cqw-Werte unten */
        container-type: inline-size;
    }

    .question-circle > * {
        width: 88%;
    }

    .question-circle > p {
        font-size: min(1rem, 8.8cqw);
        line-height: 1.2;
    }

    .question-circle > h4 {
        font-size: min(1.35rem, 12cqw);
    }

    /* tiefer als die 12 % auf Desktop, damit das Label näher an der Frage
       steht; nach unten gerückt wandert es zugleich von der Rundung weg */
    .question-circle > h4 {
        top: 15%;
        left: 6%;
    }
}

/* =========================================================================
   „Wer packt dir hier eigentlich 24 Türchen?“
   Schwarzer Textkasten, darunter das Bild, darunter der schwarze Balken
   ========================================================================= */
/* Kasten, Bild und Balken sind Geschwister ohne Aussenabstand: dadurch stossen
   sie ohne Fuge aneinander, das Bild sitzt also direkt unter dem Text und der
   Balken direkt unter dem Bild.

   Bis xxl liegt das Portraet als blasser Hintergrund HINTER dem Text – der
   laeuft dadurch nie unter das Bild, sondern immer davor. Erst ab xxl ist die
   Seite breit genug, dass er rechts daneben passt; dort zeigt sich das Foto
   wieder in voller Deckkraft. */
.about-me-block {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Hoehe des schwarzen Balkens – wird gebraucht, um den Bildkasten genau
       darueber enden zu lassen. */
    --bar-height: 4.5rem;
}

/* Der Bildkasten faellt aus dem Fluss und wird von der Hoehe des Textes
   aufgespannt. Er endet an der Oberkante des Balkens, damit die Geschenke wie
   ueberall nur mit ihrem Ueberstand in das Schwarz ragen. Der z-index hebt ihn
   ueber den Balken, der im Quelltext spaeter kommt. */
.about-me-images {
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--bar-height);
    left: 0;
    z-index: 1;
}

/* Beschneidet allein das Portraet. Die Geschenke stehen bewusst daneben, damit
   sie weiter ungehindert in den Balken hineinlappen duerfen. */
.about-me-portrait {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* min-height fuellt die Flaeche auch dann, wenn das Foto bei seiner
   natuerlichen Hoehe kuerzer waere – sonst bliebe ueber dem Balken eine
   sichtbare Kante. Ist es hoeher, beschneidet es der Kasten.

   Die Breite waechst zu schmalen Fenstern hin: als Hintergrund soll das Foto
   die Flaeche fuellen, auf breiten Fenstern wuerde es dabei aber unnatuerlich
   stark vergroessert. */
#img-ramona-portrait {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    opacity: .3;
    /* Das Foto hat einen hellen Wandhintergrund; als blasse Flaeche zeichnet
       sich dessen rechte Kante sonst als feine senkrechte Linie ab. */
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, #000 90%, transparent 100%);
}

/* Stehen teilweise vor den Beinen und ragen rechts weit ueber die Portraetkante
   hinaus. Der negative Wert laesst sie unten in den Balken hineinlappen. Die
   rechte Kante bleibt ueber alle Breakpoints bei rund 92 %, die Geschenke
   stossen also nie an den Rand des schwarzen Kastens. */
.about-me-gifts {
    position: absolute;
    left: 9%;
    bottom: -2.25rem;
    width: 81%;
    height: auto;
}

/* Schwarzer Abschluss unter dem Bild: unten abgerundet, oben eckig, damit das
   Bild ohne sichtbare Kante darauf steht. Ohne Inhalt, die Hoehe macht die
   Flaeche. order schiebt ihn hinter den Text, der im Quelltext spaeter steht. */
.about-me-bar {
    order: 2;
    height: var(--bar-height);
}

.about-me-text {
    order: 1;
    position: relative;
    z-index: 2;
    max-width: 46rem;
    /* unten Platz fuer die Geschenke: deren Hoehe betraegt 341/518 ihrer
       Breite, bei 73 % Breite also rund 48 % der Blockbreite, plus etwas Luft.
       Prozentwerte beziehen sich auf die Blockbreite, nicht auf die gedeckelte
       Textbreite – der Wert passt also unabhaengig von max-width. */
    padding: 2.5rem 1rem 52%;
}

@media (min-width: 576px) {
    #img-ramona-portrait {
        width: 92%;
    }

    .about-me-gifts {
        left: 24%;
        width: 70%;
    }

    .about-me-text {
        padding-bottom: 50%;
    }
}

@media (min-width: 768px) {
    #img-ramona-portrait {
        width: 78%;
    }

    .about-me-gifts {
        left: 27%;
        bottom: -1.5rem;
        width: 67%;
    }

    .about-me-block {
        --bar-height: 5.5rem;
    }

    .about-me-text {
        padding-top: 3rem;
        padding-bottom: 48%;
    }
}

@media (min-width: 992px) {
    #img-ramona-portrait {
        width: 62%;
    }

    .about-me-gifts {
        left: 31%;
        bottom: -7rem;
        width: 62%;
    }

    .about-me-block {
        --bar-height: 10rem;
    }

    .about-me-text {
        padding-bottom: 45%;
    }
}

/* Ab md steht der Text rechts neben dem Portraet. Das Foto kehrt dazu in den
   Fluss zurueck und gibt wieder die Hoehe des Blocks vor; weil die Geschenke
   unten an ihm haengen, bleibt oberhalb von ihnen Platz fuer den Text.

   Die Werte hier gelten ab xxl. Darunter wird der Block deutlich schmaler
   (756 px bei lg, 720 px bei md), der Text braucht dort also mehr Hoehe,
   waehrend das Portrait proportional kuerzer wird – beide folgenden Bloecke
   gleichen das mit eigenen Anteilen aus. */
@media (min-width: 768px) {
    .about-me-images {
        position: relative;
        bottom: auto;
    }

    .about-me-portrait {
        position: static;
        overflow: visible;
    }

    #img-ramona-portrait {
        width: 45%;
        min-height: 0;
        object-fit: fill;
        opacity: 1;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .about-me-gifts {
        left: 44%;
        width: 62%;
    }

    .about-me-text {
        position: absolute;
        /* nicht bei 0: sonst klebt die Ueberschrift an der schwarzen Flaeche */
        top: 5rem;
        left: calc(52% + 2.5rem);
        right: 0;
        max-width: none;
        padding: 0;
        z-index: 2;
    }
}

/* md: der Block ist nur 720 px breit. Portrait und Geschenke fallen deshalb
   anteilig groesser aus als ab xxl, der Text rueckt naeher an das Foto.
   Die Geschenke haengen hier flacher (-4,5rem statt -7rem), weil der schwarze
   Balken bei md nur 5,5rem hoch ist – sonst ragten sie darunter heraus. */
@media (min-width: 768px) and (max-width: 991.98px) {
    #img-ramona-portrait {
        width: 50%;
    }

    .about-me-gifts {
        left: 44%;
        bottom: -4.5rem;
        width: 48%;
    }

    .about-me-text {
        top: 3rem;
        left: calc(52% + 1.5rem);
    }
}

/* lg: gleiche Blockbreite wie bei md plus Innenabstaende (756 px), aber
   17px-Basis – der Text ist dadurch deutlich hoeher.

   Die Geschenke sollen deutlich groesser sein als die frueheren 34 % und dabei
   hoeher und weiter rechts stehen. Den Platz dafuer holt das Portraet: mit 58 %
   statt 50 % Breite waechst es proportional mit und damit auch der Block, der
   seine Hoehe vorgibt. Die Textspalte rueckt entsprechend mit nach rechts,
   damit sie nicht auf dem Foto liegt.

   Der Abstand zum Foto ist dabei bewusst nur 0,5rem: die Textspalte ist hier so
   schmal, dass sie an einer Umbruchschwelle steht. Ausgemessen bleibt der Text
   bis 306px Breite 703px hoch und springt darunter auf 796px – 93px, die keine
   der anderen Reserven auffangen koennte. Mit 0,5rem liegt die Spalte mit
   309px genau in der Mitte dieses Fensters.

   Mit -8rem haengen die Geschenke genauso tief in den Balken wie ab xl (34px
   ueber dessen Unterkante). Engster Punkt ist 1199px: die Ueberschriften
   skalieren mit der Fensterbreite, der Text ist dort am hoechsten.

   Die Geschenke beginnen hier deutlich weiter links als ab xl (34 statt 44 %)
   und sind mit 58 % dafuer breiter. Das haengt zusammen: ihr hoechster Punkt –
   die Schleife des 24er-Pakets – liegt bei 37,1 % der Grafikbreite, bei 34 %
   Startpunkt also bei 55,5 % des Blocks. Damit steht er vor den Beinen und
   links neben der Textspalte (die bei 58 % beginnt); begrenzend ist nur noch
   die flachere rechte Seite der Grafik. So passen 58 % statt 45 % Breite in
   dieselbe Luecke – das 24er-Paket reicht 65px hoeher als vorher. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #img-ramona-portrait {
        width: 58%;
    }

    .about-me-gifts {
        left: 32%;
        bottom: -8rem;
        width: 58%;
    }

    .about-me-text {
        top: 1.5rem;
        left: calc(58% + .5rem);
    }
}

/* Zwischen xl und xxl ist der Block nur 936 statt 1116 px breit. Der Text
   braucht dort also mehr Hoehe, waehrend das Portraet – das die Hoehe des
   Blocks vorgibt – proportional kuerzer wird. Beides zieht in dieselbe
   Richtung, deshalb hier eigene Werte: die Textspalte rueckt nach links und
   wird breiter, das Portraet etwas hoeher, die Geschenke schmaler und tiefer
   gehaengt. So bleibt der Text auch hier vollstaendig ueber ihnen. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #img-ramona-portrait {
        width: 46%;
    }

    .about-me-gifts {
        left: 44%;
        bottom: -8rem;
        width: 54%;
    }

    .about-me-text {
        top: 3.5rem;
        left: calc(45% + 2.5rem);
    }
}

/* --- schwarzer Kasten ---------------------------------------------------- */
/* Der Einstiegssatz uebernimmt die Rolle der Ueberschrift: Headline-Schrift,
   gross und gelb, damit der Kasten links einen Anker hat. */
.about-me-lead {
    font-family: "Passion One", sans-serif;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: 0;
}

@media (min-width: 992px) {
    .about-me-lead {
        font-size: 2.2rem;
        line-height: 2.1rem;
    }
}

@media (min-width: 1400px) {
    .about-me-lead {
        font-size: 2.8rem;
        line-height: 2.7rem;
    }
}

#img-18-ramona {
    object-position: center;
    width: 250px;
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    #img-18-ramona {
        width: 100%;
        max-width: 500px;
    }
}

/* Zwischen lg und xl ist der Container mit 960px am schmalsten, das Foto in
   seiner col-lg-5 damit nur 317px breit – neben der 500px-Karte wirkt es
   verloren. Es waechst deshalb um ein Fuenftel ueber seine Spalte hinaus, und
   zwar nach links: der negative Rand nimmt genau den Zuwachs auf, die rechte
   Kante bleibt also mit 20px Abstand vor der Karte stehen. Links bleiben bis
   zur Kante der gelben Flaeche 8px.

   Die Ueberschrift der Karte braucht hier eine feste Groesse: Bootstraps
   display-4 waechst unterhalb von xl mit der Fensterbreite (1.475rem + 2.7vw),
   die Karte bleibt durch den festen Container aber gleich breit. Ab rund
   1084px Fensterbreite bricht „Melde dich jetzt an“ deshalb um. Ausgemessen
   passt die Zeile bis 3,15rem; 3rem laesst 24px Reserve und entspricht fast
   genau der Groesse, die die Ueberschrift bisher am unteren Rand des
   Breakpoints hatte. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #img-18-ramona {
        display: block;
        width: 120%;
        margin-left: -20%;
    }

    #anmeldung-final h2 {
        font-size: 3rem;
    }
}

/* Formular */
.form-hint {
    font-size: .8rem;
    line-height: 1.2rem;
}

/* Footer */
footer .nav-link {
    color: var(--yellow) !important;
    padding-top: 0;
    padding-bottom: 0;
}

footer .nav-link:hover,
footer .nav-link:focus {
    color: var(--yellow-light) !important;
    text-decoration: underline;
}

/* =========================================================================
   Deko-Kugeln am Seitenkopf
   ========================================================================= */
/* Der Kasten liegt absolut am Dokumentanfang: die beiden Kugeln bleiben also
   oben kleben und scrollen mit der Seite weg, waehrend die Logo-Kugel in der
   klebrigen Kopfzeile mitwandert. Oben wirken die drei wie eine Reihe, erst
   beim Scrollen loest sich die Logo-Kugel sichtbar heraus.

   Der Kasten ist fensterbreit und nur waagerecht beschnitten (clip statt
   hidden, sonst waere auch der Ueberstand nach oben weg): die Baender duerfen
   oberhalb der Dokumentkante beginnen, so wie bei der Logo-Kugel auch.

   Alle Positionen haengen an der Mittelachse des Bootstrap-Containers, denn
   dort sitzt auch die Logo-Kugel. Nur so bleibt der Abstand zwischen den drei
   Kugeln in jeder Fensterbreite gleich. --container-width ist dafuer die
   jeweilige Containerbreite, --*-x der Abstand der Bildkante von der
   Containerkante. */
.header-baubles {
    --container-width: 100%;
    --baubles-height: 130px;
    /* Die Breiten beziehen sich auf die ganze Grafik, nicht auf die Kugel: in
       rote-kugel.png fuellt die Kugel 92 % der Bildbreite, in
       goldene-kugel.png nur 64 % – das Schleifenband ist dort breiter. Bei
       63 bzw. 70 px ist die rote Kugel damit 58 px gross, die goldene 45 px;
       beide liegen in der Groessenordnung der Deko-Kugeln im Seiteninhalt.

       Die y-Werte haengen die Kugeln auf: die Kugelunterkante liegt bei 92 %
       (rot) bzw. 85 % der Bildhoehe. Unterkanten sind damit 83 px (gold),
       105 px (Logo-Kugel) und 107 px (rot) – die Staffelung der Vorlage.

       Die x-Werte messen von der Containerkante bis zur Bildkante, nicht bis
       zur Kugel: rote-kugel.png beginnt sofort mit der Kugel, in
       goldene-kugel.png liegen links noch 19 % Schleifenband. Die Werte sind so
       gewaehlt, dass zwischen allen drei Kugeln rund 10 px Luft bleiben. */
    --red-width: 63px;
    --red-x: 155px;
    --red-y: -92px;
    --gold-width: 70px;
    --gold-x: 87px;
    --gold-y: -55px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--baubles-height);
    overflow-x: clip;
    overflow-y: visible;
    pointer-events: none;
    /* Die Baender der Schleifen haengen deutlich tiefer als die Kugeln. Der
       Verlauf blendet sie unterhalb der tiefsten Kugel aus, damit sie nicht in
       die Ueberschrift laufen. */
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 100;
}

.header-baubles img {
    position: absolute;
    max-width: none;
    height: auto;
}

.header-bauble-red {
    left: calc(50% - var(--container-width) / 2 + var(--red-x));
    top: var(--red-y);
    width: var(--red-width);
}

.header-bauble-gold {
    left: calc(50% - var(--container-width) / 2 + var(--gold-x));
    top: var(--gold-y);
    width: var(--gold-width);
}

/* Bis lg ist links neben der Logo-Kugel kein Platz – dort haengen beide Kugeln
   deshalb rechts von ihr, die goldene zuerst. */
@media (min-width: 576px) {
    .header-baubles {
        --container-width: 540px;
    }
}

/* Ab md steht die Logo-Kugel weiter rechts – die beiden Kugeln ruecken
   entsprechend mit, damit die Abstaende gleich bleiben. */
@media (min-width: 768px) {
    .header-baubles {
        --container-width: 720px;
        --red-x: 186px;
        --gold-x: 118px;
    }
}

/* Ab lg ist die Logo-Kugel gross genug und steht weit genug vom linken Rand,
   dass die rote Kugel wie in der Vorlage links daneben und etwas tiefer haengen
   kann – sie ueberlappt die Logo-Kugel dabei leicht, die davor liegt. */
@media (min-width: 992px) {
    .header-baubles {
        --container-width: 960px;
        --baubles-height: 420px;
        --red-width: 193px;
        --red-x: -95px;
        --red-y: -270px;
        --gold-width: 164px;
        --gold-x: 224px;
        --gold-y: -143px;
    }
}

@media (min-width: 1200px) {
    .header-baubles {
        --container-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .header-baubles {
        --container-width: 1320px;
    }
}

/* =========================================================================
   Kopfzeile: Logo als hängende Christbaumkugel
   ========================================================================= */
/* logo-kugel.png ist 396 × 855 – gut 40 % der Höhe sind reines Band. Ganz
   gezeigt hinge die Kugel viel zu weit in die Seite. Stattdessen ist der Link
   nur so hoch, wie die Kugel hängen soll; das Bild sitzt darin mit bottom: 0
   und ragt oben aus ihm heraus. Weil die Kopfzeile klebrig bei top: 0 sitzt,
   liegt dieser überstehende Teil des Bandes immer oberhalb der Fensterkante
   und ist nie zu sehen – die Kugel hängt also scheinbar von oberhalb des
   Bildschirms herein und scrollt wie bisher mit der Kopfzeile mit.

   --bauble-drop bestimmt, wie tief sie in den Viewport ragt, --header-height ist
   die bisherige Höhe der Kopfzeile. Das negative margin-bottom gleicht die
   Differenz aus, damit die Kopfzeile gleich hoch bleibt und sich am übrigen
   Layout nichts verschiebt. z-index wirkt hier trotz position: static, weil
   der Kasten als .col-auto ein Flex-Item der Bootstrap-Zeile ist. */
.logo-bauble-holder {
    --bauble-width: 80px;
    --bauble-drop: 105px;
    --header-height: 62px;
    margin-bottom: calc(var(--header-height) - var(--bauble-drop));
    z-index: 10;
}

@media (min-width: 992px) {
    .logo-bauble-holder {
        --bauble-width: 165px;
        --bauble-drop: 208px;
        --header-height: 75px;
    }
}

#header-logo {
    position: relative;
    display: block;
    width: var(--bauble-width);
    height: var(--bauble-drop);
    padding: 0;
}

#header-logo img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}

/* Das pulsierende Element */
.pulsing-element {
    background-color: var(--yellow);

    /* Animation zuweisen */
    animation: pulse 2s infinite;
}

/* Die Animation definieren */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--yellow);
        opacity: 1;
    }

    70% {
        transform: scale(1.05); /* Leichtes Wachstum */
        box-shadow: 0 0 0 10px rgba(255, 87, 34, 0); /* Pulsierender Rand */
        opacity: 0.8; /* Leichtes Ausblenden */
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
        opacity: 1;
    }
}

.faq-question {
    width: 80%;
}

.accordion-section .accordion-item .accordion-header .accordion-button {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Rückmeldung der Anmeldung – gefüllt von main.js aus der Antwort von
   /api/signup.php. Ohne Meldung bleibt der Absatz ausgeblendet (hidden). */
.form-status {
    font-size: .85rem;
    line-height: 1.25rem;
}

.form-status.is-success {
    color: var(--yellow);
    font-weight: 600;
}

.form-status.is-error {
    color: #ff8a80;
    font-weight: 600;
}

/* Erfolgsmeldung der Anmeldung. main.js setzt den Text aus der Antwort ein und
   blendet sie an Stelle des Formulars ein. Schriftgröße wie Bootstraps fs-3;
   die Zeilenhöhe steht eigens hier, weil die 1.4rem aus layout.css für diese
   Größe zu eng sind. */
.signup-success {
    /* Der gelbe Kasten (Klassen im Markup, wie bei „Keine Challenge.“) ist nur
       so breit wie sein Text. */
    width: fit-content;
    max-width: 100%;
    font-size: calc(1.3rem + .6vw);
    font-weight: 700;
    line-height: 1.3;
    /* Luft unter der klebrigen Kopfzeile, wenn main.js die Meldung ins Bild
       scrollt. Mehr als bei den Sprungzielen oben: Mobil hängt die Logo-Kugel
       bis 105px herab, und über der Meldung steht kein Innenabstand, der das
       auffängt. */
    scroll-margin-top: 120px;
}

@media (min-width: 992px) {
    .signup-success {
        scroll-margin-top: 130px;
    }
}

@media (min-width: 1200px) {
    .signup-success {
        font-size: 1.75rem;
    }
}

/* main.js legt die Meldung als Absätze an. Der erste übernimmt die große Schrift
   von oben – die Zeilenhöhe aus layout.css für p muss dafür weichen –, alle
   weiteren sind Fließtext. */
.signup-success p {
    line-height: inherit;
    margin-bottom: 0;
}

.signup-success p + p {
    margin-top: .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4rem;
}

/* Schritte unter der großen Zeile: Listenpunkte mit Pfeil wie in „Keine
   Challenge.“, in deren Schriftgröße (h5). Die Zeilenhöhe aus layout.css für
   span weicht auch hier, umbrochene Zeilen stünden sonst zu eng. */
.signup-steps {
    margin: .75rem 0 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
}

.signup-steps li + li {
    margin-top: .25rem;
}

.signup-steps span {
    line-height: inherit;
}

.signup-steps .mdi {
    flex-shrink: 0;
}

/* Bestätigungsseite: main.js scrollt beim Betreten zur Überschrift und lässt
   darüber 30px Luft. */
.confirmation h2 {
    scroll-margin-top: 30px;
}

/* Ladeanimation der Bestätigungsseite: Bootstraps spinner-border, größer und
   in den Markenfarben – gelber Ring mit umlaufendem schwarzem Abschnitt. */
.confirmation-spinner {
    --bs-spinner-width: 3.5rem;
    --bs-spinner-height: 3.5rem;
    --bs-spinner-border-width: .35rem;
    border-color: var(--yellow);
    border-top-color: #000000;
}

/* Den Fokus bekommt die Meldung nur, damit Screenreader sie vorlesen. Sie ist
   kein Bedienelement und braucht keinen Fokusrahmen. */
.signup-success:focus {
    outline: none;
}