/* ══════════════════════════════════════════════════════════════════════════
   KACHEL-KARUSSELL — herausgelöst aus der Drohnenseite, 1:1 identisch.
   Zusammengeführt aus _entwurf_drohnen_apple.css + drohnenaufnahmen/inhalt.css,
   aber selbsttragend (ohne body.flussB, ohne fluss.css). Nutzung:
     <link rel="stylesheet" href="/assets/karussell.css">
   Erwartet --ease, --fft, --acc im :root; --ton je Kachel inline.
   24.07.2026
   ══════════════════════════════════════════════════════════════════════════ */
.hl{position:relative;margin-top:clamp(4px,1.4vw,18px);margin-bottom:-18px;overflow:visible;margin-left:0;margin-right:0}
.hl-spur{display:flex;gap:24px;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;
  --rand:calc((100vw - 100%) / 2);margin:0 calc(-1 * var(--rand));padding:54px 54px 60px var(--rand);
  scrollbar-width:none;-ms-overflow-style:none}
.hl-spur::-webkit-scrollbar{display:none}

/* getönte, große Kachel — Text oben, Bild unten */
.hl-kachel{position:relative;flex:0 0 clamp(340px,44vw,980px);aspect-ratio:1.42/1;
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;isolation:isolate;
  background:color-mix(in srgb,var(--ton,#8a9200) 9%,#ffffff);
  border:1px solid color-mix(in srgb,var(--ton,#8a9200) 16%,transparent);box-shadow:none;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease)}
.hl-kachel:hover{transform:translateY(-8px);
  background:color-mix(in srgb,var(--ton,#8a9200) 15%,#ffffff);
  border-color:color-mix(in srgb,var(--ton) 42%,transparent);
  box-shadow:0 20px 46px color-mix(in srgb,var(--ton) 22%,transparent)}

.hl-inhalt{position:relative;z-index:2;padding:18px 24px 10px;display:block;flex:0 0 auto}
.hl-kachel .num{display:block;font-family:var(--fft);font-size:var(--t7);font-weight:700;letter-spacing:.18em;
  color:var(--ton,#8a9200);margin-bottom:7px;transition:color .4s var(--ease)}
.hl-kachel h3{font-size:var(--t3);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:#15140e;margin-bottom:4px}
.hl-kachel p{font-size:var(--t6);line-height:1.4;color:#57544a;max-width:40ch;margin-bottom:0}

/* Bildbereich füllt den Rest, Standbild + Videoschleife beim Hover */
.hl-bild{position:relative;display:block;flex:1 1 auto;min-height:0;margin:0 10px 10px;border-radius:13px;overflow:hidden;background:#0b0908}
.hl-bild img,.hl-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hl-bild img{transition:transform 1.2s var(--ease)}
.hl-bild video{opacity:0;transition:opacity .55s var(--ease)}
.hl-kachel:hover .hl-bild img{transform:scale(1.05)}
.hl-kachel:hover .hl-bild video{opacity:1}

/* Pillen-Knopf im Ton der Kachel */
.hl-kachel .pille{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;padding:9px 18px;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--ton,#15140e) 45%,#15140e);background:transparent;color:#15140e;
  font-family:var(--fft);font-size:var(--t7);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.hl-kachel:hover .pille{background:#15140e;border-color:#15140e;color:#fff}

/* Pfeile unten rechts */
.hl-pfeile{display:flex;justify-content:flex-end;gap:10px;margin-top:-8px}
.hl-pfeil{width:44px;height:44px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.14);color:#15140e;font-size:var(--t4);line-height:1;padding:0;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(0,0,0,.1);
  transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.hl-pfeil:hover{background:#15140e;border-color:#15140e;color:#fff;transform:translateY(-2px)}
.hl-pfeil:disabled{opacity:.3;cursor:default;transform:none}
.hl-pfeil:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

@media(max-width:680px){.hl-kachel{flex:0 0 86%;aspect-ratio:1.25/1}.hl-pfeile{justify-content:center}}