/* ============================================
   Dynamic Grow Design - Winterzeit
   Wirkt nur, wenn winter.js die Klasse "winter" am <html> setzt.
   Layout und Aufbau bleiben gleich, nur Farbe, Deko und Bewegung.
   ============================================ */

:root {
    --winter-berry: #c8413a;
    --winter-gold: #e0a53a;
    --winter-gold-dark: #b8862a;
    --winter-gold-text: #8f6414;
    --winter-frost: #eef3f6;
    --winter-ice: rgba(118, 168, 210, 0.22);
    --winter-flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7'/%3E%3Cpath d='M9.5 3.5L12 6l2.5-2.5M9.5 20.5L12 18l2.5 2.5M3.6 10.4l3.4-.9-.9-3.4M20.4 13.6l-3.4.9.9 3.4M3.6 13.6l3.4.9-.9 3.4M20.4 10.4l-3.4-.9.9-3.4'/%3E%3C/svg%3E");
    --winter-bow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M30 33L21 56l5.5-2.5L29 59l4-25Z' fill='%23a8342d'/%3E%3Cpath d='M34 33l9 23-5.5-2.5L35 59l-4-25Z' fill='%23a8342d'/%3E%3Cpath d='M32 31C22 13 6 13 7 26c1 11 15 10 25 5Z' fill='%23c8413a'/%3E%3Cpath d='M32 31C42 13 58 13 57 26c-1 11-15 10-25 5Z' fill='%23c8413a'/%3E%3Cpath d='M30 29C22 19 13 18 12 25c-.5 4 6 6 18 4Z' fill='%23e06a5f' opacity='.55'/%3E%3Cpath d='M34 29c8-10 17-11 18-4 .5 4-6 6-18 4Z' fill='%23e06a5f' opacity='.55'/%3E%3Cellipse cx='32' cy='31' rx='5.5' ry='5' fill='%23a8342d'/%3E%3Cellipse cx='30.5' cy='29.5' rx='1.8' ry='1.3' fill='%23fff' opacity='.45'/%3E%3C/svg%3E");
    --winter-icicles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 46'%3E%3Cpath d='M0 0H760 V5 Q705.9 8.4 701.9 6.9 C700.9 21.6 696.4 36.3 695.6 43.6 C694.8 36.3 692.3 21.6 691.2 6.9 Q681.9 6.4 677.9 4.9 C676.9 12.7 674.1 20.6 673.3 24.5 C672.5 20.6 669 12.7 668 4.9 Q663.8 7 659.8 5.5 C659.1 8.8 656.1 12.1 655.3 13.8 C654.5 12.1 653 8.8 652.3 5.5 Q649.1 5.3 645.1 3.8 C644.4 6.9 643.1 9.9 642.3 11.5 C641.5 9.9 638.9 6.9 638.2 3.8 Q629.8 7.5 625.8 6 C625 16.4 621.6 26.8 620.8 31.9 C620 26.8 618.4 16.4 617.6 6 Q605.4 6.1 601.4 4.6 C600.5 11 597.2 17.4 596.4 20.6 C595.6 17.4 593.3 11 592.4 4.6 Q580.8 4.7 576.8 3.2 C575.9 10.4 572.5 17.6 571.7 21.2 C570.9 17.6 568.4 10.4 567.5 3.2 Q514.9 6.6 510.9 5.1 C510.1 8.5 508.7 11.9 507.9 13.5 C507.1 11.9 503.9 8.5 503.2 5.1 Q497.2 4.9 493.2 3.4 C492.7 5.7 491 8 490.2 9.2 C489.4 8 488.6 5.7 488.1 3.4 Q483.1 6.3 479.1 4.8 C478.6 6.7 477.1 8.7 476.3 9.7 C475.5 8.7 474.5 6.7 474 4.8 Q466.3 7.4 462.3 5.9 C461.3 15.9 458.5 25.9 457.7 30.9 C456.9 25.9 453.9 15.9 453 5.9 Q450.7 8.3 446.7 6.8 C445.9 19.2 443.5 31.6 442.7 37.7 C441.9 31.6 439.1 19.2 438.3 6.8 Q424.8 8.2 420.8 6.7 C420.3 8.6 418.9 10.5 418.1 11.4 C417.3 10.5 416 8.6 415.5 6.7 Q376.2 5.9 372.2 4.4 C371.7 6.8 370.6 9.2 369.8 10.4 C369 9.2 368.2 6.8 367.8 4.4 Q365.5 4.6 361.5 3.1 C361 6.9 360.1 10.7 359.3 12.6 C358.5 10.7 357.2 6.9 356.8 3.1 Q341.9 4.8 337.9 3.3 C337.1 10.1 333.9 16.9 333.1 20.3 C332.3 16.9 330.7 10.1 330 3.3 Q293 5.7 289 4.2 C288.2 6.7 285.2 9.2 284.4 10.4 C283.6 9.2 281.9 6.7 281.1 4.2 Q260.1 4.8 256.1 3.3 C255.3 5.5 252.9 7.7 252.1 8.8 C251.3 7.7 249 5.5 248.2 3.3 Q246.9 6 242.9 4.5 C242.5 7.5 241.2 10.5 240.4 12 C239.6 10.5 239.2 7.5 238.8 4.5 Q211 8.2 207 6.7 C206.5 8.6 205.7 10.4 204.9 11.3 C204.1 10.4 202.7 8.6 202.2 6.7 Q194.1 5 190.1 3.5 C189.6 7.1 189.1 10.7 188.3 12.5 C187.5 10.7 186 7.1 185.6 3.5 Q131.7 5.9 127.7 4.4 C127.1 7.2 124.6 10 123.8 11.5 C123 10 121.9 7.2 121.2 4.4 Q100.9 6.4 96.9 4.9 C96.2 10.9 93.5 16.9 92.7 19.9 C91.9 16.9 90.6 10.9 89.9 4.9 Q77.1 7.9 73.1 6.4 C72.7 9.6 72.2 12.7 71.4 14.3 C70.6 12.7 69.2 9.6 68.8 6.4 Q69.1 4.6 65.1 3.1 C64.6 7.8 63.4 12.5 62.6 14.8 C61.8 12.5 60.6 7.8 60.1 3.1 Q24.3 4.6 20.3 3.1 C19.3 16.6 16.6 30.2 15.8 37 C15 30.2 11.5 16.6 10.6 3.1 Q2 6 0 5 Z' fill='%23000'/%3E%3C/svg%3E");
    --winter-snowcap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 84'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%23f6f9fc'/%3E%3Cstop offset='.78' stop-color='%23e2ebf3'/%3E%3Cstop offset='1' stop-color='%23c3d4e3'/%3E%3C/linearGradient%3E%3Cfilter id='v' x='-2%25' y='-10%25' width='104%25' height='120%25'%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='5' result='b'/%3E%3CfeDiffuseLighting in='b' surfaceScale='7' diffuseConstant='1.15' lighting-color='%23fff' result='l'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeComposite in='l' in2='SourceAlpha' operator='in' result='lit'/%3E%3CfeComponentTransfer in='lit' result='weich'%3E%3CfeFuncR type='linear' slope='.45' intercept='.6'/%3E%3CfeFuncG type='linear' slope='.42' intercept='.62'/%3E%3CfeFuncB type='linear' slope='.35' intercept='.68'/%3E%3C/feComponentTransfer%3E%3CfeBlend in='SourceGraphic' in2='weich' mode='multiply'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 66 C0.5 64 1.5 58.3 3 54 C4.5 49.7 6.2 44.2 9 40 C11.8 35.8 11.8 32.9 20 29 C28.2 25.1 44.7 19.4 58.2 16.7 C71.7 14 86.9 13.9 100.9 13 C114.9 12.1 131.4 11.1 142.1 11.3 C152.8 11.5 153.3 14.3 164.9 14.4 C176.4 14.5 196.1 11 211.4 11.7 C226.7 12.4 243.5 17.3 256.8 18.5 C270.1 19.7 279.3 19 291 18.9 C302.7 18.7 317.4 17.1 327.1 17.6 C336.9 18 340.5 19.7 349.5 21.8 C358.5 23.9 374.1 26.8 381 30 C387.9 33.2 388.3 37.2 391 41 C393.7 44.8 395.5 48.8 397 53 C398.5 57.2 399.5 63.8 400 66 L400 66 C399.3 66.5 397.7 70 396 69 C394.3 68 396.4 62.6 390 60 C383.6 57.4 368.1 54.3 357.7 53.6 C347.3 53 334.5 54.7 327.7 56 C321 57.3 320.6 61.8 317 61.6 C313.5 61.5 310.4 56.3 306.3 55 C302.2 53.7 297.7 53.6 292.3 53.8 C286.9 54.1 280.3 56.3 274 56.5 C267.6 56.7 262.1 55.2 254.2 55.2 C246.3 55.1 233.3 54.5 226.6 56 C219.9 57.5 218.2 64.6 214 64.5 C209.8 64.3 209 56.7 201.3 55 C193.7 53.3 177.1 54 168 54.2 C158.9 54.4 151.6 54.8 146.8 56 C141.9 57.2 141.5 61.5 138.9 61.3 C136.3 61.2 135.7 56.4 131 55 C126.4 53.6 118.9 53.1 111 53 C103.1 52.9 93.1 54 83.5 54.2 C73.8 54.4 62.1 54.4 53.1 54.3 C44.1 54.1 36.6 52.3 29.5 53.2 C22.3 54.2 14.2 57.4 10 60 C5.8 62.6 5.7 68 4 69 C2.3 70 0.7 66.5 0 66 Z' fill='url(%23s)' filter='url(%23v)'/%3E%3Ccircle cx='34' cy='34' r='1.3' fill='%23fff'/%3E%3Ccircle cx='32.3' cy='34.6' r='1' fill='%23fff'/%3E%3Ccircle cx='227.3' cy='22.1' r='0.7' fill='%23fff'/%3E%3Ccircle cx='89' cy='37.3' r='0.8' fill='%23fff'/%3E%3Ccircle cx='289' cy='36.9' r='1.4' fill='%23fff'/%3E%3Ccircle cx='145.8' cy='27.7' r='1.1' fill='%23fff'/%3E%3Ccircle cx='295.9' cy='23.7' r='1.2' fill='%23fff'/%3E%3Ccircle cx='303.4' cy='35.8' r='0.7' fill='%23fff'/%3E%3Ccircle cx='355.1' cy='23.5' r='0.9' fill='%23fff'/%3E%3Ccircle cx='238.6' cy='36.7' r='0.9' fill='%23fff'/%3E%3Ccircle cx='347.6' cy='30.7' r='0.9' fill='%23fff'/%3E%3Ccircle cx='136.2' cy='24.8' r='0.8' fill='%23fff'/%3E%3C/svg%3E");
    --winter-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 60'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e45a4f'/%3E%3Cstop offset='.55' stop-color='%23c8413a'/%3E%3Cstop offset='1' stop-color='%23962c26'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23dbe4ec'/%3E%3C/linearGradient%3E%3CradialGradient id='p' cx='.36' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23d3dee8'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M8 44 C8 28 15 13 28 7 C40 2 54 7 61 19 C64 24 65 30 63 36 C60 30 55 25 49 24 C46 30 46 37 48 44 Z' fill='url(%23r)'/%3E%3Cpath d='M49 24 C46 30 46 37 48 44 L40 44 C41 36 43 29 49 24 Z' fill='%237d241f' opacity='.35'/%3E%3Cpath d='M15 37 C17 24 24 14 34 10' stroke='%23fff' stroke-opacity='.25' stroke-width='3.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M3 44 C3 39.5 7 38.5 12 39 C22 40 34 40.5 45 40 C50 39.8 54 41 54 45.5 C54 50 50 51.5 45 51.5 C34 51.5 21 51 12 50.5 C6.5 50.2 3 48.5 3 44 Z' fill='url(%23w)'/%3E%3Cg fill='%23c5d2dd' opacity='.6'%3E%3Ccircle cx='10' cy='46.5' r='1.3'/%3E%3Ccircle cx='18' cy='48.5' r='1.1'/%3E%3Ccircle cx='27' cy='47.5' r='1.3'/%3E%3Ccircle cx='36' cy='48.8' r='1.1'/%3E%3Ccircle cx='45' cy='47' r='1.3'/%3E%3C/g%3E%3Ccircle cx='63' cy='39' r='7' fill='url(%23p)'/%3E%3Ccircle cx='61' cy='36.5' r='1.8' fill='%23fff'/%3E%3C/svg%3E");
    --winter-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E");
}

