/* index.css — nur Startseite. Navi/Footer/Buttons stehen in base.css */

/* ===== HERO ===== */
.hero-slider{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--gruen-t)}
.hero-slider:focus-visible{outline-offset:-4px}
.hs-track{position:absolute;inset:0}
.hs-slide{position:absolute;inset:0;display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:opacity .9s var(--takt),visibility .9s var(--takt)}
.hs-slide.active{opacity:1;visibility:visible}

.hs-photo{position:absolute;inset:0;z-index:0;background:var(--verlauf)}
.hs-photo.has-img{background-size:cover!important;background-position:center!important}
.hs-photo.has-img::before{display:none}
.hs-photo.has-img::after{
  display:block;content:"";position:absolute;inset:0;opacity:1;background-image:none;
  background:
    linear-gradient(100deg, rgba(7,58,9,.88) 0%, rgba(10,80,14,.62) 34%, rgba(12,80,14,.30) 60%, rgba(0,140,22,.12) 100%),
    linear-gradient(0deg, rgba(7,58,9,.55) 0%, rgba(7,58,9,.10) 38%, transparent 60%);
}
.hs-photo::before{content:"";position:absolute;inset:0;opacity:.4;background:radial-gradient(circle at 18% 30%,rgba(125,229,146,.5),transparent 38%),radial-gradient(circle at 78% 22%,rgba(40,150,40,.6),transparent 42%),radial-gradient(circle at 60% 80%,rgba(110,230,130,.35),transparent 45%)}
.hs-photo::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.05}
.hs-slide.c-a .hs-photo{background:linear-gradient(122deg,#0c500e 0%,#0a6610 42%,#00b218 100%)}
.hs-slide.c-b .hs-photo{background:linear-gradient(118deg,#073a09 0%,#0c640f 48%,#1aa82c 100%)}
.hs-slide.c-c .hs-photo{background:linear-gradient(125deg,#0c500e 0%,#3f7d14 52%,#c8a23a 100%)}

.hs-phlabel{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);z-index:1;text-align:center;color:rgba(255,255,255,.45);font-size:.78rem;font-weight:600;letter-spacing:.04em;pointer-events:none}
.hs-phlabel svg{width:34px;height:34px;margin:0 auto 9px;display:block;opacity:.7}

.hs-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(8,40,10,.85) 0%,rgba(8,40,10,.5) 30%,rgba(8,40,10,.12) 56%,transparent 74%)}
.hs-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(72px,11vh,128px)}
.hs-inner>.wrap{max-width:1680px;margin:0;padding-inline:clamp(22px,5vw,90px)}
.hs-copy{max-width:min(760px,92%);text-align:left}
.hs-eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);padding:8px 16px;border-radius:100px;font-size:clamp(.78rem,.95vw,.96rem);font-weight:600;color:#eafaec;margin-bottom:24px}
.hs-eyebrow .pip{width:7px;height:7px;border-radius:50%;background:#7dffb0;animation:beat 2s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(125,255,176,.5)}70%{box-shadow:0 0 0 10px rgba(125,255,176,0)}100%{box-shadow:0 0 0 0 rgba(125,255,176,0)}}
.hs-copy h1,.hs-copy h2{font-size:clamp(2.6rem,5.8vw,5.6rem);line-height:1.02;color:#fff;margin-bottom:20px;text-shadow:0 4px 40px rgba(0,0,0,.28)}
.hs-copy h1 .accent,.hs-copy h2 .accent{background:linear-gradient(90deg,#c6ffd3,#8effa8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-lead{font-size:clamp(1.06rem,1.6vw,1.42rem);color:rgba(255,255,255,.92);max-width:520px;margin-bottom:30px;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.hs-actions{display:flex;gap:13px;flex-wrap:wrap;align-items:center}

/* Einlauf beim ersten Laden: index.js setzt .hs-boot kurz vor dem ersten Bild
   und nimmt sie im nächsten Frame wieder weg -> die Transitions unten laufen an.
   Ohne JS existiert die Klasse nie (alles sofort sichtbar). */
.hero-slider.hs-boot .hs-slide.active .hs-copy>*{opacity:0!important;transform:translateY(24px)!important;transition:none!important}

/* Einlauf der aktiven Folie */
.hs-slide .hs-copy>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--takt),transform .7s var(--takt)}
.hs-slide.active .hs-copy>*{opacity:1;transform:none}
.hs-slide.active .hs-copy>*:nth-child(1){transition-delay:.12s}
.hs-slide.active .hs-copy>*:nth-child(2){transition-delay:.22s}
.hs-slide.active .hs-copy>*:nth-child(3){transition-delay:.32s}
.hs-slide.active .hs-copy>*:nth-child(4){transition-delay:.42s}

/* Pfeile – dezent, nur bei Hover (Desktop) */
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 18px -8px rgba(0,0,0,.45);display:grid;place-items:center;cursor:pointer;z-index:6;opacity:0;transition:opacity var(--motion-base) var(--takt),transform .3s var(--takt),background .3s}
.hero-slider:hover .hs-arrow{opacity:.55}
.hs-arrow:hover{opacity:1;background:rgba(255,255,255,.24)}
.hs-arrow.prev:hover{transform:translateY(-50%) translateX(-2px)}
.hs-arrow.next:hover{transform:translateY(-50%) translateX(2px)}
.hs-arrow svg{width:18px;height:18px;stroke:#fff}
.hs-arrow.prev{left:clamp(10px,2.5vw,26px)}
.hs-arrow.next{right:clamp(10px,2.5vw,26px)}
@media(hover:none){.hs-arrow{display:none}}

/* Punkte-Menü unten mittig */
.hs-dots{position:absolute;left:50%;bottom:clamp(20px,4vh,34px);transform:translateX(-50%);display:flex;gap:10px;z-index:6}
.hs-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);border:none;cursor:pointer;padding:0;transition:transform .35s var(--takt),opacity .35s var(--takt),background-color .35s var(--takt),border-color .35s var(--takt),color .35s var(--takt),box-shadow .35s var(--takt);position:relative}
/* Unsichtbar vergrößerte Trefferfläche (>= 24px) für Touch */
.hs-dot::before{content:"";position:absolute;inset:-8px}
.hs-dot:hover{background:rgba(255,255,255,.8)}
.hs-dot.on{background:#fff;width:30px;border-radius:6px}

/* Pause-/Play-Taste für den Auto-Wechsel (WCAG 2.2.2) — immer sichtbar, auch mobil */
.hs-pause{position:absolute;right:clamp(12px,2.5vw,28px);bottom:clamp(16px,3.5vh,30px);z-index:6;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;color:#fff;opacity:.7;transition:opacity .3s,background .3s}
.hs-pause:hover,.hs-pause:focus-visible{opacity:1;background:rgba(255,255,255,.26)}
.hs-pause svg{width:16px;height:16px}
.hs-pause .ic-play{display:none}
.hs-pause.paused .ic-pause{display:none}
.hs-pause.paused .ic-play{display:block}

/* ===== "Heute geöffnet"-Karte ===== */
.today{background:rgba(255,255,255,.97);border-radius:var(--r-xl);padding:7px;box-shadow:var(--sh-l);backdrop-filter:blur(10px)}
.today-head{background:var(--verlauf);border-radius:24px;padding:20px 22px;color:#fff;position:relative;overflow:hidden}
.today-head::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.13);top:-66px;right:-40px}
.today-status{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;background:rgba(255,255,255,.18);padding:6px 12px;border-radius:100px;margin-bottom:12px;position:relative}
.today-status .live{width:7px;height:7px;border-radius:50%;background:#ffd86b}
.today-status .live.is-open{background:#9dffb4;animation:beat 1.6s infinite}
.today-head h3{font-size:1.35rem;position:relative}
.today-head p{font-size:.84rem;opacity:.92;position:relative}
.today-list{padding:7px 9px 5px;max-height:280px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.today-list::-webkit-scrollbar{display:none}
.trow{display:flex;align-items:center;justify-content:space-between;padding:11px 6px;border-bottom:1px dashed var(--linie)}
.trow:last-child{border:none}
.trow .d b{font-size:.92rem;font-weight:700;display:block}
.trow .d span{font-size:.76rem;color:var(--grau)}
.trow .t{font-size:.74rem;font-weight:700;color:var(--gruen-d);background:var(--papier-2);padding:5px 11px;border-radius:100px;white-space:nowrap}
.trow.now .t{background:var(--verlauf);color:#fff}
/* Marktinfo-Karte als eigener Slide-Inhalt (breiter & flacher, sitzt unten links) */
.hs-info{max-width:580px}
.hs-info .today{margin-top:0;width:100%;box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
.hs-info .today .today-head{padding:16px 20px}
.hs-info .today .today-head h3{font-size:1.18rem}
.hs-info .today .today-status{margin-bottom:9px}
.hs-info .today .today-list{max-height:182px;padding:4px 9px 2px}
.hs-info .today .trow{padding:9px 6px}
@media(max-width:600px){.hs-info{max-width:100%}.hs-info .today .today-list{max-height:172px}}

/* Status-Pille im Kopf der "Heute geöffnet"-Karte (Farbe kommt vom Status) */
.today-head .tstat{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:100px;
  font-size:.68rem;font-weight:800;letter-spacing:.02em;color:#fff;vertical-align:1px;
  box-shadow:0 2px 10px -3px rgba(0,0,0,.35)}

/* ===== Abschnitte ===== */
section.blk{padding:clamp(46px,6.5vw,80px) 0;position:relative}
/* Hintergrund einzelner Blöcke: die Tönung übernimmt .wm-bg-* (siehe base.css), im Admin pro Block wählbar */
.banner-bg{padding:clamp(34px,5vw,56px) 0}
.banner-bg .promo-wrap{padding-top:0;padding-bottom:0}
.head{max-width:660px;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.head.row{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;max-width:660px;gap:18px}
.head h2{font-size:clamp(1.9rem,4.4vw,3.1rem);margin-bottom:14px}
.head p{font-size:clamp(1rem,1.4vw,1.1rem);color:var(--grau)}
.head.row .htext{max-width:660px}
.seemore{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--gruen-d);padding:12px 22px;border:1.6px solid var(--linie);border-radius:100px;transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt);white-space:nowrap;cursor:pointer;background:none;font-family:inherit}
.seemore:hover{border-color:var(--gruen);background:var(--gruen);color:#fff;transform:translateY(var(--lift-control))}
.seemore svg{width:16px;height:16px;transition:transform var(--motion-base) var(--takt)}
.seemore:hover svg{transform:translateX(4px)}

/* ===== Märkte-Slider ===== */
.maerkte{background:var(--papier-2)}
.slider{position:relative}
.slider-viewport{overflow:hidden;border-radius:var(--r-xl)}
.slider-track{display:flex;transition:transform var(--motion-slow) var(--takt)}
.slide{flex:0 0 100%;min-width:0;padding:2px}
.slide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.markt{position:relative;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-xl);padding:clamp(20px,2.4vw,26px);overflow:hidden;transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt)}
.markt::before{content:"";position:absolute;top:0;left:0;bottom:0;width:5px;background:var(--verlauf);transform:scaleY(0);transform-origin:top;transition:transform var(--motion-slow) var(--takt)}
.markt:hover{transform:translateY(var(--lift-card));box-shadow:var(--sh-m);border-color:transparent}
.markt:hover::before{transform:scaleY(1)}
.markt .mhead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.markt .pin{flex:none;width:44px;height:44px;border-radius:12px;background:var(--papier-2);display:grid;place-items:center;transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt)}
.markt:hover .pin{background:var(--verlauf)}
.markt .pin svg{width:22px;height:22px;stroke:var(--gruen-d);transition:stroke var(--motion-base) var(--takt)}
.markt:hover .pin svg{stroke:#fff}
.markt-badge{display:inline-block;padding:6px 12px;border-radius:999px;color:#fff;font-weight:800;font-size:.78rem;line-height:1.15;letter-spacing:.01em}
.markt h3{font-size:clamp(1.2rem,2.2vw,1.34rem);margin-bottom:4px}
.markt .ort{font-size:.88rem;color:var(--grau);margin-bottom:14px}
.markt .tage{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.78rem;font-weight:700;padding:6px 13px;border-radius:100px;background:var(--papier-2);color:var(--tinte-2)}
.chip.on{background:#e3f7e7;color:var(--gruen-d)}
.markt .arrow{position:absolute;top:clamp(20px,2.4vw,26px);right:clamp(20px,2.4vw,26px);width:36px;height:36px;border-radius:50%;border:1.5px solid var(--linie);display:grid;place-items:center;transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt);background:var(--weiss)}
.markt:hover .arrow{background:var(--gruen);border-color:var(--gruen);transform:rotate(-45deg)}
.markt .arrow svg{width:16px;height:16px;stroke:var(--tinte);transition:stroke var(--motion-base) var(--takt)}
.markt:hover .arrow svg{stroke:#fff}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--weiss);border:1px solid var(--linie);display:grid;place-items:center;cursor:pointer;z-index:5;box-shadow:var(--sh-s);opacity:0;transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt)}
.slider:hover .slider-arrow{opacity:1}
.slider-arrow:hover{background:var(--tinte);border-color:var(--tinte)}
.slider-arrow svg{width:20px;height:20px;stroke:var(--tinte);transition:stroke .3s}
.slider-arrow:hover svg{stroke:#fff}
.slider-arrow.prev{left:-14px}
.slider-arrow.next{right:-14px}
.slider-arrow.disabled{opacity:0 !important;pointer-events:none}
@media(hover:none){.slider:hover .slider-arrow{opacity:.9}.slider-arrow.prev{left:6px}.slider-arrow.next{right:6px}}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:32px}
.slider-dots{display:flex;align-items:center;gap:9px}
.sdot{width:9px;height:9px;border-radius:50%;background:var(--linie);border:none;cursor:pointer;padding:0;transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt);position:relative}
/* Unsichtbar vergrößerte Trefferfläche (>= 24px) für Touch */
.sdot::before{content:"";position:absolute;inset:-8px}
.sdot:hover{background:var(--grau)}
.sdot.on{width:30px;border-radius:100px;background:var(--verlauf)}
.slider-count{font-size:.84rem;font-weight:700;color:var(--grau);font-variant-numeric:tabular-nums;min-width:42px;text-align:center}

/* ===== Kategorien ===== */
.kat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.kat{position:relative;border-radius:var(--r-l);overflow:hidden;cursor:pointer;border:1px solid var(--linie);background:var(--weiss);transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt);display:flex;flex-direction:column}
.kat:hover{transform:translateY(var(--lift-card));box-shadow:var(--sh-m);border-color:transparent}
.kat .kphoto{aspect-ratio:4/3;position:relative;overflow:hidden;display:grid;place-items:center}
.kat:nth-child(1) .kphoto{background:linear-gradient(150deg,#dff2e2,#bfe6c6)}
.kat:nth-child(2) .kphoto{background:linear-gradient(150deg,#fdeecf,#f7d99b)}
.kat:nth-child(3) .kphoto{background:linear-gradient(150deg,#f6e2cf,#e6c39c)}
.kat:nth-child(4) .kphoto{background:linear-gradient(150deg,#f6dde2,#eeb9c5)}
.kat:nth-child(5) .kphoto{background:linear-gradient(150deg,#d7eaf7,#a9d2ee)}
.kat:nth-child(6) .kphoto{background:linear-gradient(150deg,#fcf2d2,#f5e3a0)}
.kat:nth-child(7) .kphoto{background:linear-gradient(150deg,#dff0e6,#b6e0c6)}
.kat:nth-child(8) .kphoto{background:linear-gradient(150deg,#efe8df,#d8c4ab)}
.kat .kphoto svg{width:54px;height:54px;stroke-width:2;opacity:.92;transition:transform var(--motion-slow) var(--takt);position:relative;z-index:2}
.kat:hover .kphoto svg{transform:scale(1.12) translateY(var(--lift-control))}
.kat .kbody{padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kat .kbody b{font-size:.98rem;font-weight:700}
.kat .kbody .ka{width:30px;height:30px;border-radius:50%;background:var(--papier-2);display:grid;place-items:center;flex-shrink:0;transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt)}
.kat:hover .kbody .ka{background:var(--gruen)}
.kat .kbody .ka svg{width:14px;height:14px;stroke:var(--gruen-d);transition:stroke var(--motion-base) var(--takt)}
.kat:hover .kbody .ka svg{stroke:#fff}
.kat-foot{text-align:center;margin-top:clamp(30px,4vw,40px)}

/* ===== Marktgeschichten (hochkant) ===== */
.gesch{background:var(--papier)}
.gesch-scroll{display:flex;gap:22px;overflow-x:auto;padding:6px 4px 22px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--linie) transparent}
.gesch-scroll::-webkit-scrollbar{height:8px}
.gesch-scroll::-webkit-scrollbar-thumb{background:var(--linie);border-radius:10px}
.gesch-scroll::-webkit-scrollbar-track{background:transparent}
.story{flex:0 0 clamp(250px,28vw,300px);scroll-snap-align:start;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-xl);overflow:hidden;cursor:pointer;transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt);display:flex;flex-direction:column}
.story:hover{transform:translateY(var(--lift-card));box-shadow:var(--sh-m);border-color:transparent}
.story .img{aspect-ratio:1/1;position:relative;overflow:hidden;display:grid;place-items:center}
.story:nth-child(1) .img{background:linear-gradient(150deg,#e8f3ea,#c4e2cb)}
.story:nth-child(2) .img{background:linear-gradient(150deg,#fdeecf,#f1d49a)}
.story:nth-child(3) .img{background:linear-gradient(150deg,#f6dde2,#e8b6c2)}
.story:nth-child(4) .img{background:linear-gradient(150deg,#d9eaf6,#b0d2ec)}
.story .img.has-img{background-size:cover;background-position:center}
.story .img svg{width:42px;height:42px;stroke-width:1.6;opacity:.7;transition:transform var(--motion-slow) var(--takt)}
.story:hover .img svg{transform:scale(1.12)}
.story .img .phlabel{position:absolute;bottom:12px;left:14px;font-size:.7rem;font-weight:600;color:rgba(22,32,26,.4);letter-spacing:.03em}
.story .body{padding:18px 20px;flex:1;display:flex;flex-direction:column}
.story .tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen-d);background:#e3f7e7;padding:5px 11px;border-radius:100px;margin-bottom:13px}
.story h3{font-size:1.18rem;margin-bottom:9px;line-height:1.22;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.story p{font-size:.84rem;color:var(--grau);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.story .more{margin-top:auto;align-self:flex-start;padding-top:14px;font-size:.84rem;font-weight:700;color:var(--gruen-d);display:inline-flex;align-items:center;gap:6px}
.story .more svg{width:14px;height:14px;transition:transform var(--motion-base) var(--takt)}
.story:hover .more svg{transform:translateX(4px)}
.gesch-hint{text-align:center;margin-top:8px;font-size:.82rem;color:var(--grau);display:flex;align-items:center;justify-content:center;gap:8px}
.gesch-hint svg{width:16px;height:16px}

/* ===== CTA / Newsletter — als abgesetzte Karte auf Papier (sanfter Übergang zum Footer) ===== */
.cta{position:relative}
.cta .inner{position:relative;z-index:2;overflow:hidden;background:var(--verlauf);color:#fff;border-radius:var(--r-xl);padding:clamp(26px,3.4vw,40px) clamp(28px,4vw,52px);max-width:1080px;margin:0 auto;box-shadow:var(--sh-l);display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,52px);flex-wrap:wrap;text-align:left}
.cta .inner::before,.cta .inner::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.cta .inner::before{width:240px;height:240px;top:-120px;left:-60px}
.cta .inner::after{width:200px;height:200px;bottom:-110px;right:-40px}
.cta .inner>*{position:relative;z-index:2}
.cta-copy{flex:1 1 300px;min-width:240px}
.cta-action{flex:0 1 440px;min-width:260px}
.cta h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 6px;color:#fff;max-width:none}
.cta p{font-size:clamp(.98rem,1.4vw,1.08rem);opacity:.92;margin:0;max-width:440px}
.nl{display:flex;gap:11px;width:100%;margin:0}
.nl input{flex:1;padding:15px 21px;border-radius:100px;border:none;font-size:1rem;outline:none;font-family:inherit;min-width:0}
.nl input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.nl button{padding:15px 25px;border-radius:100px;border:none;background:var(--tinte);color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:transform var(--motion-base) var(--takt),opacity var(--motion-base) var(--takt),background-color var(--motion-base) var(--takt),border-color var(--motion-base) var(--takt),color var(--motion-base) var(--takt),box-shadow var(--motion-base) var(--takt);white-space:nowrap}
.nl button:hover{transform:translateY(var(--lift-control));background:#000}
.cta .hint{font-size:.78rem;opacity:.75;margin-top:10px;text-align:left}

/* ===== Responsive (startseiten-spezifisch) ===== */
@media(max-width:860px){
  .hero-slider{height:100svh}
  .hs-inner{padding-bottom:clamp(80px,12vh,110px)}
  .hs-copy{max-width:none}
  .slide-grid{grid-template-columns:1fr}
  .kat-grid{grid-template-columns:repeat(2,1fr)}
  .head.row{align-items:center}
}
@media(max-width:520px){
  .hs-copy h1,.hs-copy h2{font-size:clamp(2.1rem,9vw,3rem)}
  .hs-lead{font-size:1.02rem}
  .hs-actions{width:100%}
  .hs-actions .btn{width:100%;justify-content:center}
  .hs-dots{bottom:18px;gap:14px}
  /* Touch: größere unsichtbare Treffer-Fläche + mehr Abstand für die Slider-Punkte */
  .hs-dot::before{inset:-11px}
  .slider-dots{gap:13px}
  .sdot::before{inset:-11px}
  .kat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .kat .kbody b{font-size:.88rem}
  .nl{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .hs-slide{transition:opacity .01ms}
  .hs-slide .hs-copy>*{opacity:1;transform:none;transition:none}
  .slider-track{transition:none}
}

/* ===== Markt-Status (Heute-Karte + Slider) ===== */
.today-list .tcol{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.today-list .t.mstat{color:inherit}
.today-list .tmini{font-size:.7rem;color:var(--grau);font-weight:600;white-space:nowrap}
/* Status-Hinweis als kompakter Banner am unteren Card-Ende (nicht oben) */
.markt-stat{margin-top:16px;padding:10px 14px;border-radius:12px;color:#fff;display:flex;flex-direction:column;gap:2px}
.markt-stat b{font-weight:800;font-size:.85rem;line-height:1.2;letter-spacing:.01em}
/* .85rem statt .78rem: der Status-Text trägt echte Information (z. B. Verlegung) — 12,5 px waren mobil zu klein */
.markt-stat span{font-size:.85rem;opacity:.95;line-height:1.4}
.today-head .tstat.status-ausfall,.today-list .mstat.status-ausfall,.markt-stat.status-ausfall{background:#fff1f0!important;color:#7a271a!important}
.today-head .tstat.status-zeit,.today-list .mstat.status-zeit,.markt-stat.status-zeit{background:#fff7e8!important;color:#713b00!important}
.today-head .tstat.status-ort,.today-list .mstat.status-ort,.markt-stat.status-ort{background:#eef6ff!important;color:#174e7a!important}
.today-head .tstat.status-sonder,.today-head .tstat.status-hinweis,.today-list .mstat.status-sonder,.today-list .mstat.status-hinweis,.markt-stat.status-sonder,.markt-stat.status-hinweis{background:#edf8ef!important;color:#0b5d16!important}

/* Kategorien-Slider: etwas Luft, damit der Hover-Lift nicht abgeschnitten wird */
.kat-sliderwrap .slide{padding:6px 4px}
.kat-sliderwrap{margin-top:4px}

/* ===== Startseite: Märkte komplett auf Desktop (Handy behält Slider) ===== */
.maerkte .slide-grid>.markt:last-child:nth-child(odd){grid-column:1 / -1}
#marktSlider .slider-track{align-items:flex-start}
#marktSlider .slider-viewport{transition:height var(--motion-base) var(--takt)}

/* Newsfeed nutzt jetzt denselben Stil wie Marktgeschichten (.gesch-scroll/.story) */


/* ===== Dezente Bewegung (nur wenn das System Bewegung erlaubt) ===== */
@media(prefers-reduced-motion:no-preference){
  /* C8 — Ken-Burns light: Hero-Fotos zoomen über die Slidedauer minimal hinein.
     Ruhezustand = Endwert, damit beim Slidewechsel nichts zurückspringt. */
  .hs-photo.has-img{transform:scale(1.05);will-change:transform;backface-visibility:hidden}
  .hs-slide.active .hs-photo.has-img{animation:hsKb 8.5s ease-out forwards}
  @keyframes hsKb{from{transform:scale(1)}to{transform:scale(1.05)}}

  /* C9 — Navigation gleitet beim Laden sanft mit ein (nur Startseiten-Overlay-Navi).
     'backwards' hält den Startzustand nur während der Verzögerung — ohne Animation
     (z. B. reduzierte Bewegung) ist die Navi ganz normal sofort sichtbar. */
  #nav.overlay{animation:navIn .8s var(--takt) .25s backwards}
  @keyframes navIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

  /* Fortschritt im aktiven Hero-Punkt: füllt sich über die Slidedauer (6 s,
     muss zum Intervall in index.js passen) — zeigt den Auto-Wechsel an. */
  .hs-dot.on{background:rgba(255,255,255,.45);position:relative;overflow:hidden}
  .hs-dot.on::after{content:"";position:absolute;inset:0;background:#fff;border-radius:inherit;
    transform:scaleX(0);transform-origin:left;animation:dotFill 6s linear forwards}
  @keyframes dotFill{to{transform:scaleX(1)}}

  /* Tab im Hintergrund: Zoom & Punkt-Füllung anhalten (index.js setzt die Klasse).
     Beim Zurückkehren läuft der Zoom weich an der gleichen Stelle weiter —
     kein ruckartiger Sprung mehr. */
  body.wm-paused .hs-slide.active .hs-photo.has-img,
  body.wm-paused .hs-dot.on::after{animation-play-state:paused}
}