/* Variante B – geometrischer dunkler Hero + Bento 2-1/1-2. Nur CSS, keine Abhaengigkeiten. */
.geo{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#07080c;color:var(--on-dark);text-align:center;padding:calc(72px + 40px) 0 80px}
.geo-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 20% 20%,rgba(36,87,231,.16),transparent 70%),radial-gradient(50% 50% at 85% 80%,rgba(255,110,140,.10),transparent 70%)}
.shape{position:absolute;display:block;border-radius:999px;border:2px solid rgba(255,255,255,.14);box-shadow:0 8px 32px rgba(255,255,255,.08);backdrop-filter:blur(2px);opacity:0;
  background:linear-gradient(90deg,var(--c,rgba(255,255,255,.08)),transparent);animation:shape-in 2.4s cubic-bezier(.23,.86,.39,.96) forwards,float 12s ease-in-out infinite 2.4s}
.shape::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 70%)}
.s1{--c:rgba(99,102,241,.22);width:600px;height:140px;left:-8%;top:18%;--r:12deg;animation-delay:.3s,2.7s}
.s2{--c:rgba(244,114,182,.18);width:500px;height:120px;right:-6%;top:70%;--r:-15deg;animation-delay:.5s,2.9s}
.s3{--c:rgba(139,92,246,.18);width:300px;height:80px;left:6%;bottom:8%;--r:-8deg;animation-delay:.4s,2.8s}
.s4{--c:rgba(36,87,231,.22);width:200px;height:60px;right:16%;top:12%;--r:20deg;animation-delay:.6s,3s}
.s5{--c:rgba(56,189,248,.16);width:150px;height:40px;left:22%;top:8%;--r:-25deg;animation-delay:.7s,3.1s}
@keyframes shape-in{from{opacity:0;transform:translateY(-150px) rotate(calc(var(--r) - 15deg))}to{opacity:1;transform:translateY(0) rotate(var(--r))}}
@keyframes float{50%{transform:translateY(15px) rotate(var(--r))}}
.geo-in{position:relative;z-index:1;max-width:980px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:100px;font-size:14px;font-weight:600;letter-spacing:.02em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--on-dark-2)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 4px rgba(108,140,255,.25)}
.badge.dark{background:var(--surface);border-color:var(--line);color:var(--ink)}.badge.dark i{background:var(--accent);box-shadow:0 0 0 4px rgba(36,87,231,.15)}
.geo h1{margin:26px auto 0;font-size:clamp(30px,9.6vw,112px);line-height:1.02;letter-spacing:-.045em;color:#fff;text-wrap:balance;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.geo h1 em{font-style:normal;background:linear-gradient(90deg,#c7d2fe,#fff 45%,#fbcfe8);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.geo .intro{max-width:640px;margin:26px auto 0;font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--on-dark-2)}
.geo .acts{display:flex;gap:26px;align-items:center;justify-content:center;margin-top:36px;flex-wrap:wrap}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:#e9ecf5}
.geo-stats{display:flex;gap:clamp(24px,5vw,64px);justify-content:center;margin-top:clamp(40px,7vw,72px);flex-wrap:wrap}
.geo-stats div{text-align:left;min-width:150px}
.geo-stats b{display:block;font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;color:#fff}
.geo-stats span{font-size:14px;color:var(--on-dark-2)}
.geo-fade{position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(to top,#07080c,transparent);pointer-events:none}
/* gestaffeltes Einblenden (kein Split, keine Clipping-Kinder: iOS-sicher) */
.fade{opacity:0;transform:translateY(30px);animation:fadeup 1s cubic-bezier(.25,.4,.25,1) forwards}
.fade.d0{animation-delay:.5s}.fade.d1{animation-delay:.7s}.fade.d2{animation-delay:.9s}.fade.d3{animation-delay:1.1s}.fade.d4{animation-delay:1.3s}
@keyframes fadeup{to{opacity:1;transform:none}}
/* Marquee direkt unter dem dunklen Hero ohne Abstand */
.geo + .marquee{margin-top:0}
/* Bento 2-1 / 1-2 */
.bento2{padding:var(--sp) 0;background:var(--bg)}
.bento2 .lead .badge{margin-bottom:14px}
.b2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{position:relative;background:var(--surface);border-radius:var(--r);padding:clamp(22px,3vw,32px);min-height:320px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.10)}
.tile.wide{grid-column:span 2}
.tile .ico{width:36px;height:36px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile h3{margin-bottom:8px}.tile p{color:var(--muted);max-width:44ch;font-size:17px}
.tile .tlink{margin-top:12px}
.tile-art{position:absolute;right:-12%;bottom:-18%;width:55%;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.18);transform:rotate(-4deg);opacity:.95}
.tile.wide>div{max-width:52%}
.tile.dark{background:linear-gradient(135deg,var(--dark),#1b2540);color:var(--on-dark)}
.tile.dark p{color:var(--on-dark-2)}.tile.dark .ico{stroke:var(--accent-2)}.tile.dark h3{color:#fff}
@media(max-width:1024px){.b2-grid{grid-template-columns:1fr 1fr}.tile.wide{grid-column:span 2}}
@media(max-width:640px){.b2-grid{grid-template-columns:1fr}.tile.wide{grid-column:span 1}.tile.wide>div{max-width:100%}.tile-art{position:static;width:100%;transform:none;margin-top:8px}.tile{min-height:0}.geo{min-height:0;padding-top:calc(72px + 56px)}.geo-stats div{min-width:120px}.shape{transform:scale(.6)}}
@media(prefers-reduced-motion:reduce){.shape,.fade{animation:none!important;opacity:1!important;transform:none!important}.shape{transform:rotate(var(--r))!important}}