/* --- Umschalten zwischen normaler und Winteransicht --- */
html:not(.winter) [data-season="winter"] {
    display: none !important;
}

.winter [data-season="std"] {
    display: none !important;
}

/* Bis 26.12. "vor", ab 27.12. "nach" Weihnachten (Klasse aus winter.js) */
html:not(.winter-nach-weihnachten) [data-phase="nach"],
.winter-nach-weihnachten [data-phase="vor"] {
    display: none !important;
}

/* --- Schneefall (Canvas aus winter.js) --- */
.winter-snow {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 45;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.winter-snow--off {
    opacity: 0;
}

.winter-toggle {
    position: fixed;
    left: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem 0.45rem 0.8rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    box-shadow: 0 6px 20px var(--color-shadow);
    transition: transform var(--transition-fast);
}

.winter-toggle:hover {
    transform: translateY(-1px);
}

.winter-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.winter-toggle__icon {
    color: var(--color-accent);
    transition: color var(--transition-fast);
}

.winter-toggle__track {
    position: relative;
    width: 32px;
    height: 18px;
    border-radius: 100px;
    background: var(--color-accent);
    transition: background var(--transition-fast);
}

.winter-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateX(14px);
    transition: transform var(--transition-fast);
}

.winter-toggle[aria-checked="false"] .winter-toggle__track {
    background: #cfd3d6;
}

