/**
 * Patrick Krisch Website
 * Datei: assets/css/hero-slider.css
 * Bereich: Hero-Slider, KPI-Karten und Benefit-Visuals
 * Zweck: Bildwechsel, Slider-Dots, KPI-Animationen, Sparklines und responsive Hero-Medien.
 *
 * Projekt: patrick-krisch.de
 * Entwicklung: Patrick Krisch
 * Technische Umsetzung: Patrick Krisch
 * Version: 1.0
 * Stand: 2026-08-16
 *
 * Bereichsübersicht:
 * 01. Hero-Slider / statischer Bildmodus
 * 02. KPI-Karten und Entrance-Zustände
 * 03. Sparklines
 * 04. Benefit-Illustrationen
 * 05. Keyframes
 * 06. Tablet/Mobile Breakpoints
 * 07. Reduced Motion
 *
 * Hier ändern:
 * - Slider-Geometrie, KPI-Positionen und Responsive-Verhalten.
 * - Slider-Timing und KPI-Zählerlogik liegen in assets/js/hero-slider.js.
 * - Finale Profilkartenposition liegt zusätzlich in hero-profile.css.
 */

/* 01. Slider – Bildflächen, Crossfade und Dots. */
.hero-visual.has-slider{min-height:520px;isolation:isolate}
.hero-media-slider{position:absolute;inset:-98px 120px 0 -95px;display:grid;place-items:center;overflow:visible}
.hero-slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;filter:blur(14px);transform:scale(.985);transition:opacity 1s ease,filter 1s ease,transform 1s ease;pointer-events:none}
.hero-slide.is-active{opacity:1;filter:blur(0);transform:scale(1);z-index:2}
.hero-slide picture,.hero-slide img{display:block;width:100%;height:100%}
.hero-slide img{object-fit:contain;object-position:center;filter:drop-shadow(0 20px 38px rgba(14,70,125,.12))}
.hero-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.74);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(9,50,91,.08)}
.hero-media-slider.is-static .hero-dots{display:none}
.hero-dot{appearance:none;width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#b9cbe0;cursor:pointer;transition:transform .2s ease,background-color .2s ease}
.hero-dot:hover{transform:scale(1.18)}
.hero-dot[aria-current="true"]{background:#087fba;transform:scale(1.35)}
.hero-visual.has-slider .world,.hero-visual.has-slider .portrait-card,.hero-visual.has-slider .nameplate{display:none}

/* 02. KPI-Karten – Farben, Hover und zeitversetzter Entrance. */
.hero-visual.has-slider .metric{z-index:6;right:-18px;width:238px;height:auto;min-height:104px;max-height:120px;padding:15px 10px;overflow:hidden;opacity:0;transform:translateY(34px);border:1px solid rgba(197,218,239,.78);background-size:240% 240%;box-shadow:0 16px 38px rgba(13,68,124,.11);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease;animation:metricGradient 7s ease-in-out infinite}
.hero-visual.has-slider .metric.one{--metric-accent:#087fba;top:30px;background:linear-gradient(120deg,rgba(255,255,255,.99) 0%,rgba(237,248,255,.98) 35%,rgba(217,242,255,.98) 54%,rgba(247,252,255,.99) 76%,rgba(255,255,255,.99) 100%);border-color:rgba(8,127,186,.25)}
.hero-visual.has-slider .metric.two{--metric-accent:#369f6d;top:149px;background:linear-gradient(130deg,rgba(255,255,255,.99) 0%,rgba(241,252,246,.98) 34%,rgba(220,246,232,.98) 55%,rgba(246,252,249,.99) 77%,rgba(255,255,255,.99) 100%);border-color:rgba(54,159,109,.25);animation-delay:.5s}
.hero-visual.has-slider .metric.three{--metric-accent:#8d45c1;top:268px;background:linear-gradient(115deg,rgba(255,255,255,.99) 0%,rgba(250,246,253,.98) 34%,rgba(239,229,248,.98) 55%,rgba(249,246,252,.99) 77%,rgba(255,255,255,.99) 100%);border-color:rgba(141,69,193,.24);animation-delay:1s}
.hero-visual.has-slider .metric:hover{box-shadow:0 22px 48px rgba(13,68,124,.18),0 0 0 2px color-mix(in srgb,var(--metric-accent) 18%,transparent);border-color:var(--metric-accent)}
.hero-visual.has-slider.metrics-ready .metric:hover{transform:translateY(-2px)}
.hero-visual.has-slider .metric:after{content:"";position:absolute;inset:-55% -35%;transform:translateX(-35%);animation:metricSheen 6.5s ease-in-out infinite;pointer-events:none}
.hero-visual.has-slider .metric.one:after{background:linear-gradient(115deg,transparent 35%,rgba(8,127,186,.14) 48%,rgba(8,127,186,.07) 53%,transparent 65%)}
.hero-visual.has-slider .metric.two:after{background:linear-gradient(115deg,transparent 35%,rgba(54,159,109,.14) 48%,rgba(54,159,109,.07) 53%,transparent 65%)}
.hero-visual.has-slider .metric.three:after{background:linear-gradient(115deg,transparent 35%,rgba(141,69,193,.13) 48%,rgba(141,69,193,.07) 53%,transparent 65%)}
.hero-visual.has-slider.metrics-ready .metric{opacity:1;transform:translateY(0)}
.hero-visual.has-slider.metrics-ready .metric.one{transition-delay:0s}
.hero-visual.has-slider.metrics-ready .metric.two{transition-delay:1.5s}
.hero-visual.has-slider.metrics-ready .metric.three{transition-delay:3s}
.metric strong[data-counter],.metric [data-percent]{font-variant-numeric:tabular-nums}
.hero-visual.has-slider .metric-row{gap:10px;align-items:center}
.hero-visual.has-slider .metric strong{font-size:24px;white-space:nowrap;line-height:1.05}
.hero-visual.has-slider .positive,.hero-visual.has-slider .negative{min-width:54px;text-align:right;white-space:nowrap;color:var(--metric-accent)}
.hero-visual.has-slider .metric-icon{color:var(--metric-accent)}
.hero-visual.has-slider .metric.one .metric-icon{background:rgba(8,127,186,.11)}
.hero-visual.has-slider .metric.two .metric-icon{background:rgba(54,159,109,.11)}
.hero-visual.has-slider .metric.three .metric-icon{background:rgba(141,69,193,.10)}

/* 03. Sparklines – jede KPI-Karte besitzt bewusst eine eigene Geometrie. */
.metric .spark{position:relative;z-index:1;height:20px;margin-top:6px;transform-origin:left center;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1);border:0!important;border-radius:0;background:var(--metric-accent);opacity:.22}
.metric.one .spark{clip-path:polygon(0 76%,11% 55%,23% 65%,36% 29%,49% 62%,62% 44%,74% 57%,86% 36%,100% 15%,100% 24%,86% 45%,74% 66%,62% 53%,49% 71%,36% 38%,23% 74%,11% 64%,0 86%)}
.metric.two .spark{clip-path:polygon(0 81%,12% 63%,24% 71%,37% 43%,49% 57%,62% 37%,74% 48%,86% 30%,100% 26%,100% 35%,86% 39%,74% 57%,62% 46%,49% 66%,37% 52%,24% 80%,12% 72%,0 90%)}
.metric.three .spark{clip-path:polygon(0 61%,12% 72%,24% 49%,37% 68%,49% 39%,62% 74%,74% 48%,87% 62%,100% 34%,100% 43%,87% 71%,74% 57%,62% 83%,49% 48%,37% 77%,24% 58%,12% 81%,0 70%)}
.metrics-ready .metric.one .spark{transform:scaleX(1);transition-delay:.25s}
.metrics-ready .metric.two .spark{transform:scaleX(1);transition-delay:1.75s}
.metrics-ready .metric.three .spark{transform:scaleX(1);transition-delay:3.25s}

/* 04. Benefit-Illustrationen – Originale bleiben im Repository, WebP wird beim Deploy bevorzugt. */
.trust-icon{width:72px;height:72px;margin:0 auto 6px;border-radius:0;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;color:transparent}
.trust-icon .ui-icon{display:none!important}
.trust-item:nth-child(1) .trust-icon{background-image:url('../img/icons/2d/zielgerichtet.png');background-image:image-set(url('../img/icons/2d/zielgerichtet.webp') type('image/webp'),url('../img/icons/2d/zielgerichtet.png') type('image/png'))}
.trust-item:nth-child(2) .trust-icon{background-image:url('../img/icons/2d/messbar.png');background-image:image-set(url('../img/icons/2d/messbar.webp') type('image/webp'),url('../img/icons/2d/messbar.png') type('image/png'))}
.trust-item:nth-child(3) .trust-icon{background-image:url('../img/icons/2d/international.png');background-image:image-set(url('../img/icons/2d/international.webp') type('image/webp'),url('../img/icons/2d/international.png') type('image/png'))}
.trust-item:nth-child(4) .trust-icon{background-image:url('../img/icons/2d/persoenlich.png');background-image:image-set(url('../img/icons/2d/persoenlich.webp') type('image/webp'),url('../img/icons/2d/persoenlich.png') type('image/png'))}
.trust-item>span{white-space:nowrap}

/* 05. Animationsdefinitionen der KPI-Flächen. */
@keyframes metricGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes metricSheen{0%,18%{transform:translateX(-42%)}58%,100%{transform:translateX(42%)}}

/* 06. Responsive – Positionen und KPI-Größen für Tablet/Mobile. */
@media(max-width:1040px){.hero-media-slider{inset:0 95px 0 -55px}.hero-visual.has-slider .metric{right:0;width:226px}.trust-item>span{white-space:normal}}
@media(max-width:820px){.hero-visual.has-slider{min-height:455px}.hero-media-slider{inset:0 70px 0 -32px}.hero-slide img{max-height:430px}.hero-visual.has-slider .metric{width:205px}.hero-dots{bottom:0}}
@media(max-width:620px){.hero-visual.has-slider{min-height:390px;margin-top:18px}.hero-media-slider{inset:0 0 32px 0}.hero-slide img{max-height:340px}.hero-visual.has-slider .metric{width:146px;min-height:0;max-height:96px;right:0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);animation:none;padding:10px}.hero-visual.has-slider .metric:after{display:none}.hero-visual.has-slider .metric strong{font-size:18px}.hero-visual.has-slider .metric.one{top:10px}.hero-visual.has-slider .metric.two{top:105px}.hero-visual.has-slider .metric.three{top:200px}.hero-dots{bottom:5px}.metric-icon{display:none}.trust-icon{width:64px;height:64px}}

/* 07. Barrierefreiheit – Crossfade/KPI-Animationen bei Reduced Motion deaktivieren. */
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-visual.has-slider .metric,.metric .spark,.hero-dot{transition:none!important;animation:none!important}.hero-visual.has-slider .metric:after{animation:none!important}.hero-visual.has-slider.metrics-ready .metric{opacity:1;transform:none}.hero-slide{filter:none}.hero-slide:not(.is-active){display:none}}