/* ============================================================
Portfolio NEU (Entwurf, portfolio-neu/index.php), Fassung 5
Strenge Hierarchie:
Ebene 1 H1 im Einstieg
Ebene 2 Projektname je Kapitel (H2), daneben EIN Bild, EINE Aktion
Ebene 3 Kartennamen im Raster
Ebene 4 Beschriftungen in Plex Mono
Eine durchgehende Flaeche: Die Hintergrundfarbe blendet beim Scrollen
weich in die Markenfarbe des aktiven Kapitels (--pn-hg auf ,
gesetzt vom Skript); die Kopfleiste nimmt den Farbton mit.
Kapitelfarben im Markup: --pn-grund / --pn-akzent / --pn-schrift.
Scroll-Position je Kapitel: --p (0..1), daraus --p-auf und --p-schirm.
============================================================ */
.pn {
--pn-s1: 8px;
--pn-s2: 16px;
--pn-s3: 24px;
--pn-s4: 40px;
--pn-s5: 64px;
--pn-s6: clamp(72px, 9vw, 120px);
/* Kapitel duerfen breiter als .wrap sein, sonst wirken sie auf grossen
Schirmen verloren; rechts mindestens Platz fuer die Kontaktleiste */
--pn-breite: 1320px;
--pn-rand-l: max(104px, calc((100vw - var(--pn-breite)) / 2)); /* Platz fuer die Kapitel-Spur links */
--pn-rand-r: max(110px, calc((100vw - var(--pn-breite)) / 2));
position: relative;
background-color: var(--pn-hg, var(--dark));
transition: background-color 0.9s ease;
}
.pn > * { position: relative; z-index: 1; }
/* waehrend der Einstieg scrollgebunden mischt: Flaeche ohne Verzoegerung,
sonst liefe sie dem Saum am Sektionsende hinterher (Kante) */
html.pn-mischt .pn { transition: none; }
/* Feines Korn ueber der ganzen Seite: loest die Farbstufen (Banding) der
dunklen Verlaeufe auf. Fest im Fenster, eigene Ebene, malt beim
Scrollen nicht neu */
.pn::before {
content: "";
position: fixed;
inset: 0;
z-index: 2;
opacity: 0.06;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
transform: translateZ(0);
}
/* Gemeinsame Mono-Beschriftung (Ebene 4) */
.pn-start__kicker,
.pn-start__zahlen dt,
.pn-start__weiter span,
.pn-fall__meta {
font-family: var(--font-mono);
font-weight: 500;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ---------- Kopfleiste auf dieser Seite ----------
Ueber den dunklen Bereichen dunkles Glas im Farbton des Kapitels, der
Button zurueckgenommen, damit er nicht mit der Kapitelfarbe konkurriert.
Die Klasse pn-nav setzt das Skript, ueber hellen Bereichen nicht. */
.nav.pn-nav .nav__inner,
.nav.pn-nav.is-scrolled .nav__inner {
background: color-mix(in srgb, var(--pn-hg, #0a1322) 78%, transparent);
border-color: color-mix(in srgb, var(--pn-ak, #3fd6e8) 24%, rgba(255, 255, 255, 0.06));
box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
/* deckend statt Glas: backdrop-filter kostet bei jedem Scrollbild */
background: color-mix(in srgb, var(--pn-hg, #0a1322) 94%, #000);
-webkit-backdrop-filter: none;
backdrop-filter: none;
transition: background-color 0.9s ease, border-color 0.9s ease;
}
.nav.pn-nav .nav__inner::before { opacity: 0.35; }
.nav.pn-nav .btn--primary {
background: transparent;
border: 1px solid color-mix(in srgb, var(--pn-ak, #3fd6e8) 55%, transparent);
color: #fff;
box-shadow: none;
}
.nav.pn-nav .btn--primary:hover {
background: var(--pn-ak, #3fd6e8);
border-color: var(--pn-ak, #3fd6e8);
color: var(--pn-hg, #0a1322);
}
/* ---------- Feste Bedienelemente in der Kapitelfarbe ----------
Kontaktleiste, Chat, "Nach oben" und die Scrollleiste des Fensters nehmen
die Farben des aktiven Kapitels mit (--pn-hg / --pn-ak setzt das Skript
auf , die Klasse pn-seite ebenfalls). */
/* Fenster-Scrollleiste: die Farben setzt das Skript direkt als
scrollbar-color auf (Browser malen sie sonst nicht neu) */
html.pn-seite::-webkit-scrollbar-track { background: var(--pn-hg, #0d1930); }
html.pn-seite::-webkit-scrollbar-thumb { background: var(--pn-ak, #2fa3ba); border-color: var(--pn-hg, #0d1930); }
/* Fortschrittslinie oben in der Kapitelfarbe */
html.pn-seite .scrollbeam i {
background: linear-gradient(90deg, color-mix(in srgb, var(--pn-ak, #3fd6e8) 55%, #2f4d9e), var(--pn-ak, #3fd6e8));
box-shadow: 0 0 12px color-mix(in srgb, var(--pn-ak, #3fd6e8) 75%, transparent), 0 0 4px var(--pn-ak, #3fd6e8);
transition: background 0.9s ease, box-shadow 0.9s ease;
}
html.pn-seite .rail__btn {
background: color-mix(in srgb, var(--pn-hg, #0a1426) 94%, #000);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-color: color-mix(in srgb, var(--pn-ak, #3fd6e8) 38%, transparent);
color: var(--pn-ak, #9fdceb);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.9s ease, border-color 0.9s ease, color 0.9s ease, box-shadow 0.3s ease;
}
html.pn-seite .rail__btn:hover { border-color: var(--pn-ak, #3fd6e8); color: #fff; }
html.pn-seite .rail__btn::after { border-color: var(--pn-ak, #3fd6e8); }
html.pn-seite .rail__btn--cta,
html.pn-seite .totop,
html.pn-seite .chatknopf {
background: var(--pn-ak, #2fa3ba);
border-color: transparent;
color: var(--pn-hg, #0a1426);
box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--pn-ak, #2fa3ba) 70%, transparent);
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.9s ease, color 0.9s ease, box-shadow 0.3s ease;
}
html.pn-seite .rail__label { border-color: color-mix(in srgb, var(--pn-ak, #3fd6e8) 38%, transparent); background: color-mix(in srgb, var(--pn-hg, #0a1426) 92%, transparent); }
@media (max-width: 1340px) {
html.pn-seite .rail {
background: color-mix(in srgb, var(--pn-hg, #0a1426) 78%, transparent);
border-color: color-mix(in srgb, var(--pn-ak, #7fd0e0) 30%, transparent);
transition: background-color 0.9s ease, border-color 0.9s ease;
}
}
/* ---------- Einstieg ----------
Ruhig: links die Aussage, rechts ein grosser Monitor (wie in den Kapiteln).
Darin laufen nacheinander die drei Vorzeige-Projekte: Die Seite faehrt
von oben nach unten durch, dann blendet die naechste ueber (reines CSS,
Takt 21 s, je Projekt 7 s ueber --n). Darunter wechselt "Live auf ...".
Der Einstieg fuellt genau ein Fenster: Inhalt mittig, das erste Kapitel
beginnt erst unterhalb des sichtbaren Bereichs. */
.pn-start {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
min-height: 100svh;
padding: clamp(88px, 13vh, 110px) 0 clamp(20px, 4vh, 48px);
background: radial-gradient(55% 60% at 85% 0%, rgba(47, 163, 186, 0.16), transparent 70%);
color: #fff;
}
.pn-start__inhalt {
width: 100%;
max-width: var(--pn-breite);
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: center;
gap: clamp(32px, 5vw, 88px);
}
.pn-start__links { container-type: inline-size; min-width: 0; }
.pn-start__kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--pn-s3); color: #7fe1f0; }
.pn-start__live {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 10px 5px 9px;
border-radius: 6px;
background: rgba(61, 220, 132, 0.12);
box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.35);
color: #3ddc84;
}
.pn-start__live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pn-sendepunkt 1.6s ease-in-out infinite; }
@keyframes pn-sendepunkt { 50% { opacity: 0.25; transform: scale(0.7); } }
@keyframes pn-ein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pn-start__titel {
margin: 0;
font-weight: 850;
font-stretch: 112%;
/* nach Spaltenbreite UND Fensterhoehe: passt auch auf flache Bildschirme */
font-size: clamp(40px, min(15cqi, 11.5vh), 124px);
line-height: 0.9;
letter-spacing: -0.05em;
color: #fff;
word-break: keep-all;
hyphens: none;
}
.pn-start__titel em {
font-style: normal;
background: linear-gradient(100deg, #7fe1f0, var(--teal) 50%, #6f8ee6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 0.08em;
margin-right: -0.08em;
}
/* Luft rechts (mit Gegenrand, damit nichts verrutscht): bei der engen
Laufweite ragt der letzte Buchstabe ueber den Kasten und wurde von
overflow bzw. vom Farbverlauf (background-clip) abgeschnitten */
.pn-zeile { display: block; width: fit-content; overflow: hidden; padding: 0 0.1em 0.08em 0; margin-right: -0.1em; }
.pn-zeile > span { display: inline-block; animation: pn-hoch 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pn-zeile:nth-child(2) > span { animation-delay: 0.08s; }
.pn-zeile:nth-child(3) > span { animation-delay: 0.16s; }
@keyframes pn-hoch { from { transform: translateY(105%); } to { transform: none; } }
.pn-start__text { max-width: 460px; margin: clamp(16px, 3.6vh, 40px) 0 0; font-size: 18px; line-height: 1.6; color: var(--dark-text); animation: pn-ein 0.8s ease 0.3s both; }
.pn-start__zahlen {
display: flex;
gap: var(--pn-s4);
margin: clamp(16px, 3.6vh, 40px) 0 0;
padding-top: clamp(12px, 2.4vh, 24px);
border-top: 1px solid var(--dark-line);
animation: pn-ein 0.8s ease 0.4s both;
}
.pn-start__zahlen div { display: flex; flex-direction: column-reverse; gap: 6px; }
.pn-start__zahlen dt { color: var(--dark-text); }
.pn-start__zahlen dd { margin: 0; font-weight: 750; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.pn-start__weiter {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 52px;
margin-top: clamp(16px, 3.6vh, 40px);
padding: 14px 26px;
border-radius: 999px;
background: #7fe1f0;
color: #06121c;
font-weight: 750;
font-size: 16px;
white-space: nowrap;
text-decoration: none;
animation: pn-ein 0.8s ease 0.5s both;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pn-start__weiter span { transition: transform 0.3s ease; }
.pn-start__weiter:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px #7fe1f0; }
.pn-start__weiter:hover span { transform: translateY(3px); }
.pn-start__weiter:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Monitor rechts */
.pn-start__monitor {
position: relative;
/* Breite so begrenzen, dass Monitor, Fuss und Zeile in die Fensterhoehe passen */
width: 100%;
max-width: calc((100svh - 200px) / 0.78);
justify-self: end;
animation: pn-ein 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}
.pn-start__monitor .pn-display { --pn-akzent: #3fd6e8; }
.pn-start__schirm { aspect-ratio: 16 / 10; border-radius: 9px; }
.pn-start__folie {
position: absolute;
inset: 0;
opacity: 0;
animation: pn-start-folie 21s linear infinite;
/* um die Einblendzeit (3 % von 21 s) vorgezogen: die erste Folie steht
ab dem ersten Bild, nichts blendet beim Laden erst auf */
animation-delay: calc(var(--n) * 7s - 0.63s);
}
/* 1/3 des Takts sichtbar, weich ueberblenden */
@keyframes pn-start-folie {
0% { opacity: 0; }
3% { opacity: 1; }
33.3% { opacity: 1; }
36.3%, 100% { opacity: 0; }
}
.pn-start__folie img {
display: block;
width: 100%;
height: auto;
will-change: transform;
animation: pn-start-fahrt 21s cubic-bezier(0.45, 0, 0.25, 1) infinite;
animation-delay: calc(var(--n) * 7s - 0.63s);
}
/* Bild ist 1280 x 4444, Schirm 16:10: 82 % der Bildhoehe sind Fahrweg */
@keyframes pn-start-fahrt {
0%, 9% { transform: translate3d(0, 0, 0); } /* Hero der Seite ca. 2 s stehen lassen */
31%, 100% { transform: translate3d(0, -60%, 0); }
}
.pn-start__monitor .pn-display__live { position: relative; }
.pn-start__adresse { display: inline-grid; }
.pn-start__adresse b { grid-area: 1 / 1; opacity: 0; animation: pn-start-folie 21s linear infinite; animation-delay: calc(var(--n) * 7s - 0.63s); }
.pn-start.ist-aus .pn-start__folie,
.pn-start.ist-aus .pn-start__folie img,
.pn-start.ist-aus .pn-start__adresse b { animation-play-state: paused; }
/* ---------- Kapitel ----------
Ein Kapitel = eine gepinnte Szene, alles aus --p (0..1):
0.00-0.12 Fenster richtet sich auf, Titel deckt sich auf (--p-auf)
0.05-0.56 die Live-Seite faehrt durch, ruhig (--p-schirm;
Bahn 380vh, also gut 1,4 Fensterhoehen Scrollweg)
Ab ca. 0.6 schiebt sich das naechste Kapitel wie ein Blatt darueber
(negativer Abstand von einer Fensterhoehe), die Szene bleibt dabei
stehen. So gibt es zwischen den Kapiteln keinen Leerraum. */
.pn-fall {
--p: 0;
--p-auf: min(var(--p) * 8, 1);
--p-schirm: clamp(0, (var(--p) - 0.05) / 0.51, 1);
color: var(--pn-schrift);
}
.pn-fall__bahn { position: relative; height: 380vh; }
.pn-fall + .pn-fall,
.pn-fall + .pn-weitere-bahn { margin-top: -100vh; }
.pn-fall__buehne {
position: sticky;
top: 0;
display: grid;
grid-template-columns: minmax(280px, 5fr) 7fr;
align-items: center;
gap: var(--pn-s5);
height: 100vh;
height: 100svh;
padding: 110px var(--pn-rand-r) var(--pn-s4) var(--pn-rand-l);
overflow: hidden;
/* Lichtfront statt Blatt im Stapel: die Kapitelfarbe kommt von oben
als weicher Verlauf herein (ueber 45 % der Fensterhoehe, mit
Zwischenstufen gegen Farbstufen), das alte Kapitel scheint darunter
durch und tritt zurueck (--q, siehe unten) */
background:
radial-gradient(80% 60% at 75% 45%, color-mix(in srgb, var(--pn-akzent) 9%, transparent), transparent 70%),
linear-gradient(180deg,
transparent,
color-mix(in srgb, var(--pn-grund) 10%, transparent) calc(var(--saum) * 0.2),
color-mix(in srgb, var(--pn-grund) 32%, transparent) calc(var(--saum) * 0.4),
color-mix(in srgb, var(--pn-grund) 62%, transparent) calc(var(--saum) * 0.62),
color-mix(in srgb, var(--pn-grund) 88%, transparent) calc(var(--saum) * 0.82),
var(--pn-grund) var(--saum));
/* Saum schrumpft auf den letzten Metern (--ein 0..1, Skript): steht das
Kapitel oben, ist es ganz deckend und vom alten nichts mehr zu sehen */
--saum: calc(min(1, (1 - var(--ein, 0)) * 2) * 45vh);
}
/* Horizont: an der Lichtfront glimmt die Akzentfarbe des neuen Kapitels
auf und verlischt, sobald das Kapitel steht (--p-auf) */
.pn-fall__buehne::after {
content: "";
position: absolute;
left: -10%;
right: -10%;
top: 0;
height: 46vh;
background:
radial-gradient(50% 38% at 50% 46%, color-mix(in srgb, var(--pn-akzent) 26%, transparent), transparent 100%),
radial-gradient(90% 30% at 50% 44%, color-mix(in srgb, var(--pn-akzent) 10%, transparent), transparent 100%);
opacity: min(1, (1 - var(--ein, 0)) * 2.5);
pointer-events: none;
}
.pn-leiste + .pn-fall .pn-fall__buehne::after { display: none; }
/* Das alte Kapitel tritt zurueck, waehrend das naechste hereinkommt:
leicht kleiner und dunkler, wie aus dem Fokus genommen (--q 0..1) */
.pn-fall__text,
.pn-szene {
scale: calc(1 - var(--q, 0) * 0.06);
opacity: calc(1 - var(--q, 0) * 1.3);
}
/* Erstes Kapitel: ohne Rundung und Schatten, es geht nahtlos aus dem
Einstieg hervor */
.pn-leiste + .pn-fall .pn-fall__buehne {
border-radius: 0;
box-shadow: none;
/* oben durchsichtig: der Einstieg laeuft ohne sichtbare Grenze hinein */
background:
linear-gradient(180deg, transparent, var(--pn-grund) 240px),
radial-gradient(80% 60% at 75% 45%, color-mix(in srgb, var(--pn-akzent) 9%, transparent), transparent 70%);
}
/* Ein einziges Licht in der Kapitelfarbe, hinter dem Browserfenster */
.pn-fall__buehne::before {
content: "";
position: absolute;
right: 4%;
top: 12%;
width: 66%;
height: 76%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--pn-akzent) 24%, transparent), transparent);
opacity: calc(0.4 + var(--p-auf) * 0.6);
pointer-events: none;
}
.pn-fall__text { position: relative; z-index: 3; max-width: 480px; container-type: inline-size; }
.pn-fall__meta { margin: 0 0 var(--pn-s2); color: var(--pn-akzent); }
.pn-fall__titel {
margin: 0;
font-weight: 850;
font-stretch: 108%;
font-size: clamp(36px, 13.5cqi, 84px);
line-height: 0.95;
letter-spacing: -0.035em;
color: var(--pn-schrift);
overflow-wrap: normal;
word-break: keep-all;
hyphens: none;
}
/* Titel wortweise von unten, sobald das Kapitel erreicht ist */
.pn-wort { display: inline-block; overflow: hidden; padding-bottom: 0.08em; vertical-align: top; }
.pn-wort > span { display: inline-block; transform: translateY(105%); }
.pn-fall.ist-da .pn-wort > span {
transform: none;
transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: calc(var(--k) * 0.08s);
}
.pn-fall__meta,
.pn-fall__lead,
.pn-fall__link { opacity: 0; transform: translateY(14px); }
.pn-fall.ist-da .pn-fall__meta,
.pn-fall.ist-da .pn-fall__lead,
.pn-fall.ist-da .pn-fall__link {
opacity: 1;
transform: none;
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pn-fall.ist-da .pn-fall__lead { transition-delay: 0.2s; }
.pn-fall.ist-da .pn-fall__link { transition-delay: 0.3s; }
.pn-fall__lead {
margin: var(--pn-s3) 0 0;
font-size: 19px;
line-height: 1.6;
color: color-mix(in srgb, var(--pn-schrift) 76%, transparent);
text-wrap: pretty;
}
.pn-fall__link {
display: inline-flex;
align-items: center;
gap: 0.5em;
min-height: 52px;
margin-top: var(--pn-s4);
padding: 14px 28px;
border-radius: 999px;
background: var(--pn-akzent);
color: var(--pn-grund);
font-weight: 700;
font-size: 16px;
text-decoration: none;
}
.pn-fall.ist-da .pn-fall__link:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px var(--pn-akzent); transition-delay: 0s; }
.pn-fall__link:focus-visible { outline: 3px solid var(--pn-schrift); outline-offset: 3px; }
/* ---------- Intro je Kapitel ----------
Jedes Projekt hat seine eigene Inszenierung (.pn-intro--toskana / --netz /
--chat), alle teilen denselben Rahmen. Das Skript rastet das Kapitel ein
und schaltet:
.intro-laeuft die Choreografie des jeweiligen Stils
.intro-offen das Intro schrumpft exakt in den Bildschirm des Monitors
(auf dem Handy in den Handy-Bildschirm); Zielrechteck
als --zo/--zr/--zu/--zl/--zrad vom Skript gemessen
.intro-fertig Intro weg, die Szene deckt ihren Text auf (.ist-da)
Nur mit JavaScript sichtbar (html.js), sonst stuende es fuer immer davor.
Dauer je Stil steht im Skript (DAUER), die Einsaetze hier als Delays. */
.pn-intro { display: none; }
html.js .pn-intro {
--zo: 0px; --zr: 0px; --zu: 0px; --zl: 0px; --zrad: 0px;
position: absolute;
inset: 0;
z-index: 5;
display: grid;
place-items: center;
padding: 110px var(--pn-rand-r) 40px var(--pn-rand-l);
overflow: hidden;
background: var(--pn-grund);
color: var(--pn-schrift);
text-align: center;
clip-path: inset(0 0 0 0 round 0px);
}
.pn-kulisse { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pn-intro__innen { position: relative; z-index: 2; }
/* --- Gemeinsame Textbausteine --- */
.pn-intro__kopf {
display: flex;
align-items: center;
justify-content: center;
gap: var(--pn-s2);
margin: 0 0 var(--pn-s4);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--pn-schrift) 70%, transparent);
opacity: 0;
}
.pn-intro__kopf span:first-child { color: var(--pn-akzent); }
.pn-intro__kopf i { width: 56px; height: 1px; background: var(--pn-akzent); transform: scaleX(0); }
.pn-intro__name {
max-width: 14ch;
margin: 0 auto;
font-weight: 850;
font-stretch: 112%;
font-size: clamp(44px, 6.6vw, 124px);
line-height: 0.92;
letter-spacing: -0.045em;
text-wrap: balance;
}
/* Woerter bleiben zusammen, die Buchstaben darin bewegen sich einzeln */
.pn-intro__wort { display: inline-block; white-space: nowrap; padding: 0.04em 0 0.1em; vertical-align: top; }
.pn-intro__z { display: inline-block; opacity: 0; }
.pn-intro__satz {
display: flex;
flex-direction: column;
align-items: center;
margin: var(--pn-s4) 0 0;
font-weight: 650;
font-size: clamp(20px, 2.4vw, 36px);
line-height: 1.2;
letter-spacing: -0.015em;
color: color-mix(in srgb, var(--pn-schrift) 88%, transparent);
}
.pn-intro__satz .pn-wort + .pn-wort { color: var(--pn-akzent); }
.pn-intro--serif .pn-intro__satz { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0; }
.pn-intro--serif .pn-intro__satz .pn-wort + .pn-wort { font-style: italic; }
.pn-intro__fuss {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 1.4em;
margin: var(--pn-s5) 0 0;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.06em;
color: color-mix(in srgb, var(--pn-schrift) 72%, transparent);
opacity: 0;
}
.pn-intro__fuss i { width: 7px; height: 7px; border-radius: 50%; background: var(--pn-akzent); box-shadow: 0 0 12px var(--pn-akzent); }
.pn-intro__fuss span::after { content: "▍"; margin-left: 1px; color: var(--pn-akzent); animation: pn-cursor 0.9s steps(1) infinite; }
@keyframes pn-cursor { 50% { opacity: 0; } }
/* Einsaetze (ueberschreibbar je Stil ueber Variablen) */
.pn-intro {
--t-kopf: 0.5s;
--t-name: 0.7s;
--t-satz: 2.5s;
--t-fuss: 3.3s;
}
.pn-fall.intro-laeuft .pn-intro__kopf { opacity: 1; transition: opacity 0.6s ease var(--t-kopf); }
.pn-fall.intro-laeuft .pn-intro__kopf i { transform: none; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--t-kopf) + 0.1s); }
.pn-fall.intro-laeuft .pn-intro__satz .pn-wort > span {
transform: none;
transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: calc(var(--t-satz) + var(--k) * 0.22s);
}
.pn-fall.intro-laeuft .pn-intro__fuss { opacity: 1; transition: opacity 0.5s ease var(--t-fuss); }
.pn-fall.intro-laeuft .pn-intro__fuss i { animation: pn-puls 1.4s ease-in-out var(--t-fuss) infinite; }
/* ===== Stil TOSKANA: wie der Anfang eines Kinofilms =====
Kinobalken fahren ein, der Himmel gluht zum Sonnenuntergang, die Sonne
steigt, drei Huegelketten schieben sich hoch, Zypressen wachsen. Der Name
steht in Serifenschrift im Himmel und wird aus der Unschaerfe scharf. */
.pn-intro--toskana {
--t-kopf: 1.8s;
--t-satz: 3.5s;
--t-fuss: 4.1s;
place-items: start center;
}
html.js .pn-intro--toskana { padding-top: max(19vh, 140px); background: #160c07; }
.pn-k-himmel {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #1c0f09 0%, #4a2213 38%, #a2502a 66%, #e8935a 82%, #f4b37a 100%);
opacity: 0;
}
.pn-k-land { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.pn-k-sonne { transform: translateY(300px); transform-box: view-box; }
.pn-k-huegel { transform: translateY(160px); }
.pn-k-zypressen path { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
.pn-k-balken { position: absolute; left: 0; right: 0; z-index: 3; height: 0; background: #000; }
.pn-k-balken--oben { top: 0; }
.pn-k-balken--unten { bottom: 0; }
.pn-intro--toskana .pn-intro__name {
font-family: Georgia, "Times New Roman", serif;
font-weight: 400;
font-stretch: 100%;
font-size: clamp(48px, 7vw, 132px);
letter-spacing: -0.02em;
color: #fff3e4;
text-shadow: 0 2px 30px rgba(80, 30, 10, 0.5);
}
.pn-intro--toskana .pn-intro__z { filter: blur(14px); transform: translateY(0.12em); }
.pn-intro--toskana .pn-intro__kopf { color: rgba(255, 236, 214, 0.8); }
.pn-intro--toskana .pn-intro__satz { color: #fff3e4; }
.pn-intro--toskana .pn-intro__satz .pn-wort + .pn-wort { color: #ffd2a1; }
.pn-intro--toskana .pn-intro__fuss { color: rgba(255, 236, 214, 0.75); }
.pn-fall.intro-laeuft .pn-k-balken { height: 11vh; transition: height 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.pn-fall.intro-laeuft .pn-k-himmel { opacity: 1; transition: opacity 2.6s ease 0.3s; }
.pn-fall.intro-laeuft .pn-k-sonne { transform: none; transition: transform 3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s; }
.pn-fall.intro-laeuft .pn-k-huegel { transform: none; transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pn-fall.intro-laeuft .pn-k-huegel--1 { transition-delay: 0.6s; }
.pn-fall.intro-laeuft .pn-k-huegel--2 { transition-delay: 0.8s; }
.pn-fall.intro-laeuft .pn-k-huegel--3 { transition-delay: 1s; }
.pn-fall.intro-laeuft .pn-k-zypressen path { transform: none; transition: transform 1s cubic-bezier(0.2, 0.9, 0.2, 1) 1.5s; }
.pn-fall.intro-laeuft .pn-k-zypressen path:nth-child(2) { transition-delay: 1.62s; }
.pn-fall.intro-laeuft .pn-k-zypressen path:nth-child(3) { transition-delay: 1.74s; }
.pn-fall.intro-laeuft .pn-k-zypressen path:nth-child(4) { transition-delay: 1.86s; }
.pn-fall.intro-laeuft .pn-k-zypressen path:nth-child(5) { transition-delay: 1.98s; }
.pn-fall.intro-laeuft .pn-intro--toskana .pn-intro__z {
opacity: 1;
filter: none;
transform: none;
transition: opacity 0.9s ease, filter 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: calc(2.1s + var(--c) * 0.06s);
}
/* ===== Stil NETZ: ein KI-System faehrt hoch =====
Punktraster leuchtet auf, Knoten erscheinen, Verbindungen zeichnen sich
von der Mitte nach aussen, eine Scanlinie laeuft durch. Der Name wird
vom Skript aus zufaelligen Zeichen entschluesselt. */
.pn-intro--netz { --t-kopf: 0.4s; --t-satz: 2.6s; --t-fuss: 3.2s; }
.pn-k-raster {
position: absolute;
inset: -2px;
background-image: radial-gradient(circle, color-mix(in srgb, var(--pn-akzent) 40%, transparent) 1px, transparent 1.6px);
background-size: 28px 28px;
opacity: 0;
}
.pn-k-netz { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pn-akzent); opacity: 0.55; }
.pn-k-kanten path { stroke-dasharray: 420; stroke-dashoffset: 420; opacity: 0.6; }
.pn-k-knoten circle { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.pn-k-ring { opacity: 0; transform-box: view-box; transform-origin: 800px 450px; }
.pn-k-scan {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--pn-akzent), transparent);
box-shadow: 0 0 24px var(--pn-akzent);
opacity: 0;
}
.pn-intro--netz .pn-intro__z { opacity: 0; }
.pn-intro--netz .pn-intro__name { text-shadow: 0 0 40px color-mix(in srgb, var(--pn-akzent) 40%, transparent); }
.pn-fall.intro-laeuft .pn-k-raster { opacity: 1; transition: opacity 1s ease; }
.pn-fall.intro-laeuft .pn-k-knoten circle {
transform: none;
transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.4, 1);
transition-delay: calc(0.2s + var(--n) * 0.09s);
}
.pn-fall.intro-laeuft .pn-k-kanten path {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1);
transition-delay: calc(0.35s + var(--n) * 0.08s);
}
.pn-fall.intro-laeuft .pn-k-ring { opacity: 1; animation: pn-drehen 30s linear infinite; transition: opacity 1s ease 0.6s; }
@keyframes pn-drehen { to { transform: rotate(360deg); } }
.pn-fall.intro-laeuft .pn-k-scan { animation: pn-scan 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.6s 2 both; }
@keyframes pn-scan {
0% { transform: translateY(0); opacity: 0; }
10%, 90% { opacity: 0.9; }
100% { transform: translateY(100vh); opacity: 0; }
}
.pn-fall.intro-laeuft .pn-intro--netz .pn-intro__z { opacity: 1; transition: opacity 0.2s ease calc(0.9s + var(--c) * 0.03s); }
/* ===== Stil CHAT: die Plattform beantwortet die Frage selbst =====
Ein Chatfenster oeffnet sich, eine Frage tippt sich, drei Punkte denken,
dann streamt die Antwort Wort fuer Wort den echten Leitsatz. Darunter die
drei Merkmale aus dem Hero von dsgpt.de. */
.pn-intro--chat { --t-kopf: 0.3s; --t-fuss: 5.2s; }
.pn-intro--chat .pn-intro__name { font-size: clamp(40px, 4.6vw, 84px); }
.pn-intro--chat .pn-intro__z { transform: translateY(0.4em); }
.pn-fall.intro-laeuft .pn-intro--chat .pn-intro__z {
opacity: 1;
transform: none;
transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1);
transition-delay: calc(0.45s + var(--c) * 0.06s);
}
.pn-fall.intro-laeuft .pn-intro--chat .pn-k-raster { opacity: 0.6; transition: opacity 1s ease; }
.pn-chat {
width: min(760px, 86vw);
margin: var(--pn-s4) auto 0;
padding: 0 0 18px;
border-radius: 18px;
background: color-mix(in srgb, var(--pn-schrift) 6%, #0a0f1a);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--pn-schrift) 12%, transparent),
0 40px 80px -30px rgba(0, 0, 0, 0.8),
0 0 80px -30px color-mix(in srgb, var(--pn-akzent) 50%, transparent);
text-align: left;
opacity: 0;
transform: translateY(30px) scale(0.96);
}
.pn-chat__kopf {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 16px;
border-bottom: 1px solid color-mix(in srgb, var(--pn-schrift) 10%, transparent);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
color: color-mix(in srgb, var(--pn-schrift) 60%, transparent);
}
.pn-chat__kopf i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--pn-schrift) 22%, transparent); }
.pn-chat__kopf span { margin-left: auto; color: var(--pn-akzent); }
.pn-chat__frage,
.pn-chat__antwort { margin: 20px 22px 0; font-size: clamp(16px, 1.6vw, 26px); line-height: 1.4; }
.pn-chat__frage { display: flex; justify-content: flex-end; }
.pn-chat__frage span {
min-height: 1.45em;
padding: 10px 14px;
border-radius: 14px 14px 4px 14px;
background: var(--pn-akzent);
color: var(--pn-grund);
font-weight: 600;
}
.pn-chat__frage span:empty { visibility: hidden; }
.pn-chat__antwort {
display: flex;
gap: 10px;
align-items: flex-start;
min-height: 3em;
font-weight: 650;
color: var(--pn-schrift);
}
.pn-chat__denkt { display: inline-flex; gap: 4px; padding-top: 0.55em; opacity: 0; }
.pn-chat__denkt i { width: 6px; height: 6px; border-radius: 50%; background: var(--pn-akzent); animation: pn-denken 0.9s ease-in-out infinite; }
.pn-chat__denkt i:nth-child(2) { animation-delay: 0.15s; }
.pn-chat__denkt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pn-denken { 50% { transform: translateY(-4px); opacity: 0.4; } }
.pn-chat__antwort.ist-fertig .pn-chat__denkt { display: none; }
.pn-merkmale {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: var(--pn-s3) 0 0;
padding: 0;
list-style: none;
}
.pn-merkmale li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--pn-akzent) 40%, transparent);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
color: color-mix(in srgb, var(--pn-schrift) 85%, transparent);
opacity: 0;
transform: translateY(10px);
}
.pn-merkmale li::before { content: "✓"; color: var(--pn-akzent); }
.pn-fall.intro-laeuft .pn-chat { opacity: 1; transform: none; transition: opacity 0.6s ease 1.1s, transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) 1.1s; }
.pn-fall.intro-laeuft .pn-chat__denkt { opacity: 1; transition: opacity 0.3s ease 2.6s; }
.pn-fall.intro-laeuft .pn-merkmale li {
opacity: 1;
transform: none;
transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
transition-delay: calc(4.5s + var(--k) * 0.15s);
}
/* --- Uebergang: das Intro schrumpft in den Bildschirm ---
Die Flaeche zieht sich auf das gemessene Bildschirm-Rechteck zusammen,
der Inhalt fliegt mit hinein und verblasst, zuletzt gibt die Flaeche die
echte Seite darunter frei. */
html.js .pn-fall.intro-offen .pn-intro {
clip-path: inset(var(--zo) var(--zr) var(--zu) var(--zl) round var(--zrad));
opacity: 0;
transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.35s ease 0.85s;
}
.pn-fall.intro-offen .pn-intro__innen,
.pn-fall.intro-offen .pn-kulisse {
transform: scale(0.42);
opacity: 0;
transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.55s ease 0.2s;
}
/* Ueberspringen: kurz ausblenden statt Choreografie */
html.js .pn-fall.intro-schnell .pn-intro { opacity: 0; transition: opacity 0.35s ease; }
.pn-fall.intro-fertig .pn-intro { visibility: hidden; }
/* Solange das Intro noch vor der Szene steht, ist die Szene unsichtbar:
sonst schiene ihr Monitor durch den weichen Saum. Sie erscheint in dem
Moment, in dem das Intro in den Monitor schrumpft (.intro-offen) */
html.js .pn-fall:not(.intro-offen):not(.intro-fertig) .pn-fall__text,
html.js .pn-fall:not(.intro-offen):not(.intro-fertig) .pn-szene { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
html.js .pn-fall .pn-fall__text,
html.js .pn-fall .pn-szene { visibility: visible; }
}
/* Weicher Saum: die Oberkante des Intros laeuft in die Flaeche davor aus
statt als harte Farbkante. Er haengt an der Lage des Kapitels (--ein,
Skript) und schliesst sich erst, wenn das Kapitel oben angekommen ist,
auch waehrend die Seite zum Einrasten gleitet */
html.js .pn-intro {
--pn-saum: calc(min(1, (1 - var(--ein, 0)) * 2) * 42vh);
-webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08) calc(var(--pn-saum) * 0.2), rgba(0, 0, 0, 0.3) calc(var(--pn-saum) * 0.4), rgba(0, 0, 0, 0.62) calc(var(--pn-saum) * 0.6), rgba(0, 0, 0, 0.88) calc(var(--pn-saum) * 0.8), #000 var(--pn-saum));
mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08) calc(var(--pn-saum) * 0.2), rgba(0, 0, 0, 0.3) calc(var(--pn-saum) * 0.4), rgba(0, 0, 0, 0.62) calc(var(--pn-saum) * 0.6), rgba(0, 0, 0, 0.88) calc(var(--pn-saum) * 0.8), #000 var(--pn-saum));
}
/* ---------- Sektions-Spur: Orientierung am linken Rand ----------
Ein feines senkrechtes Segment je Sektion in deren Farbe (--fc), das
aktive fuellt sich mit dem Fortschritt in der Sektion (--lp, Skript),
erledigte bleiben gedimmt gefuellt. Daneben laeuft senkrecht Nummer und
Name der aktiven Sektion. Klick auf ein Segment springt dorthin. */
.pn-leiste {
--seg: min(72px, 8.4vh);
position: fixed;
left: clamp(12px, 1.4vw, 24px);
top: 50%;
z-index: 40;
display: flex;
flex-direction: column;
gap: 8px;
transform: translate(-10px, -50%);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.pn-leiste.ist-sichtbar { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
html.pn-auftakt-an .pn-leiste { opacity: 0; pointer-events: none; }
/* Sektionen fuellen das Fenster: Sprungziele exakt an die Oberkante */
html:has([data-pn]) { scroll-padding-top: 0; }
.pn-leiste a {
--lp: 0;
--fc: #7fe1f0;
position: relative;
display: block;
width: 24px;
height: var(--seg);
color: #fff;
text-decoration: none;
}
/* Segment: Spur und Fuellung */
.pn-leiste a::before,
.pn-leiste a::after {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
border-radius: 2px;
}
.pn-leiste a::before { background: rgba(255, 255, 255, 0.14); transition: background-color 0.3s ease; }
.pn-leiste a::after {
background: var(--fc);
box-shadow: 0 0 10px var(--fc);
transform-origin: 50% 0;
transform: scaleY(0);
}
.pn-leiste a.ist-aktiv::after { transform: scaleY(var(--lp)); }
.pn-leiste a.ist-fertig::after { transform: scaleY(1); box-shadow: none; opacity: 0.55; }
.pn-leiste a:hover::before { background: rgba(255, 255, 255, 0.35); }
/* Beschriftung: senkrecht, nur bei der aktiven Sektion (oder bei Hover) */
.pn-leiste b {
position: absolute;
left: calc(100% + 4px);
top: 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
display: flex;
align-items: center;
gap: 10px;
height: var(--seg);
font-family: var(--font-mono);
font-weight: 500;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
color: rgba(255, 255, 255, 0.75);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.pn-leiste b span { color: var(--fc); }
.pn-leiste a.ist-aktiv b,
.pn-leiste a:hover b,
.pn-leiste a:focus-visible b { opacity: 1; }
.pn-leiste a:focus-visible { outline: 2px solid var(--fc); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 960px) {
/* Schmal: nur die Linien im Seitenrand, ohne Beschriftung */
.pn-leiste { --seg: min(44px, 6vh); left: 0; gap: 6px; }
.pn-leiste a { width: 22px; }
.pn-leiste a::before { background: rgba(255, 255, 255, 0.22); }
.pn-leiste b { display: none; }
}
/* ---------- Geraete: Monitor und Handy ---------- */
.pn-geraete {
position: relative;
z-index: 1;
width: 100%;
}
.pn-szene {
position: relative;
z-index: 1;
width: 100%;
max-width: 860px;
justify-self: end;
}
/* Monitor: flach, gleichmaessig duenner schwarzer Rand, feine helle Kante.
Bewusst ohne Kippung: Er steht still, das Intro landet genau darin. */
.pn-display {
position: relative;
padding: 1.15%;
border-radius: 18px;
background: #07080b;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.16),
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
0 50px 90px -40px rgba(0, 0, 0, 0.9),
0 0 120px -40px color-mix(in srgb, var(--pn-akzent) 45%, transparent);
}
.pn-display .pn-schirm { aspect-ratio: 16 / 10; border-radius: 9px; }
.pn-display__fuss { display: block; width: 100%; height: auto; margin-top: -1px; }
/* Einheitlich mit dem Abschluss: mittig unter dem Standfuss */
.pn-display__live {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin: 6px 0 0;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
color: color-mix(in srgb, var(--pn-schrift) 72%, transparent);
}
.pn-display__live b { font-weight: 500; color: var(--pn-schrift); }
.pn-display__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--pn-akzent); box-shadow: 0 0 10px var(--pn-akzent); animation: pn-puls 1.8s ease-in-out infinite; }
@keyframes pn-puls { 50% { opacity: 0.3; } }
.pn-schirm { position: relative; overflow: hidden; background: #000; }
/* Die Live-Seite faehrt durch; --weg (Bildhoehe minus Schirmhoehe) setzt das Skript */
.pn-schirm img {
display: block;
width: 100%;
height: auto;
transform: translate3d(0, calc(var(--p-schirm) * var(--weg, 0px) * -1), 0);
will-change: transform;
}
/* Smartphone: schlank, nur eine feine Kante um den Bildschirm. Links unten
vor dem Monitor, weg von der Kontaktleiste. Kommt nach dem Intro herein. */
.pn-handy {
position: absolute;
left: -6%;
bottom: 6%;
width: 20%;
aspect-ratio: 9 / 19.5;
padding: 1.1%;
border-radius: 15% / 7%;
background: #07080b;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.16),
0 40px 70px -24px rgba(0, 0, 0, 0.85);
opacity: 0;
transform: translate3d(0, 50px, 0);
}
.pn-fall.ist-da .pn-handy {
opacity: 1;
transform: none;
transition: opacity 0.7s ease 0.15s, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.pn-handy .pn-schirm { height: 100%; border-radius: 13.5% / 6.2%; }
.pn-handy__insel {
position: absolute;
z-index: 2;
left: 50%;
top: 3.2%;
width: 26%;
height: 2.6%;
border-radius: 99px;
background: #000;
transform: translateX(-50%);
}
/* ---------- Weitere Arbeiten: die Projektwand ----------
Vier Reihen, schraeg in den Raum gestellt, treiben gegenlaeufig (CSS).
--wand-p (0..1, Skript) laeuft, waehrend die Wand durchs Fenster zieht:
die Wand richtet sich auf und die Reihen schieben zusaetzlich mit.
Filter: .ist-gefiltert auf der Wand, passende Kacheln tragen .ist-an. */
/* Scrollstrecke der Wand: 2,6 Fensterhoehen, davon 1,6 gepinnt */
.pn-weitere-bahn { position: relative; height: 260vh; }
.pn-weitere {
--wand-p: 0;
position: sticky;
top: 0;
/* Eine Szene in Fensterhoehe: Kopf, Filter, Wand, Fusszeile. Das Skript
rastet beim Hereinscrollen genau am Anfang ein (ohne Sperre). Oben
Platz fuer die feste Kopfleiste. */
display: flex;
flex-direction: column;
height: 100vh;
height: 100svh;
min-height: 620px;
padding: 104px 0 16px;
overflow: hidden;
background:
radial-gradient(70% 40% at 50% 22vh, rgba(47, 163, 186, 0.16), transparent 70%),
linear-gradient(180deg,
transparent,
rgba(7, 12, 23, 0.1) calc(var(--saum) * 0.2),
rgba(7, 12, 23, 0.32) calc(var(--saum) * 0.4),
rgba(7, 12, 23, 0.62) calc(var(--saum) * 0.62),
rgba(7, 12, 23, 0.88) calc(var(--saum) * 0.82),
#070c17 var(--saum));
--saum: calc(min(1, (1 - var(--ein, 0)) * 2) * 45vh);
color: #fff;
}
/* volle Breite: auto-Raender der .wrap wuerden ihn in der Flex-Spalte sonst auf Inhaltsbreite schrumpfen und mittig setzen */
.pn-weitere > .wrap { width: 100%; }
.pn-weitere__kopf { flex: none; margin-bottom: var(--pn-s2); }
.pn-weitere__kicker {
margin: 0 0 var(--pn-s2);
font-family: var(--font-mono);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7fe1f0;
}
.pn-weitere__zeile {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--pn-s3) var(--pn-s5);
}
/* Grosse Zahl links, zwei Zeilen Text daneben, auf einer Grundlinie */
.pn-weitere__titel {
display: flex;
align-items: flex-end;
gap: clamp(14px, 2vw, 32px);
margin: 0;
color: #fff;
}
.pn-weitere__zahl {
position: relative;
min-width: 3.4ch; /* Platz fuer "350+", nichts springt */
font-weight: 850;
font-stretch: 112%;
/* nach Fensterhoehe: die ganze Szene passt in einen Bildschirm */
font-size: clamp(64px, min(9vw, 13vh), 150px);
line-height: 0.78;
letter-spacing: -0.06em;
font-variant-numeric: tabular-nums;
color: transparent;
-webkit-text-stroke: 1.5px rgba(127, 225, 240, 0.55);
background: linear-gradient(180deg, #a6f0f8, #3fd6e8 45%, rgba(47, 163, 186, 0) 100%);
-webkit-background-clip: text;
background-clip: text;
}
.pn-weitere__zahl i { font-style: normal; }
.pn-weitere__worte { display: flex; flex-direction: column; gap: 6px; padding-bottom: 0.2em; }
.pn-weitere__wort {
font-weight: 850;
font-stretch: 108%;
font-size: clamp(26px, min(2.8vw, 4.6vh), 48px);
line-height: 1;
letter-spacing: -0.035em;
}
.pn-weitere__branche {
font-weight: 700;
font-size: clamp(17px, min(1.6vw, 2.8vh), 26px);
line-height: 1.15;
letter-spacing: -0.015em;
color: #7fe1f0;
}
/* Wechsel der Branchenzeile: kurz ausblenden und von unten hereinschieben */
.pn-weitere__branche.ist-neu { animation: pn-branche 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pn-branche { from { opacity: 0; transform: translateY(0.5em); } }
.pn-weitere__titel { flex: none; }
/* darf schmaler werden, damit er neben dem Titel bleibt */
.pn-weitere__text { flex: 0 1 340px; min-width: 240px; margin: 0; padding-bottom: 0.4em; font-size: 17px; line-height: 1.6; color: var(--dark-text); }
/* Filter auf dunklem Grund: eine Zeile, waagerecht wischbar */
.pn-filter {
display: flex;
flex-wrap: nowrap;
gap: var(--pn-s1);
margin-bottom: var(--pn-s2);
overflow-x: auto;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
padding-right: 48px;
}
.pn-filter::-webkit-scrollbar { display: none; }
.pn-filter__knopf {
display: inline-flex;
align-items: center;
gap: var(--pn-s1);
min-height: 44px;
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: #dfe7f2;
font: 600 15px/1 var(--font-sans);
white-space: nowrap;
flex: none;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pn-filter__knopf span { font-family: var(--font-mono); font-size: 12px; color: rgba(185, 196, 216, 0.7); }
.pn-filter__knopf:hover { border-color: rgba(127, 225, 240, 0.6); }
.pn-filter__knopf.is-aktiv { background: #7fe1f0; border-color: #7fe1f0; color: #06121c; }
.pn-filter__knopf.is-aktiv span { color: #06121c; }
.pn-filter__knopf:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 2px; }
/* Wand: Buehne mit Perspektive, oben und unten weich ausgeblendet */
.pn-wand {
position: relative;
flex: 1 1 auto;
min-height: 260px;
perspective: 1600px;
overflow: hidden; /* die schraege Wand ragt sonst ueber Filter und Fusszeile */
touch-action: pan-y; /* waagerecht ziehen, senkrecht scrollen */
}
/* Weiche Raender als Verlaufsflaechen in der Grundfarbe statt einer Maske:
Masken ueber bewegtem 3D-Inhalt muessen jedes Bild neu berechnet werden */
.pn-wand::before,
.pn-wand::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.pn-wand::before { background: linear-gradient(180deg, #070c17, transparent 16%, transparent 84%, #070c17); }
.pn-wand::after { background: linear-gradient(90deg, #070c17, transparent 9%, transparent 91%, #070c17); }
.pn-wand__ebene {
position: absolute;
left: 50%;
top: 50%;
display: flex;
flex-direction: column;
gap: var(--pn-s3);
width: 180vw;
/* dreht sich ueber die Scrollstrecke: richtet sich von 26 auf 6 Grad
auf, kippt von -9 auf +4 Grad und zieht leicht heran */
transform:
translate(-50%, -50%)
rotateX(calc(26deg - var(--wand-p) * 20deg))
rotateZ(calc(-9deg + var(--wand-p) * 13deg))
scale(calc(1.1 - var(--wand-p) * 0.1));
transform-style: preserve-3d;
}
.pn-reihe { --dauer: calc(150s + var(--ri) * 22s); }
/* Schub durchs Scrollen, gerade Reihen nach links, ungerade nach rechts */
.pn-reihe__schub { transform: translate3d(calc((var(--wand-p) - 0.5) * 900px), 0, 0); }
.pn-reihe:nth-child(even) .pn-reihe__schub { transform: translate3d(calc((0.5 - var(--wand-p)) * 900px), 0, 0); }
/* Fortschritt der Scrollstrecke: Glasspur, Fuellung im Marken-Verlauf mit
leuchtendem Kopf, Zahl in Mono. Voll: Spur glimmt, Text wechselt */
.pn-lauf {
display: flex;
align-items: center;
gap: 14px;
min-height: 44px;
padding: 0 18px;
border-radius: 999px;
background: rgba(10, 19, 34, 0.72);
box-shadow: inset 0 0 0 1px rgba(127, 225, 240, 0.16), 0 14px 40px -18px rgba(63, 214, 232, 0.45);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(185, 196, 216, 0.8);
}
.pn-lauf__text { display: grid; }
.pn-lauf__text b { grid-area: 1 / 1; font-weight: 500; white-space: nowrap; transition: opacity 0.4s ease, transform 0.4s ease; }
.pn-lauf__text b + b { opacity: 0; transform: translateY(6px); color: #7fe1f0; }
.pn-lauf__spur { position: relative; width: clamp(120px, 16vw, 240px); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pn-lauf__spur i {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, #223a7c, #2fa3ba 55%, #3fd6e8);
box-shadow: 0 0 12px rgba(63, 214, 232, 0.7);
transform-origin: 0 50%;
transform: scaleX(var(--wand-p));
}
.pn-lauf__zahl { min-width: 3.2em; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.pn-lauf__zahl::after { content: " %"; color: rgba(185, 196, 216, 0.6); }
.pn-weitere.ist-voll .pn-lauf { box-shadow: inset 0 0 0 1px rgba(127, 225, 240, 0.5), 0 0 34px -8px rgba(63, 214, 232, 0.8); }
.pn-weitere.ist-voll .pn-lauf__text b:first-child { opacity: 0; transform: translateY(-6px); }
.pn-weitere.ist-voll .pn-lauf__text b + b { opacity: 1; transform: none; }
/* der Balken braucht den Platz in der Fusszeile: Zieh-Hinweis entfaellt */
.pn-wand__ziehen { display: none; }
@media (max-width: 760px) {
.pn-lauf { order: -1; width: 100%; justify-content: space-between; }
.pn-lauf__spur { flex: 1; width: auto; }
}
.pn-reihe__spur {
display: flex;
width: max-content;
animation: pn-treiben var(--dauer) linear infinite;
will-change: transform;
}
.pn-reihe:nth-child(even) .pn-reihe__spur { animation-direction: reverse; }
.pn-reihe:hover .pn-reihe__spur,
.pn-reihe:focus-within .pn-reihe__spur,
.pn-wand.ist-pausiert .pn-reihe__spur { animation-play-state: paused; }
@keyframes pn-treiben { to { transform: translate3d(-50%, 0, 0); } }
.pn-reihe__satz {
display: flex;
gap: var(--pn-s3);
margin: 0;
padding: 0 var(--pn-s3) 0 0;
list-style: none;
}
/* Kachel */
.pn-kachel { flex: none; width: clamp(230px, 17vw, 330px); }
.pn-kachel__innen {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 12px;
background: #121b2c;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 40px -24px rgba(0, 0, 0, 0.8);
cursor: pointer;
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease, box-shadow 0.45s ease;
}
.pn-kachel__innen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
}
/* Fertige Mockups der Altseite: ganz zeigen, auf ruhigem Verlauf */
.pn-kachel--frei .pn-kachel__innen { background: linear-gradient(160deg, #1c2a44, #0f1829); }
.pn-kachel--frei .pn-kachel__innen img { object-fit: contain; padding: 2% 4%; transform: scale(1.06); }
.pn-kachel__schild {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
border-radius: 9px;
background: rgba(7, 12, 23, 0.94);
color: var(--dark-text);
font-size: 12px;
text-align: left;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pn-kachel__schild b { font-size: 15px; font-weight: 700; color: #fff; }
.pn-kachel__innen:hover,
.pn-kachel__innen:focus-visible {
transform: translateY(-10px) scale(1.06);
box-shadow: 0 0 0 2px #7fe1f0, 0 40px 60px -24px rgba(0, 0, 0, 0.9), 0 0 60px -10px rgba(63, 214, 232, 0.45);
z-index: 2;
}
.pn-kachel__innen:hover .pn-kachel__schild,
.pn-kachel__innen:focus-visible .pn-kachel__schild { opacity: 1; transform: none; }
.pn-kachel__innen:focus-visible { outline: none; }
/* Beim Ueberfahren der Wand treten die anderen Kacheln leicht zurueck */
.pn-wand:hover .pn-kachel__innen:not(:hover) { opacity: 0.55; }
/* Filter: passende leuchten, der Rest verblasst */
.pn-wand.ist-gefiltert .pn-kachel__innen { opacity: 0.1; }
.pn-wand.ist-gefiltert .pn-kachel__innen.ist-an {
opacity: 1;
box-shadow: 0 0 0 2px #7fe1f0, 0 0 40px -12px rgba(63, 214, 232, 0.6);
}
.pn-wand.ist-gefiltert:hover .pn-kachel__innen.ist-an:not(:hover) { opacity: 0.8; }
.pn-wand__hinweis {
margin-top: var(--pn-s3);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(185, 196, 216, 0.7);
}
/* ---------- Projektfenster (Dialog), grosse Ansicht ----------
Fast bildschirmfuellend. Hintergrund: unscharfe, abgedunkelte Kopie des
Projektbilds (wechselt mit). Raster: oben Zaehler/Fortschritt, mitte
Buehne + Info, unten die uebrigen Projekte derselben Branche.
Im Dialog gilt der normale Mauszeiger: der eigene Zeiger der Seite kann
nicht ueber der obersten Ebene eines Dialogs liegen. */
.pn-projekt {
position: fixed;
inset: 0;
width: calc(100vw - 24px);
height: calc(100vh - 24px);
height: calc(100dvh - 24px);
max-width: none;
max-height: none;
margin: auto;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 24px;
background: #060a13;
color: #fff;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 120px -30px rgba(0, 0, 0, 0.9);
}
.pn-projekt,
.pn-projekt * { cursor: auto; }
.pn-projekt a,
.pn-projekt button { cursor: pointer; }
.pn-projekt[open] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 30vw);
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas: "oben oben" "buehne info" "reihe reihe";
animation: pn-projekt-ein 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pn-projekt-ein { from { opacity: 0; transform: scale(0.97); } }
.pn-projekt::backdrop { background: rgba(3, 6, 12, 0.82); }
/* Lichtschein aus dem Projektbild */
.pn-projekt__aura { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pn-projekt__aura img {
position: absolute;
inset: -10%;
width: 120%;
height: 120%;
object-fit: cover;
filter: blur(70px) saturate(1.5);
opacity: 0.4;
transition: opacity 0.5s ease;
}
.pn-projekt__aura::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(80% 80% at 35% 50%, transparent, rgba(6, 10, 19, 0.85) 75%), linear-gradient(90deg, transparent 55%, rgba(6, 10, 19, 0.9));
}
.pn-projekt > :not(.pn-projekt__aura) { position: relative; z-index: 1; }
/* Oben: Zaehler, Fortschritt, Tasten, Schliessen */
.pn-projekt__oben {
grid-area: oben;
display: flex;
align-items: center;
gap: var(--pn-s3);
padding: 18px 20px 0 clamp(20px, 3vw, 44px);
}
.pn-projekt__zaehler { margin: 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: rgba(185, 196, 216, 0.7); white-space: nowrap; }
.pn-projekt__zaehler b { font-weight: 500; color: #fff; }
.pn-projekt__fortschritt { position: relative; flex: 1; height: 2px; max-width: 420px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.pn-projekt__fortschritt i { position: absolute; inset: 0; background: #7fe1f0; transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pn-projekt__tasten { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 12px; color: rgba(185, 196, 216, 0.6); }
.pn-projekt__tasten kbd { padding: 3px 7px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; font: 500 11px/1 var(--font-mono); color: #dfe7f2; }
.pn-projekt__tasten kbd:nth-of-type(2) { margin-right: 6px; }
.pn-projekt__tasten kbd:nth-of-type(3) { margin-left: 10px; }
.pn-projekt__zu {
display: grid;
place-items: center;
flex: none;
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
background: rgba(6, 10, 19, 0.6);
color: #fff;
transition: border-color 0.2s ease, transform 0.3s ease;
}
.pn-projekt__zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pn-projekt__zu:hover { border-color: #7fe1f0; transform: rotate(90deg); }
.pn-projekt__zu:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 2px; }
/* Buehne: Monitor mit Handy oder freies Mockup */
.pn-projekt__buehne {
grid-area: buehne;
display: grid;
place-items: center;
min-width: 0;
min-height: 0;
padding: clamp(20px, 3vh, 40px) clamp(30px, 5vw, 90px);
}
.pn-projekt__geraet { position: relative; width: min(100%, calc((100dvh - 330px) * 1.6)); }
.pn-projekt__schirm img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pn-projekt .pn-display .pn-schirm { aspect-ratio: 16 / 10; }
.pn-projekt .pn-projekt__handy {
position: absolute;
left: -6%;
bottom: 9%;
width: 19%;
opacity: 1;
transform: none;
}
.pn-projekt__handy .pn-schirm img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pn-projekt__mockup {
display: none;
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.55));
}
.pn-projekt.ist-frei .pn-projekt__geraet { display: none; }
.pn-projekt.ist-frei .pn-projekt__mockup { display: block; }
/* Info */
.pn-projekt__info {
grid-area: info;
display: flex;
flex-direction: column;
min-height: 0;
scrollbar-width: none;
padding: clamp(20px, 3vh, 40px) clamp(24px, 3vw, 48px) 20px 0;
overflow-y: auto;
}
/* Zentrieren ueber auto-Raender statt justify-content: Laeuft die Spalte
doch einmal ueber, bleibt der Anfang sichtbar statt abgeschnitten */
.pn-projekt__info > :first-child { margin-top: auto !important; }
.pn-projekt__info > :last-child { margin-bottom: auto; }
.pn-projekt__info::-webkit-scrollbar { display: none; }
.pn-projekt__kat {
align-self: flex-start;
margin: 0 0 var(--pn-s2);
padding: 6px 12px;
border: 1px solid rgba(127, 225, 240, 0.35);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7fe1f0;
}
.pn-projekt__name {
margin: 0;
font-weight: 850;
font-stretch: 112%;
/* Startgroesse; das Skript verkleinert lange Namen auf hoechstens zwei
Zeilen (--name-gr). Woerter werden nie getrennt. */
font-size: var(--name-gr, clamp(40px, 4.4vw, 76px));
line-height: 0.95;
letter-spacing: -0.04em;
color: #fff;
text-wrap: balance;
overflow-wrap: normal;
word-break: keep-all;
hyphens: manual;
}
.pn-projekt__beschreibung {
display: -webkit-box;
max-width: 46ch;
margin: var(--pn-s3) 0 0;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
line-clamp: 6;
font-size: 16.5px;
line-height: 1.65;
color: var(--dark-text);
text-wrap: pretty;
hyphens: auto;
}
.pn-projekt__beschreibung.ist-offen { -webkit-line-clamp: unset; line-clamp: none; }
.pn-projekt__mehr {
align-self: flex-start;
display: inline-flex;
align-items: center;
min-height: 36px;
margin-top: 8px;
padding: 4px 0;
border: 0;
border-bottom: 1px solid rgba(127, 225, 240, 0.5);
background: none;
color: #7fe1f0;
font: 600 14px/1.2 var(--font-sans);
}
.pn-projekt__mehr:hover { border-bottom-color: #7fe1f0; }
.pn-projekt__mehr:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 3px; }
.pn-projekt__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--pn-s2); margin-top: var(--pn-s4); }
.pn-projekt__link {
display: inline-flex;
align-items: center;
gap: 0.5em;
min-height: 52px;
padding: 14px 26px;
border-radius: 999px;
background: #7fe1f0;
color: #06121c;
font-weight: 750;
font-size: 16px;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pn-projekt__link:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px #7fe1f0; }
.pn-projekt__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pn-projekt__domain { font-family: var(--font-mono); font-size: 12.5px; color: rgba(185, 196, 216, 0.65); }
.pn-projekt__offline { margin: 0; font-size: 14px; color: rgba(185, 196, 216, 0.7); }
.pn-projekt__blaettern { display: flex; gap: 10px; margin-top: var(--pn-s5); padding-top: var(--pn-s3); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.pn-projekt__pfeil,
.pn-projekt__weiter {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: #fff;
font: 600 15px/1.2 var(--font-sans);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pn-projekt__pfeil { width: 52px; flex: none; }
.pn-projekt__weiter { flex: 1; min-width: 0; justify-content: space-between; padding: 8px 18px 8px 22px; text-align: left; }
.pn-projekt__weiter span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(185, 196, 216, 0.7); }
.pn-projekt__weiter b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pn-projekt__pfeil svg,
.pn-projekt__weiter svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn-projekt__pfeil:hover,
.pn-projekt__weiter:hover { border-color: #7fe1f0; background: rgba(127, 225, 240, 0.08); }
.pn-projekt__pfeil:focus-visible,
.pn-projekt__weiter:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 2px; }
/* Unten: weitere Projekte derselben Branche */
.pn-projekt__reihe {
grid-area: reihe;
display: flex;
align-items: center;
gap: var(--pn-s3);
padding: 14px clamp(20px, 3vw, 44px) 18px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pn-projekt__reihe-titel { flex: none; margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(185, 196, 216, 0.7); }
.pn-projekt__reihe-titel span { color: #fff; }
.pn-projekt__daumen { display: flex; gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pn-projekt__daumen::-webkit-scrollbar { display: none; }
.pn-projekt__daumen button {
flex: none;
width: 112px;
aspect-ratio: 16 / 10;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 8px;
background: #e9eef6;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
opacity: 0.55;
transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.pn-projekt__daumen button img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pn-projekt__daumen button.ist-frei img { object-fit: contain; padding: 4%; }
.pn-projekt__daumen button:hover { opacity: 1; transform: translateY(-3px); }
.pn-projekt__daumen button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #7fe1f0; }
.pn-projekt__daumen button:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 2px; }
@media (max-width: 960px) {
.pn-projekt { width: 100vw; height: 100dvh; border-radius: 0; }
.pn-projekt[open] {
grid-template-columns: minmax(0, 1fr); /* nie breiter als das Fenster */
grid-template-rows: auto auto auto auto;
grid-template-areas: "oben" "buehne" "info" "reihe";
align-content: start;
overflow-y: auto;
}
/* Zeilen behalten ihre volle Hoehe, das Fenster scrollt */
.pn-projekt__buehne,
.pn-projekt__info { min-height: auto; }
.pn-projekt__blaettern { margin-top: var(--pn-s4); }
.pn-projekt__tasten { display: none; }
.pn-projekt__oben { padding: 14px 14px 0 20px; }
.pn-projekt__fortschritt { max-width: none; }
.pn-projekt__buehne { padding: 20px 20px 10px; }
.pn-projekt__geraet { width: 100%; }
/* Gegen die Handy-Regel der Kapitel: hier klein und schwebend */
.pn-projekt .pn-projekt__handy { position: absolute; left: auto; right: -3%; bottom: 10%; width: 24%; height: auto; padding: 1.4%; border-radius: 15% / 7%; }
.pn-projekt .pn-projekt__handy .pn-schirm { border-radius: 13.5% / 6.2%; }
.pn-projekt__mockup { max-height: 42vh; }
.pn-projekt__info { padding: 10px 20px 20px; overflow: visible; }
/* Lange Namen (z. B. Windwasserpumpe) nach deutscher Silbentrennung */
.pn-projekt__name { font-stretch: 100%; }
.pn-projekt__beschreibung { -webkit-line-clamp: 5; line-clamp: 5; }
.pn-projekt__reihe { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 20px 24px; }
.pn-projekt__daumen { width: 100%; }
}
/* Reduzierte Bewegung: Reihen stehen und lassen sich seitlich wischen */
@media (prefers-reduced-motion: reduce) {
.pn-wand { height: auto; perspective: none; }
.pn-weitere { height: auto; }
.pn-weitere-bahn { height: auto; }
.pn-weitere { position: relative; }
.pn-lauf { display: none; }
.pn-wand::before, .pn-wand::after { display: none; }
.pn-wand__ebene { position: static; width: auto; transform: none; padding: 0 20px; }
.pn-reihe__schub { transform: none !important; }
.pn-reihe__spur { animation: none; overflow-x: auto; width: auto; }
.pn-reihe__satz[aria-hidden="true"] { display: none; }
.pn-projekt[open] { animation: none; }
.pn-weitere__branche.ist-neu { animation: none; }
}
/* ---------- Projektwand: Steuerung per Skript ----------
Mit Skript (.ist-js) bewegt main eine einzige Schleife die vier Reihen:
Grundtempo, Scrolltempo und Ziehen/Werfen. Ohne Skript laeuft die
CSS-Animation von oben weiter. */
.pn-wand.ist-js .pn-reihe__spur { animation: none; }
.pn-wand.ist-js .pn-reihe__schub { transform: none !important; }
.pn-wand.ist-js { cursor: grab; }
.pn-wand.ist-ziehen { cursor: grabbing; }
/* Kacheln oeffnen das Projektfenster: Hand statt Greifhand */
.pn-wand.ist-js a,
.pn-wand.ist-js button { cursor: pointer; }
.pn-wand.ist-ziehen .pn-kachel__innen { pointer-events: none; }
.pn-wand img { -webkit-user-drag: none; user-select: none; }
.pn-wand { user-select: none; }
/* Fertige Mockups der Altseite: heller Grund wie ein Produktfoto, damit sie
neben den Screenshots nicht dunkel und klein wirken */
.pn-kachel--frei .pn-kachel__innen { background: linear-gradient(160deg, #eef3fa, #d6e0ee); }
.pn-wand__fuss {
flex: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--pn-s2);
margin-top: 12px;
}
.pn-wand__fuss .pn-wand__hinweis { display: flex; flex-wrap: wrap; gap: 6px var(--pn-s3); margin: 0; }
.pn-wand__ziehen { color: rgba(185, 196, 216, 0.45); }
.pn-wand__zufall {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid rgba(127, 225, 240, 0.4);
border-radius: 999px;
background: transparent;
color: #7fe1f0;
font: 600 15px/1 var(--font-sans);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.pn-wand__zufall svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.4, 1); }
.pn-wand__zufall circle { fill: currentColor; stroke: none; }
.pn-wand__zufall:hover { background: #7fe1f0; color: #06121c; }
.pn-wand__zufall:hover svg { transform: rotate(180deg); }
.pn-wand__zufall:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 2px; }
/* ---------- Intros: Sperre und Ueberspringen ----------
Solange ein Intro laeuft, haelt das Skript das Scrollen an (Rad, Wischen,
Tasten). Der Knopf zeigt die verbleibende Zeit als Fortschritt. */
.pn-intro-skip {
position: absolute;
left: 50%;
bottom: clamp(24px, 5vh, 48px);
z-index: 6;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 20px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--pn-schrift) 30%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--pn-grund) 70%, #000);
color: var(--pn-schrift);
font: 600 14px/1 var(--font-sans);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translate(-50%, 12px);
transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s, border-color 0.2s ease;
}
.pn-intro-skip::before {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--pn-akzent) 22%, transparent);
transform-origin: 0 50%;
transform: scaleX(0);
}
.pn-intro-skip span { position: relative; }
.pn-intro-skip kbd { position: relative; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--pn-schrift) 12%, transparent); font: 500 11px/1.3 var(--font-mono); }
.pn-intro-skip:hover { border-color: var(--pn-akzent); }
.pn-intro-skip:focus-visible { outline: 3px solid var(--pn-akzent); outline-offset: 3px; }
.pn-fall.intro-laeuft:not(.intro-offen) .pn-intro-skip {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
transition: opacity 0.4s ease 0.6s, transform 0.4s ease 0.6s, visibility 0s;
}
.pn-fall.intro-laeuft:not(.intro-offen) .pn-intro-skip::before {
transform: scaleX(1);
transition: transform var(--intro-dauer, 6s) linear;
}
/* "Intro abspielen": nach dem Intro unter dem Button, spielt es erneut ab */
.pn-fall__nochmal {
display: none;
align-items: center;
gap: 8px;
min-height: 44px;
margin: var(--pn-s2) 0 0;
padding: 8px 2px;
border: 0;
background: none;
color: color-mix(in srgb, var(--pn-schrift) 66%, transparent);
font: 600 14px/1 var(--font-sans);
cursor: pointer;
transition: color 0.2s ease;
}
html.js .pn-fall__nochmal { display: flex; }
.pn-fall__nochmal svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s ease; }
.pn-fall__nochmal:hover { color: var(--pn-akzent); }
.pn-fall__nochmal:hover svg { transform: rotate(-200deg); }
.pn-fall__nochmal:focus-visible { outline: 3px solid var(--pn-akzent); outline-offset: 3px; }
/* Auch der Knopf deckt sich mit dem Text der Szene auf */
.pn-fall__nochmal { opacity: 0; transform: translateY(14px); }
.pn-fall.ist-da .pn-fall__nochmal { opacity: 1; transform: none; transition: opacity 0.7s ease 0.4s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s, color 0.2s ease; }
/* ---------- Einstieg: dauerhaftes Intro ----------
Drei weiche Lichter in den Farben der drei Kapitel treiben langsam hinter
der Ueberschrift (nur transform, laeuft im Compositor), unten zieht ein
Band mit den Adressen aller Projekte vorbei. Ausserhalb des Fensters
haelt das Skript beides an (.ist-aus). */
.pn-start { position: relative; overflow: hidden; }
.pn-start > .wrap { position: relative; z-index: 1; }
.pn-start__licht { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Beim Runterscrollen legt sich die Farbe des ersten Kapitels weich ueber
den ganzen Einstieg (Skript: --pn-sp 0..1), von unten her kraeftiger */
.pn-start::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: radial-gradient(80% 60% at 70% 78%, rgba(224, 132, 79, 0.24), rgba(224, 132, 79, 0.08) 45%, transparent 75%);
opacity: var(--pn-sp, 0);
pointer-events: none;
}
/* unterer Rand des Einstiegs: keine Farbflaeche (die liefe der Seitenfarbe
zeitlich hinterher und zeichnete eine Kante), stattdessen laufen Lichter
und Schein per Maske nach unten aus; darunter liegt nur die Seitenflaeche */
.pn-start__licht,
.pn-start::before {
-webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.7) 62%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.7) 62%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
}
.pn-start__licht i {
position: absolute;
width: 62vmax;
height: 62vmax;
border-radius: 50%;
opacity: 0.5;
will-change: transform;
}
.pn-start__licht i:nth-child(1) { left: -12vmax; top: -24vmax; background: radial-gradient(closest-side, rgba(47, 77, 158, 0.38), transparent); animation: pn-licht-1 26s ease-in-out infinite alternate; }
.pn-start__licht i:nth-child(2) { right: -18vmax; top: -10vmax; background: radial-gradient(closest-side, rgba(110, 230, 154, 0.22), transparent); animation: pn-licht-2 32s ease-in-out infinite alternate; }
.pn-start__licht i:nth-child(3) { left: 24vw; bottom: -40vmax; background: radial-gradient(closest-side, rgba(63, 214, 232, 0.26), transparent); animation: pn-licht-3 29s ease-in-out infinite alternate; }
@keyframes pn-licht-1 { to { transform: translate3d(28vw, 18vh, 0) scale(1.15); } }
@keyframes pn-licht-2 { to { transform: translate3d(-30vw, 22vh, 0) scale(0.9); } }
@keyframes pn-licht-3 { to { transform: translate3d(18vw, -26vh, 0) scale(1.2); } }
.pn-start.ist-aus .pn-start__licht i,
.pn-start.ist-aus .pn-start__live i { animation-play-state: paused; }
/* ---------- Social Media ----------
Ein Bildschirm: Kopfzeile, darunter die Buehne mit dem Reel-Handy in der
Mitte und einer Umlaufbahn aus zwei Ellipsen. Auf der Bahn pendeln
Glaskarten im Iso-Winkel (Kanaele als Links, Reels mit Tonwelle,
Kampagnen mit wachsenden Balken), Lichtpunkte kreisen. Die Lage jeder
Karte rechnet CSS aus ihrem Winkel --w (cos/sin auf die Ellipse
40 % x 31 %, Mitte 50 % / 54 %, gleich der SVG-Bahn). */
@property --pendel { syntax: ""; inherits: false; initial-value: 0; }
@property --umlauf { syntax: ""; inherits: false; initial-value: 0deg; }
.pn-social {
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
height: 100svh;
min-height: 600px;
padding: clamp(76px, 10svh, 112px) 0 0;
overflow: hidden;
background:
radial-gradient(45% 55% at 50% 58%, rgba(110, 72, 220, 0.3), transparent 70%),
radial-gradient(40% 40% at 88% 10%, rgba(61, 220, 132, 0.1), transparent 70%),
radial-gradient(35% 45% at 10% 60%, rgba(214, 41, 118, 0.12), transparent 70%),
#05070d;
color: #fff;
}
.pn-social__kopf { position: relative; z-index: 3; flex: none; text-align: center; }
.pn-social__kicker { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 clamp(6px, 1.2svh, 16px); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #7fe1f0; }
.pn-social h2 {
/* ADence-Schrift wie alle Ueberschriften der Seite (Archivo, breit, schwer) */
margin: 0;
font-family: var(--font-sans);
font-weight: 850;
font-stretch: 112%;
font-size: clamp(30px, min(4.6vw, 6.6svh), 78px);
line-height: 1;
letter-spacing: -0.045em;
color: #fff;
text-wrap: balance;
}
.pn-social h2 em {
font-style: normal;
background: linear-gradient(100deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 85%, #4f5bd5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 0.1em;
}
/* Szene: nimmt die ganze restliche Hoehe */
.pn-social__szene {
position: relative;
flex: 1 1 0;
min-height: 0;
width: 100%;
max-width: 1500px;
margin: 0 auto;
}
/* Umlaufbahn */
.pn-orbit { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pn-orbit__bahn { fill: none; stroke: rgba(170, 150, 255, 0.34); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pn-orbit__bahn--innen { stroke: rgba(127, 225, 240, 0.22); stroke-dasharray: 2 7; animation: pn-bahn-lauf 30s linear infinite; }
@keyframes pn-bahn-lauf { to { stroke-dashoffset: -180; } }
/* Lichtpunkte auf der Bahn; hinter dem Handy (z 1), es verdeckt sie */
.pn-orbit__licht {
--rx: 40%;
--ry: 31%;
position: absolute;
z-index: 1;
left: calc(50% + cos(var(--umlauf)) * var(--rx));
top: calc(54% + sin(var(--umlauf)) * var(--ry));
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 12px 3px rgba(182, 166, 255, 0.9), 0 0 30px 8px rgba(214, 41, 118, 0.35);
animation: pn-umlauf 16s linear infinite;
animation-delay: calc(var(--l) * -5.3s);
pointer-events: none;
}
.pn-orbit__licht--innen { --rx: 31%; --ry: 22%; width: 6px; height: 6px; margin: -3px 0 0 -3px; animation-duration: 11s; animation-direction: reverse; box-shadow: 0 0 10px 3px rgba(127, 225, 240, 0.8); }
@keyframes pn-umlauf { to { --umlauf: 360deg; } }
/* Glaskarten auf der Bahn: pendeln um ihren Platz (--w0 +/- 8 Grad) */
.pn-glas {
--w: calc(var(--w0) + var(--pendel) * 8deg);
position: absolute;
z-index: 3;
left: calc(50% + cos(var(--w)) * 40%);
top: calc(54% + sin(var(--w)) * 31%);
width: clamp(130px, min(12.5vw, 24svh), 214px);
color: #fff;
text-decoration: none;
perspective: 1000px;
transform: translate(-50%, -50%) scale(calc(0.92 + sin(var(--w)) * 0.1));
/* alle im selben Takt: die Bahn schaukelt als Ganzes, keine Karte
kann eine andere einholen und ueberdecken */
animation: pn-pendel 9s ease-in-out infinite alternate;
}
@keyframes pn-pendel { from { --pendel: -1; } to { --pendel: 1; } }
.pn-glas__karte {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
padding: clamp(12px, 2svh, 20px) clamp(14px, 1.4vw, 20px);
border-radius: 20px;
background: linear-gradient(150deg, rgba(78, 82, 120, 0.62), rgba(22, 22, 40, 0.82));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
0 2px 0 rgba(140, 110, 255, 0.4),
0 9px 0 rgba(40, 30, 90, 0.55),
0 36px 50px -18px rgba(0, 0, 0, 0.85);
transform: rotateX(50deg) rotateZ(-22deg);
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.pn-glas--facebook .pn-glas__karte,
.pn-glas--linkedin .pn-glas__karte { transform: rotateX(50deg) rotateZ(22deg); }
a.pn-glas:hover .pn-glas__karte,
a.pn-glas:focus-visible .pn-glas__karte {
transform: rotateX(16deg) rotateZ(0deg) translateY(-8px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2px 0 rgba(140, 110, 255, 0.55), 0 9px 0 rgba(40, 30, 90, 0.6), 0 40px 60px -18px rgba(120, 80, 255, 0.55);
}
a.pn-glas:active .pn-glas__karte { transform: rotateX(16deg) rotateZ(0deg) translateY(-4px); }
a.pn-glas:focus-visible { outline: none; }
a.pn-glas:focus-visible .pn-glas__karte { box-shadow: 0 0 0 3px #7fe1f0; }
/* Ueber einer Karte bleibt die ganze Bahn stehen: so ist sie gut zu treffen */
.pn-social__szene:has(a.pn-glas:hover) .pn-glas { animation-play-state: paused; }
.pn-glas__karte b { font-family: var(--font-sans); font-weight: 800; font-stretch: 108%; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: -0.02em; }
.pn-glas__karte small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: rgba(220, 225, 245, 0.72); }
.pn-glas__icon {
display: grid;
place-items: center;
width: clamp(36px, 5svh, 50px);
height: clamp(36px, 5svh, 50px);
margin-bottom: 6px;
border-radius: 14px;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 10px 20px -6px rgba(0, 0, 0, 0.6);
}
.pn-glas__icon svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn-glas__icon svg .voll { fill: #fff; stroke: none; }
.pn-glas--instagram .pn-glas__icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.pn-glas--facebook .pn-glas__icon { background: linear-gradient(160deg, #3b8bff, #1660d8); }
.pn-glas--linkedin .pn-glas__icon { background: linear-gradient(160deg, #2a8ae0, #0a5aa8); }
/* Reels: Tonwelle */
.pn-glas__welle { display: flex; align-items: center; gap: 3px; height: 26px; margin-top: 8px; }
.pn-glas__welle i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #feda75, #d62976); transform: scaleY(0.25); animation: pn-welle 1.1s ease-in-out infinite alternate; }
.pn-glas__welle i:nth-child(3n) { animation-duration: 0.8s; }
.pn-glas__welle i:nth-child(3n+1) { animation-duration: 1.35s; animation-delay: -0.4s; }
.pn-glas__welle i:nth-child(4n) { animation-delay: -0.7s; }
@keyframes pn-welle { to { transform: scaleY(1); } }
/* Kampagnen: Balken wachsen, halten, fallen zurueck */
.pn-glas__balken { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin-top: 8px; }
.pn-glas__balken i { flex: 1; height: 100%; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #7fe1f0, rgba(127, 225, 240, 0.25)); transform-origin: 50% 100%; transform: scaleY(0.1); animation: pn-kampagne 5s cubic-bezier(0.3, 0.9, 0.3, 1) infinite; }
.pn-glas__balken i:nth-child(2) { animation-delay: 0.1s; }
.pn-glas__balken i:nth-child(3) { animation-delay: 0.2s; }
.pn-glas__balken i:nth-child(4) { animation-delay: 0.3s; }
.pn-glas__balken i:nth-child(5) { animation-delay: 0.4s; }
.pn-glas__balken i:nth-child(6) { animation-delay: 0.5s; }
@keyframes pn-kampagne { 0% { transform: scaleY(0.1); } 30%, 80% { transform: scaleY(var(--h)); } 100% { transform: scaleY(0.1); } }
/* Kanaele: ab und zu steigt ein Herz auf (ohne Zahlen) */
.pn-glas__herz { position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; opacity: 0; animation: pn-herzchen 7s ease-out infinite; animation-delay: calc(var(--g) * 1.6s + 1s); }
.pn-glas__herz svg { width: 100%; height: 100%; fill: #ff3d6e; filter: drop-shadow(0 0 6px rgba(255, 61, 110, 0.8)); }
@keyframes pn-herzchen { 0%, 70% { opacity: 0; transform: translateY(6px) scale(0.4); } 76% { opacity: 1; transform: translateY(0) scale(1.15); } 84% { opacity: 1; transform: translateY(-4px) scale(1); } 100% { opacity: 0; transform: translateY(-22px) scale(0.9); } }
/* Klickbare Karten (Kanaele): Pfeil-Chip oben rechts, der bei Hover/Fokus
zu "Profil oeffnen" aufklappt, und ein feiner Lichtlauf auf der Kante
alle paar Sekunden. Reels und Kampagnen haben beides nicht: so ist auf
einen Blick klar, was ein Link ist. */
.pn-glas__pfeil {
position: absolute;
right: 18px;
top: 18px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0;
height: 22px;
padding: 0 4px;
border-radius: 99px;
background: rgba(127, 225, 240, 0.1);
box-shadow: inset 0 0 0 1px rgba(127, 225, 240, 0.35);
color: #bff3fa;
transition: background-color 0.3s ease, gap 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pn-glas__pfeil svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pn-glas__pfeil em {
max-width: 0;
overflow: hidden;
font: 600 10.5px/1 var(--font-mono);
font-style: normal;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
transition: max-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}
a.pn-glas:hover .pn-glas__pfeil,
a.pn-glas:focus-visible .pn-glas__pfeil { gap: 6px; padding: 0 9px 0 11px; background: #7fe1f0; color: #06121c; }
a.pn-glas:hover .pn-glas__pfeil em,
a.pn-glas:focus-visible .pn-glas__pfeil em { max-width: 110px; opacity: 1; }
a.pn-glas:hover .pn-glas__pfeil svg,
a.pn-glas:focus-visible .pn-glas__pfeil svg { transform: translate(1px, -1px); }
/* Callouts (Hotspot mit Fuehrungslinie) an den klickbaren Karten: Auf der
Karte sitzt ein Zielpunkt mit Puls, von dort laeuft eine feine Linie
hoch (LinkedIn: runter) und knickt ab, am Ende steht die Beschriftung.
Die Linie zeichnet sich, sobald der Bereich ins Bild kommt, die Karten
nacheinander. Liegt nicht auf der gekippten Karte, sondern daneben:
so bleibt die Schrift gerade und scharf. */
.pn-callout {
--lb: clamp(40px, 4.4vw, 70px); /* Laenge waagerecht */
--lh: clamp(22px, 3.6svh, 36px); /* Laenge senkrecht */
position: absolute;
right: 22%;
top: 30%;
z-index: 4;
width: 0;
height: 0;
pointer-events: none;
}
.pn-glas--facebook .pn-callout { right: 20%; top: 26%; }
.pn-glas--linkedin .pn-callout { right: 20%; top: 66%; }
.pn-callout__ziel {
position: absolute;
left: -5px;
top: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid #7fe1f0;
background: rgba(7, 12, 23, 0.6);
box-shadow: 0 0 10px rgba(127, 225, 240, 0.7);
}
.pn-callout__ziel::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #7fe1f0; }
.pn-callout__ziel::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid rgba(127, 225, 240, 0.7);
animation: pn-zielpuls 2.4s ease-out infinite;
animation-delay: calc(var(--g) * 0.4s);
}
@keyframes pn-zielpuls { 0% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.8); } }
/* Linie als Winkel: senkrecht vom Ziel weg, dann waagerecht */
.pn-callout__linie {
position: absolute;
bottom: 0;
right: 0;
width: var(--lb);
height: var(--lh);
border-top: 1px solid rgba(127, 225, 240, 0.75);
border-right: 1px solid rgba(127, 225, 240, 0.75);
clip-path: inset(100% 0 0 100%);
}
.pn-callout__text {
position: absolute;
right: calc(var(--lb) + 8px);
bottom: calc(var(--lh) - 0.62em);
font: 600 10.5px/1.2 var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
color: #bff3fa;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
opacity: 0;
transform: translateX(6px);
transition: color 0.25s ease;
}
/* Alle Linien knicken zur Kartenmitte hin ab: rechts aussen bleibt so
Platz fuer die Kontaktleiste, nichts laeuft aus dem Bild */
/* LinkedIn: nach unten (darueber liegt die Facebook-Karte) */
.pn-callout--unten .pn-callout__linie { bottom: auto; top: 0; border-top: 0; border-bottom: 1px solid rgba(127, 225, 240, 0.75); clip-path: inset(0 0 100% 100%); }
.pn-callout--unten .pn-callout__text { bottom: auto; top: calc(var(--lh) - 0.62em); }
/* Auftritt: Ziel steht, Linie zeichnet sich vom Ziel weg, Text folgt */
.pn-social.ist-im-bild .pn-callout__linie { animation: pn-linie-zeichnen 0.7s cubic-bezier(0.6, 0, 0.2, 1) calc(0.5s + var(--g) * 0.22s) both; }
.pn-social.ist-im-bild .pn-callout__text { animation: pn-callout-text 0.45s ease-out calc(1.05s + var(--g) * 0.22s) both; }
@keyframes pn-linie-zeichnen { to { clip-path: inset(0 0 0 0); } }
@keyframes pn-callout-text { to { opacity: 1; transform: none; } }
/* Hover/Fokus: Beschriftung leuchtet, Ziel wird voll */
a.pn-glas:hover .pn-callout__text,
a.pn-glas:focus-visible .pn-callout__text { color: #fff; }
a.pn-glas:hover .pn-callout__ziel,
a.pn-glas:focus-visible .pn-callout__ziel { background: #7fe1f0; }
.pn-social:not(.ist-im-bild) .pn-callout__ziel::after { animation-play-state: paused; }
@media (max-width: 760px) {
.pn-callout { display: none; }
}
/* Mit Callout braucht es den Pfeil-Chip nicht mehr (nur am Handy, ohne Callout) */
@media (min-width: 761px) {
.pn-glas__pfeil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pn-callout__linie { clip-path: none; animation: none !important; }
.pn-callout__text { opacity: 1; transform: none; animation: none !important; }
.pn-callout__ziel::after { animation: none; }
}
/* Herz der Kanalkarten sitzt unten rechts, oben steht der Pfeil */
a.pn-glas .pn-glas__herz { top: auto; bottom: 12px; }
/* Lichtlauf auf der Kante: nur die Randlinie (Maske), alle 6 s versetzt */
a.pn-glas .pn-glas__karte::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
padding: 1.5px;
border-radius: inherit;
background: linear-gradient(115deg, transparent 38%, rgba(127, 225, 240, 0.95) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
animation: pn-kantenlicht 6s ease-in-out infinite;
animation-delay: calc(var(--g) * 1.1s);
pointer-events: none;
}
@keyframes pn-kantenlicht {
0%, 62% { background-position: 160% 0; }
92%, 100% { background-position: -60% 0; }
}
a.pn-glas:hover .pn-glas__karte::before { animation-play-state: paused; }
.pn-social:not(.ist-im-bild) a.pn-glas .pn-glas__karte::before { animation-play-state: paused; }
@media (max-width: 760px) {
.pn-glas__pfeil { right: 12px; top: 12px; height: 18px; padding: 0 3px; }
.pn-glas__pfeil svg { width: 11px; height: 11px; }
.pn-glas__pfeil em { display: none; }
a.pn-glas:hover .pn-glas__pfeil,
a.pn-glas:focus-visible .pn-glas__pfeil { padding: 0 4px; gap: 0; }
a.pn-glas .pn-glas__herz { bottom: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
a.pn-glas .pn-glas__karte::before { animation: none; display: none; }
}
/* Fuss: kurzer Text und Link */
.pn-social__fuss { position: relative; z-index: 3; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 auto; padding: clamp(6px, 1.4svh, 20px) 20px clamp(14px, 3svh, 36px); text-align: center; }
.pn-social__lead { max-width: 560px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--dark-text); text-wrap: balance; }
.pn-social__mehr {
/* 44 px Trefferflaeche (Touch), die Linie bleibt als Unterstreichung */
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
color: #7fe1f0;
font-weight: 650;
text-decoration: underline;
text-decoration-color: rgba(127, 225, 240, 0.4);
text-decoration-thickness: 1px;
text-underline-offset: 5px;
transition: text-decoration-color 0.2s ease;
}
.pn-social__mehr:hover,
.pn-social__mehr:focus-visible { text-decoration-color: #7fe1f0; }
.pn-social__mehr:focus-visible { outline: 2px solid #7fe1f0; outline-offset: 4px; border-radius: 4px; }
.pn-social__mehr:active { opacity: 0.8; }
/* Ausserhalb des Bildes steht alles still */
.pn-social:not(.ist-im-bild) .pn-glas,
.pn-social:not(.ist-im-bild) .pn-glas *,
.pn-social:not(.ist-im-bild) .pn-orbit__licht,
.pn-social:not(.ist-im-bild) .pn-orbit__bahn { animation-play-state: paused; }
/* 701 bis 1340 px: die Kontaktleiste liegt unten mittig ueber der Seite,
der Link braucht darueber Platz */
@media (min-width: 701px) and (max-width: 1340px) {
.pn-social__fuss { padding-bottom: 84px; }
}
/* Flache Fenster: der Text unten weicht, der Link bleibt */
@media (max-height: 760px) {
.pn-social__lead { display: none; }
}
/* Browser ohne cos()/sin(): feste Plaetze statt Bahn */
@supports not (left: calc(cos(10deg) * 1%)) {
.pn-glas { left: var(--x); top: var(--y); animation: none; transform: translate(-50%, -50%); }
.pn-orbit__licht { display: none; }
}
/* Buehne: Karussell aus drei Handys. Die Position (mitte, links, rechts)
setzt das Skript als data-stelle; der Wechsel laeuft ueber transform.
--kx/--ky (Skript) neigen die ganze Buehne leicht zur Maus. */
.pn-social__buehne {
/* Handybreite aus dem freien Platz: Hoehe der Buehne (cqh) minus
Bildunterschrift und Steuerung, geteilt durch das Seitenverhaeltnis */
--reel-b: clamp(120px, min(19vw, (100cqh - 84px) / 2.15), 330px);
--kx: 0;
--ky: 0;
position: absolute;
inset: clamp(8px, 1.6svh, 20px) 0 0;
z-index: 2;
container-type: size;
perspective: 1400px;
pointer-events: none;
}
.pn-social__buehne > * { pointer-events: auto; }
.pn-social__buehne::before {
/* Lichtkegel unter dem vorderen Handy */
content: "";
position: absolute;
left: 50%;
bottom: 70px;
width: 70%;
height: 120px;
margin-left: -35%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(214, 41, 118, 0.35), rgba(79, 91, 213, 0.12) 60%, transparent);
filter: blur(10px);
pointer-events: none;
}
.pn-reel {
position: absolute;
top: calc(50% - 30px);
left: 50%;
width: var(--reel-b);
margin: 0;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, filter 0.6s ease;
}
.pn-reel[data-stelle="mitte"] {
z-index: 3;
transform: translate(-50%, -50%) rotateY(calc(var(--kx) * 8deg)) rotateX(calc(var(--ky) * -6deg));
}
.pn-reel[data-stelle="links"] {
z-index: 1;
transform: translate(calc(-50% - var(--reel-b) * 0.92), -46%) rotateY(22deg) scale(0.6);
filter: brightness(0.55) saturate(0.8);
cursor: pointer;
}
.pn-reel[data-stelle="rechts"] {
z-index: 1;
transform: translate(calc(-50% + var(--reel-b) * 0.92), -46%) rotateY(-22deg) scale(0.6);
filter: brightness(0.55) saturate(0.8);
cursor: pointer;
}
.pn-reel[data-stelle="links"]:hover,
.pn-reel[data-stelle="rechts"]:hover { filter: brightness(0.8) saturate(1); }
.pn-reel__schwebe { animation: pn-reel-schweben 6s ease-in-out infinite; }
@keyframes pn-reel-schweben { 50% { transform: translateY(-10px); } }
/* Geraet: Titanrahmen mit Lichtkante, Insel, Seitentasten */
.pn-reel__geraet {
position: relative;
padding: 7px;
border-radius: 40px;
background: linear-gradient(145deg, #4a4f5a, #1a1c21 35%, #0b0c10 60%, #3a3e47);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.22),
inset 0 0 0 3px #08090c,
0 60px 90px -36px rgba(0, 0, 0, 0.95),
0 0 0 1px rgba(0, 0, 0, 0.6);
}
.pn-reel__geraet::before,
.pn-reel__geraet::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2b2e35; }
.pn-reel__geraet::before { left: -2px; top: 22%; height: 9%; box-shadow: 0 calc(100% + 14px) 0 #2b2e35; }
.pn-reel__geraet::after { right: -2px; top: 28%; height: 14%; }
.pn-reel__insel { position: absolute; z-index: 3; left: 50%; top: 15px; width: 30%; height: 22px; border-radius: 99px; background: #000; transform: translateX(-50%); }
.pn-reel__schirm {
position: relative;
aspect-ratio: 9 / 19.2;
overflow: hidden;
border-radius: 33px;
background: #000;
}
.pn-reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Glanz ueber dem Glas, wandert mit der Neigung */
.pn-reel__glanz {
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.12) 45%, transparent 60%);
transform: translateX(calc(var(--kx) * 30%));
pointer-events: none;
}
.pn-reel__oben,
.pn-reel__unten { position: absolute; left: 0; right: 0; padding: 16px; color: #fff; font-family: var(--font-sans); pointer-events: none; }
.pn-reel__oben { top: 0; display: flex; justify-content: space-between; align-items: center; padding-top: 46px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent); font-size: 15px; }
.pn-reel__oben i { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 5px; }
.pn-reel__unten { bottom: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 50px; padding-right: 56px; padding-bottom: 20px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent); font-size: 12.5px; line-height: 1.35; }
.pn-reel__unten b { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.pn-reel__unten img { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #0a1322; box-shadow: 0 0 0 1.5px #fff; }
.pn-reel__seite { position: absolute; right: 12px; bottom: 80px; display: flex; flex-direction: column; gap: 18px; pointer-events: none; }
.pn-reel__seite svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.pn-reel.ist-geliked .pn-reel__herzknopf svg { fill: #ff3040; stroke: #ff3040; animation: pn-hops 0.4s cubic-bezier(0.3, 1.8, 0.4, 1); }
.pn-reel__fortschritt { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.25); }
.pn-reel__fortschritt::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--rp, 0)); }
.pn-reel__herz {
position: absolute;
left: 50%;
top: 45%;
width: 96px;
height: 96px;
margin: -48px 0 0 -48px;
background: linear-gradient(135deg, #ff6b81, #ff3040);
clip-path: path("M48 86S8 61 8 31a20 20 0 0 1 40-8 20 20 0 0 1 40 8c0 30-40 55-40 55z");
opacity: 0;
pointer-events: none;
}
.pn-reel.herz-an .pn-reel__herz { animation: pn-herz 0.9s cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes pn-herz {
0% { opacity: 0; transform: scale(0.3); }
25% { opacity: 1; transform: scale(1.15); }
45% { transform: scale(0.95); }
70% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.1) translateY(-30px); }
}
.pn-reel figcaption {
margin-top: 20px;
text-align: center;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(185, 196, 216, 0.75);
transition: opacity 0.4s ease;
}
.pn-reel:not([data-stelle="mitte"]) figcaption { opacity: 0; }
/* Steuerung unter dem Karussell */
.pn-reel__steuerung {
position: absolute;
left: 50%;
bottom: 0;
z-index: 4;
display: flex;
align-items: center;
gap: 12px;
transform: translateX(-50%);
}
.pn-reel__knopf,
.pn-reel__ton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
min-height: 44px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
color: #fff;
font: 600 14px/1 var(--font-sans);
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pn-reel__ton { padding: 0 16px; white-space: nowrap; flex: none; }
.pn-reel__knopf svg,
.pn-reel__ton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn-reel__ton .an,
.pn-reel__ton[aria-pressed="true"] .aus { display: none; }
.pn-reel__ton[aria-pressed="true"] .an { display: block; }
.pn-reel__ton[aria-pressed="true"] { border-color: transparent; background: linear-gradient(100deg, #fa7e1e, #d62976 55%, #962fbf); }
.pn-reel__knopf:hover,
.pn-reel__ton:hover { border-color: rgba(255, 255, 255, 0.45); }
.pn-reel__knopf:focus-visible,
.pn-reel__ton:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 2px; }
.pn-reel__punkte { display: flex; gap: 6px; }
.pn-reel__punkte i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.25); transition: width 0.3s ease, background-color 0.3s ease; }
.pn-reel__punkte i.ist-an { width: 22px; background: #fff; }
.pn-social:not(.ist-im-bild) .pn-reel__schwebe { animation-play-state: paused; }
/* Reel-Oberflaeche waechst mit dem Handy (--reel-b, gestaltet fuer 290 px):
sonst bricht der Text in kleinen Handys Buchstabe fuer Buchstabe um */
.pn-reel__geraet { padding: calc(var(--reel-b) * 0.024); border-radius: calc(var(--reel-b) * 0.138); }
.pn-reel__schirm { border-radius: calc(var(--reel-b) * 0.114); }
.pn-reel__insel { top: calc(var(--reel-b) * 0.052); height: calc(var(--reel-b) * 0.076); }
.pn-reel__oben { padding: calc(var(--reel-b) * 0.159) calc(var(--reel-b) * 0.055) calc(var(--reel-b) * 0.055); font-size: calc(var(--reel-b) * 0.052); }
.pn-reel__oben i { width: calc(var(--reel-b) * 0.062); height: calc(var(--reel-b) * 0.062); }
.pn-reel__unten { gap: calc(var(--reel-b) * 0.02); padding: calc(var(--reel-b) * 0.17) calc(var(--reel-b) * 0.19) calc(var(--reel-b) * 0.069) calc(var(--reel-b) * 0.055); font-size: calc(var(--reel-b) * 0.043); }
.pn-reel__unten b { font-size: calc(var(--reel-b) * 0.045); }
.pn-reel__unten img { width: calc(var(--reel-b) * 0.076); height: calc(var(--reel-b) * 0.076); }
.pn-reel__seite { right: calc(var(--reel-b) * 0.041); bottom: calc(var(--reel-b) * 0.276); gap: calc(var(--reel-b) * 0.062); }
.pn-reel__seite svg { width: calc(var(--reel-b) * 0.086); height: calc(var(--reel-b) * 0.086); }
@media (max-width: 960px) {
/* schmal: seitliche Handys enger und kleiner, damit nichts uebersteht */
.pn-reel[data-stelle="links"] { transform: translate(calc(-50% - var(--reel-b) * 0.66), -46%) rotateY(24deg) scale(0.62); }
.pn-reel[data-stelle="rechts"] { transform: translate(calc(-50% + var(--reel-b) * 0.66), -46%) rotateY(-24deg) scale(0.62); }
}
/* Handy: die Bahn bleibt als Kulisse, die drei Kanaele stehen als kleine
Glaskacheln in einer Reihe unter dem Handy (pendeln waere hier zu eng) */
@media (max-width: 760px) {
.pn-social h2 { font-size: clamp(28px, 8.6vw, 40px); }
.pn-social__szene {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) auto;
gap: 10px;
padding: 0 16px;
}
.pn-social__buehne { --reel-b: clamp(120px, min(54vw, (100cqh - 84px) / 2.15), 300px); position: relative; inset: auto; grid-column: 1 / -1; grid-row: 1; min-height: 0; }
.pn-glas,
.pn-glas--facebook,
.pn-glas--linkedin { position: relative; left: auto; top: auto; grid-row: 2; width: auto; transform: none; animation: none; perspective: none; }
.pn-glas--reels,
.pn-glas--kampagnen { display: none; }
.pn-glas__karte,
.pn-glas--facebook .pn-glas__karte,
.pn-glas--linkedin .pn-glas__karte { align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; text-align: center; transform: none; }
a.pn-glas:hover .pn-glas__karte,
a.pn-glas:focus-visible .pn-glas__karte { transform: translateY(-2px); }
.pn-glas__icon { width: 34px; height: 34px; margin: 0 0 4px; border-radius: 11px; }
.pn-glas__karte b { font-size: 13px; }
.pn-glas__karte small { display: none; }
.pn-glas__herz { right: 8px; top: 6px; width: 16px; height: 16px; }
.pn-social__lead { font-size: 14px; }
}
@media (max-width: 760px) and (max-height: 860px) {
.pn-social__lead { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pn-reel__schwebe { animation: none; }
.pn-reel, .pn-social__buehne { transition: none; }
}
/* ---------- Auftakt (Eroeffnungs-Intro) ----------
Ablauf ca. 3,6 s, alles transform/opacity:
0,0-1,2 Kacheln regnen versetzt herein (Welle von der Mitte aus)
0,6-2,2 "350+" zaehlt hoch (Skript), Satz blendet ein
2,4-3,3 Raster zoomt stark auf, Text weg, Flaeche blendet aus */
.pn-auftakt { display: none; }
html.pn-auftakt-an .pn-auftakt {
position: fixed;
inset: 0;
contain: strict;
z-index: 6000;
display: grid;
place-items: center;
overflow: hidden;
background: #04070d;
perspective: 1200px;
}
html.pn-auftakt-an body { overflow: hidden; }
/* Einstieg wartet, bis der Auftakt weg ist, und baut sich dann auf */
html.pn-auftakt-an .pn-start *:not(.pn-start__monitor) { animation-play-state: paused !important; }
html.pn-auftakt-an:not(.pn-auftakt-landung) .pn-start__monitor { animation-play-state: paused !important; }
.pn-auftakt__raster {
position: absolute;
left: 50%;
top: 50%;
display: grid;
grid-template-columns: repeat(6, 22vw);
gap: 1.4vw;
transform: translate(-50%, -50%) rotateX(18deg) rotateZ(-8deg) scale(0.9);
transform-origin: 50% 50%;
}
.pn-auftakt__raster i {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 1vw;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2vw 4vw -1vw rgba(0, 0, 0, 0.8);
opacity: 0;
transform: translateY(-40vh) rotate(-6deg) scale(0.7);
}
/* Akt 1 startet mit dem ersten Bild, rein per CSS: kein Warten auf
Skript oder Bilder. Das Skript liest danach den Startzeitpunkt dieser
Animation aus und haengt den weiteren Ablauf exakt daran an. */
html.pn-auftakt-an .pn-auftakt .pn-auftakt__raster i {
animation: pn-regen 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both;
/* Welle: Spalte und Zeile versetzt (--d setzt das Markup) */
animation-delay: var(--d);
}
.pn-auftakt__raster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0.55; }
.pn-auftakt__raster i { background: #04070d; }
@keyframes pn-regen {
to { opacity: 1; transform: none; }
}
.pn-auftakt__mitte { position: relative; z-index: 2; text-align: center; color: #fff; }
.pn-auftakt__mitte::before {
content: "";
position: absolute;
inset: -12vw -18vw;
z-index: -1;
background: radial-gradient(closest-side, rgba(4, 7, 13, 0.92), rgba(4, 7, 13, 0.6) 55%, transparent);
}
.pn-auftakt__zahl {
margin: 0;
font-weight: 900;
font-stretch: 115%;
font-size: clamp(110px, 20vw, 320px);
line-height: 0.85;
letter-spacing: -0.06em;
font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, #ffffff 20%, #7fe1f0 70%, #2fa3ba);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 0.06em;
opacity: 0;
transform: scale(0.85);
}
html.pn-auftakt-an .pn-auftakt .pn-auftakt__zahl { animation: pn-auftakt-ein 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) 0.5s both; }
.pn-auftakt__zahl i { font-style: normal; }
.pn-auftakt__satz {
margin: 1.4vw 0 0;
font-weight: 750;
font-size: clamp(20px, 2.6vw, 42px);
letter-spacing: -0.02em;
opacity: 0;
}
html.pn-auftakt-an .pn-auftakt .pn-auftakt__satz { animation: pn-auftakt-ein 0.6s ease 1.2s both; }
.pn-auftakt__satz b { color: #3ddc84; }
@keyframes pn-auftakt-ein { from { opacity: 0; transform: translateY(14px) scale(0.92); } to { opacity: 1; transform: none; } }
/* --- Auftakt, Akt 1 und 3: die Kacheln leben ---
Jede Kachel ist ein kleines Browserfenster: Leiste mit Ladebalken, dann
baut sich die Seite von oben auf und bewegt sich leicht (Kamerafahrt).
Die ganze Wand driftet (translate, unabhaengig von transform). Akt 3
(.ist-live): Von der Mitte laeuft eine Welle, jede Kachel leuchtet gruen
auf und bekommt ihr LIVE-Siegel, ein Lichtstreif zieht ueber alles,
zwei Ringe pulsen aus der Zahl. */
html.pn-auftakt-an .pn-auftakt .pn-auftakt__raster { animation: pn-wanddrift 12s linear both; }
@keyframes pn-wanddrift { from { translate: 2vw -1vw; } to { translate: -3vw 1.5vw; } }
.pn-auftakt__raster i { position: relative; }
.pn-auftakt__chrom {
position: absolute;
inset: 0 0 auto;
z-index: 2;
height: 9%;
background:
radial-gradient(circle at 5% 50%, #ff5f57 0 0.22vw, transparent 0.26vw),
radial-gradient(circle at 9% 50%, #febc2e 0 0.22vw, transparent 0.26vw),
radial-gradient(circle at 13% 50%, #28c840 0 0.22vw, transparent 0.26vw),
#0d1220;
}
.pn-auftakt__chrom::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, #3fd6e8, #7fe1f0);
box-shadow: 0 0 8px #3fd6e8;
transform-origin: 0 50%;
transform: scaleX(0);
}
html.pn-auftakt-an .pn-auftakt .pn-auftakt__chrom::after { animation: pn-laden 0.75s cubic-bezier(0.5, 0, 0.2, 1) calc(var(--d) + 0.45s) both; }
@keyframes pn-laden { 0% { transform: scaleX(0); opacity: 1; } 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* Bildaufbau: ein Vorhang (::before) faehrt nach unten weg. transform
statt clip-path: laeuft auf der Grafikkarte, nichts wird neu gezeichnet */
.pn-auftakt__raster i::before {
content: "";
position: absolute;
inset: 9% 0 0;
z-index: 1;
background: #0d1220;
transform-origin: 50% 100%;
}
html.pn-auftakt-an .pn-auftakt .pn-auftakt__raster i::before { animation: pn-aufbau 0.7s cubic-bezier(0.3, 0, 0.2, 1) calc(var(--d) + 1s) both; }
/* Kamerafahrt nur in jeder zweiten Kachel: halb so viele Ebenen fuer die Grafikkarte */
html.pn-auftakt-an .pn-auftakt .pn-auftakt__raster i:nth-child(odd) img { animation: pn-kamerafahrt 7s ease-in-out calc(var(--d) + 1s) infinite alternate; }
@keyframes pn-aufbau { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes pn-kamerafahrt { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(-3%); } }
/* Akt 3: LIVE-Welle */
.pn-auftakt__raster i::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
box-shadow: inset 0 0 0 2px #3ddc84, 0 0 2.4vw rgba(61, 220, 132, 0.55);
background: rgba(61, 220, 132, 0.18);
opacity: 0;
pointer-events: none;
}
.pn-auftakt.ist-live .pn-auftakt__raster i::after { animation: pn-gruen 1.5s ease-out var(--r) both; }
@keyframes pn-gruen { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0.35; background: transparent; box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.6), 0 0 0 transparent; } }
.pn-auftakt__raster em {
position: absolute;
right: 5%;
bottom: 7%;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 0.35vw;
padding: 0.25vw 0.6vw;
border-radius: 99px;
background: #3ddc84;
color: #04110a;
font: 700 clamp(8px, 0.72vw, 13px)/1 var(--font-mono);
font-style: normal;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0;
transform: scale(0.4);
}
.pn-auftakt__raster em::before { content: ""; width: 0.4vw; height: 0.4vw; min-width: 5px; min-height: 5px; border-radius: 50%; background: #04110a; }
.pn-auftakt.ist-live .pn-auftakt__raster em { animation: pn-siegel 0.55s cubic-bezier(0.3, 1.7, 0.4, 1) calc(var(--r) + 0.12s) both; }
@keyframes pn-siegel { to { opacity: 1; transform: none; } }
.pn-auftakt.ist-live .pn-auftakt__raster img { opacity: 0.78; transition: opacity 0.8s ease; }
/* "Alle live." erscheint erst mit der Welle */
.pn-auftakt__satz b { display: inline-block; opacity: 0; transform: translateY(0.3em) scale(0.8); }
.pn-auftakt.ist-live .pn-auftakt__satz b { animation: pn-siegel 0.6s cubic-bezier(0.3, 1.6, 0.4, 1) both; text-shadow: 0 0 24px rgba(61, 220, 132, 0.6); }
/* Ringe aus der Mitte */
.pn-auftakt__ring {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 40vmin;
height: 40vmin;
margin: -20vmin 0 0 -20vmin;
border-radius: 50%;
border: 2px solid rgba(61, 220, 132, 0.8);
box-shadow: 0 0 40px rgba(61, 220, 132, 0.45), inset 0 0 40px rgba(61, 220, 132, 0.25);
opacity: 0;
pointer-events: none;
}
.pn-auftakt.ist-live .pn-auftakt__ring { animation: pn-ring 1.6s cubic-bezier(0.1, 0.6, 0.3, 1) both; }
.pn-auftakt.ist-live .pn-auftakt__ring--2 { animation-delay: 0.35s; }
@keyframes pn-ring { 0% { opacity: 0.9; transform: scale(0.2); } 100% { opacity: 0; transform: scale(3.2); } }
/* Lichtstreif quer ueber die Wand */
.pn-auftakt__scan {
position: absolute;
inset: -20% -40%;
z-index: 2;
background: linear-gradient(105deg, transparent 44%, rgba(127, 225, 240, 0.22) 49%, rgba(255, 255, 255, 0.35) 50%, rgba(127, 225, 240, 0.22) 51%, transparent 56%);
transform: translateX(-60%);
opacity: 0;
pointer-events: none;
}
.pn-auftakt.ist-live .pn-auftakt__scan { animation: pn-scan 1.4s cubic-bezier(0.5, 0, 0.3, 1) 0.2s both; }
@keyframes pn-scan { 0% { opacity: 1; transform: translateX(-60%); } 100% { opacity: 1; transform: translateX(60%); } }
.pn-auftakt.ist-auswahl .pn-auftakt__ring,
.pn-auftakt.ist-auswahl .pn-auftakt__scan { display: none; }
.pn-auftakt.ist-weg { opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
.pn-auftakt__skip {
position: absolute;
right: 28px;
bottom: 28px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
background: rgba(4, 7, 13, 0.7);
color: #fff;
font: 600 14px/1 var(--font-sans);
cursor: pointer;
}
.pn-auftakt__skip kbd { padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); font: 500 11px/1.3 var(--font-mono); }
.pn-auftakt__skip:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 3px; }
@media (max-width: 700px) {
.pn-auftakt__raster { grid-template-columns: repeat(4, 34vw); }
.pn-auftakt__skip { left: 50%; right: auto; transform: translateX(-50%); }
}
/* --- Auftakt, Akt 2: Auswahl und Landung --- */
/* Abdunkeln der ganzen Wand in einem Schritt (opacity), ohne Weichzeichner */
.pn-auftakt.ist-auswahl .pn-auftakt__raster { opacity: 0.36; transform: translate(-50%, -50%) rotateX(24deg) rotateZ(-8deg) scale(0.82); transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease; }
.pn-auftakt.ist-auswahl .pn-auftakt__mitte {
opacity: 0;
transform: translateY(-14vh) scale(0.7);
transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}
/* Die eine Kachel, die zur Hauptfigur wird */
.pn-auftakt__held {
position: absolute;
left: 50%;
top: 48%;
z-index: 3;
width: min(54vw, 860px);
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 14px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 50px 100px -30px rgba(0, 0, 0, 0.9), 0 0 120px -20px rgba(224, 132, 79, 0.55);
opacity: 0;
transform: translate(-50%, -50%) scale(0.4) rotate(-6deg);
transform-origin: 50% 50%;
will-change: transform;
}
.pn-auftakt__held img { display: block; width: 100%; height: auto; }
.pn-auftakt.ist-auswahl .pn-auftakt__held {
opacity: 1;
transform: translate(-50%, -50%);
transition: opacity 0.5s ease 0.35s, transform 1s cubic-bezier(0.2, 0.9, 0.2, 1) 0.35s;
}
.pn-auftakt__unter {
position: absolute;
left: 50%;
top: calc(48% + min(54vw, 860px) * 0.3125 + 26px);
z-index: 3;
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 1.5em;
color: #fff;
font-family: var(--font-mono);
font-size: clamp(13px, 1.1vw, 16px);
letter-spacing: 0.06em;
white-space: nowrap;
opacity: 0;
transform: translateX(-50%);
}
.pn-auftakt__unter i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 12px #3ddc84; }
.pn-auftakt__unter span::after { content: "▍"; margin-left: 2px; color: #3ddc84; animation: pn-cursor 0.9s steps(1) infinite; }
.pn-auftakt.ist-auswahl .pn-auftakt__unter { opacity: 1; transition: opacity 0.4s ease 0.9s; }
/* Landung: alles ausser der Kachel verschwindet, Hintergrund wird durchsichtig */
html.pn-auftakt-an .pn-auftakt.ist-landung { background-color: transparent; transition: background-color 0.9s ease 0.15s; }
.pn-auftakt.ist-landung .pn-auftakt__raster,
.pn-auftakt.ist-landung .pn-auftakt__unter,
.pn-auftakt.ist-landung .pn-auftakt__skip { opacity: 0; transition: opacity 0.45s ease; }
.pn-auftakt.ist-landung .pn-auftakt__held { box-shadow: none; transition: box-shadow 0.8s ease; }
/* Waehrend der Landung: Monitor im Einstieg sofort sichtbar (Ziel der Kachel) */
html.pn-auftakt-landung .pn-start__monitor,
.pn-start__monitor.ist-gelandet { animation: none !important; opacity: 1; transform: none; }
html.pn-auftakt-landung .pn-start { visibility: visible; }
/* Die Folien im Monitor laufen ab der Landung, damit die Seite dort schon steht */
html.pn-auftakt-an.pn-auftakt-landung .pn-start__schirm * { animation-play-state: running !important; }
/* ---------- Tablet und Handy ---------- */
@media (max-width: 960px) {
.pn { --pn-rand-l: 20px; --pn-rand-r: 20px; }
.pn-start__zahlen { gap: var(--pn-s4); }
.pn-fall__bahn { height: 330vh; }
.pn-fall__buehne {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
align-items: start;
gap: var(--pn-s3);
padding: 92px 20px 28px;
}
.pn-fall__buehne::before { top: 38%; right: 0; width: 100%; height: 60%; }
.pn-fall__titel { font-size: clamp(34px, 11cqi, 56px); }
.pn-fall__lead { display: none; }
.pn-weitere { border-radius: 24px 24px 0 0; }
.pn-filter { margin: 0 -20px var(--pn-s2); padding: 0 48px 0 20px; }
.pn-filter::-webkit-scrollbar { display: none; }
.pn-filter__knopf { flex: none; white-space: nowrap; }
.pn-wand { perspective: 1000px; }
.pn-weitere { padding-top: 92px; }
.pn-wand__ebene { width: 320vw; gap: 14px; transform: translate(-50%, -50%) rotateX(calc(16deg - var(--wand-p) * 10deg)) rotateZ(-6deg); }
.pn-reihe__satz { gap: 14px; padding-right: 14px; }
.pn-kachel { width: 200px; }
.pn-wand:hover .pn-kachel__innen:not(:hover) { opacity: 1; }
.pn-wand__ziehen { display: none; }
.pn-weitere__titel { gap: 12px; }
.pn-weitere__zahl { font-size: clamp(64px, min(20vw, 11vh), 120px); }
.pn-weitere__text { display: none; }
.pn-weitere__text { font-size: 16px; }
.pn-fall__meta { margin-bottom: var(--pn-s2); }
.pn-fall__link { margin-top: var(--pn-s3); min-height: 48px; padding: 12px 22px; }
/* Auf dem Handy nur das Handy: die mobile Live-Seite gross und mittig,
so hoch, wie die Buehne unter Titel und Button Platz laesst */
.pn-szene { justify-self: center; align-self: stretch; display: flex; justify-content: center; min-height: 0; }
.pn-geraete { display: flex; justify-content: center; height: 100%; }
.pn-fall .pn-display,
.pn-fall .pn-display__fuss,
.pn-fall .pn-display__live { display: none; }
/* Das Handy ist hier das Ziel des Intros: steht von Anfang an still */
.pn-handy,
.pn-fall.ist-da .pn-handy {
position: relative;
left: auto;
bottom: auto;
width: auto;
height: min(100%, 560px);
padding: 7px;
border-radius: 34px;
opacity: 1;
transform: none;
}
.pn-handy .pn-schirm { border-radius: 27px; }
}
@media (max-width: 960px) {
.pn-start__inhalt { grid-template-columns: 1fr; }
/* Unter dem Text steht der Monitor sofort (keine Einblendung): er ist
hier das groesste Element im ersten Bild und bestimmt die Ladezeit */
.pn-start__monitor { max-width: 560px; justify-self: start; animation: none; }
}
@media (max-width: 560px) {
/* Wand-Titel: "350+" oben, die zwei Zeilen darunter (passt sonst nicht) */
.pn-weitere__titel { flex-direction: column; align-items: flex-start; gap: 10px; }
.pn-weitere__worte { padding-bottom: 0; }
.pn-start__text { font-size: 17px; }
.pn-start__zahlen { justify-content: space-between; gap: var(--pn-s3); }
}
/* Reduzierte Bewegung: kein Mitscrollen, keine Kipp- und Einblendbewegung */
@media (prefers-reduced-motion: reduce) {
.pn,
.nav.pn-nav .nav__inner { transition: none; }
.pn-start__licht i,
.pn-start__live i,
.pn-start__folie,
.pn-start__folie img,
.pn-start__adresse b,
.pn-zeile > span,
.pn-start__fuss,
.pn-start__weiter,
.pn-display__live i { animation: none; }
/* Monitor im Einstieg: erstes Projekt still zeigen */
.pn-start__folie:first-child,
.pn-start__adresse b:first-child { opacity: 1; }
html.js .pn-intro { display: none; }
.pn-fall__bahn { height: auto; }
.pn-fall__buehne { position: relative; height: auto; min-height: 100vh; }
.pn-intro-skip { display: none; }
html.js .pn-fall__nochmal { display: none; }
/* Monitor im Abschluss: fertige Beispielseite still, ohne Ablauf */
.pn-wort > span,
.pn-fall__meta,
.pn-fall__lead,
.pn-fall__link { opacity: 1; transform: none; }
.pn-handy,
.pn-schirm img { transform: none; }
.pn-handy { opacity: 1; }
.pn-fall + .pn-fall,
.pn-fall + .pn-weitere-bahn { margin-top: 0; }
}
/* =====================================================================
Eine Sektion = ein Bildschirm (Vorgabe 16.10.2026)
Einstieg (schmal) und Abschluss fuellen genau die Fensterhoehe (100svh),
Groessen richten sich nach der Hoehe (svh) bzw. nach dem freien Platz
(Container-Hoehe cqh). Die Monitore bekommen ihre Breite aus dem Platz,
der unter dem Text bleibt (--mw). Erst unter 560 px Hoehe (Handy quer)
darf eine Sektion wachsen. Social Media: siehe dort.
===================================================================== */
@media (max-width: 960px) {
/* Einstieg: Text oben, darunter der Monitor in genau dem Platz, der
bleibt (der Monitor ist Groessen-Container, --mw rechnet daraus) */
.pn-start {
justify-content: flex-start;
height: 100vh;
height: 100svh;
min-height: 560px;
box-sizing: border-box;
padding: clamp(80px, 11svh, 104px) 0 clamp(12px, 2.4svh, 32px);
}
.pn-start > .wrap { width: 100%; }
.pn-start__inhalt { display: flex; flex-direction: column; align-items: stretch; flex: 1 1 0; min-height: 0; gap: clamp(14px, 2.6svh, 32px); }
.pn-start__links { flex: none; }
.pn-start__kicker { margin-bottom: clamp(10px, 2svh, 24px); }
.pn-start__titel { font-size: clamp(34px, min(15cqi, 7.2svh), 96px); }
.pn-start__text { max-width: 560px; margin-top: clamp(10px, 2svh, 24px); font-size: clamp(15px, 2svh, 18px); }
.pn-start__zahlen { margin-top: clamp(10px, 2svh, 24px); padding-top: clamp(8px, 1.6svh, 16px); }
.pn-start__zahlen dd { font-size: clamp(22px, 3.4svh, 40px); }
.pn-start__weiter { margin-top: clamp(12px, 2.4svh, 32px); min-height: 48px; padding: 12px 22px; }
.pn-start__monitor {
--mw: min(100cqw, (100cqh - 34px) * 1.25, 560px);
flex: 1 1 0;
min-height: 0;
width: 100%;
max-width: none;
container-type: size;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-self: auto;
}
.pn-start__monitor > .pn-display,
.pn-start__monitor > .pn-display__fuss { width: var(--mw); }
.pn-start__monitor > .pn-display__live { width: 100%; }
/* Abschluss: Text, darunter der Monitor im Restplatz */
}
@media (max-height: 559px) {
/* Handy quer: zu flach fuer einen Bildschirm, die Sektionen wachsen */
.pn-start, .pn-social { height: auto; }
}
/* =====================================================================
Abschluss: Platz 351 ist frei
Wand aus 7 x 5 Kacheln, schraeg im Raum. Die fehlende Kachel (Spalte 4,
Reihe 3) ist der Anfrage-Knopf. Die Wand ist so verschoben, dass genau
diese Luecke auf dem Punkt --px/--py der Sektion liegt, und dreht sich
um sie: Neigung und Mausbewegung lassen die Luecke an ihrem Platz.
--w Kachelbreite, --h Hoehe (16:10), --g Abstand
Ein Bildschirm hoch (100svh), Text links ueber einem Verlauf.
===================================================================== */
.pn-abschluss {
--px: 71%;
--py: 52%;
--mx: 0;
--my: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
height: 100svh;
min-height: 560px;
box-sizing: border-box;
padding: clamp(80px, 11svh, 120px) 0 clamp(16px, 4svh, 56px);
overflow: hidden;
background: radial-gradient(40% 50% at var(--px) var(--py), rgba(63, 214, 232, 0.16), transparent 70%), #070c17;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Verlauf: links dunkel fuer den Text, rechts frei fuer die Wand */
.pn-abschluss::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, #070c17 0%, #070c17 28%, rgba(7, 12, 23, 0.82) 44%, rgba(7, 12, 23, 0.15) 64%, rgba(7, 12, 23, 0) 78%),
linear-gradient(180deg, #070c17 0%, transparent 18%, transparent 82%, #070c17 100%);
pointer-events: none;
}
.pn-platz {
--w: clamp(150px, min(15vw, 26svh), 300px);
--h: calc(var(--w) * 0.625);
--g: calc(var(--w) * 0.08);
position: absolute;
inset: 0;
z-index: 0;
perspective: 1500px;
}
.pn-platz__wand {
position: absolute;
left: calc(var(--px) - 3.5 * var(--w) - 3 * var(--g));
top: calc(var(--py) - 2.5 * var(--h) - 2 * var(--g));
display: grid;
grid-template-columns: repeat(7, var(--w));
grid-auto-rows: var(--h);
gap: var(--g);
transform-origin: calc(3.5 * var(--w) + 3 * var(--g)) calc(2.5 * var(--h) + 2 * var(--g));
transform: rotateX(calc(24deg + var(--my) * -4deg)) rotateY(calc(var(--mx) * 6deg)) rotateZ(-10deg);
transform-style: preserve-3d;
transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Kacheln: fliegen von der Luecke aus nach aussen herein, glimmen ab und zu */
.pn-platz__kachel {
position: relative;
display: block;
overflow: hidden;
border-radius: calc(var(--w) * 0.05);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 50px -24px rgba(0, 0, 0, 0.9);
opacity: 0;
transform: translateZ(-160px) scale(0.85);
}
.pn-platz__kachel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: brightness(0.42) saturate(0.75); }
.pn-abschluss.ist-da .pn-platz__kachel { animation: pn-platz-ein 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) calc(var(--r) + 0.1s) both; }
@keyframes pn-platz-ein { to { opacity: 1; transform: none; } }
/* Jede dritte Kachel geht reihum kurz "live": heller, gruene Kante */
.pn-platz__kachel:nth-child(3n)::after,
.pn-platz__kachel:nth-child(5n)::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1.5px #3ddc84, 0 0 24px rgba(61, 220, 132, 0.4);
background: rgba(61, 220, 132, 0.08);
opacity: 0;
animation: pn-platz-live 11s ease-in-out infinite;
animation-delay: calc(var(--k) * -0.73s);
}
@keyframes pn-platz-live { 0%, 86%, 100% { opacity: 0; } 90%, 95% { opacity: 1; } }
/* Die Luecke: gestrichelter, leuchtender Rahmen, Inhalt mittig */
.pn-platz__frei {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border-radius: calc(var(--w) * 0.05);
background: radial-gradient(circle at 50% 50%, rgba(127, 225, 240, 0.14), rgba(127, 225, 240, 0.03) 70%);
color: #fff;
text-decoration: none;
transform: translateZ(30px);
transition: background-color 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pn-platz__rahmen {
position: absolute;
inset: 0;
border-radius: inherit;
border: 2px dashed rgba(127, 225, 240, 0.85);
box-shadow: 0 0 30px rgba(63, 214, 232, 0.35), inset 0 0 30px rgba(63, 214, 232, 0.15);
animation: pn-platz-glimmen 2.8s ease-in-out infinite;
}
@keyframes pn-platz-glimmen { 50% { box-shadow: 0 0 60px rgba(63, 214, 232, 0.6), inset 0 0 40px rgba(63, 214, 232, 0.28); } }
.pn-platz__inhalt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: calc(var(--w) * 0.02); text-align: center; transition: opacity 0.3s ease; }
.pn-platz__plus {
position: relative;
width: calc(var(--w) * 0.16);
height: calc(var(--w) * 0.16);
margin-bottom: calc(var(--w) * 0.02);
border-radius: 50%;
border: 1.5px solid #7fe1f0;
box-shadow: 0 0 18px rgba(127, 225, 240, 0.6);
}
.pn-platz__plus::before,
.pn-platz__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44%; height: 2px; margin: -1px 0 0 -22%; border-radius: 2px; background: #7fe1f0; }
.pn-platz__plus::after { transform: rotate(90deg); }
.pn-platz__inhalt b { font-weight: 850; font-stretch: 110%; font-size: calc(var(--w) * 0.1); letter-spacing: -0.03em; line-height: 1; }
.pn-platz__inhalt small { font: 500 calc(var(--w) * 0.05)/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #7fe1f0; }
.pn-platz__inhalt em { display: inline-block; width: 0.55em; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: #7fe1f0; animation: pn-cursor 0.9s steps(1) infinite; }
/* Seitengeruest, das sich nach dem Klick des Geisterzeigers aufbaut */
.pn-platz__geruest { position: absolute; inset: 10% 9%; z-index: 1; pointer-events: none; }
.pn-platz__geruest i { position: absolute; border-radius: 3px; background: rgba(127, 225, 240, 0.22); box-shadow: inset 0 0 0 1px rgba(127, 225, 240, 0.5); transform-origin: 0 50%; opacity: 0; }
.pn-platz__geruest i:nth-child(1) { left: 0; right: 0; top: 0; height: 9%; }
.pn-platz__geruest i:nth-child(2) { left: 0; width: 52%; top: 20%; height: 14%; }
.pn-platz__geruest i:nth-child(3) { left: 0; width: 34%; top: 40%; height: 8%; }
.pn-platz__geruest i:nth-child(4) { left: 58%; right: 0; top: 20%; height: 40%; }
.pn-platz__geruest i:nth-child(5) { left: 0; right: 0; top: 70%; height: 22%; }
/* Geister-Mauszeiger: Schleife 9 s (fliegt ein, klickt, Geruest baut
sich auf, verblasst). Laeuft nur, solange die Sektion im Bild ist. */
.pn-platz__zeiger {
position: absolute;
left: 50%;
top: 50%;
z-index: 4;
width: calc(var(--w) * 0.11);
height: calc(var(--w) * 0.11);
fill: #fff;
stroke: #070c17;
stroke-width: 1.4;
stroke-linejoin: round;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
opacity: 0;
pointer-events: none;
}
.pn-platz__klick { position: absolute; left: 50%; top: 50%; z-index: 3; width: calc(var(--w) * 0.2); height: calc(var(--w) * 0.2); margin: calc(var(--w) * -0.1) 0 0 calc(var(--w) * -0.1); border-radius: 50%; border: 2px solid #7fe1f0; opacity: 0; pointer-events: none; }
.pn-abschluss.ist-im-bild .pn-platz__zeiger { animation: pn-geist 9s cubic-bezier(0.45, 0, 0.2, 1) 1.6s infinite; }
.pn-abschluss.ist-im-bild .pn-platz__klick { animation: pn-geist-klick 9s ease-out 1.6s infinite; }
.pn-abschluss.ist-im-bild .pn-platz__geruest i { animation: pn-geruest 9s ease-out 1.6s infinite; }
.pn-abschluss.ist-im-bild .pn-platz__geruest i:nth-child(2) { animation-name: pn-geruest-2; }
.pn-abschluss.ist-im-bild .pn-platz__geruest i:nth-child(3) { animation-name: pn-geruest-3; }
.pn-abschluss.ist-im-bild .pn-platz__geruest i:nth-child(4) { animation-name: pn-geruest-4; }
.pn-abschluss.ist-im-bild .pn-platz__geruest i:nth-child(5) { animation-name: pn-geruest-5; }
.pn-abschluss.ist-im-bild .pn-platz__inhalt { animation: pn-platz-inhalt 9s ease 1.6s infinite; }
@keyframes pn-geist {
0% { opacity: 0; transform: translate(260%, 230%); }
6% { opacity: 1; }
24% { opacity: 1; transform: translate(-10%, -10%); }
27% { transform: translate(-10%, -10%) scale(0.82); }
30% { transform: translate(-10%, -10%) scale(1); }
44% { opacity: 1; transform: translate(-150%, 120%); }
52%, 100% { opacity: 0; transform: translate(-150%, 120%); }
}
@keyframes pn-geist-klick { 0%, 26% { opacity: 0; transform: scale(0.3); } 28% { opacity: 1; transform: scale(0.5); } 40%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes pn-platz-inhalt { 0%, 28% { opacity: 1; } 32%, 84% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes pn-geruest { 0%, 30% { opacity: 0; transform: scaleX(0); } 36%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: none; } }
@keyframes pn-geruest-2 { 0%, 34% { opacity: 0; transform: scaleX(0); } 40%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: none; } }
@keyframes pn-geruest-3 { 0%, 38% { opacity: 0; transform: scaleX(0); } 44%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: none; } }
@keyframes pn-geruest-4 { 0%, 40% { opacity: 0; transform: scaleY(0); } 47%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: none; } }
@keyframes pn-geruest-5 { 0%, 44% { opacity: 0; transform: scaleX(0); } 51%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: none; } }
/* Hover/Fokus auf der Luecke: sie hebt sich, fuellt sich, alles andere wartet */
.pn-platz__frei:hover,
.pn-platz__frei:focus-visible { background-color: rgba(127, 225, 240, 0.16); transform: translateZ(70px); }
.pn-platz__frei:hover .pn-platz__rahmen,
.pn-platz__frei:focus-visible .pn-platz__rahmen { border-style: solid; }
.pn-platz__frei:hover *,
.pn-platz__frei:focus-visible * { animation-play-state: paused !important; }
.pn-platz__frei:active { transform: translateZ(50px); }
.pn-platz__frei:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.pn-abschluss:not(.ist-im-bild) .pn-platz__kachel::after,
.pn-abschluss:not(.ist-im-bild) .pn-platz__rahmen { animation-play-state: paused; }
/* Text links */
.pn-abschluss__inhalt { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.pn-abschluss__text { max-width: 560px; pointer-events: auto; }
.pn-abschluss__kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(10px, 2svh, 22px); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #7fe1f0; }
.pn-abschluss h2 {
margin: 0;
font-weight: 850;
font-stretch: 112%;
font-size: clamp(36px, min(6.4vw, 10.5svh), 112px);
line-height: 0.9;
letter-spacing: -0.05em;
color: #fff;
text-wrap: balance;
}
.pn-abschluss h2 span {
background: linear-gradient(100deg, #a6f0f8, #3fd6e8 50%, #2fa3ba);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 0.06em;
}
.pn-abschluss__lead { max-width: 470px; margin: clamp(12px, 2.6svh, 28px) 0 0; font-size: clamp(15px, 2svh, 18px); line-height: 1.6; color: var(--dark-text); text-wrap: pretty; }
.pn-abschluss__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(16px, 3.6svh, 40px); }
.pn-abschluss__knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
min-height: 52px;
padding: 14px 26px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
background: rgba(7, 12, 23, 0.5);
color: #fff;
font-weight: 700;
font-size: 16px;
white-space: nowrap;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.pn-abschluss__knopf:hover { border-color: #7fe1f0; transform: translateY(-2px); }
.pn-abschluss__knopf:active { transform: translateY(0); }
.pn-abschluss__knopf--voll { border-color: #7fe1f0; background: #7fe1f0; color: #06121c; }
.pn-abschluss__knopf--voll:hover { box-shadow: 0 16px 40px -14px #7fe1f0; }
.pn-abschluss__knopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pn-abschluss__wege {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: clamp(12px, 2vw, 40px);
margin: clamp(16px, 4.6svh, 56px) 0 0;
padding: 0;
list-style: none;
}
.pn-abschluss__wege li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid rgba(127, 225, 240, 0.4); }
.pn-abschluss__wege a { display: inline-flex; align-items: center; min-height: 40px; color: #fff; font-weight: 650; font-size: 17px; text-decoration: none; transition: color 0.2s ease; }
.pn-abschluss__wege a:hover,
.pn-abschluss__wege a:focus-visible { color: #7fe1f0; }
.pn-abschluss__wege a:focus-visible { outline: 2px solid #7fe1f0; outline-offset: 3px; border-radius: 4px; }
.pn-abschluss__wege a:active { opacity: 0.8; }
.pn-abschluss__wege span { font-size: 13.5px; color: rgba(185, 196, 216, 0.7); }
@keyframes pn-hops { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@media (min-width: 701px) and (max-width: 1340px) {
/* Kontaktleiste unten mittig: darueber Platz lassen */
.pn-abschluss { padding-bottom: 90px; }
}
@media (max-width: 960px) {
/* Handy/Tablet: die Luecke oben mittig, der Text unten */
.pn-abschluss { --px: 50%; --py: 27%; justify-content: flex-end; padding: clamp(80px, 11svh, 104px) 0 clamp(16px, 3svh, 32px); }
.pn-abschluss::before { background: linear-gradient(180deg, #070c17 0%, transparent 10%, transparent 34%, rgba(7, 12, 23, 0.9) 50%, #070c17 60%); }
.pn-platz { --w: clamp(130px, min(36vw, 22svh), 260px); }
.pn-abschluss__text { max-width: none; }
.pn-abschluss h2 { font-size: clamp(34px, min(11vw, 6.6svh), 64px); }
.pn-abschluss__knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px; }
.pn-abschluss__knopf { min-height: 48px; padding: 12px 18px; font-size: 15px; }
.pn-abschluss__wege { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pn-abschluss__wege a { font-size: 15px; }
.pn-abschluss__wege span { font-size: 12.5px; }
}
@media (max-width: 420px) {
.pn-abschluss__knopf { padding: 11px 13px; font-size: 13.5px; }
.pn-abschluss__wege a { font-size: 14px; }
}
@media (max-height: 559px) {
.pn-abschluss { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
.pn-platz__kachel { opacity: 1; transform: none; animation: none !important; }
.pn-platz__kachel::after, .pn-platz__rahmen, .pn-platz__zeiger, .pn-platz__klick, .pn-platz__geruest i, .pn-platz__inhalt, .pn-platz__inhalt em { animation: none !important; }
.pn-platz__wand { transition: none; }
}
/* =====================================================================
Social Media: Intro (leuchtendes ADence-Zeichen in 3D), ca. 8,6 s
Zustaende an .pn-social: si-bereit (liegt bereit, verdeckt die Sektion),
si-laeuft (Ablauf), si-gelandet (Handyrahmen sitzt auf dem Reel),
si-auftritt (Aufbau nach dem Ueberspringen).
0,0 Funke rast aus der Tiefe heran, Lichtring (Zuendung)
0,9 acht Konturlagen bauen sich von hinten auf, das Licht wandert
1,9 Kanaele kreisen, darunter wechseln Reels / Kampagnen / Community
4,0 Explosionsansicht: Lagen fahren auseinander, das Zeichen kippt,
dahinter zieht ein Feed aus den eigenen Reels hoch, Herzen
5,2 "Auch im Feed live."
6,35 Kollaps mit Blitz, das Zeichen schrumpft
6,6 leuchtender Handyrahmen erscheint, 6,9 Landung auf dem mittleren
Reel (Skript, FLIP), der Grund wird durchsichtig, die Sektion
baut sich darunter auf
Jede Lage ist eine Maske (Kontur aus dem Logo), darunter dreht sich ein
Farbverlauf. Nur transform und opacity.
===================================================================== */
.pn-sintro { display: none; }
.pn-social.si-bereit .pn-sintro {
position: absolute;
inset: 0;
z-index: 20;
display: grid;
place-items: center;
overflow: hidden;
contain: strict;
}
.pn-sintro__grund {
position: absolute;
inset: 0;
background:
radial-gradient(40% 50% at 50% 46%, rgba(110, 72, 220, 0.16), transparent 70%),
#020306;
}
.pn-social.si-bereit > :not(.pn-sintro):not(.pn-sintro__skip) { opacity: 0; }
.pn-sintro__buehne {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(18px, 4svh, 44px);
perspective: 1100px;
transform-style: preserve-3d;
}
.pn-sintro__marke {
position: relative;
z-index: 2;
width: min(44vw, 58svh, 600px);
aspect-ratio: 319.5 / 214.5;
transform-style: preserve-3d;
transform: rotateX(16deg) rotateY(-28deg);
}
/* Lage: Maske = Kontur, Inhalt = drehender Farbverlauf */
.pn-sintro__lage {
position: absolute;
inset: 0;
overflow: hidden;
-webkit-mask: var(--m-linie) center / 100% 100% no-repeat;
mask: var(--m-linie) center / 100% 100% no-repeat;
transform: translateZ(calc(var(--z) * -7px));
opacity: calc(0.62 - var(--z) * 0.07);
}
.pn-sintro__lage > i {
position: absolute;
left: 50%;
top: 50%;
width: 160%;
aspect-ratio: 1;
margin: -80% 0 0 -80%;
background: conic-gradient(from 0deg, #3fd6e8, #4f5bd5 18%, #962fbf 34%, #d62976 50%, #fa7e1e 64%, #feda75 74%, #3fd6e8 88%, #3fd6e8);
animation: pn-si-licht 4.2s linear infinite;
}
@keyframes pn-si-licht { to { transform: rotate(360deg); } }
.pn-sintro__lage--front { opacity: 1; }
.pn-sintro__lage--glut { -webkit-mask-image: var(--m-glut); mask-image: var(--m-glut); opacity: 0.95; transform: translateZ(1px); }
.pn-sintro__lage--fuell { -webkit-mask-image: var(--m-fuell); mask-image: var(--m-fuell); opacity: 0.26; transform: translateZ(-2px); }
/* Fuellung ohne Kegelverlauf: dessen Mittelpunkt schimmerte sonst als
kleiner Kreis im "A" durch */
.pn-sintro__lage--fuell > i { background: linear-gradient(120deg, #3fd6e8, #4f5bd5 30%, #962fbf 55%, #d62976 78%, #fa7e1e); animation: none; }
/* Kanaele im Orbit: Winkel --umlauf (cos/sin), Tiefe per translateZ */
.pn-sintro__chip {
--a: calc(var(--umlauf) + var(--o) * 120deg);
position: absolute;
left: calc(50% + cos(var(--a)) * 62%);
top: calc(52% + sin(var(--a)) * 10%);
display: grid;
place-items: center;
width: clamp(38px, 4.4vw, 58px);
aspect-ratio: 1;
border-radius: 30%;
background: linear-gradient(150deg, rgba(90, 94, 140, 0.7), rgba(20, 20, 38, 0.9));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 14px 30px -10px rgba(0, 0, 0, 0.9);
transform: translate(-50%, -50%) translateZ(calc(sin(var(--a)) * 170px)) scale(calc(0.9 + sin(var(--a)) * 0.15));
opacity: 0;
}
.pn-sintro__chip svg { width: 52%; height: 52%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn-sintro__chip svg .voll { fill: #fff; stroke: none; }
.pn-sintro__chip--ig { box-shadow: inset 0 0 0 1px rgba(214, 41, 118, 0.6), 0 0 24px -4px rgba(214, 41, 118, 0.7); }
.pn-sintro__chip--fb { box-shadow: inset 0 0 0 1px rgba(59, 139, 255, 0.6), 0 0 24px -4px rgba(59, 139, 255, 0.7); }
.pn-sintro__chip--in { box-shadow: inset 0 0 0 1px rgba(42, 138, 224, 0.6), 0 0 24px -4px rgba(42, 138, 224, 0.7); }
/* Zuendung: eine feine Lichtlinie oeffnet sich aus der Mitte, ein weicher
Lichtring breitet sich aus, daraus bauen sich die Lagen auf */
.pn-sintro__linie {
position: absolute;
left: 50%;
top: 38%;
z-index: 1;
width: min(80vw, 1100px);
height: 1px;
margin-left: calc(min(80vw, 1100px) / -2);
background: linear-gradient(90deg, transparent, rgba(127, 225, 240, 0.7) 30%, #fff 50%, rgba(214, 41, 118, 0.7) 70%, transparent);
box-shadow: 0 0 18px 2px rgba(150, 120, 255, 0.55);
transform: scaleX(0);
opacity: 0;
}
.pn-sintro__blitz {
position: absolute;
left: 50%;
top: 38%;
z-index: 1;
width: 30vmin;
height: 30vmin;
margin: -15vmin 0 0 -15vmin;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 0 40px rgba(127, 225, 240, 0.6), inset 0 0 40px rgba(150, 47, 191, 0.4);
opacity: 0;
}
/* Feed aus den eigenen Reels, schraeg im Raum hinter dem Zeichen */
.pn-sintro__feed {
position: absolute;
left: 50%;
top: 40%;
z-index: 0;
display: grid;
grid-template-columns: repeat(4, clamp(90px, 10vw, 170px));
gap: clamp(14px, 1.6vw, 26px);
transform: translate(-50%, -50%) translateZ(-420px) rotateX(18deg) rotateZ(-8deg);
opacity: 0;
}
.pn-sintro__feed i {
display: block;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: 14px;
box-shadow: 0 0 0 1px rgba(182, 166, 255, 0.45), 0 0 30px -6px rgba(150, 47, 191, 0.6);
transform: translateY(calc(mod(var(--f), 2) * 40%));
}
.pn-sintro__feed img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
/* Herzen steigen auf */
.pn-sintro__herzen { position: absolute; left: 50%; bottom: -10%; z-index: 4; width: min(60vw, 700px); height: 0; transform: translateX(-50%); }
.pn-sintro__herzen i {
position: absolute;
left: calc(8% + var(--h) * 13%);
bottom: 0;
width: 26px;
height: 26px;
background: linear-gradient(135deg, #ff6b81, #d62976);
clip-path: path("M13 23S5 18 5 11.4A4.4 4.4 0 0 1 13 8.6 4.4 4.4 0 0 1 21 11.4C21 18 13 23 13 23z");
filter: drop-shadow(0 0 6px rgba(255, 61, 110, 0.8));
opacity: 0;
}
.pn-sintro__herzen i:nth-child(even) { width: 18px; height: 18px; transform: scale(0.7); }
/* Titel: Klappwechsel der Worte, am Ende die Aussage */
.pn-sintro__titel { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; text-align: center; perspective: 600px; }
.pn-sintro__titel small { font: 500 12px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(191, 243, 250, 0.8); opacity: 0; }
.pn-sintro__wechsel { position: relative; display: grid; place-items: center; min-width: 12ch; height: 1.1em; font-weight: 850; font-stretch: 112%; font-size: clamp(28px, min(4vw, 6.4svh), 64px); line-height: 1; letter-spacing: -0.045em; color: #fff; }
.pn-sintro__wechsel b { grid-area: 1 / 1; font-weight: inherit; white-space: nowrap; opacity: 0; transform-origin: 50% 50% -0.5em; }
.pn-sintro__wechsel b:nth-child(1) { color: #7fe1f0; }
.pn-sintro__wechsel b:nth-child(2) { color: #b6a6ff; }
.pn-sintro__wechsel b:nth-child(3) { color: #ff8fb1; }
.pn-sintro__wechsel em { font-style: normal; background: linear-gradient(100deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 85%, #4f5bd5); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; }
/* Handyrahmen fuer die Landung */
.pn-sintro__handy {
overflow: hidden; /* Lichtring bleibt im Geraet */
position: absolute;
left: 50%;
top: 50%;
z-index: 6;
height: min(62svh, 560px);
aspect-ratio: 9 / 19.2;
border-radius: 13% / 6.2%;
box-shadow: 0 0 50px -6px rgba(150, 47, 191, 0.7), 0 0 90px -20px rgba(63, 214, 232, 0.6);
transform: translate(-50%, -50%) scale(0.6);
opacity: 0;
pointer-events: none;
}
/* Schirm im Rahmen: dunkles Glas, darin leuchtet klein das Zeichen weiter
(das grosse Zeichen ist gerade in den Rahmen geschrumpft) */
.pn-sintro__schirm {
position: absolute;
inset: 2.4% 4.6%;
display: grid;
place-items: center;
border-radius: 11% / 5.2%;
background: radial-gradient(60% 40% at 50% 45%, rgba(110, 72, 220, 0.28), transparent 70%), #05060b;
}
.pn-sintro__schirm > i {
position: relative;
width: 58%;
aspect-ratio: 319.5 / 214.5;
overflow: hidden;
-webkit-mask: var(--m-glut) center / 100% 100% no-repeat;
mask: var(--m-glut) center / 100% 100% no-repeat;
}
.pn-sintro__schirm > i::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 180%;
aspect-ratio: 1;
margin: -90% 0 0 -90%;
background: conic-gradient(from 0deg, #3fd6e8, #4f5bd5 18%, #962fbf 34%, #d62976 50%, #fa7e1e 64%, #feda75 74%, #3fd6e8 88%, #3fd6e8);
animation: pn-si-licht 2.4s linear infinite;
}
/* --- Ablauf (si-laeuft) --- */
.pn-social.si-laeuft .pn-sintro__grund { animation: pn-si-weg 0.9s ease 7.55s both; }
@keyframes pn-si-weg { to { opacity: 0; } }
.pn-social.si-laeuft .pn-sintro__linie { animation: pn-si-linie 1.3s cubic-bezier(0.6, 0, 0.2, 1) 0.15s both; }
@keyframes pn-si-linie {
0% { opacity: 0; transform: scaleX(0); }
15% { opacity: 1; }
50% { opacity: 1; transform: scaleX(1); }
100% { opacity: 0; transform: scaleX(1) scaleY(0.4); }
}
.pn-social.si-laeuft .pn-sintro__blitz { animation: pn-si-blitz 1.1s cubic-bezier(0.1, 0.6, 0.3, 1) 0.6s both; }
.pn-social.si-laeuft .pn-sintro__blitz--2 { animation-delay: 6.32s; }
/* 0 %: unsichtbar, sonst stuende der zweite Ring (Verzoegerung 6,3 s)
bis dahin als kleiner Kreis mitten im Zeichen */
@keyframes pn-si-blitz { 0% { opacity: 0; transform: scale(0.1); } 2% { opacity: 1; transform: scale(0.15); } 100% { opacity: 0; transform: scale(3.6); } }
.pn-social.si-laeuft .pn-sintro__marke { animation: pn-si-dreh 7s cubic-bezier(0.45, 0, 0.25, 1) both; }
.pn-social.si-morph .pn-sintro__chip { opacity: 0 !important; transition: opacity 0.3s ease; }
.pn-social.si-morph .pn-sintro__marke.ist-uebergeben { visibility: hidden; }
@keyframes pn-si-dreh {
0% { transform: translateZ(-240px) rotateX(26deg) rotateY(-52deg) scale(0.82); }
45% { transform: translateZ(0) rotateX(8deg) rotateY(-10deg) scale(1); }
60% { transform: translateZ(-60px) rotateX(24deg) rotateY(-40deg) scale(0.96); }
80% { transform: translateZ(-40px) rotateX(-6deg) rotateY(32deg) scale(0.96); }
91% { transform: translateZ(30px) rotateX(0deg) rotateY(0deg) scale(1.04); }
100% { transform: translateZ(0) rotateX(0deg) rotateY(0deg) scale(0.5); }
}
@keyframes pn-si-marke-weg { to { opacity: 0; } }
/* Lagen: hinten zuerst aufbauen, dann Explosionsansicht und Kollaps */
.pn-social.si-laeuft .pn-sintro__lage {
animation:
pn-si-lage 0.6s ease-out calc(0.85s + (7 - var(--z)) * 0.08s) both,
pn-si-explosion 2.5s cubic-bezier(0.5, 0, 0.3, 1) 3.95s both;
}
.pn-social.si-laeuft .pn-sintro__lage--fuell,
.pn-social.si-laeuft .pn-sintro__lage--glut,
.pn-social.si-laeuft .pn-sintro__lage--front { animation: pn-si-lage 0.6s ease-out 1.45s both, pn-si-vor 2.5s cubic-bezier(0.5, 0, 0.3, 1) 3.95s both; }
@keyframes pn-si-lage { from { opacity: 0; } }
@keyframes pn-si-explosion {
0% { transform: translateZ(calc(var(--z) * -7px)); }
35%, 72% { transform: translateZ(calc(var(--z) * -54px)); }
94% { transform: translateZ(calc(var(--z) * -2px)); }
100% { transform: translateZ(calc(var(--z) * -7px)); }
}
@keyframes pn-si-vor { 0%, 100% { transform: translateZ(0); } 35%, 72% { transform: translateZ(46px); } 94% { transform: translateZ(4px); } }
.pn-social.si-laeuft .pn-sintro__chip { animation: pn-si-ein 0.6s ease-out 1.9s both, pn-umlauf 6s linear infinite; }
@keyframes pn-si-ein { to { opacity: 1; } }
.pn-social.si-laeuft .pn-sintro__feed { animation: pn-si-feed 2.9s cubic-bezier(0.4, 0, 0.3, 1) 3.9s both; }
@keyframes pn-si-feed {
0% { opacity: 0; transform: translate(-50%, -20%) translateZ(-420px) rotateX(18deg) rotateZ(-8deg); }
25%, 70% { opacity: 0.85; }
100% { opacity: 0; transform: translate(-50%, -85%) translateZ(-420px) rotateX(18deg) rotateZ(-8deg); }
}
.pn-social.si-laeuft .pn-sintro__herzen i { animation: pn-si-herz 1.7s cubic-bezier(0.3, 0.6, 0.4, 1) calc(4.3s + var(--h) * 0.27s) both; }
@keyframes pn-si-herz {
0% { opacity: 0; translate: 0 0; }
15% { opacity: 1; }
100% { opacity: 0; translate: calc((var(--h) - 3) * 9px) -62svh; }
}
.pn-social.si-laeuft .pn-sintro__titel small { animation: pn-si-ein 0.6s ease 2.3s both; }
.pn-social.si-laeuft .pn-sintro__titel { animation: pn-si-marke-weg 0.4s ease 6.5s both; }
.pn-social.si-laeuft .pn-sintro__wechsel b { animation: pn-si-wort 0.95s cubic-bezier(0.3, 0.7, 0.3, 1) calc(2.5s + var(--w) * 0.9s) both; }
.pn-social.si-laeuft .pn-sintro__wechsel .pn-sintro__schluss { animation: pn-si-wort-schluss 0.7s cubic-bezier(0.3, 0.7, 0.3, 1) 5.2s both; }
@keyframes pn-si-wort {
0% { opacity: 0; transform: rotateX(-90deg); }
22%, 76% { opacity: 1; transform: none; }
100% { opacity: 0; transform: rotateX(90deg); }
}
@keyframes pn-si-wort-schluss { from { opacity: 0; transform: rotateX(-90deg); } to { opacity: 1; transform: none; } }
.pn-social.si-laeuft .pn-sintro__handy { animation: pn-si-handy-ein 0.01s linear 6.5s both, pn-si-handy-glut 0.6s ease 7.1s both; }
@keyframes pn-si-handy-ein { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pn-si-handy-glut { from { box-shadow: none; } }
/* Lichtkontur: zwei Koepfe laufen von oben Mitte um das Geraet */
.pn-sintro__kontur { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 79, 154, 0.9)) drop-shadow(0 0 14px rgba(139, 92, 255, 0.6)); }
/* Strichstaerke in viewBox-Einheiten: non-scaling-stroke bricht in Chrome
die Normierung von pathLength (Luecken an den Seiten) */
.pn-sintro__kontur path { fill: none; stroke: url(#pn-si-kg); stroke-width: 0.85; stroke-linecap: round; stroke-dasharray: 0.5 1; stroke-dashoffset: 0.5; }
.pn-social.si-laeuft .pn-sintro__kontur path { animation: pn-si-kontur 0.62s cubic-bezier(0.5, 0, 0.2, 1) 6.5s both; }
@keyframes pn-si-kontur { to { stroke-dashoffset: 0; } }
/* Glas fuellt sich hinter dem Zeichen, erst wenn die Kontur geschlossen ist */
.pn-sintro__schirm { opacity: 0; }
.pn-social.si-laeuft .pn-sintro__schirm { animation: pn-si-glas 0.35s ease 7.0s both, pn-si-loch-ruhe 0s 0s both; }
@keyframes pn-si-glas { to { opacity: 1; } }
@keyframes pn-si-loch-ruhe { to { --loch: 0%; } }
.pn-sintro__schirm > i { visibility: hidden; }
.pn-social.si-morph .pn-sintro__schirm > i.ist-da,
.pn-social.si-gelandet .pn-sintro__schirm > i { visibility: visible; }
/* Uebergang ins Handy ("Bildschirm geht an"): das echte Handy steht sofort
unter dem Rahmen. Im Glas des Rahmens oeffnet sich von der Mitte ein
Kreis (--loch), darunter erscheint das laufende Video; das Leuchtzeichen
zoomt nach vorn und verglueht, ein Lichtring laeuft mit der Kante nach
aussen. Danach loest sich der Rahmen auf, das Handy glueht kurz nach. */
@property --loch { syntax: ""; inherits: false; initial-value: 0%; }
.pn-sintro__schirm {
-webkit-mask: radial-gradient(circle at 50% 46%, transparent var(--loch), #000 calc(var(--loch) + 7%));
mask: radial-gradient(circle at 50% 46%, transparent var(--loch), #000 calc(var(--loch) + 7%));
}
.pn-social.si-gelandet .pn-sintro__schirm { opacity: 1; animation: pn-si-loch 0.7s cubic-bezier(0.55, 0, 0.2, 1) both; }
@keyframes pn-si-loch { to { --loch: 140%; } }
.pn-social.si-gelandet .pn-sintro__schirm > i { animation: pn-si-zeichen-weg 0.5s cubic-bezier(0.5, 0, 0.3, 1) both; }
@keyframes pn-si-zeichen-weg { to { opacity: 0; transform: scale(1.9); } }
.pn-sintro__portal {
/* mittig per inset + margin auto (Prozent-Raender beziehen sich auf die
Breite und verschoben den Ring sonst nach oben links) */
position: absolute;
inset: 0;
width: 40%;
height: auto;
aspect-ratio: 1;
margin: auto;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 24px 6px rgba(214, 41, 118, 0.7), inset 0 0 24px 4px rgba(63, 214, 232, 0.6);
opacity: 0;
pointer-events: none;
}
.pn-social.si-gelandet .pn-sintro__portal { animation: pn-si-portal 0.75s cubic-bezier(0.55, 0, 0.2, 1) both; }
@keyframes pn-si-portal { 0% { opacity: 1; transform: scale(0.1); } 70% { opacity: 0.9; } 100% { opacity: 0; transform: scale(4.2); } }
.pn-social.si-gelandet .pn-sintro__handy { animation: pn-si-handy-aus 0.45s ease 0.55s both; }
@keyframes pn-si-handy-aus { from { opacity: 1; } to { opacity: 0; } }
/* Das echte vordere Handy wartet unsichtbar, bis der Rahmen auf seinem Platz
sitzt, dann tauschen beide: nie zwei Bilder uebereinander */
.pn-social.si-laeuft .pn-reel[data-stelle="mitte"] .pn-reel__schwebe { opacity: 0; }
.pn-social.si-gelandet .pn-reel[data-stelle="mitte"] .pn-reel__schwebe { opacity: 1; }
.pn-social.si-gelandet .pn-reel[data-stelle="mitte"] .pn-reel__geraet { animation: pn-si-reelglut 1.4s ease-out both; }
@keyframes pn-si-reelglut {
0% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 2px rgba(214, 41, 118, 0.9), 0 0 70px 10px rgba(150, 47, 191, 0.7); }
100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 0 3px #08090c, 0 60px 90px -36px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.6); }
}
/* Waehrend der Landung baut sich die Sektion darunter auf (keine Pause) */
.pn-social.si-laeuft .pn-social__kopf,
.pn-social.si-laeuft .pn-social__szene,
.pn-social.si-laeuft .pn-social__fuss { animation: pn-si-sektion-ein 1s cubic-bezier(0.2, 0.8, 0.2, 1) 7.6s both; }
/* Die Buehne nur einblenden, nicht bewegen: das Ziel der Landung muss
waehrend des Flugs stillstehen. Ebenso schwebt das vordere Handy erst
nach der Landung wieder. */
.pn-social.si-laeuft .pn-social__szene { animation: pn-si-ein-nur 0.9s ease 7.45s both; }
@keyframes pn-si-ein-nur { from { opacity: 0; } to { opacity: 1; } }
.pn-social.si-laeuft .pn-reel[data-stelle="mitte"] .pn-reel__schwebe,
.pn-social.si-gelandet .pn-reel[data-stelle="mitte"] .pn-reel__schwebe { animation: none; }
.pn-social.si-laeuft .pn-social__fuss { animation-delay: 7.8s; }
@keyframes pn-si-sektion-ein { from { opacity: 0; transform: scale(0.96) translateY(16px); } to { opacity: 1; transform: none; } }
/* Nach dem Ueberspringen baut sich die Sektion auf */
.pn-social.si-auftritt .pn-social__kopf,
.pn-social.si-auftritt .pn-social__szene,
.pn-social.si-auftritt .pn-social__fuss { animation: pn-si-sektion 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pn-social.si-auftritt .pn-social__szene { animation-delay: 0.12s; }
.pn-social.si-auftritt .pn-social__fuss { animation-delay: 0.24s; }
@keyframes pn-si-sektion { from { opacity: 0; transform: scale(0.94) translateY(20px); } }
/* Ueberspringen-Knopf */
.pn-sintro__skip {
position: absolute;
left: 50%;
bottom: clamp(16px, 4svh, 40px);
z-index: 25;
display: none;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
background: rgba(4, 7, 13, 0.7);
color: #fff;
font: 600 14px/1 var(--font-sans);
white-space: nowrap;
cursor: pointer;
transform: translateX(-50%);
transition: border-color 0.2s ease;
}
.pn-social.si-laeuft .pn-sintro__skip { display: inline-flex; animation: pn-si-marke-weg 0.3s ease 7.3s both; }
.pn-sintro__skip:hover { border-color: rgba(255, 255, 255, 0.5); }
.pn-sintro__skip:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 3px; }
.pn-sintro__skip kbd { padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); font: 500 11px/1.3 var(--font-mono); }
.pn-social__nochmal { margin-top: 2px; }
.pn-social:not(.ist-im-bild) .pn-sintro * { animation-play-state: paused; }
@media (min-width: 701px) and (max-width: 1340px) {
.pn-sintro__skip { bottom: 90px; }
}
@media (max-width: 760px) {
.pn-sintro__marke { width: min(70vw, 44svh); }
.pn-sintro__chip { left: calc(50% + cos(var(--a)) * 54%); }
.pn-sintro__feed { grid-template-columns: repeat(3, 26vw); }
.pn-sintro__handy { height: min(56svh, 480px); }
}
@supports not (left: calc(cos(10deg) * 1%)) {
.pn-sintro__chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pn-sintro, .pn-sintro__skip { display: none !important; }
}
/* =====================================================================
Feinschliff (16.10.2026)
1. Abstand zu den festen Leisten: links die Sektions-Spur (ab 961 px
mit Beschriftung), rechts ab 1341 px die Kontaktleiste. Der Inhalt
haelt auf jeder Breite 88 px Abstand zum Fensterrand, sonst stiessen
Kicker und Ueberschriften auf Laptops (1024 bis 1500 px) an die Spur.
2. Social: Story-Leiste unter der Ueberschrift, Glanz auf "live.",
Player-Leiste aus Glas statt einzelner Knoepfe, Fuss in einer Zeile.
===================================================================== */
/* --box: Hoechstbreite des Kastens (Einstieg ist breiter als .wrap) */
.pn .wrap { --box: var(--wrap); }
.pn .pn-start__inhalt { --box: var(--pn-breite); }
@media (min-width: 961px) {
.pn .wrap { padding-left: max(clamp(1.25rem, 4vw, 2.5rem), calc(88px - (100vw - min(100vw, var(--box))) / 2)); }
.pn-social__szene { width: calc(100% - 176px); }
}
@media (min-width: 1341px) {
.pn .wrap { padding-right: max(clamp(1.25rem, 4vw, 2.5rem), calc(88px - (100vw - min(100vw, var(--box))) / 2)); }
}
/* 701 bis 1340 px: Kontaktleiste unten mittig, die Fusszeile der Wand
(Zaehler, Hinweis, Zufall) muss darueber stehen */
@media (min-width: 701px) and (max-width: 1340px) {
.pn-weitere { padding-bottom: 78px; }
}
/* Story-Leiste */
.pn-social__stories {
display: flex;
gap: 5px;
width: min(300px, 64vw);
margin: clamp(10px, 1.8svh, 18px) auto 0;
}
.pn-social__stories i { --sp: 0; position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.pn-social__stories b {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, #feda75, #fa7e1e 35%, #d62976 65%, #962fbf);
transform-origin: 0 50%;
transform: scaleX(var(--sp));
transition: transform 0.25s linear;
}
/* Glanz, der ueber "live." wandert */
.pn-social h2 em {
background: linear-gradient(100deg, #feda75 0%, #fa7e1e 18%, #d62976 36%, #962fbf 52%, #ffffff 58%, #962fbf 64%, #4f5bd5 80%, #feda75 100%) 0 0 / 300% 100%;
-webkit-background-clip: text;
background-clip: text;
animation: pn-live-glanz 6s ease-in-out infinite;
}
@keyframes pn-live-glanz { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
.pn-social:not(.ist-im-bild) h2 em { animation-play-state: paused; }
/* Bildunterschrift steckt jetzt in der Player-Leiste (fuer Screenreader bleibt sie) */
.pn-reel figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
/* Player-Leiste aus Glas */
.pn-reel__steuerung {
gap: 4px;
padding: 5px;
border-radius: 999px;
background: rgba(14, 14, 28, 0.78);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px -16px rgba(0, 0, 0, 0.9);
}
.pn-reel__knopf { border-color: transparent; background: transparent; }
.pn-reel__knopf:hover { border-color: transparent; background: rgba(255, 255, 255, 0.1); }
.pn-reel__knopf:active { background: rgba(255, 255, 255, 0.16); }
.pn-reel__info {
display: inline-flex;
align-items: baseline;
gap: 6px;
min-width: 158px;
padding: 0 10px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
white-space: nowrap;
color: rgba(220, 225, 245, 0.75);
}
.pn-reel__info b { font-weight: 600; color: #fff; }
.pn-reel__info i { font-style: normal; color: rgba(220, 225, 245, 0.45); }
.pn-reel__info em { font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; color: #ffb3cf; }
.pn-reel__ton { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); }
/* Figur und Leiste: der Platz der Bildunterschrift entfaellt */
.pn-reel { top: calc(50% - 24px); }
/* Fuss: Satz und Link in einer Zeile, Link als feine Pille */
.pn-social__fuss { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.pn-social__lead { max-width: 420px; font-size: 14px; text-align: left; line-height: 1.45; }
.pn-social__mehr {
position: relative;
gap: 8px;
min-height: 42px;
padding: 0 18px;
border-radius: 999px;
background: rgba(127, 225, 240, 0.06);
box-shadow: inset 0 0 0 1px rgba(127, 225, 240, 0.4);
text-decoration: none;
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.pn-social__mehr span { transition: transform 0.25s ease; }
.pn-social__mehr:hover,
.pn-social__mehr:focus-visible { background: rgba(127, 225, 240, 0.14); box-shadow: inset 0 0 0 1px #7fe1f0, 0 10px 30px -12px rgba(127, 225, 240, 0.7); }
.pn-social__mehr:hover span { transform: translateX(3px); }
.pn-social__mehr:active { transform: translateY(1px); }
/* kleiner Live-Punkt vorn in der Pille */
.pn-social__mehr-ring { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18), 0 0 10px #3ddc84; animation: pn-puls 1.8s ease-in-out infinite; }
.pn-social__nochmal { --pn-akzent: #7fe1f0; margin: 0; opacity: 1; transform: none; color: rgba(220, 225, 245, 0.7); }
@media (max-width: 760px) {
.pn-social__fuss { gap: 6px 12px; }
.pn-social__lead { display: none; }
.pn-reel__info { min-width: 0; padding: 0 6px; }
.pn-reel__info em { display: none; }
.pn-reel__ton span { display: none; }
.pn-reel__ton { padding: 0 12px; }
}
@media (max-height: 760px) {
.pn-social__lead { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pn-social h2 em, .pn-social__mehr-ring { animation: none; }
}
/* =====================================================================
Social-Modus (html.pn-sozial, Skript): solange die Social-Sektion im
Bild ist, nimmt die ganze Oberflaeche zwei weiche Social-Farben an,
Pink (--sm1) und Violett (--sm2). Kopfleiste, Sektions-Spur,
Kontaktleiste, Chat, "Nach oben", Fortschrittslinie und Scrollleiste
bekommen den Zwei-Farben-Verlauf statt einer Volltonfarbe. Uebergaenge
langsam (0,9 s), wie eine Lichtstimmung, die umschlaegt.
Im Intro: volumetrischer Lichtnebel aus zwei grossen weichen
Lichtquellen, die langsam kreisen (nur transform/opacity, Verlaeufe
statt Weichzeichner), dazu feines Korn und Lichtstrahlen.
===================================================================== */
html.pn-sozial {
--sm1: #ff4f9a;
--sm2: #8b5cff;
--sm-verlauf: linear-gradient(135deg, var(--sm1), var(--sm2));
}
html.pn-sozial .scrollbeam i {
background: linear-gradient(90deg, var(--sm1), var(--sm2));
box-shadow: 0 0 14px rgba(255, 79, 154, 0.6), 0 0 4px rgba(139, 92, 255, 0.9);
}
html.pn-sozial::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sm1), var(--sm2)); }
/* Kopfleiste: Glas mit zweifarbiger Kante */
html.pn-sozial .nav.pn-nav .nav__inner {
border-color: rgba(255, 79, 154, 0.32);
box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7), 0 0 40px -18px rgba(139, 92, 255, 0.6), inset 0 0 0 1px rgba(139, 92, 255, 0.12);
}
html.pn-sozial .nav.pn-nav .btn--primary { border-color: rgba(255, 79, 154, 0.6); }
html.pn-sozial .nav.pn-nav .btn--primary:hover { background: var(--sm-verlauf); border-color: transparent; color: #fff; }
/* Kontaktleiste: Kante und Symbol im Verlauf */
html.pn-sozial .rail__btn {
border-color: rgba(255, 79, 154, 0.38);
color: #ffb3d4;
box-shadow: inset 0 0 0 1px rgba(139, 92, 255, 0.18), 0 0 18px -8px rgba(139, 92, 255, 0.6);
}
html.pn-sozial .rail__btn:hover { border-color: var(--sm1); color: #fff; }
html.pn-sozial .rail__btn::after { border-color: var(--sm1); }
html.pn-sozial .rail__btn--cta,
html.pn-sozial .totop,
html.pn-sozial .chatknopf {
background: var(--sm-verlauf);
color: #fff;
box-shadow: 0 10px 30px -10px rgba(255, 79, 154, 0.7), 0 0 30px -10px rgba(139, 92, 255, 0.7);
}
@media (max-width: 1340px) {
html.pn-sozial .rail { border-color: rgba(255, 79, 154, 0.32); box-shadow: 0 0 40px -16px rgba(139, 92, 255, 0.6); }
}
/* Sektions-Spur: das aktive Segment im Verlauf */
html.pn-sozial .pn-leiste a.ist-aktiv::after { background: linear-gradient(180deg, var(--sm1), var(--sm2)); box-shadow: 0 0 12px rgba(255, 79, 154, 0.8); }
html.pn-sozial .pn-leiste a.ist-aktiv b span { color: var(--sm1); }
/* --- Intro: zweifarbiges Licht --- */
.pn-sintro__grund { overflow: hidden; background: #050309; }
.pn-sintro__grund::before,
.pn-sintro__grund::after {
content: "";
position: absolute;
width: 90vmax;
height: 90vmax;
border-radius: 50%;
opacity: 0.55;
will-change: transform;
}
.pn-sintro__grund::before { left: -30vmax; top: -40vmax; background: radial-gradient(closest-side, rgba(255, 79, 154, 0.55), rgba(255, 79, 154, 0.12) 45%, transparent 72%); }
.pn-sintro__grund::after { right: -30vmax; bottom: -45vmax; background: radial-gradient(closest-side, rgba(139, 92, 255, 0.6), rgba(139, 92, 255, 0.14) 45%, transparent 72%); }
.pn-social.si-laeuft .pn-sintro__grund::before { animation: pn-si-licht-a 9s ease-in-out both; }
.pn-social.si-laeuft .pn-sintro__grund::after { animation: pn-si-licht-b 9s ease-in-out both; }
@keyframes pn-si-licht-a { 0% { opacity: 0; transform: translate(-8vmax, -6vmax) scale(0.8); } 25% { opacity: 0.55; } 60% { transform: translate(14vmax, 10vmax) scale(1.1); } 100% { opacity: 0.7; transform: translate(26vmax, 18vmax) scale(1); } }
@keyframes pn-si-licht-b { 0% { opacity: 0; transform: translate(8vmax, 6vmax) scale(0.8); } 25% { opacity: 0.6; } 60% { transform: translate(-12vmax, -10vmax) scale(1.15); } 100% { opacity: 0.7; transform: translate(-24vmax, -16vmax) scale(1); } }
/* Volumetrische Strahlen hinter dem Zeichen und feines Korn */
.pn-sintro__buehne::before {
content: "";
position: absolute;
left: 50%;
top: 40%;
z-index: -1;
width: 160vmax;
height: 160vmax;
margin: -80vmax 0 0 -80vmax;
background: repeating-conic-gradient(from 0deg, rgba(255, 140, 200, 0.07) 0deg 3deg, transparent 3deg 14deg);
-webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 25%, transparent 55%);
mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 25%, transparent 55%);
opacity: 0;
pointer-events: none;
}
.pn-social.si-laeuft .pn-sintro__buehne::before { animation: pn-si-strahlen 9s linear both; }
@keyframes pn-si-strahlen { 0% { opacity: 0; transform: rotate(0deg); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(40deg); } }
.pn-sintro__grund > i { display: none; }
/* Lichtfarbe des Zeichens: weicher Zwei-Farben-Lauf statt Regenbogen */
.pn-sintro__lage > i,
.pn-sintro__schirm > i::before { background: conic-gradient(from 0deg, #ff4f9a, #c45cff 25%, #8b5cff 50%, #c45cff 75%, #ff4f9a); }
.pn-sintro__lage--fuell > i { background: linear-gradient(120deg, #ff4f9a, #8b5cff); }
/* Worte im selben Verlauf */
.pn-sintro__wechsel b,
.pn-sintro__wechsel b:nth-child(1),
.pn-sintro__wechsel b:nth-child(2),
.pn-sintro__wechsel b:nth-child(3) {
background: linear-gradient(100deg, #ff7ab6, #ff4f9a 40%, #8b5cff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.pn-sintro__wechsel .pn-sintro__schluss { background: none; color: #fff; }
.pn-sintro__titel small { color: rgba(255, 196, 225, 0.85); }
/* Kanaele und Skip-Knopf in der Lichtstimmung */
.pn-sintro__chip { background: linear-gradient(150deg, rgba(255, 79, 154, 0.22), rgba(139, 92, 255, 0.28)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 180, 220, 0.3), 0 0 26px -6px rgba(255, 79, 154, 0.7); }
.pn-sintro__chip--ig, .pn-sintro__chip--fb, .pn-sintro__chip--in { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 180, 220, 0.3), 0 0 26px -6px rgba(139, 92, 255, 0.75); }
.pn-sintro__skip { border-color: rgba(255, 79, 154, 0.45); box-shadow: 0 0 24px -8px rgba(139, 92, 255, 0.7); }
.pn-sintro__skip:focus-visible { outline-color: #ff7ab6; }
.pn-sintro__linie { background: linear-gradient(90deg, transparent, rgba(255, 79, 154, 0.8) 30%, #fff 50%, rgba(139, 92, 255, 0.8) 70%, transparent); box-shadow: 0 0 22px 3px rgba(255, 79, 154, 0.5); }
.pn-sintro__blitz { border-color: rgba(255, 220, 240, 0.9); box-shadow: 0 0 40px rgba(255, 79, 154, 0.6), inset 0 0 40px rgba(139, 92, 255, 0.5); }
.pn-sintro__portal { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 24px 6px rgba(255, 79, 154, 0.7), inset 0 0 24px 4px rgba(139, 92, 255, 0.7); }
@media (prefers-reduced-motion: reduce) {
.pn-sintro__grund::before, .pn-sintro__grund::after, .pn-sintro__buehne::before { animation: none; }
}
/* =====================================================================
Reel-Deck (16.10.2026): statt Textleiste die drei Reels als kleine
Hochformat-Vorschauen. Das aktive ist groesser, mit Pink-Violett-Rahmen
und Laufzeitbalken (--sp). Pfeile und Ton als runde Glasknoepfe.
Darunter eine Zeile: Link als Pille mit Verlaufskante, Intro-Knopf.
===================================================================== */
.pn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pn-reel__steuerung {
gap: 10px;
padding: 6px 8px;
align-items: center;
border-radius: 22px;
background: linear-gradient(180deg, rgba(30, 18, 44, 0.72), rgba(12, 8, 20, 0.86));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 79, 154, 0.18), 0 20px 50px -20px rgba(139, 92, 255, 0.55);
}
.pn-reel__knopf,
.pn-reel__ton {
width: 40px;
min-width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: #fff;
transition: background-color 0.25s ease, transform 0.25s ease;
}
.pn-reel__knopf:hover,
.pn-reel__ton:hover { border: 0; background: rgba(255, 79, 154, 0.22); }
.pn-reel__knopf:active,
.pn-reel__ton:active { transform: scale(0.94); }
.pn-reel__ton[aria-pressed="true"] { background: linear-gradient(135deg, #ff4f9a, #8b5cff); }
.pn-deck { display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.pn-deck__karte {
--sp: 0;
position: relative;
width: 28px;
aspect-ratio: 9 / 16;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 7px;
background: #000;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
opacity: 0.55;
cursor: pointer;
transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, box-shadow 0.3s ease;
}
.pn-deck__karte img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pn-deck__karte:hover { opacity: 0.9; }
.pn-deck__karte:focus-visible { outline: 2px solid #ff7ab6; outline-offset: 2px; }
.pn-deck__karte.ist-an { width: 36px; opacity: 1; box-shadow: 0 0 0 2px #ff4f9a, 0 0 0 3px rgba(139, 92, 255, 0.9), 0 6px 18px -4px rgba(255, 79, 154, 0.7); }
/* Laufzeit als Balken am unteren Rand der Vorschau */
.pn-deck__karte > i { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.pn-deck__karte > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #ff4f9a, #8b5cff); transform-origin: 0 50%; transform: scaleX(var(--sp)); transition: transform 0.25s linear; }
.pn-deck__titel { display: flex; flex-direction: column; gap: 2px; min-width: 128px; padding: 0 6px; font-family: var(--font-mono); white-space: nowrap; }
.pn-deck__titel b { font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; color: rgba(255, 196, 225, 0.7); }
.pn-deck__titel b::after { content: " / 03"; color: rgba(255, 196, 225, 0.4); }
.pn-deck__titel em { font-style: normal; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
/* Fusszeile: Link als Pille mit Verlaufskante, Intro als kleiner Knopf */
.pn-social__fuss { gap: 12px; }
.pn-social__mehr {
min-height: 44px;
padding: 0 20px;
border: 1px solid transparent;
background:
linear-gradient(rgba(12, 8, 20, 0.92), rgba(12, 8, 20, 0.92)) padding-box,
linear-gradient(120deg, #ff4f9a, #8b5cff) border-box;
box-shadow: 0 10px 30px -14px rgba(255, 79, 154, 0.7);
color: #fff;
}
.pn-social__mehr:hover,
.pn-social__mehr:focus-visible {
background:
linear-gradient(120deg, rgba(255, 79, 154, 0.22), rgba(139, 92, 255, 0.22)) padding-box,
linear-gradient(120deg, #ff4f9a, #8b5cff) border-box;
box-shadow: 0 12px 34px -12px rgba(255, 79, 154, 0.85);
}
.pn-social__mehr span { color: #ff7ab6; }
.pn-social__mehr-ring { background: #ff4f9a; box-shadow: 0 0 0 3px rgba(255, 79, 154, 0.2), 0 0 10px #ff4f9a; }
.pn-social__nochmal {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
font-size: 13px;
}
.pn-social__nochmal:hover { color: #fff; background: rgba(255, 79, 154, 0.16); }
@media (max-width: 760px) {
.pn-deck__titel { display: none; }
.pn-reel__steuerung { gap: 6px; }
.pn-social__nochmal span { display: none; }
.pn-social__nochmal { padding: 0 12px; }
}
/* Kicker der Social-Sektion im Social-Look: eine Glas-Pille mit
Verlaufskante, pinker Live-Punkt mit Ring, Text im Verlauf */
.pn-social__kicker {
gap: 10px;
padding: 6px 14px 6px 6px;
border: 1px solid transparent;
border-radius: 999px;
background:
linear-gradient(rgba(14, 8, 22, 0.9), rgba(14, 8, 22, 0.9)) padding-box,
linear-gradient(120deg, rgba(255, 79, 154, 0.7), rgba(139, 92, 255, 0.7)) border-box;
box-shadow: 0 8px 30px -12px rgba(255, 79, 154, 0.6);
}
.pn-social__kicker .pn-start__live {
padding: 4px 10px 4px 8px;
border-radius: 999px;
background: linear-gradient(120deg, #ff4f9a, #8b5cff);
box-shadow: none;
color: #fff;
font-weight: 600;
}
.pn-social__kicker .pn-start__live i { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 0 10px #fff; }
.pn-social__kicker-text {
background: linear-gradient(100deg, #ffb3d4, #ff7ab6 45%, #b79cff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Ton-Knopf allein unter dem Handy: rund, Glas mit Verlaufskante */
.pn-reel__steuerung--ton { padding: 0; background: none; box-shadow: none; }
.pn-reel__steuerung--ton .pn-reel__ton {
width: 46px;
min-width: 46px;
height: 46px;
border: 1px solid transparent;
background:
linear-gradient(rgba(14, 8, 22, 0.92), rgba(14, 8, 22, 0.92)) padding-box,
linear-gradient(120deg, #ff4f9a, #8b5cff) border-box;
box-shadow: 0 10px 28px -10px rgba(255, 79, 154, 0.7);
}
.pn-reel__steuerung--ton .pn-reel__ton:hover { background: linear-gradient(120deg, rgba(255, 79, 154, 0.3), rgba(139, 92, 255, 0.3)) padding-box, linear-gradient(120deg, #ff4f9a, #8b5cff) border-box; }
.pn-reel__steuerung--ton .pn-reel__ton[aria-pressed="true"] { background: linear-gradient(120deg, #ff4f9a, #8b5cff); }
/* Viertes Reel wartet unsichtbar hinter dem vorderen */
.pn-reel[data-stelle="hinten"] { z-index: 0; opacity: 0; pointer-events: none; transform: translate(-50%, -48%) scale(0.5); }
.pn-reel__ton:disabled { opacity: 0.4; cursor: default; }
/* Social-Sektion: Hinweis, fuer wen die Reels entstanden sind */
.pn-social__unter { margin: 0.5rem 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 196, 225, 0.75); }
.pn-social__unter a { margin-left: 0.6em; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 122, 182, 0.6); }
.pn-social__unter a:hover, .pn-social__unter a:focus-visible { border-color: #fff; }
/* Kontozeichen im Reel (IBONS) statt ADence-Logo */
.pn-reel__konto { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: #c8102e; color: #fff; font: 700 11px/1 var(--font-sans); font-style: normal; vertical-align: middle; }