.hero footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--stone)}
nav{display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,28px)}
nav a,.contact a{color:var(--ink);text-decoration:none;font-weight:300;position:relative}
nav a::after,.contact a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .35s}
nav a:hover::after,.contact a:hover::after{right:0}
.down{position:absolute;left:50%;transform:translateX(-50%);animation:bob 2.4s ease-in-out infinite;color:var(--ink)}
@keyframes bob{50%{transform:translate(-50%,6px)}}
/* ---------- Ueber uns ---------- */
  .page{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(24px,3vw,36px)}
.about{display:grid;grid-template-columns:clamp(320px,40%,480px) 1fr;gap:clamp(36px,7vw,120px);align-items:center;
    padding:clamp(40px,6vw,96px) clamp(18px,4vw,56px);max-width:1200px;margin:0 auto;width:100%}
.card:hover{transform:translateY(-4px)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:28px;display:block}
.card .fx{position:absolute;inset:-20px;pointer-events:none;z-index:2}
.card .fx canvas{display:block;width:100%;height:100%}
.card figcaption{position:absolute;left:18px;bottom:16px;z-index:1;display:flex;flex-direction:column;gap:2px;color:#fff;
    background:rgba(20,20,28,.55);backdrop-filter:blur(8px);padding:10px 14px;border-radius:12px;font-size:.85rem;font-weight:400}
.card figcaption small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.about .eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);font-weight:400}
/* ProfileCard, CSS 1:1 von React Bits (nur Groesse an die Spalte gebunden, Foto als Cover) */
  .pc-card-wrapper{--pointer-x:50%;--pointer-y:50%;--pointer-from-center:0;--pointer-from-top:.5;--pointer-from-left:.5;--card-opacity:0;--rotate-x:0deg;--rotate-y:0deg;--background-x:50%;--background-y:50%;
    --grain:url(/assets/img/glitter-grain.png);--icon:url(/assets/img/hs-glitter-pattern.png);--behind-glow-color:rgba(255,45,106,.7);--behind-glow-size:45%;--inner-gradient:linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%);
    --sunpillar-1:hsl(2,100%,73%);--sunpillar-2:hsl(53,100%,69%);--sunpillar-3:hsl(93,100%,69%);--sunpillar-4:hsl(176,100%,76%);--sunpillar-5:hsl(228,100%,74%);--sunpillar-6:hsl(283,100%,73%);
    --sunpillar-clr-1:var(--sunpillar-1);--sunpillar-clr-2:var(--sunpillar-2);--sunpillar-clr-3:var(--sunpillar-3);--sunpillar-clr-4:var(--sunpillar-4);--sunpillar-clr-5:var(--sunpillar-5);--sunpillar-clr-6:var(--sunpillar-6);
    --card-radius:30px;perspective:500px;transform:translate3d(0,0,.1px);position:relative;touch-action:none;width:100%;max-width:420px;justify-self:start}
.pc-behind{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),var(--behind-glow-color) 0%,transparent var(--behind-glow-size));filter:blur(50px) saturate(1.1);opacity:calc(.8 * var(--card-opacity));transition:opacity 200ms ease}
.pc-card-wrapper:hover,.pc-card-wrapper.active{--card-opacity:1}
.pc-card-shell{position:relative;z-index:1}
.pc-card{width:100%;aspect-ratio:.718;display:grid;border-radius:var(--card-radius);position:relative;background-blend-mode:color-dodge,normal,normal,normal;
    box-shadow:rgba(0,0,0,.8) calc((var(--pointer-from-left) * 10px) - 3px) calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;
    transition:transform 1s ease;transform:translateZ(0) rotateX(0deg) rotateY(0deg);background:rgba(0,0,0,.9);backface-visibility:hidden;overflow:hidden}
.pc-card:hover,.pc-card.active{transition:none;transform:translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x))}
.pc-card-shell.entering .pc-card{transition:transform 180ms ease-out}
.pc-card *{display:grid;grid-area:1/-1;border-radius:var(--card-radius);pointer-events:none}
.pc-inside{inset:0;position:absolute;background-image:var(--inner-gradient);background-color:rgba(0,0,0,.9);transform:none}
/* Glitzer-Logo-Maske: der Holo-Glanz erscheint nur in den HS-Logos (src/make-glitter.py), Maske ueber Alpha, damit Safari und Chrome gleich rendern */
  .pc-shine{--mpos:left calc(100% - var(--background-x)) top calc(200% - (var(--background-y) * 5));-webkit-mask-image:var(--icon);mask-image:var(--icon);mask-mode:alpha;-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:150%;mask-size:150%;-webkit-mask-position:var(--mpos);mask-position:var(--mpos);transition:filter .8s ease;filter:brightness(.9) contrast(1.4) saturate(.6) opacity(.8);animation:holo-bg 18s linear infinite;mix-blend-mode:color-dodge}