.winter-toggle[aria-checked="false"] .winter-toggle__knob {
    transform: translateX(0);
}

.winter-toggle[aria-checked="false"] .winter-toggle__icon {
    color: var(--color-text-light);
}

/* --- Weihnachtsmütze auf dem Logo --- */
.winter .nav__logo {
    position: relative;
}

.winter .nav__logo::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -5px;
    width: 40px;
    height: 33px;
    z-index: 1;
    pointer-events: none;
    background: var(--winter-hat) center / contain no-repeat;
    transform: rotate(-16deg);
    transform-origin: 30% 80%;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
    transition: transform 0.6s var(--ease-spring);
}

.winter .nav__logo:hover::before {
    transform: rotate(-6deg) translateY(-1px);
}

/* --- Kleine Schneeflocke vor den Überschriften-Etiketten --- */
.winter .section-eyebrow::before,
.winter .hero__eyebrow::before,
.winter .services-page__label::before,
.winter .freebies-page__label::before,
.winter .service-card__eyebrow::before,
.winter .detail__tag::before {
    content: '';
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-right: 0.45em;
    vertical-align: -0.2em;
    background: currentColor;
    -webkit-mask: var(--winter-flake) center / contain no-repeat;
    mask: var(--winter-flake) center / contain no-repeat;
}

