/* 3 · Katalog */
.sk-katalog{padding:clamp(90px,11vw,150px) var(--rand);max-width:calc(var(--max) + 2 * var(--rand));margin:0 auto}
.sk-kat-kopf{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 64px;align-items:end;margin-bottom:44px}
.sk-kat-kopf p{margin:0;color:var(--muted-d);max-width:46ch}
@media (max-width:820px){.sk-kat-kopf{grid-template-columns:1fr}}
.sk-zeit{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:18px;border-radius:14px;background:var(--weiss);box-shadow:0 1px 0 var(--linie-h),0 18px 40px -28px rgba(10,16,24,.35);position:sticky;top:12px;z-index:5}
.sk-zeit label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted-d);flex:1 1 150px}
.sk-zeit input,.sk-zeit select,.sk-form input,.sk-form textarea{font:500 16px var(--text);color:var(--text-d);background:var(--paper-2);border:1px solid var(--linie-h);border-radius:9px;padding:11px 12px;width:100%;transition:border-color .2s,background .2s}
.sk-zeit input:focus,.sk-zeit select:focus,.sk-form input:focus,.sk-form textarea:focus{outline:none;border-color:var(--blau);background:var(--weiss)}
.sk-zeit-info{margin:0;flex:1 1 220px;font:600 15px var(--text);color:var(--text-d);padding-bottom:12px}
.sk-zeit-info small{display:block;font-weight:500;color:var(--muted-d);font-size:13px}
.sk-filter{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 18px}
.sk-filter button{height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--linie-h);background:transparent;font:600 14px var(--text);color:var(--muted-d);cursor:pointer;transition:all .2s}
.sk-filter button[aria-pressed=true]{background:var(--text-d);border-color:var(--text-d);color:var(--weiss)}
/* Fertige Sets */
.sk-sets{margin:4px 0 22px}
.sk-sets-titel{margin:0 0 10px;font:700 12px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}
.sk-sets-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sk-set{--k1:#e9eef5;--kf:#54616f;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;border:1px solid var(--linie-h);background:var(--weiss);text-align:left;font:inherit;color:var(--text-d);cursor:pointer;transition:border-color .2s,transform .35s var(--ease),box-shadow .35s}
.sk-set[data-kat=kamera]{--k1:#d9e9ff;--kf:#2d6fc2}.sk-set[data-kat=drohne]{--k1:#dcefff;--kf:#2383c9}.sk-set[data-kat=mikrofon]{--k1:#e7e2ff;--kf:#6b4fc8}
.sk-set:hover{transform:translateY(-2px);box-shadow:0 20px 36px -26px rgba(10,16,24,.45);border-color:rgba(53,161,254,.5)}
.sk-set.an{border-color:var(--blau);box-shadow:0 0 0 1px var(--blau)}
.sk-set-bilder{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:68px;height:68px;padding:5px;border-radius:14px;background:var(--k1);box-sizing:border-box}
.sk-set-bilder img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s var(--ease)}
.sk-set:hover .sk-set-bilder img{transform:scale(1.1) rotate(-4deg)}
.sk-set-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.sk-set-text b{font:700 15px/1.2 var(--kopf);letter-spacing:-.01em}
.sk-set-text small{font-size:12.5px;line-height:1.4;color:var(--muted-d)}
.sk-set-text em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--kf);margin-top:2px}
.sk-set-plus{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--k1);color:var(--kf);font:700 18px/1 var(--kopf);transition:all .25s var(--ease)}
.sk-set.an .sk-set-plus{background:var(--blau);color:#fff}
@media (max-width:900px){.sk-sets-reihe{grid-template-columns:1fr}}
.sk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:18px 14px}
.sk-laedt{color:var(--muted-d)}
/* Gerätekarten: das Foto schwebt auf einer farbigen Kachel je Kategorie, kippt beim Drüberfahren, springt bei Auswahl in den Seesack */
.sk-g{--k1:#e9eef5;--k2:#f7f9fc;--kf:#54616f;position:relative;display:flex;flex-direction:column;gap:9px;padding:0;border:0;background:none;cursor:pointer}
.sk-g[data-kat=kamera]{--k1:#d9e9ff;--k2:#f1f6ff;--kf:#2d6fc2}
.sk-g[data-kat=objektiv]{--k1:#d4f1ea;--k2:#eefaf6;--kf:#1f8a6b}
.sk-g[data-kat=drohne]{--k1:#dcefff;--k2:#f2f9ff;--kf:#2383c9}
.sk-g[data-kat=licht]{--k1:#ffe9cf;--k2:#fff7ec;--kf:#c2691a}
.sk-g[data-kat=mikrofon]{--k1:#e7e2ff;--k2:#f4f2ff;--kf:#6b4fc8}
.sk-g[data-kat=stativ-gimbal]{--k1:#e3e8ef;--k2:#f3f5f8;--kf:#4b5a6b}
.sk-g[data-kat=zubehoer]{--k1:#ffe2e2;--k2:#fff3f3;--kf:#c73d3f}
.sk-g input{position:absolute;opacity:0;pointer-events:none}
.sk-g:has(input:focus-visible) .sk-g-bild{outline:2px solid var(--blau);outline-offset:3px}
.sk-g-bild{position:relative;aspect-ratio:1;border-radius:22px;background:radial-gradient(120% 90% at 30% 20%,var(--k2) 0%,var(--k1) 70%);display:grid;place-items:center;overflow:visible;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s}
.sk-g-bild::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 50% at 50% 100%,rgba(255,255,255,.7),transparent 70%);pointer-events:none}
.sk-g-bild img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 14px 16px rgba(10,16,24,.22));transition:transform .55s var(--ease),filter .55s var(--ease)}
.sk-g-bild span{font:800 30px var(--kopf);color:var(--kf);opacity:.35;letter-spacing:-.04em}
.sk-g:hover .sk-g-bild{transform:translateY(-4px);box-shadow:0 22px 34px -24px rgba(10,16,24,.5)}
.sk-g:hover .sk-g-bild img{transform:translateY(-8px) rotate(-5deg) scale(1.1);filter:drop-shadow(0 24px 22px rgba(10,16,24,.3))}
.sk-g-text{display:flex;flex-direction:column;gap:3px;padding:0 4px}
.sk-g-kat{align-self:flex-start;font:700 10.5px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--kf);background:var(--k1);padding:3px 8px;border-radius:999px;margin-bottom:2px}
.sk-g-text b{font:700 14px/1.25 var(--kopf);letter-spacing:-.01em;color:var(--text-d)}
.sk-g-text p{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted-d);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sk-g-mit{color:var(--kf)!important;font-weight:600}
.sk-g-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;font-size:12px}
.sk-g-preis{font-weight:600;color:var(--text-d)}
.sk-g-status{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:#1c7a45}
.sk-g-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(28,122,69,.15)}
.sk-g.belegt{cursor:not-allowed}
.sk-g.belegt .sk-g-bild{background:#eef1f4}
.sk-g.belegt .sk-g-bild img{filter:grayscale(1) opacity(.5)}
.sk-g.belegt .sk-g-status{color:var(--koralle-d)}
.sk-g.belegt .sk-g-status::before{box-shadow:0 0 0 3px rgba(242,68,74,.15)}
.sk-g-haken{position:absolute;right:10px;top:10px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);border:1.5px solid rgba(20,32,44,.15);display:grid;place-items:center;transition:all .25s var(--ease)}
.sk-g-haken svg{width:15px;height:15px;stroke:var(--weiss);opacity:0;transform:scale(.5);transition:all .25s var(--ease)}
.sk-g.an .sk-g-bild{box-shadow:0 0 0 2.5px var(--blau),0 22px 34px -24px rgba(53,161,254,.6);transform:translateY(-4px)}
.sk-g.an .sk-g-bild img{animation:skRein .55s var(--ease)}
.sk-g.an .sk-g-haken{background:var(--blau);border-color:var(--blau);animation:skStempel .45s var(--ease)}
.sk-g.an .sk-g-haken svg{opacity:1;transform:none}
.sk-g.an .sk-g-status{color:var(--blau-d)}
.sk-g.an .sk-g-status::before{box-shadow:0 0 0 3px rgba(53,161,254,.18)}
@keyframes skRein{0%{transform:scale(1)}35%{transform:translateY(-10px) rotate(-6deg) scale(1.12)}100%{transform:none}}
@keyframes skStempel{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.sk-g *{animation:none!important;transition:none!important}}
.sk-hinweis-klein{margin:18px 0 0;font-size:13px;color:var(--muted-d)}

/* 4 · Portal */
.sk-portal{display:grid;grid-template-columns:1fr minmax(0,520px);gap:clamp(40px,7vw,110px);align-items:center;padding:clamp(90px,12vw,160px) var(--rand);background:var(--ink-2);color:var(--text-h)}
.sk-portal-text{max-width:560px;justify-self:end}
.sk-portal-text p{color:var(--muted-h);margin:24px 0}
.sk-liste{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sk-liste li{display:flex;gap:12px;align-items:baseline}
.sk-liste li::before{content:"";flex:0 0 14px;height:2px;background:var(--koralle);translate:0 -4px}
.sk-geraet-mock{margin:0;padding:22px;border-radius:18px;background:var(--paper-2);color:var(--text-d);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);rotate:1.5deg;font-size:14.5px}
.mock-kopf{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:14px}
.mock-kopf b{font:700 17px var(--kopf)}
.mock-kopf span{color:var(--muted-d);font-size:13px}
.mock-weg{display:flex;margin:0 0 16px;padding:0;list-style:none;font-size:11.5px;color:var(--muted-d);text-align:center}
.mock-weg li{flex:1;position:relative;padding-top:20px}
.mock-weg li::before{content:"";position:absolute;top:4px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--paper);border:2px solid var(--linie-h)}
.mock-weg li.f::before{background:var(--blau);border-color:var(--blau)}
.mock-weg li.j{color:var(--text-d);font-weight:700}
.mock-weg li.j::before{border-color:var(--blau);box-shadow:0 0 0 4px rgba(53,161,254,.2)}
.mock-geraet{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;border:1px solid var(--linie-h);background:var(--weiss);margin-bottom:12px}
.mock-geraet small{display:block;color:var(--muted-d);font-size:12.5px}
.mock-bild{width:58px;aspect-ratio:4/3;border-radius:8px;background:linear-gradient(135deg,#23384f,#0e1a2b)}
.mock-abschnitt{padding:10px 12px;border-left:3px solid var(--blau);background:rgba(53,161,254,.07);border-radius:0 10px 10px 0;margin-top:8px}
.mock-abschnitt h4{margin:0 0 4px;font:700 14px var(--kopf)}
.mock-abschnitt ul{margin:0;padding-left:18px}
.sk-geraet-mock figcaption{margin-top:12px;font-size:12px;color:var(--muted-d)}
@media (max-width:900px){.sk-portal{grid-template-columns:1fr}.sk-portal-text{justify-self:start}.sk-geraet-mock{rotate:0deg}}

/* 5 · Fragen */
.sk-fragen{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px clamp(40px,7vw,110px);padding:clamp(56px,7vw,96px) var(--rand);max-width:calc(var(--max) + 2 * var(--rand));margin:0 auto}
.sk-fragen-liste details{border-top:1px solid var(--linie-h)}
.sk-fragen-liste details:last-child{border-bottom:1px solid var(--linie-h)}
.sk-fragen-liste summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;font:600 clamp(18px,1.8vw,22px)/1.25 var(--kopf);letter-spacing:-.015em;cursor:pointer;list-style:none}
.sk-fragen-liste summary::-webkit-details-marker{display:none}
.sk-fragen-liste summary::after{content:"";flex:0 0 14px;height:14px;background:linear-gradient(var(--text-d),var(--text-d)) center/14px 2px no-repeat,linear-gradient(var(--text-d),var(--text-d)) center/2px 14px no-repeat;transition:transform .3s var(--ease)}
.sk-fragen-liste details[open] summary::after{transform:rotate(45deg)}
.sk-fragen-liste p{margin:0 0 16px;color:var(--muted-d);max-width:62ch;line-height:1.5}
@media (max-width:820px){.sk-fragen{grid-template-columns:1fr}}

/* 6 · Anfrage */
.sk-anfrage{display:grid;align-items:start;grid-template-columns:.9fr 1.1fr;gap:32px clamp(32px,5vw,80px);padding:clamp(56px,7vw,96px) var(--rand);background:var(--ink);color:var(--text-h)}
.sk-anfrage-text{max-width:520px;justify-self:end;width:100%}
.sk-anfrage-text>p{color:var(--muted-h);margin:14px 0}
/* Der Seesack: gewählte Geräte plumpsen hinein */
.sk-sack{position:relative;width:min(260px,70%);margin:6px auto 14px;aspect-ratio:220/240}
.sk-sack-svg{width:100%;height:100%;display:block;overflow:visible}
.sk-sack-koerper{transform-origin:50% 100%}
.sk-sack.plumps .sk-sack-koerper{animation:skSack .6s var(--ease)}
.sk-sack.plumps .sk-sack-schatten{animation:skSchatten .6s var(--ease)}
.sk-sack-schnur{opacity:0;transition:opacity .25s}
.sk-sack-tau{transition:stroke-dasharray .5s,stroke-width .5s}
.sk-sack-enden{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .6s .95s var(--ease)}
.sk-sack-etikett{opacity:0;transform-origin:110px 58px;transition:opacity .3s 1.1s}
/* Zuschnüren: Öffnung zieht sich zusammen, Falten raffen sich, Tau spannt, Knoten + Enden, Etikett baumelt, Sack ruckelt */
.sk-sack.zu .sk-sack-tau{stroke-dasharray:1000 0;stroke-width:5}
.sk-sack.zu .sk-sack-schnur{opacity:1;transition-delay:.85s}
.sk-sack.zu .sk-sack-enden{stroke-dashoffset:0}
.sk-sack.zu .sk-sack-etikett{opacity:1;animation:skBaumeln 2.4s ease-in-out 1s infinite}
.sk-sack.zu .sk-sack-koerper{animation:skZurren 1.1s var(--ease) .5s}
.sk-sack.zu .sk-sack-schatten{animation:skSchatten 1.1s var(--ease) .5s}
.sk-sack.fertig .sk-sack-koerper{animation:skHops .7s var(--ease)}
@keyframes skZurren{0%{transform:none}30%{transform:scale(1.05,.94)}50%{transform:scale(.95,1.04) rotate(-2deg)}70%{transform:scale(1.02,.98) rotate(2deg)}100%{transform:none}}
@keyframes skBaumeln{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.sk-sack-feld{position:absolute;left:0;right:0;top:-22%;height:62%;pointer-events:none;z-index:2}
.sk-drop{position:absolute;left:50%;top:0;width:58px;height:58px;margin-left:-29px;border-radius:14px;background:#fff;padding:5px;box-sizing:border-box;object-fit:contain;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);animation:skPlumps 1.05s cubic-bezier(.3,.9,.4,1) both}
.sk-sack-zahl{position:absolute;left:50%;bottom:16%;translate:-50% 0;z-index:3;font:700 12px var(--text);color:#fff;background:rgba(10,16,24,.55);padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px);white-space:nowrap;opacity:0;transition:opacity .3s}
.sk-sack-zahl.da{opacity:1}
@keyframes skPlumps{0%{transform:translateY(-70px) rotate(-14deg) scale(.9);opacity:0}25%{opacity:1}58%{transform:translateY(96px) rotate(4deg) scale(1)}72%{transform:translateY(84px) rotate(-2deg) scale(1.04)}100%{transform:translateY(150px) rotate(0) scale(.25);opacity:0}}
@keyframes skSack{0%{transform:none}40%{transform:scale(1.07,.9)}70%{transform:scale(.97,1.04)}100%{transform:none}}
@keyframes skSchatten{0%{transform:none}40%{transform:scaleX(1.12)}100%{transform:none}}
@keyframes skHops{0%{transform:none}30%{transform:translateY(-14px) rotate(-3deg)}60%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}
/* Flug von der Karte in die Leiste */
.sk-flug{position:fixed;z-index:60;pointer-events:none;border-radius:12px;background:#fff;object-fit:contain;padding:4px;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.sk-drop,.sk-sack *{animation:none!important}.sk-drop{display:none}}
.sk-auswahl{padding:14px 16px;border-radius:14px;border:1px solid var(--linie-d);background:rgba(255,255,255,.03)}
.sk-auswahl p{margin:0;color:var(--muted-h)}
.sk-auswahl ul{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:6px}
.sk-auswahl li{display:flex;justify-content:space-between;gap:12px}
.sk-auswahl li span{color:var(--muted-h)}
.sk-auswahl .summe{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--linie-d);font:700 18px var(--kopf)}
.sk-direkt{font-size:14.5px;color:var(--muted-h)!important}
.sk-direkt a{color:var(--text-h)}
.sk-form{display:grid;gap:10px;max-width:560px;padding:clamp(16px,2vw,22px);border-radius:16px;background:var(--paper-2);color:var(--text-d)}
.sk-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.sk-form input,.sk-form textarea{padding:9px 11px;font-size:15px;border-radius:8px}
.sk-form textarea{min-height:0}
.sk-form .sk-knopf.gross{justify-self:start}
.sk-form label small{font-weight:500;color:var(--muted-d)}
.sk-reihe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.sk-reihe{grid-template-columns:1fr}}
.sk-check{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-weight:500!important;font-size:13.5px!important;color:var(--muted-d)}
.sk-check input{width:18px!important;height:18px;margin-top:2px;accent-color:var(--blau-d);flex:0 0 auto}
.sk-honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sk-fehler{margin:0;padding:10px 12px;border-radius:9px;background:rgba(250,91,92,.12);color:#b3262b;font-size:14.5px;font-weight:600}
.sk-danke{padding:18px;border-radius:12px;background:rgba(53,161,254,.1)}
.sk-danke h3{margin:0 0 4px;font:700 22px var(--kopf)}
.sk-danke p{margin:0}
@media (max-width:900px){.sk-anfrage{grid-template-columns:1fr}.sk-anfrage-text{justify-self:start}}

/* Auswahl-Leiste unten */
.sk-leiste{position:fixed;left:50%;bottom:16px;z-index:20;translate:-50% 0;display:flex;align-items:center;gap:16px;padding:8px 8px 8px 18px;border-radius:12px;background:var(--ink);color:var(--text-h);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);font-size:14.5px;max-width:calc(100% - 32px);transition:opacity .3s,translate .4s var(--ease)}
.sk-leiste[hidden]{display:flex;opacity:0;translate:-50% 120%;pointer-events:none}
.sk-leiste b{font-weight:700}

/* Fuß */
.sk-fuss{position:relative;padding:56px var(--rand) 48px;background:var(--ink-2);color:var(--muted-h);font-size:14px}
.sk-fuss-linie{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--blau) 50%,var(--koralle) 50%)}
.sk-fuss img{width:170px;height:auto;margin-bottom:18px}
.sk-fuss p{margin:4px 0}
.sk-fuss a{color:var(--text-h)}

@media (prefers-reduced-motion:reduce){.sk *{transition:none!important;animation:none!important}}

/* Handy: Zeitraum nicht klebend, Geräte als kompakte Zeilen */
@media (max-width:640px){
  .sk-zeit{position:static}
  .sk-raster{grid-template-columns:1fr 1fr;gap:16px 12px}
  .sk-g-bild{border-radius:18px}
  .sk-g-text b{font-size:13.5px}
  .sk-g-text p{font-size:12px}
  .sk-g-fuss{font-size:11.5px;flex-wrap:wrap}
  .sk-g-haken{width:26px;height:26px}
  .sk-g:hover{transform:none}
}