.pc-shine,.pc-shine::after{--space:5%;--angle:-45deg;transform:translate3d(0,0,1px);overflow:hidden;z-index:3;background:transparent;background-size:cover;background-position:center;
    background-image:repeating-linear-gradient(0deg,var(--sunpillar-clr-1) calc(var(--space) * 1),var(--sunpillar-clr-2) calc(var(--space) * 2),var(--sunpillar-clr-3) calc(var(--space) * 3),var(--sunpillar-clr-4) calc(var(--space) * 4),var(--sunpillar-clr-5) calc(var(--space) * 5),var(--sunpillar-clr-6) calc(var(--space) * 6),var(--sunpillar-clr-1) calc(var(--space) * 7)),
      repeating-linear-gradient(var(--angle),#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,29%,66%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%),
      radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,0%,.1) 12%,hsla(0,0%,0%,.15) 20%,hsla(0,0%,0%,.25) 120%);
    background-position:0 var(--background-y),var(--background-x) var(--background-y),center;background-blend-mode:color,hard-light;background-size:500% 500%,300% 300%,200% 200%;background-repeat:repeat}
.pc-shine::before,.pc-shine::after{content:'';background-position:center;background-size:cover;grid-area:1/1;opacity:0;transition:opacity .8s ease}
.pc-card:hover .pc-shine,.pc-card.active .pc-shine{filter:brightness(1.1) contrast(1.5) saturate(.8);animation-play-state:paused}
.pc-card:hover .pc-shine::before,.pc-card.active .pc-shine::before,.pc-card:hover .pc-shine::after,.pc-card.active .pc-shine::after{opacity:1}
.pc-shine::before{background-image:linear-gradient(45deg,var(--sunpillar-4),var(--sunpillar-5),var(--sunpillar-6),var(--sunpillar-1),var(--sunpillar-2),var(--sunpillar-3)),radial-gradient(circle at var(--pointer-x) var(--pointer-y),hsl(0,0%,70%) 0%,hsla(0,0%,30%,.2) 90%),var(--grain);
    background-size:250% 250%,100% 100%,220px 220px;background-position:var(--pointer-x) var(--pointer-y),center,calc(var(--pointer-x) * .01) calc(var(--pointer-y) * .01);background-blend-mode:color-dodge;
    filter:brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2)) saturate(calc(.5 + var(--pointer-from-center)));mix-blend-mode:luminosity}
.pc-shine::after{background-position:0 var(--background-y),calc(var(--background-x) * .4) calc(var(--background-y) * .5),center;background-size:200% 300%,700% 700%,100% 100%;mix-blend-mode:difference;filter:brightness(.8) contrast(1.5)}
.pc-glare{transform:translate3d(0,0,1.1px);overflow:hidden;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsl(248,25%,80%) 12%,hsla(207,40%,30%,.8) 90%);mix-blend-mode:soft-light;filter:brightness(.9) contrast(1.1);opacity:.55;z-index:4}
.pc-avatar-content{mix-blend-mode:normal;overflow:visible;transform:translateZ(2);backface-visibility:hidden}
.pc-avatar-content .avatar{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:brightness(.94) contrast(1.04) saturate(1.05);position:absolute;left:50%;bottom:-1px;transform-origin:50% 100%;
    transform:translateX(calc(-50% + (var(--pointer-from-left) - .5) * 6px)) translateZ(0) scaleY(calc(1 + (var(--pointer-from-top) - .5) * .02)) scaleX(calc(1 + (var(--pointer-from-left) - .5) * .01));
    backface-visibility:hidden;will-change:transform;transition:transform 120ms ease-out}
