/* ATR – Laptop-Fall-Intro (scroll-gesteuert) */
.fall{position:relative;height:660vh;background:#000;padding:0!important;border:0}
.fall-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}

.fall-copy{position:absolute;left:0;right:0;bottom:7vh;text-align:center;padding:0 24px;pointer-events:none;will-change:opacity,transform}
.fall-copy .eyebrow{margin-bottom:12px}
.fall-title{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-.5px;font-size:clamp(34px,5.2vw,68px);line-height:1.05}
.fall-title em{font-style:italic;color:var(--gold)}
.fall-hint{margin-top:22px;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--stone)}
.fall-hint span{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:fallhint 1.8s ease-in-out infinite}
@keyframes fallhint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}


.fall-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
.fall.ready .fall-canvas{opacity:1}
.fall-screen{position:absolute;left:0;top:0;width:10px;height:10px;overflow:hidden;visibility:hidden;z-index:2;background:#F4F1EA}
.fall-copy{z-index:3}
/* Filmischer Look: Vignette + feines Korn (blendet beim Zoom in den Bildschirm aus) */
.fall-stage{--fx:1}
.fall-stage:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--fx);
  background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 50%,rgba(0,0,0,.6)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fall.nogl .fall-canvas{display:none}

/* Virtueller Bildschirm – edle Chat-App */
.vp{position:absolute;left:0;top:0;transform-origin:0 0;font-family:var(--sans);color:#24221f;background:#FAF8F4;-webkit-font-smoothing:antialiased}
.vp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vp-bar{position:absolute;left:0;right:0;top:0;height:38px;background:#F1EEE8;border-bottom:1px solid #E4DFD6;display:flex;align-items:center;padding:0 16px;z-index:3}
.vp-dots{display:flex;gap:8px;width:80px}
.vp-dots b{width:12px;height:12px;border-radius:50%;background:#DCD6CB}
.vp-title{flex:1;text-align:center;font-size:13px;font-weight:600;color:#6f6a62;letter-spacing:.3px}
.vp-sp{width:80px}
.app{position:absolute;left:0;right:0;top:38px;bottom:0;display:flex}
.sb{width:250px;flex:none;background:#F3F0EA;border-right:1px solid #E6E1D8;padding:16px 12px;font-size:14px;color:#5c5750;position:relative}
.sb-new{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#24221f;color:#F4F1EA;font-weight:600;margin-bottom:14px}
.sb-i{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px}
.sb-i.act{background:#E8E3D9;color:#24221f;font-weight:600}
.sb p{margin:20px 12px 8px;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#9a948a}
.sb-l{padding:7px 12px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-l.on{background:#EAE5DC;color:#24221f}
.sb-u{position:absolute;left:12px;right:12px;bottom:14px;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid #E6E1D8}
.sb-u i{width:30px;height:30px;border-radius:50%;background:#C2A060;color:#141414;font:600 12px/30px var(--sans);text-align:center;font-style:normal}
.sb-u span{display:flex;flex-direction:column;font-weight:600;color:#24221f;font-size:13px}
.sb-u small{font-weight:400;color:#9a948a;font-size:12px}
.vp-pages{position:relative;flex:1;overflow:hidden}
.pg{position:absolute;left:0;right:0;top:0}

/* Projekte */
.pp{max-width:900px;margin:0 auto;padding:44px 48px 60px}
.pp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.pp-h h3{font:600 32px/1.1 var(--serif);letter-spacing:-.3px;margin:0;color:#1c1a17}
.pp-btn{display:flex;align-items:center;gap:8px;border:1px solid #DDD7CC;border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;background:#fff}
.pp-s{display:flex;align-items:center;gap:10px;border:1px solid #E3DED4;background:#fff;border-radius:12px;padding:12px 14px;color:#9a948a;font-size:15px;margin-bottom:24px}
.pp-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pj{background:#fff;border:1px solid #E7E2D9;border-radius:14px;padding:18px;min-height:150px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(40,30,10,.04)}
.pj.on{border-color:#C2A060;box-shadow:0 0 0 3px rgba(194,160,96,.14)}
.pj-t{font-weight:600;font-size:16px;color:#1c1a17;margin-bottom:8px;line-height:1.3}
.pj-d{font-size:14px;line-height:1.5;color:#6f6a62;flex:1}
.pj-f{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12px;color:#9a948a}
.pj-f b{font-weight:600;color:#8a6d35;background:#F6EEDD;border-radius:6px;padding:3px 8px}
.pp-r{margin-top:34px}
.pp-r p{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#9a948a;margin:0 0 10px}
.rc{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:16px 4px;border-top:1px solid #ECE7DE}
.rc b{font-size:15px;color:#1c1a17}
.rc span{grid-column:1;font-size:14px;color:#6f6a62}
.rc small{grid-row:1;grid-column:2;font-size:12px;color:#9a948a}

/* Chat */
.ch-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:16px 28px;border-bottom:1px solid #ECE7DE;font-size:14px;color:#9a948a;background:#FAF8F4}
.ch-top b{color:#24221f;font-weight:600}
.kn{margin-left:auto;display:flex;gap:8px}
.kn span{display:flex;align-items:center;gap:6px;border:1px solid #E3DED4;background:#fff;border-radius:8px;padding:5px 9px;font-size:12px;color:#5c5750}
.kn svg{width:13px;height:13px}
.th{max-width:740px;margin:0 auto;padding:30px 32px 50px}
.mu{margin:0 0 26px auto;width:fit-content;max-width:80%;background:#EFEAE1;border-radius:16px;padding:13px 18px;font-size:16px;line-height:1.5;color:#24221f}
.ma{margin:0 0 30px;font-size:16px;line-height:1.65;color:#2b2925}
.ma p{margin:0 0 14px}
.ma-n{font-size:13px;font-weight:600;color:#9a948a;margin-bottom:8px;letter-spacing:.3px}
.st{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.st span{display:flex;align-items:center;gap:6px;font-size:12px;color:#5c7a4d;background:#EEF3E8;border-radius:999px;padding:4px 10px 4px 8px}
.st svg{width:13px;height:13px;stroke-width:2.2}
.igs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.ig{background:#fff;border:1px solid #E7E2D9;border-radius:12px;overflow:hidden}
.ig-h{display:flex;align-items:center;gap:7px;padding:8px 10px;font-size:11px;font-weight:600}
.ig-h i{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#C2A060,#6b4a2f)}
.ig-h small{margin-left:auto;font-weight:400;color:#9a948a}
.ig-img{aspect-ratio:4/5;display:flex;align-items:flex-end;padding:16px;color:#F4EEE3}
.ig-img strong{font:600 22px/1.12 var(--serif)}
.ig-img em{color:#E3C68C}
.ig-c{padding:9px 10px 11px;font-size:11px;line-height:1.45;color:#5c5750}
.ig-c b{color:#24221f}
.pl{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 16px}
.pl td{padding:10px 6px;border-bottom:1px solid #ECE7DE}
.pl td:first-child{font-weight:600;width:44px}
.pl td:last-child{text-align:right;color:#9a948a}
.ap{display:flex;flex-wrap:wrap;gap:8px}
.ap span{border:1px solid #DDD7CC;border-radius:10px;padding:8px 14px;font-size:14px;background:#fff}
.ap span.ok{background:#24221f;border-color:#24221f;color:#F4F1EA}
.sc{border:1px solid #E7E2D9;border-radius:12px;background:#fff;overflow:hidden}
.sc div{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:12px 16px;border-top:1px solid #F0EBE3;font-size:14px;line-height:1.5}
.sc div:first-child{border-top:0}
.sc b{color:#8a6d35}
.cp{display:flex;align-items:center;justify-content:space-between;border:1px solid #DDD7CC;background:#fff;border-radius:16px;padding:14px 14px 14px 18px;color:#9a948a;font-size:15px;box-shadow:0 4px 16px rgba(40,30,10,.06)}
.cp div{display:flex;align-items:center;gap:12px}
.cp i{width:32px;height:32px;border-radius:10px;background:#C2A060;color:#141414;display:flex;align-items:center;justify-content:center}

/* Schmale Bildschirme (Handy) */
.vp.narrow .sb{display:none}
.vp.narrow .pp{padding:22px 18px 40px}
.vp.narrow .pp-h h3{font-size:24px}
.vp.narrow .pp-g{grid-template-columns:1fr}
.vp.narrow .pj{min-height:0}
.vp.narrow .kn{display:none}
.vp.narrow .ch-top{padding:12px 18px}
.vp.narrow .th{padding:20px 18px 40px}
.vp.narrow .igs{grid-template-columns:1fr 1fr}
.vp.narrow .igs .ig:nth-child(3){display:none}
.vp.narrow .mu{max-width:90%}

@media (prefers-reduced-motion:reduce){
  .fall{height:auto}
  .fall-stage{position:relative;height:100vh}
  .fall-hint span{animation:none}
}