/* --- Hero --- */
.winter .hero {
    background: linear-gradient(180deg, var(--winter-frost) 0%, var(--color-bg) 62%);
}

.winter .hero__gradient--1 {
    background: radial-gradient(circle, var(--winter-ice) 0%, transparent 65%);
}

.winter .hero__gradient--2 {
    background: radial-gradient(circle, rgba(240, 168, 50, 0.16) 0%, transparent 65%);
}

/* Schneewehe am unteren Rand, geht in das Zahlenband über */
.winter .hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 72px;
    z-index: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 46C120 26 240 30 360 40C520 54 640 20 800 25C960 30 1080 54 1220 45C1320 38 1390 30 1440 34V72H0Z' fill='%23F5F3EF'/%3E%3Cpath d='M0 46C120 26 240 30 360 40C520 54 640 20 800 25C960 30 1080 54 1220 45C1320 38 1390 30 1440 34' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

.winter .stats {
    border-top-color: transparent;
}

.winter .hero .hero__eyebrow {
    color: var(--winter-gold-text);
    background: var(--color-warm-soft);
}

/* Funkelndes Wort im Titel */
.winter-sparkle {
    position: relative;
    display: inline-block;
    padding-right: 0.08em;
    background: linear-gradient(100deg, var(--winter-gold-dark) 0%, var(--winter-gold) 22%, var(--winter-berry) 50%, var(--winter-gold) 78%, var(--winter-gold-dark) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: winterShimmer 7s linear infinite;
}

.winter-sparkle::before,
.winter-sparkle::after {
    content: '';
    position: absolute;
    background: var(--winter-gold);
    -webkit-mask: var(--winter-star) center / contain no-repeat;
    mask: var(--winter-star) center / contain no-repeat;
    animation: winterStar 2.6s ease-in-out infinite;
}

.winter-sparkle::before {
    width: 0.36em;
    height: 0.36em;
    top: -0.12em;
    right: -0.32em;
}

.winter-sparkle::after {
    width: 0.2em;
    height: 0.2em;
    bottom: 0.18em;
    left: -0.26em;
    animation-delay: -1.3s;
}

@keyframes winterShimmer {
    to { background-position: -220% center; }
}

@keyframes winterStar {
    0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0.3; }
    50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

/* Bücherstapel im Winter: zwei Hochformate hinten, das quadratische Cover
   vorn rechts unten, damit es ganz zu sehen ist und nicht beschnitten wird */
.winter .hero__book-stack--winter .hero__book {
    opacity: 1;
}

.winter .hero__book-stack--winter .hero__book--2 {
    opacity: 0.95;
}

.winter .hero__book--square {
    width: 230px;
    height: 230px;
    top: auto;
    bottom: -2%;
    right: -9%;
    z-index: 4;
    border-radius: var(--radius-md);
    animation: winterFloatSquare 6.5s ease-in-out infinite -3s;
}

@keyframes winterFloatSquare {
    0%, 100% { transform: rotate(5deg); }
    50% { transform: translateY(-9px) rotate(4deg); }
}

/* Hover: Das Buch gleitet sanft aus dem Stapel und wird etwas größer.
   Die anderen weichen zur Seite, erst dann kommt es nach vorn (z-index mit Verzögerung). */
.winter .hero__book-stack--winter .hero__book {
    translate: 0 0;
    scale: 1;
    transition:
        translate 1s var(--ease-out-expo),
        scale 1s var(--ease-out-expo),
        box-shadow 1s var(--ease-out-expo),
        z-index 0s;
}

.winter .hero__book-stack--winter .hero__book:hover {
    z-index: 10;
    scale: 1.07;
    box-shadow: 0 36px 80px rgba(0, 0, 0, 0.18), 0 12px 30px rgba(0, 0, 0, 0.1);
    transition-delay: 0s, 0s, 0s, 0.34s;
}

.winter .hero__book-stack--winter .hero__book--2:hover {
    translate: -46px -8px;
}

.winter .hero__book-stack--winter .hero__book--1:hover {
    translate: 0 -10px;
}

.winter .hero__book-stack--winter .hero__book--square:hover {
    translate: 8px -8px;
}

.winter .hero__book-stack--winter:has(.hero__book--2:hover) .hero__book--1 {
    translate: 38px 4px;
}

.winter .hero__book-stack--winter:has(.hero__book--2:hover) .hero__book--square {
    translate: 22px 6px;
}

.winter .hero__book-stack--winter:has(.hero__book--1:hover) .hero__book--2 {
    translate: -22px 0;
}

.winter .hero__book-stack--winter:has(.hero__book--1:hover) .hero__book--square {
    translate: 34px 24px;
}

/* Lichtreflex, der ab und zu über das vordere Cover läuft */
.winter .hero__book-stack--winter .hero__book--1::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
    transform: translateX(-130%);
    animation: winterGlint 8s ease-in-out infinite 2s;
}

