fix: Hero-Chevron als clip-path statt separatem Element

clip-path auf der Hero-Section selbst schneidet sauber spitz ab,
kein separates SVG-Element mehr. Video, Overlay und Content
werden alle gleichmässig abgeschnitten.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-06 19:39:47 +02:00
Ursprung 4e2d78ee1e
Commit d61dcf49d3
2 geänderte Dateien mit 1 neuen und 7 gelöschten Zeilen

Datei anzeigen

@@ -61,7 +61,7 @@ a { color:inherit; text-decoration:none; }
.mobile-overlay.open { opacity:1; pointer-events:all; }
/* ==================== HERO ==================== */
.hero { position:relative; min-height:88vh; display:flex; align-items:center; padding-top:var(--nav-height); overflow:hidden; background:var(--navy); }
.hero { position:relative; min-height:88vh; display:flex; align-items:center; padding-top:var(--nav-height); overflow:hidden; background:var(--navy); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px)); margin-bottom:-60px; z-index:1; }
.hero-video-container { position:absolute; inset:0; z-index:0; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 3s ease; }
@@ -101,7 +101,6 @@ a { color:inherit; text-decoration:none; }
.divider svg { display:block; width:100%; height:auto; }
.divider-chevron { background:var(--alt-solid); }
.divider-chevron-dark { background:var(--navy); }
.divider-chevron-into-hero { margin-top:-100px; position:relative; z-index:3; }
.divider-diagonal { background:var(--base); }
.divider-diagonal-dark { background:var(--base); }
.divider-gradient-alt-to-base { height:40px; background:linear-gradient(to bottom, var(--alt-solid), var(--base)); }

Datei anzeigen

@@ -107,11 +107,6 @@ n <!-- Chevron: Hero -> Problem -->
<svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,0 L720,60 L1440,0 Z" fill="#0A1832" /><rect y="0" width="1440" height="1" fill="#1a2d4a" opacity="0.3"/></svg>
</div>
<!-- Chevron: Hero -> Problem -->
<div class="divider divider-chevron-into-hero">
<svg viewBox="0 0 1440 100" preserveAspectRatio="none"><path d="M0,100 L720,0 L1440,100 Z" fill="#0A1832"/></svg>
</div>
<!-- Problem Statement (dark) -->
<section class="section section-dark" id="problem">
<div class="container">