@font-face{font-family:"Syne";src:url(../fonts/syne.woff2) format("woff2");font-weight:400 800;font-display:swap}
/* Video & Motion: dunkel und filmisch, ganze Blau-Palette. Die Bilder und Videos stehen im Vordergrund. */
.film{
  --nacht:#0A1426;    /* Mitternacht: Grund */
  --marine:#13294B;   /* Marineblau: Flächen */
  --saphir:#1F5FBF;   /* Saphir: Akzent */
  --aqua:#4FB3C8;     /* Aqua: Hover, Fokus */
  --baby:#BFE0F5;     /* Babyblau: leise Schrift */
  --weiss:#F5F8FC;
  --syne:"Syne",var(--text);
  --akzent-nav:var(--aqua);--mg-hover:var(--nacht);
  --rand:rgba(191,224,245,.16);
  background:var(--nacht);color:var(--weiss);--line:var(--rand);
}
.film :focus-visible{outline-color:var(--aqua)}
.film em{font-style:normal;color:var(--aqua)}

/* Leichtes Filmkorn über der ganzen Seite */
.korn{position:fixed;inset:-50%;z-index:70;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:korn 1s steps(6) infinite}
@keyframes korn{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* Kopf liegt über der Geschichte */
.f-kopf{position:absolute;z-index:20;left:0;right:0;top:0;padding:18px var(--pad)}

/* 1. Geschichte. Ohne Bewegung: Sätze untereinander auf dem ersten Bild */
.g-buehne{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center;padding:96px var(--pad) 64px}
.g-medien{position:absolute;inset:0}
.g-medium{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-medien::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,rgba(10,20,38,.35),rgba(10,20,38,.85)),linear-gradient(180deg,rgba(10,20,38,.55),transparent 30%,transparent 70%,var(--nacht))}
.g-jahr{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--syne);font-weight:800;font-size:clamp(8rem,34vw,34rem);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(191,224,245,.42);white-space:nowrap;pointer-events:none}
.g-jahr span{grid-area:1/1;text-align:center}
.g-jahr-b{opacity:0}
.g-saetze{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:28px;max-width:20ch;text-align:center;font-family:var(--syne);font-weight:700;font-size:clamp(2rem,5.2vw,4.75rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.g-schlag{display:inline-block}
.g-schlag:nth-child(2){color:var(--baby)}
.g-schlag:nth-child(3){color:var(--aqua)}
.g-hinweis{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:.8125rem;color:var(--baby);letter-spacing:.02em}
.g-hinweis::after{content:"";display:block;width:1px;height:36px;margin:10px auto 0;background:linear-gradient(var(--baby),transparent);animation:hinweis 1.8s var(--ease-out) infinite;transform-origin:top}
@keyframes hinweis{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* Mit Bewegung: alles übereinander, GSAP blendet Satz für Satz */
.bewegt .g-medium+.g-medium{opacity:0;visibility:hidden}
.bewegt .g-saetze{position:absolute;inset:0;display:block;max-width:none}
/* Zentriert ohne CSS-transform, damit GSAP die Verschiebung frei animieren kann */
.bewegt .g-satz{position:absolute;inset:0;display:grid;place-content:center;padding-inline:max(var(--pad),calc((100% - 20ch)/2))}
.bewegt .g-satz+.g-satz{opacity:0;visibility:hidden}

/* Hobby: ruhig, eine Zeile */
.hobby{padding:clamp(96px,14vw,200px) var(--pad);display:grid;place-items:center}
.hobby p{max-width:34ch;text-align:center;font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.5;color:var(--baby);text-wrap:balance}

/* 2. Projekte als Index */
.projekte{padding:0 var(--pad) clamp(96px,12vw,160px)}
.p-kopf{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.p-titel-gross{font-family:var(--syne);font-weight:800;font-size:clamp(3rem,10vw,9rem);line-height:.85;letter-spacing:-.04em}
.filter{display:flex;gap:24px}
.filter button{position:relative;border:0;background:none;min-height:44px;padding:8px 0;font:500 1.0625rem/1 var(--text);color:var(--baby);cursor:pointer;transition:color .2s ease}
.filter button::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--aqua);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease-out)}
.filter button[aria-pressed="true"]{color:var(--weiss)}
.filter button[aria-pressed="true"]::after{transform:scaleX(1)}
.p-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--rand)}
.p-liste li{border-bottom:1px solid var(--rand);transition:opacity .35s ease}
.p-liste li[hidden]{display:none}
.p-zeile{display:grid;grid-template-columns:56px 1fr auto 80px;align-items:baseline;gap:16px;width:100%;padding:clamp(18px,2.4vw,30px) 0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.p-nr{font-size:.875rem;color:var(--baby);font-variant-numeric:tabular-nums}
.p-name{font-family:var(--syne);font-weight:700;font-size:clamp(1.75rem,5vw,4.5rem);line-height:1;letter-spacing:-.02em;transition:transform .5s var(--ease-out),color .3s ease}
.p-art,.p-stand{font-size:.9375rem;color:var(--baby)}
.p-stand{text-align:right}
.p-mobil{display:none}
.p-text{display:none}
@media (hover:hover) and (pointer:fine){
  .p-liste:hover li:not(:hover){opacity:.35}
  .p-zeile:hover .p-name{transform:translateX(18px);color:var(--aqua)}
  .p-zeile{cursor:none}
}
/* Vorschau folgt der Maus */
.p-vorschau{position:fixed;left:0;top:0;z-index:40;width:clamp(240px,24vw,380px);aspect-ratio:16/10;overflow:hidden;border-radius:4px;pointer-events:none;opacity:0;transform:scale(.8)}
.p-vorschau img{width:100%;height:100%;object-fit:cover;object-position:50% 64%}

/* Großansicht */
.p-gross{position:fixed;inset:0;z-index:80;background:var(--nacht);display:grid;grid-template-rows:1fr auto}
.p-gross[hidden]{display:none}
.pg-medium{position:relative;overflow:hidden}
.pg-medium img,.pg-medium video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-medium::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,var(--nacht))}
.pg-info{padding:0 var(--pad) clamp(28px,4vw,48px);margin-top:-80px;position:relative;max-width:900px}
.pg-art{color:var(--aqua);font-size:.9375rem;margin-bottom:6px}
.pg-info h3{font-family:var(--syne);font-weight:800;font-size:clamp(2.5rem,7vw,6rem);line-height:.9;letter-spacing:-.03em;margin-bottom:14px}
.pg-text{color:var(--baby);font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.6;max-width:52ch}
.pg-zu{position:absolute;top:20px;right:var(--pad);min-height:44px;padding:0 20px;border:1px solid var(--rand);border-radius:2px;background:rgba(10,20,38,.6);color:var(--weiss);font:600 .9375rem/1 var(--text);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.pg-zu:hover{border-color:var(--aqua);background:var(--marine)}

/* 3. Abschluss */
.schluss{padding:clamp(96px,12vw,180px) var(--pad);text-align:center;background:linear-gradient(180deg,var(--nacht),var(--marine))}
.schluss h2{font-family:var(--syne);font-weight:800;font-size:clamp(2.5rem,7vw,6.5rem);line-height:.95;letter-spacing:-.03em;margin-bottom:40px;text-wrap:balance}
.s-links{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}
.s-knopf{position:relative;display:inline-block;overflow:hidden;padding:18px 32px;background:var(--saphir);color:var(--weiss);border-radius:2px;font-weight:600;text-decoration:none;isolation:isolate}
.s-knopf::before{content:"";position:absolute;inset:0;z-index:-1;background:#164A96;transform:scaleY(0);transform-origin:bottom center;transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.s-knopf:hover::before{transform:scaleY(1)}}
.s-weiter{color:var(--baby);font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding:6px 0}
.film .footer{border-top-color:var(--rand);color:var(--baby);background:var(--marine)}

@media (max-width:700px){
  .p-zeile{grid-template-columns:36px 1fr auto;row-gap:12px}
  .p-stand{display:none}
  .p-mobil{display:block;grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 64%;border-radius:4px}
}
@media (prefers-reduced-motion:reduce){
  .korn,.g-hinweis::after{animation:none}
}