@keyframes winterGlint {
    0%, 72% { transform: translateX(-130%); }
    88%, 100% { transform: translateX(130%); }
}

/* Lichterkette: hängt fest an der Unterkante der Navigation (winter.js) */
.winter-garland {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
    pointer-events: none;
    overflow: visible;
}

.winter-garland__wire {
    fill: none;
    stroke: #4a5048;
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0.85;
}

/* Ganz leichtes Glühen, jede Lampe etwas versetzt */
.winter-garland__glow {
    opacity: 0.3;
    animation: winterGlow 3.8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.61s);
}

/* Beim Laden gehen die Lampen nacheinander an */
.winter-garland__glass {
    animation: winterLightOn 0.6s ease-out both;
    animation-delay: calc(0.25s + var(--i, 0) * 0.06s);
}

@keyframes winterGlow {
    0%, 100% { opacity: 0.24; }
    50% { opacity: 0.46; }
}

@keyframes winterLightOn {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* Knöpfe: kurzer Glanz beim Darüberfahren */
.winter .btn--primary {
    overflow: hidden;
}

.winter .btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: skewX(-20deg);
    transition: left 0.8s var(--ease-out-expo);
}

.winter .btn--primary:hover::after {
    left: 130%;
}

/* --- Bücher --- */
.winter .filter-btn--winter::before {
    content: '';
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    margin-right: 0.4em;
    vertical-align: -0.15em;
    background: currentColor;
    -webkit-mask: var(--winter-flake) center / contain no-repeat;
    mask: var(--winter-flake) center / contain no-repeat;
}

