/* =========================
   home-extras.css
   Countdown-Banner zum nächsten Termin
   Corporate Colors: Grün #008c33 / #26c15f
========================= */

.next-countdown{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    flex-wrap:wrap;
    margin:0 0 32px;
    padding:28px 32px;
    color:#fff;
    border-radius:20px;
    background:
        radial-gradient(circle at 92% 8%,rgba(255,255,255,.20),transparent 45%),
        radial-gradient(circle at 5% 120%,rgba(0,0,0,.22),transparent 50%),
        linear-gradient(135deg,#006b27 0%,#008c33 50%,#1fb457 100%);
    box-shadow:0 14px 34px rgba(0,110,40,.28),inset 0 1px 0 rgba(255,255,255,.25);
    animation:ncIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.next-countdown::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
    transform:translateX(-120%);animation:ncShine 6s ease-in-out 1.2s infinite;
}
.nc-main{flex:1 1 320px;min-width:0;position:relative;z-index:1}
.nc-label{display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.nc-dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:ncPulse 1.8s infinite}
.nc-title{margin:14px 0 14px;font-size:clamp(22px,3.4vw,32px);line-height:1.18;font-weight:800;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.nc-meta{display:flex;flex-wrap:wrap;gap:8px}
.nc-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:10px;background:rgba(0,0,0,.18);font-size:14px;font-weight:600;backdrop-filter:blur(2px)}
.nc-clock{display:flex;gap:10px;position:relative;z-index:1}
.nc-unit{min-width:76px;padding:14px 8px 10px;text-align:center;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.nc-unit b{display:block;font-size:34px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.nc-unit small{display:block;margin-top:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.nc-now{padding:16px 24px;border-radius:14px;background:rgba(255,255,255,.95);color:#006b27;font-weight:800;font-size:18px}
.next-countdown.is-live .nc-dot{background:#ffe66d;animation-duration:1s}

@keyframes ncIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ncShine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes ncPulse{70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

@media (max-width:700px){
    .next-countdown{padding:22px 18px;gap:20px;border-radius:16px}
    .nc-clock{width:100%;gap:8px}
    .nc-unit{flex:1;min-width:0;padding:12px 4px 9px}
    .nc-unit b{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
    .next-countdown,.next-countdown::after,.nc-dot{animation:none}
}

/* Kalender-Knöpfe */
.nc-cal{border:1px solid rgba(255,255,255,.35);color:#fff;cursor:pointer;font-family:inherit;transition:background .2s,transform .2s}
.nc-cal:hover{background:rgba(255,255,255,.25);transform:translateY(-1px)}
.event-cal-btn{border:1px solid rgba(0,140,51,.35);background:rgba(0,140,51,.07);color:#0a7a30;border-radius:999px;padding:6px 14px;font:600 13px/1.2 inherit;font-family:inherit;cursor:pointer;transition:background .2s,transform .2s}
.event-cal-btn:hover{background:rgba(0,140,51,.16);transform:translateY(-1px)}
body.dark-mode .event-cal-btn,body.website-dark .event-cal-btn{color:#9be7b5;border-color:rgba(155,231,181,.4);background:rgba(155,231,181,.08)}
.events-more{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* Rückblick-Hinweis auf der Startseite */
.rb-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 26px;padding:18px 24px;border-radius:18px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#0b4d22,#0d7a36);box-shadow:0 10px 26px rgba(0,80,30,.25);transition:transform .25s,box-shadow .25s;animation:ncIn .7s cubic-bezier(.2,.8,.2,1) both}
.rb-banner:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,80,30,.34)}
.rb-banner-ico{font-size:34px;animation:rbWiggle 2.6s ease-in-out infinite}
.rb-banner-txt{flex:1 1 220px;display:flex;flex-direction:column}.rb-banner-txt b{font-size:20px}.rb-banner-txt span{opacity:.9;font-size:14px}
.rb-banner-go{background:#f2c200;color:#3b2f00;font-weight:700;border-radius:999px;padding:10px 20px;font-size:15px;transition:transform .2s}.rb-banner:hover .rb-banner-go{transform:translateX(4px)}
@keyframes rbWiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-14deg)}20%{transform:rotate(12deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.rb-banner,.rb-banner-ico{animation:none}}