.pc-avatar-content::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.2) 26%,transparent 50%,rgba(0,0,0,.35) 100%)}
.pc-user-info{position:absolute;--ui-inset:20px;--ui-radius-bias:6px;bottom:var(--ui-inset);left:var(--ui-inset);right:var(--ui-inset);z-index:2;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.1);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.1);border-radius:calc(max(0px,var(--card-radius) - var(--ui-inset) + var(--ui-radius-bias)));padding:12px 14px;pointer-events:auto}
.pc-user-details{display:flex;align-items:center;gap:12px}
.pc-mini-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.1);flex-shrink:0}
.pc-mini-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;border-radius:50%}
.pc-user-text{display:flex;align-items:flex-start;flex-direction:column;gap:6px}
.pc-handle{font-size:14px;font-weight:500;color:rgba(255,255,255,.9);line-height:1}
.pc-status{font-size:14px;color:rgba(255,255,255,.7);line-height:1}
.pc-contact-btn{border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 16px;font-size:12px;font-weight:600;color:rgba(255,255,255,.9);cursor:pointer;transition:all .2s ease;backdrop-filter:blur(10px);background:transparent;font-family:inherit;text-decoration:none;pointer-events:auto;display:inline-block}
.pc-contact-btn:hover{border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.pc-content:not(.pc-avatar-content){max-height:100%;overflow:hidden;text-align:center;position:relative;transform:translate3d(calc(var(--pointer-from-left) * -6px + 3px),calc(var(--pointer-from-top) * -6px + 3px),.1px);z-index:5;mix-blend-mode:luminosity}
.pc-details{width:100%;position:absolute;top:2.2em;display:flex;flex-direction:column}
.pc-details h3{font-weight:600;margin:0;font-size:min(5svh,2.6em);letter-spacing:-.02em;background-image:linear-gradient(to bottom,#fff,#6f6fbe);background-size:1em 1.5em;-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text}
.pc-details p{font-weight:600;position:relative;top:-6px;white-space:nowrap;font-size:15px;margin:0 auto;width:min-content;background-image:linear-gradient(to bottom,#fff,#4a4ac0);background-size:1em 1.5em;-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text}
@keyframes holo-bg{0%{background-position:0 var(--background-y),0 0,center}100%{background-position:0 var(--background-y),90% 90%,center}}
@media (max-width:768px){.pc-details{top:2em}.pc-details h3{font-size:min(4svh,2.2em)}.pc-details p{font-size:14px}.pc-user-info{--ui-inset:15px;padding:10px 12px}.pc-mini-avatar{width:28px;height:28px}.pc-user-details{gap:10px}.pc-handle{font-size:13px}.pc-status{font-size:10px}.pc-contact-btn{padding:6px 12px;font-size:11px}}
.about>div{min-width:0}
.about h1{margin-top:14px;font-weight:300;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.4rem,4.8vw,5.6rem)}
.about h1 em{font-family:var(--serif);font-style:normal;font-weight:400}
.about p{margin-top:clamp(18px,2vw,28px);max-width:46ch;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.6;color:var(--grey)}
.about .btn{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(22px,2.6vw,36px);font-size:.9rem;font-weight:400;color:#fff;background:var(--ink);border-radius:999px;padding:14px 26px;text-decoration:none;transition:transform .3s,background .3s}
.about .btn:hover{transform:translateY(-2px);background:#FF2D6A}
.page>footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--stone);padding:0 clamp(18px,4vw,56px)}
.page>footer nav{display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,28px)}
@media (max-width:820px){.about{grid-template-columns:1fr;gap:32px}.pc-card-wrapper{max-width:340px}}
/* ---------- Kontakt ---------- */
  .contact{position:relative;z-index:1;background:#fff;min-height:calc(100dvh - 80px);
    padding:clamp(64px,9vw,140px) clamp(18px,4vw,56px) clamp(32px,4vw,56px);
    display:grid;grid-template-rows:auto auto;}
.contact .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact h2{font-weight:300;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.6rem,7vw,7.5rem)}
.contact h2 em{font-family:var(--serif);font-style:normal;font-weight:400}
.contact .intro{margin-top:clamp(18px,2vw,28px);max-width:44ch;font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.55;color:var(--grey)}
.mail{display:inline-block;margin-top:clamp(28px,4vw,56px);font-size:clamp(1.3rem,3vw,2.8rem);letter-spacing:-.025em;color:var(--ink);text-decoration:none;
    background:linear-gradient(90deg,#F400D8,#FF2D6A,#FF6A00,#2B6BFF);background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size .5s cubic-bezier(.2,.7,.2,1);padding-bottom:6px}
.mail:hover{background-size:100% 2px}
dl{display:grid;grid-template-columns:auto 1fr;gap:14px clamp(20px,3vw,40px);font-size:.95rem;line-height:1.5;padding-top:.6em}
dt{color:var(--stone);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding-top:.35em}
dd a{color:var(--ink);text-decoration:none}
dd a:hover{color:#FF2D6A}
dd + dt{border-top:1px solid var(--line);padding-top:14px}
dd + dt + dd{border-top:1px solid var(--line);padding-top:14px}
form{margin-top:clamp(28px,3vw,48px);display:grid;gap:0}
form input,form textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;font-size:1rem;color:var(--ink);padding:16px 0;outline:none;resize:none;transition:border-color .3s;border-radius:0}
form input:focus,form textarea:focus{border-color:var(--ink)}
form input::placeholder,form textarea::placeholder{color:var(--stone)}
form button{margin-top:28px;justify-self:start;font:inherit;font-size:.9rem;font-weight:400;color:#fff;background:var(--ink);border:0;border-radius:999px;padding:14px 26px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:transform .3s,background .3s}
form button:hover{transform:translateY(-2px);background:#FF2D6A}
.contact footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--stone);padding-top:clamp(64px,8vw,120px)}
.page>header{padding:clamp(18px,3vw,36px) clamp(18px,4vw,56px) 0}
@media (max-width:820px){
    .contact .grid{grid-template-columns:1fr}
    h1{white-space:normal}
  }
@media (max-width:640px){
    #glow{filter:blur(34px) saturate(1.4)}
    .hero footer,.contact footer{flex-direction:column;gap:10px;align-items:flex-start}
    .down{display:none}
  }
@media (prefers-reduced-motion:reduce){h1,.lead{animation-duration:.01s}.down{animation:none}}
/* Header bleibt beim Scrollen oben, alles laeuft darunter durch (2026-09-14) */
  .page>header{position:sticky;top:0;z-index:100;padding-top:14px;padding-bottom:14px;transition:background .3s,box-shadow .3s}
html.scrolled .page>header{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--line)}