.winter .filter-btn--winter:not(.filter-btn--active) {
    color: var(--winter-gold-text);
    border-color: rgba(224, 165, 58, 0.45);
}

/* Winterbücher stehen in der Saison vorne */
.winter .books__grid > .book-card--winter {
    order: -1;
}

/* Geschenkschleife auf der Ecke der Karte, das Cover bleibt frei */
.winter .book-card--winter {
    position: relative;
}

.winter .book-card--winter::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -12px;
    z-index: 3;
    width: 54px;
    height: 54px;
    pointer-events: none;
    transform: rotate(-12deg);
    transform-origin: 50% 45%;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.18));
    background: var(--winter-bow) center / contain no-repeat;
    transition: transform 0.6s var(--ease-spring);
}

.winter .book-card--winter:hover::before {
    transform: rotate(4deg) scale(1.1);
}

/* --- Kontaktband: Sternenhimmel --- */
.winter .cta-band__gradient {
    background: radial-gradient(circle, rgba(118, 168, 210, 0.16) 0%, rgba(45, 138, 86, 0.08) 45%, transparent 70%);
}

.winter .cta-band__bg::before,
.winter .cta-band__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    animation: winterSky 4.5s ease-in-out infinite alternate;
}

.winter .cta-band__bg::before {
    background-image:
        radial-gradient(1.5px 1.5px at 8% 22%, #fff, transparent),
        radial-gradient(1px 1px at 18% 64%, #fff, transparent),
        radial-gradient(2px 2px at 31% 14%, #fff7dd, transparent),
        radial-gradient(1px 1px at 44% 78%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 57% 30%, #fff, transparent),
        radial-gradient(1px 1px at 69% 58%, #fff, transparent),
        radial-gradient(2px 2px at 82% 18%, #fff7dd, transparent),
        radial-gradient(1px 1px at 93% 70%, #fff, transparent);
}

.winter .cta-band__bg::after {
    animation-delay: -2.2s;
    background-image:
        radial-gradient(1px 1px at 4% 82%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 13% 40%, #fff, transparent),
        radial-gradient(1px 1px at 26% 88%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 38% 36%, #fff7dd, transparent),
        radial-gradient(1px 1px at 51% 10%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 63% 84%, #fff, transparent),
        radial-gradient(1px 1px at 76% 42%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 88% 50%, #fff7dd, transparent),
        radial-gradient(1px 1px at 97% 26%, #fff, transparent);
}

@keyframes winterSky {
    from { opacity: 0.25; }
    to { opacity: 0.9; }
}

/* Eiszapfen, wo die helle Seite in den dunklen Fußbereich übergeht.
   Unregelmäßige Kachel (760 px), die sich waagerecht wiederholt. */
.winter .footer {
    position: relative;
}

.winter .cta-band::before,
.winter .footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 46px;
    z-index: 1;
    pointer-events: none;
    /* Oben in der Farbe des Abschnitts darüber, nach unten eisig hell */
    --winter-edge: var(--color-bg);
    background: linear-gradient(180deg, var(--winter-edge) 0, var(--winter-edge) 4px, #e6f0f7 11px, rgba(200, 222, 240, 0.9) 26px, rgba(180, 210, 234, 0.62) 100%);
    -webkit-mask: var(--winter-icicles) left top / 760px 46px repeat-x;
    mask: var(--winter-icicles) left top / 760px 46px repeat-x;
}

.winter .cta-band::before {
    --winter-edge: var(--color-bg-warm);
    -webkit-mask-position: -310px 0;
    mask-position: -310px 0;
}

.winter .cta-band + .footer::before {
    display: none;
}

/* --- Über uns: Sternenhimmel mit leisem Schneefall in der dunklen Logokarte --- */
.winter .about__image-inner {
    position: relative;
    overflow: hidden;
}

.winter .about__image-inner::before,
.winter .about__image-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.winter .about__image-inner::before {
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
        radial-gradient(1px 1px at 26% 72%, #fff, transparent),
        radial-gradient(2px 2px at 41% 12%, #fff7dd, transparent),
        radial-gradient(1px 1px at 58% 84%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 73% 26%, #fff, transparent),
        radial-gradient(1px 1px at 86% 62%, #fff, transparent),
        radial-gradient(2px 2px at 92% 14%, #fff7dd, transparent),
        radial-gradient(1px 1px at 6% 58%, #fff, transparent);
    background-repeat: no-repeat;
    animation: winterSky 4s ease-in-out infinite alternate;
}

/* Zwei Ebenen Flocken, die unterschiedlich schnell fallen */
.winter .about__image-inner::after {
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 90px 110px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2.5px 2.5px at 150px 60px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 60px 170px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 170px 160px, rgba(255, 255, 255, 0.75), transparent);
    background-size: 200px 200px;
    animation: winterCardSnow 14s linear infinite;
    opacity: 0.8;
}

@keyframes winterCardSnow {
    from { background-position: 0 0; }
    to { background-position: 40px 200px; }
}

.winter .about__logo-lockup {
    position: relative;
    z-index: 1;
}

/* Mütze auch auf dem großen Logo */
.winter .about__logo-lockup::before {
    content: '';
    position: absolute;
    top: -48px;
    left: calc(50% - 54px);
    width: 98px;
    height: 81px;
    z-index: 1;
    pointer-events: none;
    background: var(--winter-hat) center / contain no-repeat;
    transform: rotate(-16deg);
    transform-origin: 30% 80%;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
    transition: transform 0.6s var(--ease-spring);
}

/* Beim Darüberfahren kippt die Mütze wie oben in der Navigation */
.winter .about__logo-lockup:hover::before {
    transform: rotate(-6deg) translateY(-2px);
}

/* --- Laden: ein paar Geschenke an der Kartenecke (der Laden ist ein Geschenkeladen) --- */
.winter .local-store__map {
    position: relative;
}

/* Stapel aus winter.js: Schatten und drei Pakete als eigene Ebenen */
.winter-gifts {
    position: absolute;
    right: -18px;
    bottom: -26px;
    width: 200px;
    aspect-ratio: 210 / 160;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.12));
}

.winter-gifts__teil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Jedes Paket ploppt von seinem Boden aus weg */
.winter-gifts__teil--gruen { transform-origin: 42% 94%; }
.winter-gifts__teil--gold { transform-origin: 17% 94%; }
.winter-gifts__teil--rot { transform-origin: 74% 94%; }
.winter-gifts__teil--schatten { transform-origin: 51% 95%; }

/* Sobald die Karte geladen wird: eins nach dem anderen */
.winter-gifts--weg .winter-gifts__teil {
    animation: winterPlopp 0.42s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.winter-gifts--weg .winter-gifts__teil--gold { animation-delay: 0s; }
.winter-gifts--weg .winter-gifts__teil--rot { animation-delay: 0.18s; }
.winter-gifts--weg .winter-gifts__teil--gruen { animation-delay: 0.36s; }

.winter-gifts--weg .winter-gifts__teil--schatten {
    animation: winterSchattenWeg 0.3s ease-out 0.6s forwards;
}

@keyframes winterPlopp {
    0% { transform: scale(1); opacity: 1; }
    35% { transform: translateY(-6px) scale(1.16, 1.12); opacity: 1; }
    100% { transform: translateY(4px) scale(0); opacity: 0; }
}

@keyframes winterSchattenWeg {
    to { opacity: 0; transform: scaleX(0.3); }
}

.local-store__winter {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    max-width: 52ch;
    margin: -0.75rem 0 2rem;
    padding: 0.9rem 1.1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-warm-soft);
    border: 1px solid rgba(224, 165, 58, 0.3);
    border-radius: var(--radius-md);
}

.local-store__winter::before {
    content: '';
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.25em;
    background: var(--winter-gold-dark);
    -webkit-mask: var(--winter-flake) center / contain no-repeat;
    mask: var(--winter-flake) center / contain no-repeat;
}

/* --- App Hinweis: Schneehaube auf dem Handy --- */
.winter .app-teaser__visual::after {
    content: '';
    position: absolute;
    left: calc(50% - 106px);
    bottom: 236px;
    width: 212px;
    aspect-ratio: 400 / 84;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 4px 5px rgba(24, 40, 62, 0.22));
    background: var(--winter-snowcap) center / 100% 100% no-repeat;
    transition: transform 0.6s var(--ease-out-expo);
}

.winter .app-teaser__shell:hover .app-teaser__visual::after {
    transform: translateY(-6px);
}

/* --- Fußzeile: Weihnachtsgruß --- */
.footer__greeting {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1.25rem;
}

.footer__greeting::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.45em;
    vertical-align: -0.15em;
    background: var(--winter-gold);
    -webkit-mask: var(--winter-flake) center / contain no-repeat;
    mask: var(--winter-flake) center / contain no-repeat;
}


/* --- Unterseiten --- */

/* Frostiger Schimmer oben auf jeder Seite */
.winter body {
    background: linear-gradient(180deg, var(--winter-frost) 0, var(--color-bg) 640px) no-repeat, var(--color-bg);
}

/* Schneehaube auf dem Cover der Buchseiten */
.winter .detail__image-shell {
    position: relative;
}

.winter .detail__image-shell::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 1.5%;
    right: 1.5%;
    aspect-ratio: 400 / 84;
    z-index: 2;
    pointer-events: none;
    /* Unterkante der Haube liegt auf dem oberen Rand des Covers */
    transform: translateY(-62%);
    filter: drop-shadow(0 6px 7px rgba(24, 40, 62, 0.3)) drop-shadow(0 1px 1px rgba(24, 40, 62, 0.18));
    background: var(--winter-snowcap) center / 100% 100% no-repeat;
}

/* Weihnachtsbücher: Schleife an der Ecke des Covers */
.winter .detail--winter .detail__image-shell::after {
    content: '';
    position: absolute;
    bottom: -16px;
    right: -12px;
    z-index: 3;
    width: 64px;
    height: 64px;
    pointer-events: none;
    transform: rotate(10deg);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.18));
    background: var(--winter-bow) center / contain no-repeat;
}

/* --- Kleinere Bildschirme --- */
@media (max-width: 900px) {
    .winter .hero__book--square {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 768px) {
    .winter .hero__book--square {
        width: 128px;
        height: 128px;
        right: -12%;
    }

    .winter .hero::after {
        height: 44px;
    }

    /* Auf dem Handy liegt der Scroll Hinweis über dem dunklen Cover */
    .winter .hero__scroll-hint {
        display: none;
    }

    .winter .book-card--winter::before {
        width: 42px;
        height: 42px;
        top: -12px;
        left: -8px;
    }

    .winter-toggle {
        padding: 0.4rem 0.45rem 0.4rem 0.7rem;
    }

    .winter-gifts {
        width: 104px;
        right: -4px;
        bottom: -40px;
    }

    /* Platz, damit der Schnee Schalter den Gruß im Fuß nicht verdeckt */
    .winter .footer {
        padding-bottom: 4.5rem;
    }
}

/* --- Weniger Bewegung, wenn gewünscht --- */
@media (prefers-reduced-motion: reduce) {
    .winter-sparkle,
    .winter-sparkle::before,
    .winter-sparkle::after,
    .winter-garland__glow,
    .winter-garland__glass,
    .winter .hero__book-stack--winter .hero__book--1::after,
    .winter .cta-band__bg::before,
    .winter .cta-band__bg::after,
    .winter .about__image-inner::before,
    .winter .about__image-inner::after {
        animation: none;
    }

    /* Ohne Ploppen: Geschenke blenden nur weich aus */
    .winter-gifts--weg .winter-gifts__teil {
        animation: winterSchattenWeg 0.3s ease-out forwards;
    }

    .winter .hero__book-stack--winter .hero__book--1::after {
        display: none;
    }
}