/* ══ KACHEL-KARUSSELL der Drohnenseite ═════════════════════════════════════ Der durchlaufende Verlauf steht seit 23.07.2026 in /assets/fluss.css und gilt für alle Seiten. Hier bleibt nur, was der Drohnenseite gehört. Reihenfolge beim Laden: site.css → fluss.css → diese Datei. */ body.flussB .card:hover .more{gap:13px} /* ══ KACHEL-KARUSSELL nach Apple-Vorbild ═══════════════════════════════════ Kacheln laufen horizontal, am Rand angeschnitten (man SIEHT, dass es weitergeht), gleiten per Pfeil oder Wischen. Text liegt auf dem Bild. Statt Videos bewusst STANDBILDER: sechs Loops waeren ~30 MB Mehrgewicht fuer eine Sektion — die Bewegung kommt aus dem Gleiten und dem langsamen Heranzoomen beim Darueberfahren. */ .hl{position:relative;margin-top:clamp(4px,1.4vw,18px);margin-bottom:-18px} .hl{overflow:visible; /* Der Ausgleich fuer den Glow-Freiraum passiert HIER, eine Ebene ueber dem Scrollbereich — im Scrollbereich selbst wirkt der Innenabstand nicht gegen den negativen Aussenabstand (gemessen: 60px Versatz). */ /* KEIN negativer Aussenabstand: empirisch gemessen gleicht der Innenabstand der Spur bereits exakt aus (0 px Versatz). Ein zusaetzlicher Ausgleich verschiebt die Kacheln um 60 px nach links. */ margin-left:0;margin-right:0} .hl-spur{display:flex;gap:24px;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth; /* Der Scrollbereich beschneidet Schatten. Innenabstand gibt dem Neon-Schein Luft INNERHALB des Beschnitts, der negative Aussenabstand nimmt ihn optisch wieder zurueck — sonst haette der Glow eine eckige Kante. */ /* ══ APPLE-TECHNIK: Die Reihe spannt ueber die GANZE Fensterbreite ═══════ Vorher endete sie am zentrierten Inhaltsbereich (max. 1240px) — dadurch verschwanden Kacheln links UND rechts an einer unsichtbaren Wand, und die Kachelbreite rechnete gegen 1240px statt gegen das Fenster (zu klein). Jetzt: nach beiden Seiten ausbrechen, und der Innenabstand links schiebt die erste Kachel wieder exakt auf die Textkante. ((100vw - 100%) / 2) = Abstand Fensterkante -> Inhaltsrand. */ --rand:calc((100vw - 100%) / 2); margin:0 calc(-1 * var(--rand)); /* Innenabstand links = exakt der Randabstand -> erste Kachel fluchtet auf den Text. Rechts nur 54px fuer den Glow der letzten Kachel. */ padding:54px 54px 60px var(--rand); /* KEIN scroll-snap: Das Einrasten hat die Reihe beim Laden selbsttaetig um den Randabstand verschoben (gemessen 336px) — abhaengig von der Kachelgroesse, also nicht verlaesslich. Die Pfeile schieben exakt um eine Kachelbreite, das genuegt. */ scrollbar-width:none;-ms-overflow-style:none} .hl-spur::-webkit-scrollbar{display:none} .hl-kachel{position:relative;flex:0 0 clamp(320px,33vw,800px);aspect-ratio:1.55/1; display:flex;flex-direction:column; background:#ffffff;border:1px solid rgba(0,0,0,.07); border-radius:20px;overflow:hidden; isolation:isolate; /* KEIN display:block hier — es hob das display:flex zwei Zeilen darueber auf, dadurch bekam das Bild (Flex-Kind) keine Hoehe und war unsichtbar. */ transition:transform .5s var(--ease),box-shadow .5s var(--ease)} /* Text nimmt nur, was er braucht … */ .hl-inhalt{position:relative;z-index:2;padding:20px 24px 12px;display:block;flex:0 0 auto} /* … und das Bild fuellt zuverlaessig den Rest. Feste Prozenthoehen fuehrten bei zweizeiligen Ueberschriften zur Ueberlappung. */ .hl-kachel::after{content:'';flex:1 1 auto;min-height:0;display:block; margin:0 10px 10px;border-radius:13px;overflow:hidden; background-image:var(--bild);background-size:cover;background-position:center; transition:transform 1.1s var(--ease)} .hl-kachel:hover::after{transform:scale(1.04)} .hl-kachel .num{display:block;font-family:var(--fft);font-size:11px;font-weight:700; letter-spacing:.18em;color:#8a9200;margin-bottom:7px} .hl-kachel h3{font-size:clamp(17px,1.45vw,21px);font-weight:600;letter-spacing:-.02em; line-height:1.15;color:#15140e;margin-bottom:6px} .hl-kachel p{font-size:clamp(12.5px,.92vw,13.5px);line-height:1.4;color:#57544a;max-width:40ch} /* Kein Knopf mehr AUF dem Bild — er klebte als Fremdkoerper auf dem Foto. Jetzt sauber im Textbereich, wie bei Apple. */ .hl-kachel .more{display:inline-flex;align-items:center;gap:7px;margin-top:9px; font-family:var(--fft);font-size:9.5px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:#5c6a00;transition:gap .3s var(--ease),color .3s} .hl-kachel:hover .more{gap:13px} /* Pfeile unten rechts */ .hl-pfeile{display:flex;justify-content:flex-end;gap:10px;margin-top:-8px} .hl-pfeil{width:42px;height:42px;border-radius:50%;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.16);color:#15140e; font-size:17px;line-height:1;padding:0; 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} /* HELLER HOVER — die Kachel bleibt weiss (22.07.2026, Ansage Dominik: das Umkippen auf Schwarz raus). Die Bewegung kommt jetzt allein aus dem Anheben und dem langsamen Heranzoomen des Bildes; der Schatten wird tiefer und weicher, der Rand nimmt einen Hauch Lime auf. Alle Schatten-Ebenen bleiben unter 45px, damit keine gegen die Scroll- Kante laeuft (Freiraum ist 54px) — sonst wird der Schein wieder eckig. */ body.flussB .hl-kachel:hover{ transform:translateY(-6px); background:#ffffff; border-color:rgba(140,155,0,.34); box-shadow: 0 10px 22px rgba(0,0,0,.10), 0 22px 42px rgba(0,0,0,.10)} body.flussB .hl-kachel:hover h3{color:#15140e} body.flussB .hl-kachel:hover p{color:#57544a} body.flussB .hl-kachel:hover .num{color:#8a9200} body.flussB .hl-kachel:hover .more{color:#5c6a00} @media(max-width:680px){ .hl-kachel{flex:0 0 86%} .hl-pfeile{justify-content:center} } /* Sicherheitsnetz: Die Sektionsregel „obere Haelfte = helle Schrift" darf die Kacheln NICHT erwischen — sie haben ihre eigene helle Flaeche. */ body.flussB .hl-kachel h3{color:#15140e} body.flussB .hl-kachel p{color:#57544a} /* Beim Darueberfahren bleibt die Kachel hell — die Schrift also auch. */ body.flussB .hl-kachel:hover h3{color:#15140e} body.flussB .hl-kachel:hover p{color:#57544a}