@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,600&display=swap');
*{box-sizing:border-box}
:root{--paper:#F7F4EF;--ink:#1A2028;--wine:#4e0000;--wine2:#6e1414;--green:#253328;--sage:#4A6858;--rust:#B85C38;--muted:#8a8174;--line:rgba(26,32,40,.12)}
html,body{margin:0;height:100%;background:var(--paper);font-family:Inter,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
::selection{background:var(--wine);color:var(--paper)}
#app-scroll{height:100vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;background:var(--paper)}
@keyframes reveal{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes growBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes modalUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes arrow{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:1}}
@keyframes cardRise{0%{opacity:0;transform:translateY(46px) scale(.965)}72%{opacity:1;transform:translateY(-6px) scale(1.006)}100%{opacity:1;transform:none}}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 rgba(184,92,56,0);background:transparent}50%{box-shadow:0 0 18px rgba(184,92,56,.16);background:rgba(184,92,56,.045)}}
@keyframes diamondSpin{from{transform:rotate(45deg)}to{transform:rotate(405deg)}}
.site-header{position:fixed;z-index:80;top:0;left:0;right:0;height:68px;padding:0 clamp(18px,4vw,54px);display:flex;align-items:center;justify-content:space-between;background:rgba(42,42,42,.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand,.nav-link,.nav-pill{border:0;background:transparent;color:rgba(247,244,239,.88);text-decoration:none;white-space:nowrap}
.brand{font-family:Jost,sans-serif;font-size:15px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.desktop-nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav-link{font-family:Jost,sans-serif;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:4px 0;background-image:linear-gradient(#EFB7D2,#EFB7D2);background-size:0 1.5px;background-position:left bottom;background-repeat:no-repeat;transition:background-size .35s,color .2s}
.nav-link:hover{background-size:100% 1.5px;color:#EFB7D2}
.nav-pill{font-family:'Bebas Neue',sans-serif;font-size:17px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#2a2a2a;background:#E8DDD0;padding:9px 22px;border-radius:40px;transition:.25s}
.nav-pill:hover{background:#ddd0c0;transform:translateY(-2px)}.primary:hover{background:var(--wine2);transform:translateY(-2px)}
.hero{height:300vh;position:relative;background:var(--paper)}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
#hero-canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.hero-grid{display:flex;align-items:center;gap:clamp(42px,5vw,128px);width:100%;padding-left:clamp(22px,5vw,76px);padding-top:60px}
.hero-copy{flex:0 0 clamp(420px,29vw,560px);max-width:560px;z-index:5}
.eyebrow,.section-kicker{display:flex;align-items:center;gap:14px;font-family:Jost,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);margin-bottom:24px}
.eyebrow span{display:block;width:38px;height:1.5px;background:var(--rust)}
h1,h2,h3,p{margin-top:0}
h1{font-family:Jost,sans-serif;font-weight:500;font-size:clamp(48px,7vw,98px);line-height:.9;letter-spacing:0;text-transform:uppercase;margin-bottom:22px}
.hero h1{font-size:clamp(48px,6.2vw,90px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-name-video{position:relative;width:min(100%,700px);height:clamp(158px,12.6vw,220px);margin:0 0 26px;color:var(--ink)}
.hero-name-video svg{display:block;width:100%;height:100%;overflow:visible}
.hero-name-video text{font-family:Jost,sans-serif;font-size:104px;font-weight:600;letter-spacing:0;text-transform:uppercase}
.hero-name-video-fill{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.18) contrast(1.18) brightness(.72);transform:scale(1.08);transform-origin:center}
h2{font-family:Jost,sans-serif;font-weight:500;font-size:clamp(34px,4.6vw,58px);line-height:1.02;letter-spacing:0;text-transform:uppercase;margin-bottom:20px}
h3{font-family:Jost,sans-serif;font-weight:500;font-size:24px;text-transform:uppercase;letter-spacing:.01em}
.hero-lead{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(20px,2vw,28px);line-height:1.35;color:var(--sage);max-width:24ch}
.hero-text{font-size:clamp(14px,1.1vw,16px);line-height:1.75;color:#52514c;max-width:39ch;margin-bottom:34px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.primary,.secondary{border-radius:40px;padding:15px 30px;font-family:Jost,sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:.25s}
.primary{border:0;background:var(--wine);color:var(--paper)}
.secondary{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.secondary:hover{background:var(--green);color:var(--paper);border-color:var(--green);transform:translateY(-2px)}
.hero-video-col{position:relative;flex:0 0 auto;width:clamp(720px,66vw,1480px);max-width:calc(100% - 520px);height:clamp(520px,62vh,760px);margin-left:auto;margin-right:0}
.video-stage{position:absolute;inset:0;overflow:visible;border-radius:6px;background:#10120e;border:3px solid var(--green);box-shadow:0 34px 74px rgba(26,32,40,.22)}
.video-stage video,.video-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px;transition:opacity .35s ease}
.video-edge{position:absolute;pointer-events:none;z-index:4}.video-edge.left{left:0;top:0;width:22%;height:100%;background:linear-gradient(to right,rgba(8,9,7,.55),transparent)}.video-edge.right{right:0;top:0;width:16%;height:100%;background:linear-gradient(to left,rgba(8,9,7,.42),transparent)}.video-edge.bottom{left:0;right:0;bottom:0;height:20%;background:linear-gradient(to top,rgba(8,9,7,.45),transparent)}
.portrait{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);z-index:9;width:clamp(220px,15vw,300px);aspect-ratio:3/4;object-fit:cover;border-radius:5px;border:7px solid var(--green);box-shadow:0 22px 54px rgba(8,9,7,.34)}
.video-caption{position:absolute;right:clamp(20px,3vw,40px);bottom:clamp(22px,4vh,44px);z-index:8;display:flex;align-items:flex-end;gap:16px;color:var(--paper)}
.video-caption span{font-family:Jost,sans-serif;font-size:clamp(40px,5vw,64px);line-height:.8;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.video-caption small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#C0D4C8;margin-bottom:6px}
.video-caption strong{font-family:Jost,sans-serif;font-weight:500;font-size:clamp(14px,1.4vw,18px);text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(156,172,127,.25);z-index:12}.progress div{height:100%;background:#9CAC7F;transform:scaleX(0);transform-origin:left}
.marquee{height:56px;overflow:hidden;background:#9CAC7F;display:flex;align-items:center}
#marquee-track{display:flex;gap:clamp(32px,4vw,60px);animation:marquee 32s linear infinite;white-space:nowrap}
.marquee span{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:clamp(11px,1vw,14px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#393C36}
.section{position:relative;padding:clamp(76px,10vw,132px) 0}
.section-inner{width:min(1180px,calc(100% - 40px));margin:0 auto}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:34px;margin-bottom:44px}.section-head p{max-width:520px;line-height:1.75;color:#C0D4C8}.section-head.light h2,.section-head.light .section-kicker{color:var(--paper)}.section-head.light .section-kicker{color:#f4a882}
.about-grid,.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,76px);align-items:center}.about-grid p,.contact-grid p{font-size:16px;line-height:1.85;color:#52514c}
.current-section{overflow:hidden;background:var(--wine);color:var(--paper)}.section-pattern{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(247,244,239,.055) 0,rgba(247,244,239,.055) 1px,transparent 1px,transparent 13px);pointer-events:none;z-index:0}.section-pattern-dk{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(50,40,30,.05) 0,rgba(50,40,30,.05) 1px,transparent 1px,transparent 13px);pointer-events:none;z-index:0}.live-kicker{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:34px;animation:reveal .8s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0 cover 24%}.live-kicker>span:last-child{font-family:Jost,sans-serif;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#f2d7c8}.ping-dot{position:relative;display:flex;align-items:center;justify-content:center;width:9px;height:9px}.ping-dot span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--paper)}.ping-dot span:last-child{animation:akt-ping 1.8s cubic-bezier(0,0,.2,1) infinite}@keyframes akt-ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3);opacity:0}}
.wald-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4vw,68px);align-items:center}.wald-grid>div{animation:reveal .85s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0 cover 26%}.wald-lead{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(19px,2vw,26px);line-height:1.4;color:var(--sage);max-width:30ch;margin-bottom:26px}.wald-grid p{font-size:clamp(15px,1.15vw,17px);line-height:1.8;color:#52514c;max-width:52ch}.wald-facts{display:flex;flex-wrap:wrap;gap:26px 40px}.wald-facts div{border-top:2px solid var(--sage);padding-top:12px}.wald-facts div:first-child{border-top-color:var(--wine)}.wald-facts small,.city-docs-head span,.wald-quote small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8A7A63;margin-bottom:6px}.wald-facts strong{font-family:Jost,sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}.wald-images{display:flex;flex-direction:column;gap:16px}.wald-images figure{position:relative;margin:0;border-radius:7px;overflow:hidden;box-shadow:0 18px 44px rgba(26,32,40,.2)}.wald-images img{display:block;width:100%;height:100%;object-fit:cover}.wald-images figure:first-child img{filter:saturate(.92)}.wald-images figcaption{position:absolute;bottom:12px;left:12px;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:rgba(26,32,40,.7);backdrop-filter:blur(4px);padding:5px 11px;border-radius:40px}.wald-images figure:last-child figcaption{background:rgba(78,0,0,.85)}.wald-quote{position:relative;margin:clamp(40px,5vw,68px) 0 clamp(44px,5vw,72px);background:var(--green);border-radius:8px;border-left:4px solid var(--wine);padding:clamp(26px,3vw,38px) clamp(28px,3.5vw,46px);box-shadow:0 18px 40px rgba(26,32,40,.16);animation:reveal .85s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0 cover 20%}.wald-quote small{color:#8fae9b;margin-bottom:12px}.wald-quote p{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(16px,1.5vw,21px);line-height:1.55;color:#EFEAE2;margin:0;max-width:88ch}.city-docs-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.city-docs-head i{flex:1;height:1px;background:rgba(26,32,40,.14)}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.doc-card{position:relative;aspect-ratio:3/4;border-radius:5px;overflow:hidden;background:#EFEAE2;border:1px solid var(--line);transition:.3s}.doc-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(26,32,40,.18);border-color:var(--wine)}.doc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}.doc-card div{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;background:linear-gradient(to top,rgba(20,24,30,.86),rgba(20,24,30,0));color:var(--paper)}.doc-card small{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.08em;color:#C0D4C8}
.current-section h2{color:var(--paper)}.current-section .wald-lead{color:#f4d9ca}.current-section .wald-grid p{color:rgba(247,244,239,.82)}.current-section .wald-facts div{border-top-color:rgba(247,244,239,.38)}.current-section .wald-facts div:first-child{border-top-color:#f2d7c8}.current-section .wald-facts small{color:#d8aa99}.current-section .wald-facts strong{color:var(--paper)}.current-section .wald-images figure{border:1px solid rgba(247,244,239,.2);box-shadow:0 22px 54px rgba(0,0,0,.26)}.current-section .wald-quote{background:var(--green);border:1px solid rgba(247,244,239,.16);border-left:4px solid #f2d7c8;box-shadow:0 18px 40px rgba(0,0,0,.18)}.current-section .wald-quote small{color:#8fae9b}.current-section .wald-quote p{color:#fff7f1}.current-section .city-docs-head,.current-section .doc-grid{display:none}.wald-docs-card{display:none}.wald-docs-button{flex:0 0 auto;background:var(--paper);color:var(--wine);border:0;border-radius:40px;padding:14px 24px;font-family:Jost,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 12px 28px rgba(0,0,0,.18);transition:.25s}.wald-docs-button:hover{transform:translateY(-2px);background:#fff7f1}.wald-overlay-button{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:clamp(28px,4vw,46px);background:#EFB7D2;color:#393C36;border:0;border-radius:40px;padding:16px 30px;overflow:hidden;font-family:'Bebas Neue',sans-serif;font-size:18px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 8px 24px rgba(239,183,210,.25);transition:transform .25s,box-shadow .25s,background .25s}.wald-overlay-button::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.18) 42%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.18) 58%,transparent 100%);transform:translateX(-120%);transition:transform .65s cubic-bezier(.2,.7,.2,1)}.wald-overlay-button:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(239,183,210,.35);background:#e8a5c4}.wald-overlay-button:hover::before{transform:translateX(120%)}
.wald-photos{display:grid;grid-template-columns:1fr;gap:18px;width:min(130%,820px);margin-left:clamp(-72px,-4vw,-28px)}.wald-photo-card{position:relative;padding:0;border:1px solid rgba(247,244,239,.24);border-radius:8px;overflow:hidden;background:rgba(247,244,239,.07);cursor:pointer;box-shadow:0 18px 44px rgba(0,0,0,.22);transition:transform .35s ease,box-shadow .35s ease,border-color .35s}.wald-photo-card:hover{transform:translateY(-5px);box-shadow:0 28px 68px rgba(0,0,0,.34);border-color:rgba(242,215,200,.62)}.wald-photo-card figure{margin:0;aspect-ratio:16/9;overflow:hidden}.wald-photo-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s}.wald-photo-card:hover img{transform:scale(1.06);filter:saturate(1.05)}.wald-photo-card figcaption{position:absolute;left:14px;bottom:14px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:rgba(26,32,40,.88);border:1px solid rgba(247,244,239,.28);border-radius:40px;padding:7px 13px;backdrop-filter:blur(6px)}.bestands-card{display:none}
@media(max-width:880px){.wald-photos{width:100%;margin-left:0}}
.projects-section{background:#1A1714;color:var(--paper);overflow:hidden}.skills-section{background:var(--green);color:var(--paper);overflow:hidden}.projects-section .section-head.light h2{color:var(--paper)}.projects-section .section-head.light .section-kicker{color:#f2d7c8}.projects-section .section-head p{color:rgba(247,244,239,.72)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.8vw,22px);grid-auto-rows:260px;align-items:stretch}.project-cell{min-height:0;animation:projectIn .55s ease-out both;animation-delay:calc(var(--i)*.1s);animation-timeline:view();animation-range:entry 0 cover 24%}.project-cell.feature{grid-column:span 2;grid-row:span 2}.project-cell.wide{grid-column:span 2}.project-cell.tall{grid-row:span 2}@keyframes projectIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.pc{height:100%;width:100%;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(255,255,255,.06);border-radius:6px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.32);position:relative;color:var(--ink);cursor:pointer;text-align:left;transition:transform .3s ease-out,box-shadow .3s ease-out,border-color .4s ease-out}.pc:hover{transform:translateY(-7px);box-shadow:0 12px 36px rgba(0,0,0,.52);border-color:#B6A174}.pc::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:rgba(26,32,40,.45);transition:width .4s ease-out;z-index:9}.pc:hover::after{width:100%}.pc-media{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#E6DFD4}.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out,filter .4s ease-out}.pc:hover img{transform:scale(1.08);filter:saturate(1.04) contrast(1.02)}.project-cell.feature .pc{background:#fbfaf7;border-color:rgba(219,83,40,.35);box-shadow:0 8px 22px rgba(26,32,40,.14)}.project-cell.feature .pc:hover{box-shadow:0 16px 42px rgba(0,0,0,.24)}.project-cell.feature .pc:hover img{transform:scale(1.12)}.pc-hover-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:flex-start;padding:clamp(14px,2vw,24px);background:linear-gradient(to top,rgba(10,8,6,.76) 0%,rgba(10,8,6,.32) 42%,transparent 68%);opacity:0;transition:opacity .3s ease-out .05s}.pc:hover .pc-hover-overlay{opacity:1}.pc-hover-label{color:#fff;font-family:Jost,sans-serif;font-size:clamp(14px,1.5vw,20px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;transform:translateY(10px);transition:transform .3s ease-out .1s}.pc:hover .pc-hover-label{transform:none}.pc-sheen{display:none;pointer-events:none}.pc-body{padding:14px 18px 16px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;min-height:100px}.pc-body>div:first-child{min-width:0}.pc-kicker{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc-title{font-family:Jost,sans-serif;font-weight:600;font-size:clamp(13px,1.05vw,16px);line-height:1.1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}.pc:hover .pc-title{color:#db5328}.pc-meta{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--sage);margin-top:5px}.pc-year{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--wine);font-weight:500;white-space:nowrap}.project-cell.feature .pc-kicker{display:none}.project-cell.feature .pc-body{position:absolute;left:0;right:0;bottom:0;z-index:4;min-height:0;padding:28px 30px;color:var(--paper);background:linear-gradient(to top,rgba(26,32,40,.88),rgba(26,32,40,.12) 76%,transparent)}.project-cell.feature .pc-title{font-size:clamp(32px,3.5vw,52px);max-width:10ch;color:var(--paper);white-space:normal;overflow:visible;text-overflow:clip}.project-cell.feature .pc-kicker,.project-cell.feature .pc-meta{color:#f4c9b8}.project-cell.feature .pc-year{color:#db5328}.pc-feature-caption{position:absolute;z-index:4;left:30px;right:auto;top:28px;max-width:min(460px,58%);color:var(--paper);pointer-events:none;background:rgba(14,18,24,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:6px;padding:18px 22px;border:1px solid rgba(247,244,239,.08)}.pc-feature-caption small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#B6A174;margin-bottom:8px}.pc-feature-caption strong{display:block;font-family:Jost,sans-serif;font-size:18px;font-weight:600;text-transform:uppercase;margin-bottom:8px}.pc-feature-caption p{max-width:44ch;font-size:14px;line-height:1.55;color:rgba(247,244,239,.84);margin:0}
.about-section{background:#F8F3EE;overflow:hidden;position:relative}.about-image{border-radius:6px;overflow:hidden;min-height:560px;background:#E6DFD4;box-shadow:0 28px 58px rgba(26,32,40,.16)}.about-image img{width:100%;height:100%;object-fit:cover;object-position:center top}.about-text{display:flex;flex-direction:column}.typewriter-h2{min-height:1.3em;display:block}.tw-cursor{color:var(--green);font-weight:300;animation:twBlink 1s step-end infinite}@keyframes twBlink{0%,100%{opacity:1}50%{opacity:0}}.about-lead{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(17px,1.45vw,22px);color:var(--sage);line-height:1.5;margin-top:8px;margin-bottom:24px;max-width:42ch}.about-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.about-tags span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);border:1px solid rgba(124,138,114,.4);border-radius:40px;padding:7px 14px}
.skills-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:stretch}.skills-card-left{background:#3D5941;border:1px solid rgba(247,244,239,.1);border-radius:14px;padding:clamp(28px,3.5vw,40px);display:flex;flex-direction:column;animation:skillFadeIn .65s ease both;animation-timeline:view();animation-range:entry 0 cover 22%}.skills-card-left h3{font-family:Jost,sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,244,239,.4);margin:0 0 clamp(20px,3vw,32px)}.skills-card-right{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}.cat-card{background:#fff;border:1.5px solid #7C8A72;border-radius:14px;padding:clamp(14px,1.8vw,22px);flex:1;animation:skillFadeIn .65s ease calc((var(--i,0)+1)*100ms) both;animation-timeline:view();animation-range:entry 0 cover 22%;transition:box-shadow .3s,border-color .3s}.cat-card:hover{box-shadow:0 8px 24px rgba(124,138,114,.14);border-color:#5a6b52}.cat-card-title{font-family:Jost,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#1E1E1E;margin-bottom:12px;display:flex;align-items:center;gap:10px}.cat-kicker{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;color:#7C8A72;letter-spacing:.08em}.cat-tags{display:flex;flex-wrap:wrap;gap:7px}.cat-tags span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;color:#7C8A72;border:1px solid rgba(124,138,114,.55);border-radius:20px;padding:6px 12px;cursor:default;transition:background .3s,transform .3s}.cat-tags span:hover{background:rgba(124,138,114,.1);transform:scale(1.05)}@keyframes skillFadeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}.software-row{padding:10px 0;border-radius:4px;transition:background .25s,padding .2s,margin .2s;cursor:default}.software-row:last-child{margin-bottom:0}.software-row:hover{background:rgba(255,255,255,.07);padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px;border-radius:6px}.software-row header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px}.software-row strong{font-family:Jost,sans-serif;font-size:clamp(14px,1.15vw,17px);text-transform:uppercase;color:var(--paper)}.skill-pct{display:flex;align-items:baseline;gap:1px;font-family:Jost,sans-serif;font-size:15px;font-weight:600;color:#D4745F;min-width:44px;justify-content:flex-end;transition:color .3s}.skill-pct em{font-style:normal;font-size:11px;font-weight:400}.skill-desc{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.04em;color:rgba(192,212,200,.5);margin-top:4px;margin-bottom:8px}.software-row:hover .skill-pct{color:#e8856e}.bar{height:6px;border-radius:40px;background:rgba(247,244,239,.14);overflow:hidden}.bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--wine),#D4745F);border-radius:40px;transform:scaleX(0);transform-origin:left;transition:transform 1.5s cubic-bezier(.15,.85,.2,1),box-shadow .3s,filter .3s}.software-row:hover .bar-fill{filter:brightness(1.16);box-shadow:0 0 14px rgba(212,116,95,.34)}@media(max-width:900px){.skills-layout{grid-template-columns:1fr}}
.timeline-section{position:relative;background:var(--paper);color:var(--ink)}.timeline-pin{position:sticky;top:0;height:100vh;padding-top:90px;overflow:hidden}.timeline-top{width:min(1220px,calc(100% - 56px));margin:0 auto 44px;display:flex;align-items:end;justify-content:space-between}.timeline-top h2::after{content:" & Erfahrung"}.timeline-year{text-align:right}.timeline-year strong{font-family:Jost,sans-serif;font-size:clamp(30px,3.4vw,46px);font-weight:500;color:var(--wine)}.wd-progress{width:clamp(140px,17vw,220px);height:3px;border-radius:40px;background:rgba(26,32,40,.12);overflow:hidden}.wd-progress div{height:100%;background:var(--wine);transform:scaleX(0);transform-origin:left}#wd-viewport{overflow:hidden;scroll-behavior:smooth}#wd-track{--line-progress:0;position:relative;display:flex;align-items:stretch;gap:clamp(34px,4vw,58px);padding:28px clamp(36px,7vw,96px) 0;height:min(480px,64vh);will-change:transform;transition:transform .08s linear}#wd-track::before{content:"";position:absolute;left:clamp(36px,7vw,96px);right:clamp(36px,7vw,96px);top:48px;height:1px;background:rgba(26,32,40,.12)}#wd-track::after{content:"";position:absolute;left:clamp(36px,7vw,96px);top:48px;width:calc((100% - (clamp(36px,7vw,96px) * 2)) * var(--line-progress));height:2px;background:linear-gradient(90deg,var(--wine),var(--sage),var(--rust));box-shadow:0 0 18px rgba(78,0,0,.18);transition:width .18s ease-out}.wd-cell{position:relative;z-index:1;flex:0 0 clamp(330px,31vw,410px);opacity:0;transform:translateY(44px) scale(.965);transition:opacity .45s ease,transform .7s cubic-bezier(.18,.9,.22,1.18);transition-delay:var(--delay)}.wd-cell.in-view{opacity:1;transform:none}.wd-card{height:100%;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--sage);border-radius:7px;padding:clamp(24px,2.4vw,34px);box-shadow:0 10px 24px rgba(26,32,40,.09);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease,color .3s ease}.wd-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 30px 62px rgba(26,32,40,.22);background:#FBFAF7;border-color:rgba(78,0,0,.22)}.wd-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.kind{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;border-radius:40px;padding:5px 12px;margin:0;animation:badgePulse 3.6s ease-in-out infinite;transition:background .3s,box-shadow .3s,transform .3s}.kind i{width:7px;height:7px;background:currentColor;transform:rotate(45deg);transition:transform .35s ease}.wd-card:hover .kind{background:rgba(184,92,56,.08);box-shadow:0 0 20px rgba(184,92,56,.18);transform:translateY(-1px)}.wd-card:hover .kind i{transform:rotate(135deg) scale(1.15)}.wd-diamond{width:14px;height:14px;background:var(--kind);transform:rotate(45deg);box-shadow:0 0 0 rgba(78,0,0,0);animation:diamondSpin 9s linear infinite;transition:transform .3s ease,box-shadow .3s ease}.wd-card:hover .wd-diamond{animation-play-state:paused;transform:rotate(45deg) scale(1.35);box-shadow:0 0 22px color-mix(in srgb,var(--kind) 50%,transparent)}.wd-card h3{font-size:22px;margin-bottom:10px;transition:color .3s}.wd-card:hover h3{color:var(--wine)}.wd-card p{color:#52514c;line-height:1.55}.wd-card li{font-size:13px;line-height:1.55;color:#52514c;margin-bottom:8px;transition:color .3s}.wd-card:hover li,.wd-card:hover p{color:#3e433f}
.contact-section{background:var(--green);color:var(--paper);overflow:hidden}.big-section-number{position:absolute;bottom:clamp(20px,3vw,52px);right:clamp(52px,7vw,140px);font-family:Jost,sans-serif;font-weight:700;font-size:clamp(120px,18vw,240px);line-height:1;color:rgba(184,92,56,.16);pointer-events:none;z-index:0}.big-section-number.pos-tl{top:clamp(20px,3vw,52px);left:clamp(52px,7vw,140px);bottom:auto;right:auto}.big-section-number.pos-tr{top:clamp(20px,3vw,52px);left:52%;right:auto;bottom:auto}.big-section-number.pos-bl{bottom:clamp(20px,3vw,52px);left:clamp(52px,7vw,140px);top:auto;right:auto}.big-section-number.pos-br{bottom:clamp(20px,3vw,52px);right:clamp(52px,7vw,140px);top:auto;left:auto}
#aktuelles .big-section-number{color:transparent;-webkit-text-stroke:3px rgba(247,244,239,.3)}
#projekte .big-section-number{color:rgba(247,244,239,.07);font-family:"Playfair Display",serif;font-weight:700}
#ueber .big-section-number{color:transparent;-webkit-text-stroke:4px rgba(26,32,40,.1);font-family:"IBM Plex Mono",monospace;font-weight:600}
#faehigkeiten .big-section-number{color:rgba(182,161,116,.14);font-family:"Playfair Display",serif;font-style:italic;font-weight:700}
#werdegang .big-section-number{color:transparent;-webkit-text-stroke:2px rgba(124,138,114,.22);font-weight:300}
#perspectives .big-section-number{color:rgba(247,244,239,.1);font-family:"IBM Plex Mono",monospace;font-weight:600}
#kontakt .big-section-number{color:transparent;-webkit-text-stroke:4px rgba(184,92,56,.28);font-family:"Playfair Display",serif;font-weight:700}.number-kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px}.number-kicker span:first-child{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--rust)}.number-kicker span:last-child{font-family:Jost,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#C0D4C8}.number-kicker i{display:block;width:30px;height:1px;background:var(--rust)}.contact-section h2{color:var(--paper)}.contact-lead{font-family:"Playfair Display",serif!important;font-size:clamp(17px,1.5vw,20px)!important;line-height:1.55!important;color:#C0D4C8!important;max-width:40ch;margin-bottom:34px}.email-card{width:min(100%,560px);cursor:pointer;text-align:left;background:rgba(247,244,239,.06);border:1px solid rgba(192,212,200,.22);border-radius:5px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--paper);transition:border-color .25s,background .25s}.email-card:hover{border-color:var(--rust);background:rgba(247,244,239,.1)}.email-card small,.contact-meta small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8fae9b;margin-bottom:6px}.email-card strong{font-family:Jost,sans-serif;font-size:clamp(17px,2vw,24px);font-weight:500;color:var(--paper)}.email-card em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);white-space:nowrap}.contact-meta{display:flex;flex-wrap:wrap;gap:30px;padding-top:24px}.contact-meta span{font-size:15px;color:var(--paper)}.contact-meta a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(192,212,200,.4);padding-bottom:1px;margin-right:16px}.portfolio-note{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#8fae9b;padding-top:22px}.contact-form{background:rgba(247,244,239,.12);border:1px solid rgba(192,212,200,.28);border-radius:6px;padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:18px}.cf-error{color:#e07070;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;min-height:0;transition:opacity .25s}.cf-success{display:none;flex-direction:column;gap:14px;padding:24px 28px;background:#E8DDD0!important;border:1px solid rgba(42,42,42,.2)!important;border-radius:8px;color:#141210!important;animation:reveal .4s ease both}.cf-success.visible{display:flex!important}.cf-success strong{font-family:Jost,sans-serif;font-size:19px;font-weight:700;color:#140f0d!important}.cf-success p{font-size:15px;color:#2a2a2a!important;margin:0;line-height:1.6}.cf-reset{align-self:flex-start;background:#2a2a2a!important;border:none!important;color:#E8DDD0!important;border-radius:40px;padding:10px 22px;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .25s ease}.cf-reset:hover{background:#915851!important;color:#FFFFFF!important;transform:translateY(-2px)}
.contact-form label{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8fae9b}.contact-form input,.contact-form textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(192,212,200,.3);color:var(--paper);font-size:15px;padding:10px 2px;outline:none;resize:vertical;margin-top:8px}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--rust)}.contact-form .primary{align-self:flex-start}.site-footer{background:var(--ink);color:#9aa39c}.site-footer>div{max-width:1280px;margin:0 auto;padding:38px clamp(20px,5vw,64px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}.site-footer strong{font-family:Jost,sans-serif;font-weight:500;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}.site-footer nav{display:flex;flex-wrap:wrap;gap:24px;font-size:13px}.site-footer a{color:#9aa39c;text-decoration:none}.site-footer a:hover{color:var(--rust)}.site-footer small{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em}
.modal,.lightbox{position:fixed;inset:0;z-index:120;display:none;background:rgba(8,9,7,.78);backdrop-filter:blur(10px)}.modal.open{display:flex;align-items:center;justify-content:center;padding:clamp(16px,3vw,32px)}.lightbox.open{display:block}.modal-panel{position:relative;width:min(1100px,calc(100vw - 32px));height:min(680px,calc(100vh - 60px));background:#1A1714;border-radius:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.85fr);animation:modalUp .35s cubic-bezier(.16,1,.3,1) both}.modal-media{position:relative;background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden}.modal-media img{max-width:100%;max-height:100%;object-fit:contain}.modal-info{padding:clamp(24px,3vw,42px);overflow:auto}.modal-close,.modal-arrow{position:absolute;z-index:4;border:1px solid rgba(247,244,239,.45);background:rgba(26,32,40,.42);color:var(--paper);border-radius:40px;padding:9px 16px}.modal-close{top:18px;right:18px}.modal-arrow{top:50%;transform:translateY(-50%);font-size:24px}.modal-arrow.prev{left:18px}.modal-arrow.next{right:18px}.filter-row,.thumb-row{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0}.filter-row button{border:1px solid var(--line);background:transparent;color:var(--sage);border-radius:40px;padding:8px 14px;font-family:"IBM Plex Mono",monospace;font-size:11px;text-transform:uppercase}.filter-row button.active{background:#db5328;border-color:#db5328;color:var(--paper)}.thumb{width:94px;height:64px;border:2px solid transparent;border-radius:3px;overflow:hidden;background:#E6DFD4}.thumb.active{border-color:#db5328}.thumb img{width:100%;height:100%;object-fit:cover}.detail-list{padding-left:18px;color:#52514c;line-height:1.65}.pill-list{display:flex;flex-wrap:wrap;gap:8px}.pill-list span{font-size:12px;border:1px solid var(--line);border-radius:40px;padding:6px 12px;color:var(--sage)}.lightbox-inner{position:absolute;inset:clamp(18px,3vw,42px);display:flex;flex-direction:column;gap:14px}.lightbox-top{display:flex;justify-content:space-between;align-items:center;color:var(--paper);font-family:Jost,sans-serif;text-transform:uppercase;letter-spacing:.08em}.lightbox-top button{background:rgba(247,244,239,.1);border:1px solid rgba(247,244,239,.4);color:var(--paper);border-radius:40px;padding:8px 18px}.lightbox img{min-height:0;width:100%;height:100%;object-fit:contain;background:#111}
.docs-overlay-panel{position:absolute;inset:clamp(14px,3vw,34px);display:flex;flex-direction:column;background:var(--paper);border-radius:8px;overflow:hidden;animation:modalUp .35s ease both}.docs-overlay-top{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px clamp(18px,2.5vw,34px);background:var(--wine);color:var(--paper)}.docs-overlay-top small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#d8aa99;margin-bottom:5px}.docs-overlay-top strong{font-family:Jost,sans-serif;font-size:clamp(17px,1.8vw,26px);font-weight:500;text-transform:uppercase}.docs-overlay-top button{background:rgba(247,244,239,.1);border:1px solid rgba(247,244,239,.32);color:var(--paper);border-radius:40px;padding:9px 18px}.docs-overlay-body{min-height:0;flex:1;display:grid;grid-template-columns:minmax(180px,260px) 1fr;background:#151515}.docs-overlay-rail{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#211b1a;border-right:1px solid rgba(247,244,239,.12)}.docs-thumb{display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;gap:2px 11px;align-items:center;text-align:left;border:1px solid rgba(247,244,239,.12);background:rgba(247,244,239,.05);color:var(--paper);border-radius:6px;padding:8px;transition:.2s}.docs-thumb.active,.docs-thumb:hover{border-color:#f2d7c8;background:rgba(247,244,239,.12)}.docs-thumb img{grid-row:span 2;width:58px;height:76px;object-fit:cover;background:#fff;border-radius:3px}.docs-thumb span{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;color:#d8aa99;text-transform:uppercase}.docs-thumb strong{font-family:Jost,sans-serif;font-size:13px;font-weight:500;text-transform:uppercase}.docs-preview{position:relative;min-width:0;min-height:0;margin:0;display:flex;align-items:center;justify-content:center;padding:clamp(16px,2.8vw,42px);background:#111}.docs-preview img{width:100%;height:100%;object-fit:contain;background:#fff}.docs-preview figcaption{position:absolute;left:clamp(20px,3vw,44px);bottom:clamp(20px,3vw,44px);background:rgba(78,0,0,.86);color:var(--paper);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:40px;padding:8px 14px}
.wald-modal-panel{position:absolute;inset:clamp(16px,3vw,38px);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px;background:var(--paper);border-radius:8px;overflow:hidden;padding:clamp(18px,2.5vw,34px);box-shadow:0 34px 90px rgba(0,0,0,.45);animation:waldModalIn .36s cubic-bezier(.2,.7,.2,1) both;transform:scale(.95)}@keyframes waldModalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.wald-modal-close{position:absolute;top:18px;right:18px;z-index:4;width:42px;height:42px;border-radius:50%;border:1px solid rgba(78,0,0,.22);background:var(--wine);color:var(--paper);font-family:Jost,sans-serif;font-size:18px}.wald-modal-head small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin-bottom:6px}.wald-modal-head strong{font-family:Jost,sans-serif;font-size:clamp(28px,4vw,58px);font-weight:500;text-transform:uppercase;color:var(--wine)}.wald-tabs{display:flex;gap:8px;flex-wrap:wrap}.wald-tab{border:1px solid rgba(78,0,0,.18);background:transparent;color:var(--wine);border-radius:40px;padding:9px 16px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:.25s}.wald-tab.active,.wald-tab:hover{background:var(--wine);color:var(--paper);border-color:var(--wine)}.wald-modal-stage{position:relative;min-height:0;margin:0;background:#111;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}.wald-modal-image{width:100%;height:100%;object-fit:contain;background:#fff;animation:reveal .35s ease both}.wald-modal-stage figcaption{position:absolute;left:18px;bottom:18px;background:rgba(78,0,0,.88);color:var(--paper);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:40px;padding:8px 14px}.wald-modal-controls{display:flex;align-items:center;justify-content:center;gap:18px}.wald-modal-controls button{border:0;background:var(--wine);color:var(--paper);border-radius:40px;padding:11px 20px;font-family:Jost,sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.wald-modal-controls span{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}

/* Werdegang – dot timeline */
.werdegang-section{background:#F7F5F0;position:relative;overflow:hidden;padding:clamp(40px,6vw,80px) 0 clamp(50px,7vw,90px)}
.wd-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px;padding:0 clamp(24px,5vw,72px)}
.wd-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.wd-meta strong{font-family:Jost,sans-serif;font-size:clamp(28px,3vw,42px);font-weight:500;color:#7C8A72;line-height:1}
.wd-progress-bar{width:clamp(100px,13vw,180px);height:4px;background:#D8D6CF;border-radius:2px;overflow:hidden}
#wd-bar{height:100%;width:0%;background:#7C8A72;border-radius:2px;transition:width 120ms ease-out}
/* Dot-timeline viewport */
.tl-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none;height:clamp(340px,46vh,500px);position:relative}
.tl-viewport::-webkit-scrollbar{display:none}
.tl-viewport.dragging{cursor:grabbing}
/* Track & axis */
.tl-track{position:relative;display:flex;align-items:stretch;height:100%;padding:0 clamp(80px,10vw,160px);width:max-content;min-width:100%}
.tl-axis{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(26,32,40,.12);transform:translateY(-50%);z-index:0}
/* Each event slot */
.tl-event{position:relative;flex:0 0 clamp(200px,19vw,260px);height:100%;z-index:1}
/* Dot */
.tl-dot{position:absolute;top:50%;left:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;border:2px solid rgba(26,32,40,.18);box-shadow:0 0 0 4px rgba(26,32,40,.04);transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;z-index:3;cursor:default}
.tl-event:hover .tl-dot{transform:translate(-50%,-50%) scale(1.55);background:#db5328;border-color:#db5328;box-shadow:0 0 0 6px rgba(219,83,40,.12)}
/* Stem */
.tl-stem{position:absolute;left:50%;width:1px;background:rgba(26,32,40,.1);transform:translateX(-50%);z-index:1}
.tl-above .tl-stem{bottom:calc(50% + 8px);top:32%}
.tl-below .tl-stem{top:calc(50% + 8px);bottom:32%}
/* Content */
.tl-content{position:absolute;left:14px;right:14px}
.tl-above .tl-content{top:12px;bottom:calc(50% + 30px);display:flex;flex-direction:column;justify-content:flex-end}
.tl-below .tl-content{top:calc(50% + 30px);bottom:12px}
.tl-kind{font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B85C38;margin-bottom:5px}
.tl-title{font-family:Jost,sans-serif;font-size:clamp(11px,.95vw,14px);font-weight:600;text-transform:uppercase;line-height:1.25;color:#1A1A1A;margin-bottom:4px}
.tl-org{font-family:"IBM Plex Mono",monospace;font-size:10px;color:#52514c;margin-bottom:3px;line-height:1.4}
.tl-date{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.04em;color:#9a9890}
/* Right fade hint */
.werdegang-section::after{content:'';position:absolute;right:0;top:0;bottom:0;width:clamp(60px,8vw,140px);background:linear-gradient(to right,transparent,#F7F5F0 88%);pointer-events:none;z-index:5}
@media(max-width:720px){.wd-header{flex-direction:column;gap:16px}.wd-meta{align-items:flex-start}.tl-event{flex:0 0 clamp(160px,72vw,220px)}}
/* Perspectives section */
.perspectives-section{overflow:hidden}.ps-live-kicker{display:flex;align-items:center;gap:14px;margin-bottom:28px;animation:reveal .8s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0 cover 24%}.ps-live-kicker>span:last-child{font-family:Jost,sans-serif;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#f2d7c8}.ps-intro{margin-bottom:clamp(36px,5vw,60px);animation:reveal .85s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0 cover 26%}.ps-intro h2{color:var(--paper);font-size:clamp(26px,3.6vw,52px);max-width:22ch;margin-bottom:16px;line-height:1.1}.ps-subhead{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(16px,1.5vw,21px);color:#f4d9ca;line-height:1.5;max-width:54ch;margin:0}.ps-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}.ps-video-col{animation:reveal .85s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0 cover 26%}.ps-video-wrap{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;box-shadow:0 28px 60px rgba(0,0,0,.4);margin-bottom:clamp(20px,3vw,32px);background:#111;transition:box-shadow .3s ease}.ps-video-wrap:hover{box-shadow:0 36px 72px rgba(0,0,0,.55)}.ps-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.ps-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}.ps-meta div{border-top:1px solid rgba(247,244,239,.16);padding-top:10px}.ps-meta small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#d8aa99;margin-bottom:4px}.ps-meta strong{font-family:Jost,sans-serif;font-size:13px;font-weight:500;color:rgba(247,244,239,.88)}.ps-text{animation:reveal .85s cubic-bezier(.2,.7,.2,1) .15s both;animation-timeline:view();animation-range:entry 0 cover 26%}.ps-text>p{font-size:clamp(15px,1.15vw,17px);line-height:1.85;color:rgba(247,244,239,.85);margin-bottom:18px}.ps-topics-label{font-family:"IBM Plex Mono",monospace!important;font-size:11px!important;letter-spacing:.1em;text-transform:uppercase;color:#B6A174!important;margin-bottom:14px!important}.ps-topic-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.ps-topic-tags span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;color:rgba(247,244,239,.72);border:1px solid rgba(247,244,239,.22);border-radius:40px;padding:6px 14px;transition:border-color .25s ease,color .25s ease}.ps-topic-tags span:hover{border-color:rgba(182,161,116,.6);color:rgba(247,244,239,1)}.ps-guest{position:relative;overflow:hidden;background:#fff;border:2px solid #7C8A72;border-radius:6px;padding:clamp(18px,2vw,26px);box-shadow:0 8px 24px rgba(122,138,114,.15);transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s ease,border-color .38s ease,background .38s ease}.ps-guest::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(124,138,114,.1) 46%,rgba(124,138,114,.24) 50%,rgba(124,138,114,.1) 54%,transparent 75%);background-size:250% 100%;background-position:220% 0;transition:background-position .75s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:0;border-radius:inherit}.ps-guest:hover{transform:translateY(-7px) scale(1.012);box-shadow:0 24px 58px rgba(122,138,114,.28),0 4px 14px rgba(122,138,114,.14);border-color:#4a5e4a;background:#F8FBF8}.ps-guest:hover::before{background-position:-55% 0}.ps-guest-label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7C8A72;margin-bottom:10px}.ps-guest-name{font-family:Jost,sans-serif;font-size:clamp(17px,1.7vw,22px);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#1E1E1E;margin-bottom:4px}.ps-guest-role{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#7C8A72;margin-bottom:14px}.ps-guest-bio{font-size:14px!important;line-height:1.65!important;color:#3a3a3a!important;margin-bottom:16px!important}.ps-guest-link{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:#7C8A72;text-decoration:none;position:relative}.ps-guest-link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:#7C8A72;transition:width .3s ease}.ps-guest-link:hover::after{width:100%}@media(max-width:960px){.ps-grid{grid-template-columns:1fr}}@media(max-width:600px){.ps-meta{grid-template-columns:1fr}.ps-topic-grid{grid-template-columns:1fr}}
@media(max-width:1100px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:230px}.project-cell.feature,.project-cell.wide{grid-column:span 2}.project-cell.tall{grid-row:span 1}.modal-panel{grid-template-columns:1fr}.modal-info{max-height:44vh}.wald-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.doc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.desktop-nav{display:none}.section-head{display:block}.split-image-card{width:100%;min-height:360px;margin-left:0}.split-image-card figure{min-height:180px}.wald-overlay-button{width:100%;margin-top:22px}.wald-modal-panel{inset:0;border-radius:0;padding:16px}.wald-modal-stage{min-height:48vh}.docs-overlay-panel{inset:0;border-radius:0}.docs-overlay-top{align-items:flex-start}.docs-overlay-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}.docs-overlay-rail{border-right:0;border-bottom:1px solid rgba(247,244,239,.12);flex-direction:row;overflow-x:auto}.docs-thumb{min-width:178px}.docs-preview{padding:14px}.bento{grid-template-columns:1fr}.bento-soft,.bento-cl{grid-column:auto}.timeline-pin{position:relative;height:auto}.timeline-section{height:auto!important}.timeline-top{display:block}.timeline-year{text-align:left}#wd-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}#wd-track{height:auto;padding:26px 24px 48px;transform:none!important;gap:24px}#wd-track::before,#wd-track::after{display:none}.wd-cell{scroll-snap-align:center;opacity:1;transform:none;flex-basis:min(84vw,360px)}.modal-panel{inset:0;border-radius:0}.modal-media{min-height:50vh}}
@media(max-width:720px){.project-grid{grid-template-columns:1fr;grid-auto-rows:360px}.project-cell,.project-cell.feature,.project-cell.wide,.project-cell.tall{grid-column:span 1;grid-row:span 1}.project-cell.feature{grid-row:span 2}.pc-feature-caption{left:20px;right:20px;top:20px}.project-cell.feature .pc-body{padding:22px}.project-cell.feature .pc-title{font-size:34px}}
@media(max-width:620px){.doc-grid{grid-template-columns:1fr}h1{font-size:52px}.hero-actions .primary,.hero-actions .secondary{width:100%}.pc-body{padding:18px}.section-inner{width:calc(100% - 28px)}.big-section-number{font-size:clamp(54px,17vw,78px)}.big-section-number.pos-tl,.big-section-number.pos-bl{left:clamp(12px,3.5vw,28px)}.big-section-number.pos-tr{left:clamp(40%,42vw,55%)}.big-section-number.pos-br,.big-section-number.pos-br{right:clamp(12px,3.5vw,28px)}#aktuelles .big-section-number{-webkit-text-stroke-width:1.5px}#ueber .big-section-number{-webkit-text-stroke-width:2px}#kontakt .big-section-number{-webkit-text-stroke-width:2px}#werdegang .big-section-number{-webkit-text-stroke-width:1px}}
/* ── Mobile Navigation ─────────────────────────────────────────── */
.mobile-menu-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:transparent;border:none;padding:8px;cursor:pointer;flex-shrink:0}
.mobile-menu-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .22s ease,width .22s ease}
.mobile-menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-btn.open span:nth-child(2){opacity:0;width:0}
.mobile-menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:100;background:var(--paper);transform:translateX(105%);transition:transform .42s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding-top:68px;overflow:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-inner{display:flex;flex-direction:column;padding:clamp(20px,6vw,40px) clamp(24px,6vw,44px)}
.mnav-link{font-family:Jost,sans-serif;font-size:clamp(20px,5.5vw,28px);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:transparent;border:none;border-bottom:1px solid rgba(26,32,40,.1);text-align:left;padding:clamp(13px,3vw,18px) 0;width:100%;transition:color .2s,transform .25s}
.mnav-link:last-of-type{border-bottom:none}
.mnav-link:hover,.mnav-link:focus{color:var(--wine);transform:translateX(8px);outline:none}
.mnav-pill{margin-top:24px;display:block;width:100%;background:var(--wine);color:var(--paper);border:none;border-radius:40px;padding:16px 24px;font-family:Jost,sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;cursor:pointer;transition:background .25s,transform .2s}
.mnav-pill:hover{background:#6e1414;transform:scale(1.02)}
@media(max-width:880px){.mobile-menu-btn{display:flex}.site-header{z-index:102}}
/* ── Additional mobile tweaks ──────────────────────────────────── */
@media(max-width:880px){.hero{height:200vh}}
@media(max-width:480px){.hero{height:160vh}.section{padding:clamp(52px,12vw,76px) 0}.ps-meta{grid-template-columns:1fr}.contact-grid{gap:32px}.skills-card-left,.cat-card{border-radius:10px}}

/* === Global Overrides === */
.section-pattern,.section-pattern-dk{display:none!important}
.big-section-number{display:none!important}

/* Rectangular cards everywhere */
.pc,.wald-photo-card,.wald-photo-card figure,.about-image,.modal-panel,.email-card,.contact-form,.timeline-card,.wald-quote,.skills-card-left,.cat-card,.pc-feature-caption{border-radius:0!important}
.wald-photo-card figcaption,.wald-modal-close,.wald-overlay-button,.filter-row button,.thumb,.pill-list span,.cf-reset,.nav-link,.kind{border-radius:0!important}

/* === Section colors: alternating #915851 / gray === */
/* Aktuelles → #915851 */
#aktuelles{background:#E8DDD0!important;overflow:hidden!important;position:static!important}
#aktuelles h2{color:#2a2a2a!important}
#aktuelles .wald-lead,#aktuelles blockquote p{color:rgba(42,42,42,.85)!important}
#aktuelles p{color:rgba(42,42,42,.72)!important}
#aktuelles .wald-facts strong{color:#2a2a2a!important}
#aktuelles .wald-facts small,#aktuelles .wald-quote small{color:rgba(42,42,42,.6)!important}
#aktuelles .wald-facts div{border-top-color:rgba(42,42,42,.2)!important}
#aktuelles .section-kicker{color:rgba(42,42,42,.65)!important}
#aktuelles .live-kicker{margin-bottom:22px!important}
#aktuelles .live-kicker>span:last-child{color:#2a2a2a!important;font-size:15px!important;font-weight:700!important;letter-spacing:.3em!important}
/* Flex layout: photos left, text right — works at every viewport width */
#aktuelles .section-inner{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
#aktuelles .wald-grid{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:clamp(520px,72vh,960px)!important;position:static!important;width:100%!important}
#aktuelles .wald-photos{position:relative!important;top:auto!important;left:auto!important;bottom:auto!important;right:auto!important;order:-1!important;flex:0 0 46%!important;width:auto!important;height:auto!important;min-height:100%!important;margin:0!important;display:flex!important;flex-direction:column!important;gap:0!important;overflow:hidden!important}
.wald-left-col{display:flex;flex-direction:column;gap:clamp(20px,2.8vw,40px)}
#aktuelles .wald-left-col{flex:1!important;min-width:280px!important;padding:clamp(48px,5vw,88px) clamp(36px,5vw,72px)!important;box-sizing:border-box!important;justify-content:center!important}
#aktuelles .wald-photo-card{flex:1!important;display:block!important;overflow:hidden!important;border-radius:0!important;border:none!important;outline:none!important;background:transparent!important;width:100%!important;cursor:default!important;transform:none!important;box-shadow:none!important;transition:none!important}
#aktuelles .wald-photo-card:hover,#aktuelles .wald-photo-card:focus{transform:none!important;box-shadow:none!important;border:none!important;outline:none!important;border-color:transparent!important}
#aktuelles .wald-photo-card figure{height:100%!important;margin:0!important;display:block!important;border-radius:0!important}
#aktuelles .wald-photo-card img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 40%!important;display:block!important;transition:none!important}
#aktuelles .wald-photo-card:hover img{transform:none!important;filter:none!important}
/* Mehr Infos CTA */
.wald-mehr-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Bebas Neue',sans-serif;font-size:18px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#E8DDD0;background:#2a2a2a;border:0;border-radius:40px;padding:13px 28px;cursor:pointer;transition:background .25s,transform .25s;align-self:flex-start}
.wald-mehr-btn:hover{background:#3d3d3d;transform:translateY(-2px)}
/* Waldmannsburg info overlay */
.wald-info-overlay{position:fixed;inset:0;z-index:200;background:rgba(10,8,6,.78);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.wald-info-overlay.open{opacity:1;pointer-events:all}
.wald-info-panel{position:relative;width:min(860px,100%);max-height:calc(100vh - 80px);overflow-y:auto;background:#1A1714;padding:clamp(32px,5vw,56px);border:1px solid rgba(247,244,239,.08);animation:modalUp .35s cubic-bezier(.16,1,.3,1) both}
.wald-info-close{position:absolute;top:18px;right:18px;background:transparent;border:1px solid rgba(247,244,239,.16);color:rgba(247,244,239,.5);font-size:16px;cursor:pointer;padding:6px 12px;font-family:Jost,sans-serif;font-weight:500;transition:.2s}
.wald-info-close:hover{color:var(--paper);border-color:rgba(247,244,239,.5)}
.wald-info-kicker{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#db5328;margin-bottom:10px}
.wald-info-title{font-family:Jost,sans-serif;font-size:clamp(28px,4vw,52px);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--paper);margin:0 0 clamp(32px,4vw,48px)}
.wald-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,3vw,40px);margin-bottom:clamp(32px,4vw,48px)}
.wald-info-block h3{font-family:Jost,sans-serif;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#db5328;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(219,83,40,.28)}
.wald-info-block p{font-size:15px;line-height:1.78;color:rgba(247,244,239,.75);margin:0}
.wald-info-meta{display:flex;flex-wrap:wrap;gap:20px 40px;border-top:1px solid rgba(247,244,239,.1);padding-top:clamp(24px,3vw,32px)}
.wald-info-meta div{display:flex;flex-direction:column;gap:5px}
.wald-info-meta small{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,244,239,.38)}
.wald-info-meta strong{font-family:Jost,sans-serif;font-size:14px;font-weight:500;color:var(--paper)}

/* Aktuelles responsive — stack on small screens */
@media(max-width:900px){
  #aktuelles .wald-grid{flex-direction:column!important;min-height:auto!important}
  #aktuelles .wald-photos{flex:none!important;height:clamp(260px,55vw,460px)!important;min-height:auto!important;width:100%!important}
  #aktuelles .wald-left-col{padding:clamp(36px,6vw,60px) clamp(20px,5vw,40px)!important}
}

/* Aktuelles overlay → sage */
.wald-info-panel{background:#E8DDD0!important;border:none!important}
.wald-info-close{border-color:rgba(42,42,42,.25)!important;color:rgba(42,42,42,.5)!important}
.wald-info-close:hover{border-color:#2a2a2a!important;color:#2a2a2a!important}
.wald-info-kicker{color:#915851!important}
.wald-info-title{color:#2a2a2a!important}
.wald-info-block h3{color:#915851!important;border-bottom-color:rgba(145,88,81,.3)!important}
.wald-info-block p{color:rgba(42,42,42,.8)!important}
.wald-info-meta{border-top-color:rgba(42,42,42,.15)!important}
.wald-info-meta small{color:rgba(42,42,42,.45)!important}
.wald-info-meta strong{color:#2a2a2a!important}

/* Projekte → dark gray */
.projects-section{background:#2a2a2a!important;color:#E8DDD0!important}
.projects-section .section-head.light h2{color:#E8DDD0!important}
.projects-section .section-head.light .section-kicker{color:rgba(232,221,208,.6)!important}
.projects-section .section-head p{color:rgba(232,221,208,.65)!important}
/* Projekte horizontal gallery */
#project-grid{display:block!important;width:100%}
.proj-gallery-container{position:relative;width:100%;display:flex;align-items:center}
.proj-gallery{
  display:flex;
  gap:clamp(12px,1.4vw,18px);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
  padding:8px 4px 16px 4px;
  width:100%;
  -webkit-mask-image:linear-gradient(to right, black 0%, black 85%, transparent 100%);
  mask-image:linear-gradient(to right, black 0%, black 85%, transparent 100%);
  transition:-webkit-mask-image .3s ease, mask-image .3s ease;
}
.proj-gallery::-webkit-scrollbar{display:none}
.proj-gallery:active{cursor:grabbing}

.proj-gallery[data-fade="right"]{
  -webkit-mask-image:linear-gradient(to right, black 0%, black 85%, transparent 100%);
  mask-image:linear-gradient(to right, black 0%, black 85%, transparent 100%);
}
.proj-gallery[data-fade="both"]{
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 4%, black 86%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 4%, black 86%, transparent 100%);
}
.proj-gallery[data-fade="left"]{
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 5%, black 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 5%, black 100%);
}

.proj-card{
  flex:0 0 clamp(280px,32vw,440px);
  height:clamp(380px,58vh,620px);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(232,221,208,0.28);
  padding:0;
  background:#1a1714;
  cursor:pointer;
  border-radius:6px;
  display:block;
  box-sizing:border-box;
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease;
}
.proj-card:hover{
  border-color:rgba(232,221,208,0.8);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.proj-card img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  transition:transform .65s cubic-bezier(.16,1,.3,1),filter .4s ease;
}
.proj-card:hover img{
  transform:scale(1.07);
  filter:brightness(0.84) contrast(1.04);
}

/* Shiny Gloss Sweep Effect on Hover */
.proj-card::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-70%;
  width:55%;
  height:220%;
  background:linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:rotate(25deg);
  pointer-events:none;
  z-index:5;
  opacity:0;
  transition:opacity .15s ease;
}
.proj-card:hover::after{
  opacity:1;
  animation:shinySweep 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes shinySweep{
  0%{left:-70%}
  100%{left:145%}
}

/* Card Overlay & Docked Bottom Text Box */
.proj-card-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  z-index:3;
  pointer-events:none;
  padding:0;
  display:flex;
}
.proj-card-text-box{
  width:100%;
  box-sizing:border-box;
  padding:16px 20px;
  min-height:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 -4px 22px rgba(0,0,0,0.28);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
  pointer-events:auto;
}

/* Alternating Theme: Light (Beige) - Cards 1, 3, 5... */
.proj-card.theme-light .proj-card-text-box{
  background:rgba(236,229,220,0.95);
  border-top:1px solid rgba(255,255,255,0.9);
}
.proj-card.theme-light .proj-card-type{
  color:#9C4F3E;
  font-weight:700;
  font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:4px;
  text-align:center;
}
.proj-card.theme-light .proj-card-title{
  color:#140F0D;
  font-weight:800;
  font-family:Jost,sans-serif;
  font-size:clamp(14px,1.35vw,19px);
  text-transform:uppercase;
  line-height:1.2;
  text-align:center;
}
.proj-card.theme-light:hover .proj-card-text-box{
  background:rgba(248,243,238,0.98);
  border-top-color:#B8614A;
  box-shadow:0 -6px 28px rgba(0,0,0,0.35);
}

/* Alternating Theme: Dark (Schwarz) - Cards 2, 4, 6... */
.proj-card.theme-dark .proj-card-text-box{
  background:rgba(18,16,14,0.93);
  border-top:1px solid rgba(232,221,208,0.25);
}
.proj-card.theme-dark .proj-card-type{
  color:rgba(232,221,208,0.78);
  font-weight:700;
  font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:4px;
  text-align:center;
}
.proj-card.theme-dark .proj-card-title{
  color:#FFFFFF;
  font-weight:800;
  font-family:Jost,sans-serif;
  font-size:clamp(14px,1.35vw,19px);
  text-transform:uppercase;
  line-height:1.2;
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.proj-card.theme-dark:hover .proj-card-text-box{
  background:rgba(26,22,20,0.98);
  border-top-color:rgba(232,221,208,0.65);
  box-shadow:0 -6px 28px rgba(0,0,0,0.45);
}

/* Carousel Navigation Buttons (Pfeile) */
.proj-nav-btn{
  position:absolute;
  top:50%;
  z-index:20;
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(22,19,16,0.76);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1.5px solid rgba(232,221,208,0.42);
  color:#E8DDD0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 32px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.15);
  opacity:0;
  pointer-events:none;
  user-select:none;
  outline:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.proj-nav-prev{
  left:14px;
  transform:translateY(-50%) scale(0.9);
}
.proj-nav-next{
  right:14px;
  transform:translateY(-50%) scale(0.9);
}
.proj-nav-btn.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) scale(1);
}
.proj-nav-btn:hover{
  background:#B8614A;
  border-color:#FFFFFF;
  color:#FFFFFF;
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 16px 42px rgba(184,97,74,0.65),0 4px 14px rgba(0,0,0,0.45);
}
.proj-nav-btn:active{
  transform:translateY(-50%) scale(0.96);
}
.proj-nav-btn svg{
  width:26px;
  height:26px;
  stroke-width:2.4;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.proj-nav-prev:hover svg{transform:translateX(-3px)}
.proj-nav-next:hover svg{transform:translateX(3px)}

@media(max-width:600px){
  .proj-card{
    flex:0 0 clamp(260px,78vw,340px);
    height:clamp(360px,54vh,480px);
  }
  .proj-nav-btn{
    width:48px;
    height:48px;
  }
  .proj-nav-prev{left:8px}
  .proj-nav-next{right:8px}
  .proj-nav-btn svg{
    width:20px;
    height:20px;
  }
}
.projects-section .pc:hover{border-color:transparent!important;box-shadow:0 10px 32px rgba(0,0,0,.18)!important}
.projects-section .project-cell.feature .pc{background:#f5f2ee!important;border:none!important;box-shadow:0 6px 28px rgba(0,0,0,.1)!important;border-radius:10px!important}
.projects-section .pc .pc-meta{color:rgba(26,32,40,.45)!important}
.projects-section .pc .pc-kicker{color:rgba(26,32,40,.38)!important}
.projects-section .pc .pc-year{color:rgba(26,32,40,.35)!important}
.projects-section .pc:hover .pc-year{color:#db5328!important}

/* Über mich → Zweifarbiges Color-Blocking & 2-zu-3 Grid-System */
.about-section{background:#E8DDD0!important}
.about-section h2,.about-section h3{color:#2a2a2a!important;font-weight:800!important}
.about-section p,.about-section .about-lead{color:rgba(42,42,42,.82)!important}
.about-section .section-kicker{color:rgba(42,42,42,.6)!important}

#ueber.about-section{
  position:relative!important;
  padding:0!important;
  overflow:hidden!important;
  background:linear-gradient(to right, #D8CEBE 0%, #D8CEBE 38%, #E8DDD0 38%, #E8DDD0 100%)!important;
}
#ueber .about-grid{
  position:relative;
  z-index:1;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:38% 62%!important;
  align-items:stretch!important;
  min-height:clamp(540px,78vh,920px);
}
#ueber .about-image-col{
  position:relative;
  background:#D8CEBE;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  overflow:hidden;
  min-height:100%;
}
#ueber .about-photo{
  position:relative;
  z-index:1;
  width:100%!important;
  height:auto!important;
  max-height:clamp(480px,76vh,880px)!important;
  object-fit:contain!important;
  object-position:bottom right!important;
  display:block!important;
  filter:drop-shadow(6px 0 24px rgba(0,0,0,.12));
}
#ueber .about-content-col{
  position:relative;
  background:#E8DDD0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(60px,7vh,96px) clamp(28px,4vw,64px) clamp(50px,6vh,80px);
  box-sizing:border-box;
}
#ueber .about-two-col-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(28px,3.2vw,48px);
  align-items:start;
  width:100%;
  max-width:1120px;
}
#ueber .about-main-text{
  grid-column:span 7;
  display:flex;
  flex-direction:column;
}
#ueber .about-kicker{
  display:inline-flex;
  align-items:center;
  font-family:Jost,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#8A7A63;
  margin-bottom:14px;
}
#ueber .about-headline{
  font-family:Jost,sans-serif;
  font-size:clamp(30px,3.2vw,48px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#1E1E1E!important;
  margin:0 0 18px;
}
#ueber .about-headline .tw-text{
  color:#1E1E1E!important;
}
#ueber .about-headline .tw-cursor{
  color:#915851!important;
}
#ueber .about-lead{
  font-family:"Playfair Display","Cormorant Garamond",serif;
  font-style:italic;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.5;
  color:#2A2A2A!important;
  margin:0 0 22px;
  font-weight:400;
}
#ueber .about-body-text p{
  font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.75;
  color:#4A4A4A!important;
  margin:0 0 16px;
}
#ueber .about-body-text p:last-child{
  margin-bottom:0;
}

/* Profil: Leidenschaft, Kreativität & Persönliches */
#ueber .about-profile-col{
  grid-column:span 5;
  display:flex;
  flex-direction:column;
  position:relative;
  margin-top:clamp(120px, 16vh, 180px);
  overflow:visible!important;
}
#ueber .about-profile-item{
  border-top:1px solid rgba(163,163,163,.25)!important;
  padding:12px 0!important;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:visible!important;
}
#ueber .about-profile-item:last-child{
  border-bottom:1px solid rgba(163,163,163,.25)!important;
}
#ueber .about-profile-label{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8A7A63;
}
#ueber .about-profile-val{
  font-family:Jost,sans-serif;
  font-size:clamp(13px,1.02vw,15.5px);
  font-weight:500;
  line-height:1.5;
  color:#1E1E1E!important;
  margin:0;
  overflow:visible!important;
}

/* === Freigestelltes Katzen-Element auf oberer Trennlinie (Shelf) === */
.cats-shelf-container{
  position:absolute;
  bottom:100%;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  margin-bottom:0;
  padding-bottom:0;
  pointer-events:none;
  z-index:20;
  line-height:0;
  opacity:0;
  transform:translateY(15px);
  transition:opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cats-shelf-img{
  display:block;
  height:clamp(120px, 16vh, 180px);
  width:auto;
  object-fit:contain;
  object-position:bottom;
  margin:0;
  padding:0;
  vertical-align:bottom;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.1));
}

/* Trigger: "Cat Mom" */
.cat-mom-trigger{
  position:relative;
  display:inline-block;
  cursor:pointer;
  border-bottom:1px dashed rgba(115,115,115,.6);
  padding-bottom:2px;
  color:#1E1E1E;
  font-weight:600;
  transition:color .2s ease, border-bottom-color .2s ease;
}
.cat-mom-trigger:hover,
.cat-mom-trigger.active{
  color:#8A7A63;
  border-bottom-color:#8A7A63;
}

/* Hover- & Active-Zustand: Slide-Up bündig auf die Linie */
#ueber .about-profile-col:has(.cat-mom-trigger:hover) .cats-shelf-container,
#ueber .about-profile-col:has(.cat-mom-trigger.active) .cats-shelf-container,
#ueber .about-profile-col:has(.cats-shelf-container:hover) .cats-shelf-container,
.cats-shelf-container.show-cats{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto;
}

/* Fähigkeiten → Magic UI Bento Grid */
.skills-section{background:#2a2a2a!important;color:#E8DDD0!important}
.skills-section h2,.skills-section h3{color:#E8DDD0!important}
.skills-section .section-kicker{color:rgba(232,221,208,.55)!important}
.skills-section .section-head p{color:rgba(232,221,208,.65)!important}

/* Bento Grid Container */
#faehigkeiten .skills-bento-grid{
  display:grid!important;
  grid-template-columns:repeat(12, 1fr)!important;
  gap:clamp(16px, 1.8vw, 24px)!important;
  align-items:stretch!important;
  width:100%!important;
}

/* Base Bento Card */
#faehigkeiten .bento-card{
  background:#E8DDD0!important;
  border-radius:14px!important;
  padding:clamp(24px, 2.5vw, 34px)!important;
  border:1px solid rgba(232, 221, 208, 0.25)!important;
  box-shadow:0 10px 32px rgba(0, 0, 0, 0.28)!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  position:relative!important;
  overflow:hidden!important;
  color:#2a2a2a!important;
}
#faehigkeiten .bento-card-header{margin-bottom:clamp(16px, 1.8vw, 24px)!important}
#faehigkeiten .bento-card-kicker{
  font-family:'IBM Plex Mono',monospace!important;
  font-size:10px!important;
  font-weight:600!important;
  text-transform:uppercase!important;
  letter-spacing:.16em!important;
  color:#915851!important;
  margin-bottom:6px!important;
}
#faehigkeiten .bento-card-title{
  font-family:'Jost',sans-serif!important;
  font-size:clamp(20px, 1.9vw, 26px)!important;
  font-weight:700!important;
  color:#2a2a2a!important;
  margin:0 0 6px 0!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
  line-height:1.2!important;
}
#faehigkeiten .bento-card-desc{
  font-size:clamp(12px, 1vw, 13.5px)!important;
  line-height:1.55!important;
  color:rgba(42, 42, 42, .72)!important;
  margin:0!important;
}

/* ── Kachel 1: Software & Workflow (Vernetzte 4-Stationen Workflow-Pipeline) ── */
#faehigkeiten .bento-card-workflow{grid-column:span 8!important}
#faehigkeiten .beam-stage{
  position:relative!important;
  min-height:320px!important;
  flex:1!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:space-between!important;
  padding:22px clamp(12px, 2vw, 32px)!important;
  box-sizing:border-box!important;
  background:#FAF7F2!important;
  border:1px solid rgba(42, 42, 42, 0.08)!important;
  border-radius:16px!important;
  box-shadow:inset 0 2px 8px rgba(20, 15, 13, 0.02)!important;
}
#faehigkeiten .beam-svg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  overflow:visible!important;
  z-index:1!important;
}
#faehigkeiten .beam-track{
  stroke:rgba(156, 79, 62, 0.22)!important;
  stroke-width:1.8px!important;
  fill:none!important;
  stroke-linecap:round!important;
  stroke-dasharray:4 4!important;
}
#faehigkeiten .beam-active{
  stroke:url(#beam-grad)!important;
  stroke-width:2.8px!important;
  fill:none!important;
  stroke-linecap:round!important;
  stroke-dasharray:60 220!important;
  animation:beamFlow 3.2s linear infinite!important;
  filter:drop-shadow(0 0 5px rgba(184, 97, 74, 0.55))!important;
}
@keyframes beamFlow{
  0%{stroke-dashoffset:280}
  100%{stroke-dashoffset:0}
}
#faehigkeiten .beam-station{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:5!important;
  position:relative!important;
}
#faehigkeiten .beam-station-1{
  justify-content:center!important;
  flex:0 0 auto!important;
}
#faehigkeiten .beam-station-2{
  justify-content:space-between!important;
  padding:8px 0!important;
  flex:0 0 auto!important;
  gap:clamp(16px, 2.6vw, 30px)!important;
}
#faehigkeiten .beam-station-3{
  justify-content:space-around!important;
  padding:24px 0!important;
  flex:0 0 auto!important;
  gap:clamp(24px, 3.4vw, 42px)!important;
}
#faehigkeiten .beam-station-4{
  justify-content:center!important;
  flex:0 0 auto!important;
}

/* Standalone Logos & Nodes mit maskiertem Zeichentisch-Hintergrund */
#faehigkeiten .beam-node{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  user-select:none!important;
  transition:transform .28s cubic-bezier(0.16, 1, 0.3, 1),filter .28s ease!important;
  background:transparent!important;
  border:none!important;
  padding:0!important;
  position:relative!important;
  z-index:10!important;
}
#faehigkeiten .beam-node:hover{
  transform:scale(1.16)!important;
  filter:drop-shadow(0 8px 20px rgba(20, 15, 13, 0.2))!important;
}
#faehigkeiten .wf-logo-mask{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#FAF7F2!important;
  border-radius:12px!important;
  box-shadow:0 0 0 4px #FAF7F2!important;
  z-index:10!important;
}
#faehigkeiten #node-vw .wf-logo-mask{
  border-radius:50%!important;
  box-shadow:0 0 0 5px #FAF7F2!important;
}
#faehigkeiten .wf-logo-standalone{
  width:clamp(46px, 4vw, 52px)!important;
  height:clamp(46px, 4vw, 52px)!important;
  display:block!important;
  filter:drop-shadow(0 3px 10px rgba(20, 15, 13, 0.08))!important;
  transition:transform .25s ease!important;
}

/* Station 1: Cluster (Pinterest, Miro, Skizze, Material) */
#faehigkeiten .beam-cluster{
  display:grid!important;
  grid-template-columns:repeat(2, 1fr)!important;
  gap:clamp(10px, 1.2vw, 14px)!important;
  padding:clamp(12px, 1.4vw, 16px)!important;
  background:rgba(255, 255, 255, 0.65)!important;
  border:1.5px dashed rgba(156, 79, 62, 0.35)!important;
  border-radius:22px!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  box-shadow:0 8px 24px rgba(20, 15, 13, 0.04)!important;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease!important;
  position:relative!important;
  z-index:10!important;
}
#faehigkeiten .beam-cluster:hover{
  border-color:rgba(156, 79, 62, 0.65)!important;
  box-shadow:0 10px 28px rgba(156, 79, 62, 0.12)!important;
}
#faehigkeiten .cluster-icon{
  width:clamp(44px, 3.8vw, 50px)!important;
  height:clamp(44px, 3.8vw, 50px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  user-select:none!important;
  transition:transform .25s cubic-bezier(0.16, 1, 0.3, 1),filter .25s ease!important;
  position:relative!important;
  z-index:10!important;
  background:#FAF7F2!important;
  border-radius:10px!important;
  box-shadow:0 0 0 2px #FAF7F2!important;
}
#faehigkeiten .cluster-icon:hover{
  transform:scale(1.16)!important;
  filter:drop-shadow(0 6px 14px rgba(20, 15, 13, 0.18))!important;
}
#faehigkeiten .wf-icon{
  width:100%!important;
  height:100%!important;
  display:block!important;
  filter:drop-shadow(0 2px 8px rgba(20, 15, 13, 0.08))!important;
}
#faehigkeiten .wf-icon-tool{
  padding:4px!important;
  box-sizing:border-box!important;
}

/* Station 4: Target Node (Realisiertes Projekt) */
#faehigkeiten .beam-node-target{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:clamp(52px, 4.6vw, 60px)!important;
  height:clamp(52px, 4.6vw, 60px)!important;
}
#faehigkeiten .target-glow-ring{
  position:absolute!important;
  inset:-12px!important;
  border-radius:50%!important;
  background:radial-gradient(circle, rgba(156, 79, 62, 0.32) 0%, rgba(156, 79, 62, 0) 70%)!important;
  animation:targetBeacon 2.6s ease-in-out infinite!important;
  pointer-events:none!important;
}
@keyframes targetBeacon{
  0%,100%{transform:scale(0.92);opacity:0.35}
  50%{transform:scale(1.35);opacity:0.9}
}
#faehigkeiten .wf-target-icon{
  width:100%!important;
  height:100%!important;
  color:#9C4F3E!important;
  stroke:#9C4F3E!important;
  filter:drop-shadow(0 4px 14px rgba(156, 79, 62, 0.3))!important;
  transition:transform .28s ease,stroke .28s ease!important;
}
#faehigkeiten .beam-node-target:hover .wf-target-icon{
  transform:scale(1.15)!important;
  stroke:#B8614A!important;
}

/* Hover Tooltips für alle Software & Tools */
#faehigkeiten .wf-tooltip{
  position:absolute!important;
  bottom:calc(100% + 10px)!important;
  left:50%!important;
  transform:translateX(-50%) translateY(5px)!important;
  background:#1A1714!important;
  color:#FAF7F2!important;
  font-family:'IBM Plex Mono',monospace!important;
  font-size:10px!important;
  font-weight:500!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
  padding:5px 10px!important;
  border-radius:6px!important;
  pointer-events:none!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease!important;
  box-shadow:0 6px 18px rgba(0, 0, 0, 0.22)!important;
  z-index:100!important;
}
#faehigkeiten .wf-tooltip::after{
  content:''!important;
  position:absolute!important;
  top:100%!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  border:4px solid transparent!important;
  border-top-color:#1A1714!important;
}
#faehigkeiten .beam-node:hover .wf-tooltip,
#faehigkeiten .cluster-icon:hover .wf-tooltip{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(-50%) translateY(0)!important;
}
#faehigkeiten #node-pinterest .wf-tooltip{left:0!important;transform:translateX(0) translateY(5px)!important}
#faehigkeiten #node-pinterest:hover .wf-tooltip{transform:translateX(0) translateY(0)!important}
#faehigkeiten #node-pinterest .wf-tooltip::after{left:18px!important}
#faehigkeiten #node-target .wf-tooltip{left:auto!important;right:0!important;transform:translateX(0) translateY(5px)!important}
#faehigkeiten #node-target:hover .wf-tooltip{transform:translateX(0) translateY(0)!important}
#faehigkeiten #node-target .wf-tooltip::after{left:auto!important;right:18px!important}

/* ── Kachel 2: Kommunikation & Projektführung (Magic UI AnimatedList) ── */
#faehigkeiten .bento-card-milestones{grid-column:span 4!important}
#faehigkeiten .anim-list-wrapper{
  position:relative!important;
  height:280px!important;
  overflow:hidden!important;
  margin-top:4px!important;
}
#faehigkeiten .anim-list-container{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  width:100%!important;
}
#faehigkeiten .anim-list-fade{
  position:absolute!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  height:40px!important;
  background:linear-gradient(to top, #E8DDD0 15%, transparent 100%)!important;
  pointer-events:none!important;
  z-index:4!important;
}
#faehigkeiten .anim-item{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  background:#FFFFFF!important;
  border-radius:12px!important;
  padding:12px 14px!important;
  box-shadow:0 2px 8px rgba(42, 42, 42, .05)!important;
  border:1px solid rgba(42, 42, 42, .06)!important;
  transition:transform .45s cubic-bezier(.16, 1, .3, 1),opacity .45s ease,max-height .45s ease,margin .45s ease,padding .45s ease!important;
  max-height:85px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#faehigkeiten .anim-item:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 6px 18px rgba(42, 42, 42, .12)!important;
  border-color:rgba(145, 88, 81, .3)!important;
}
#faehigkeiten .anim-item-entering{
  opacity:0!important;
  transform:translateY(-20px) scale(.94)!important;
  max-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}
#faehigkeiten .anim-item-leaving{
  opacity:0!important;
  transform:translateY(12px) scale(.94)!important;
  max-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}
#faehigkeiten .anim-item-icon{
  width:36px!important;
  height:36px!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-shrink:0!important;
  background:rgba(145, 88, 81, .1)!important;
  color:#915851!important;
}
#faehigkeiten .anim-item-content{flex:1!important;min-width:0!important}
#faehigkeiten .anim-item-title{
  font-family:'Jost',sans-serif!important;
  font-size:13px!important;
  font-weight:700!important;
  color:#2a2a2a!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
  line-height:1.2!important;
  margin-bottom:2px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#faehigkeiten .anim-item-sub{
  font-size:11px!important;
  color:rgba(42, 42, 42, .68)!important;
  line-height:1.35!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#faehigkeiten .anim-item-meta,
#faehigkeiten .anim-item-badge{
  display:none!important;
}

/* ── Kachel 3: Entwurf & Raumplanung (Interaktives Motion Showcase) ── */
#faehigkeiten .bento-card-concepts{grid-column:span 6!important}
#faehigkeiten .concept-showcase{
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  flex:1!important;
  min-height:280px!important;
  gap:16px!important;
}
#faehigkeiten .showcase-viewport{
  position:relative!important;
  flex:1!important;
  min-height:180px!important;
  background:#FAF7F2!important;
  border-radius:16px!important;
  border:1px solid rgba(42, 42, 42, 0.08)!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:20px!important;
  box-sizing:border-box!important;
}
#faehigkeiten .showcase-slide{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:20px 24px!important;
  box-sizing:border-box!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(14px)!important;
  transition:opacity .45s cubic-bezier(0.16, 1, 0.3, 1),transform .45s cubic-bezier(0.16, 1, 0.3, 1),visibility .45s ease!important;
  pointer-events:none!important;
}
#faehigkeiten .showcase-slide.active{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
  position:relative!important;
}
#faehigkeiten .showcase-visual{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:95px!important;
  margin-bottom:12px!important;
}
#faehigkeiten .showcase-text h4{
  font-family:'Jost',sans-serif!important;
  font-size:clamp(14px, 1.2vw, 16px)!important;
  font-weight:700!important;
  color:#2a2a2a!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
  margin:0 0 6px 0!important;
  line-height:1.25!important;
}
#faehigkeiten .showcase-text p{
  font-size:clamp(11.5px, .95vw, 13px)!important;
  line-height:1.5!important;
  color:rgba(42, 42, 42, .75)!important;
  margin:0 auto!important;
  max-width:380px!important;
}

/* Slide 0: 3D-Visualisierung Würfel Animation */
#faehigkeiten .cube-3d-scene{
  width:64px!important;
  height:64px!important;
  perspective:400px!important;
}
#faehigkeiten .cube-3d{
  width:100%!important;
  height:100%!important;
  position:relative!important;
  transform-style:preserve-3d!important;
  animation:rotateCube 10s linear infinite!important;
}
@keyframes rotateCube{
  0%{transform:rotateX(-22deg) rotateY(0deg)}
  100%{transform:rotateX(-22deg) rotateY(360deg)}
}
#faehigkeiten .cube-face{
  position:absolute!important;
  width:64px!important;
  height:64px!important;
  border:1.5px solid #9C4F3E!important;
  background:rgba(156, 79, 62, 0.12)!important;
  box-shadow:inset 0 0 10px rgba(156, 79, 62, 0.18)!important;
  backdrop-filter:blur(1px)!important;
}
#faehigkeiten .cube-front {transform:translateZ(32px)!important}
#faehigkeiten .cube-back  {transform:rotateY(180deg) translateZ(32px)!important}
#faehigkeiten .cube-right {transform:rotateY(90deg) translateZ(32px)!important}
#faehigkeiten .cube-left  {transform:rotateY(-90deg) translateZ(32px)!important}
#faehigkeiten .cube-top   {transform:rotateX(90deg) translateZ(32px)!important}
#faehigkeiten .cube-bottom{transform:rotateX(-90deg) translateZ(32px)!important}

/* Slide 1: Grundrisse & Zonierung Plan Animation */
#faehigkeiten .showcase-svg-plan{
  width:120px!important;
  height:82px!important;
}
#faehigkeiten .plan-outer,
#faehigkeiten .plan-wall,
#faehigkeiten .plan-door{
  stroke:#9C4F3E!important;
  stroke-width:2px!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  stroke-dasharray:180!important;
  animation:drawPlan 4.5s ease-in-out infinite alternate!important;
}
@keyframes drawPlan{
  0%{stroke-dashoffset:180}
  45%,100%{stroke-dashoffset:0}
}
#faehigkeiten .plan-door-leaf{
  stroke:#9C4F3E!important;
  stroke-width:1.6px!important;
}
#faehigkeiten .plan-zone{
  fill:rgba(156, 79, 62, 0.12)!important;
  stroke:rgba(156, 79, 62, 0.45)!important;
  stroke-width:1.2px!important;
  stroke-dasharray:3 3!important;
}
#faehigkeiten .plan-accent{
  fill:#F4A261!important;
  animation:lampConePulse 2.5s ease-in-out infinite!important;
}

/* Slide 2: Licht & Atmosphäre Lampe Animation */
#faehigkeiten .light-ambient-wrap{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:85px!important;
  height:85px!important;
}
#faehigkeiten .light-cone{
  position:absolute!important;
  bottom:0!important;
  width:95px!important;
  height:65px!important;
  background:radial-gradient(ellipse at 50% 30%, rgba(244, 162, 97, 0.45) 0%, rgba(244, 162, 97, 0) 70%)!important;
  border-radius:50%!important;
  animation:lampConePulse 3s ease-in-out infinite!important;
}
@keyframes lampConePulse{
  0%,100%{opacity:.45;transform:scale(0.92)}
  50%{opacity:1;transform:scale(1.15)}
}
#faehigkeiten .showcase-svg-lamp{
  width:72px!important;
  height:72px!important;
  position:relative!important;
  z-index:2!important;
}
#faehigkeiten .lamp-bulb{
  animation:bulbGlow 3s ease-in-out infinite!important;
}
@keyframes bulbGlow{
  0%,100%{fill:#F4A261;filter:drop-shadow(0 0 3px #F4A261)}
  50%{fill:#FFE8B8;filter:drop-shadow(0 0 10px #FFAA5A)}
}
#faehigkeiten .lamp-rays{
  animation:raysPulse 3s ease-in-out infinite!important;
}
@keyframes raysPulse{
  0%,100%{opacity:.4}
  50%{opacity:1}
}

/* Slide 3: Detail- & Ausführungsplanung Zirkel Animation */
#faehigkeiten .showcase-svg-compass{
  width:80px!important;
  height:80px!important;
}
#faehigkeiten .compass-circle{
  stroke:rgba(156, 79, 62, 0.35)!important;
  stroke-width:1.2px!important;
  stroke-dasharray:4 4!important;
  animation:rotateCompassCircle 14s linear infinite!important;
  transform-origin:55px 55px!important;
}
@keyframes rotateCompassCircle{
  to{transform:rotate(360deg)}
}
#faehigkeiten .compass-axis{
  stroke:rgba(42, 42, 42, 0.18)!important;
  stroke-width:1px!important;
}
#faehigkeiten .compass-legs{
  stroke:#9C4F3E!important;
  stroke-width:2.2px!important;
  stroke-linecap:round!important;
}
#faehigkeiten .compass-head{
  fill:#9C4F3E!important;
}
#faehigkeiten .compass-spreader{
  stroke:#9C4F3E!important;
  stroke-width:1.5px!important;
}

/* Showcase Nav Tabs */
#faehigkeiten .showcase-nav{
  display:grid!important;
  grid-template-columns:repeat(4, 1fr)!important;
  gap:8px!important;
}
#faehigkeiten .showcase-tab{
  position:relative!important;
  padding:8px 10px!important;
  border-radius:10px!important;
  border:1px solid rgba(42, 42, 42, 0.08)!important;
  background:rgba(255, 255, 255, 0.5)!important;
  color:#2a2a2a!important;
  font-family:'IBM Plex Mono',monospace!important;
  font-size:10px!important;
  font-weight:600!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
  cursor:pointer!important;
  transition:all .25s ease!important;
  text-align:center!important;
  outline:none!important;
  overflow:hidden!important;
}
#faehigkeiten .showcase-tab:hover{
  background:#FFFFFF!important;
  border-color:rgba(156, 79, 62, 0.4)!important;
}
#faehigkeiten .showcase-tab.active{
  background:#FFFFFF!important;
  border-color:#9C4F3E!important;
  color:#9C4F3E!important;
  box-shadow:0 2px 8px rgba(156, 79, 62, 0.12)!important;
}
#faehigkeiten .tab-progress{
  position:absolute!important;
  bottom:0!important;
  left:0!important;
  height:2.5px!important;
  width:0%!important;
  background:#9C4F3E!important;
  transition:width .1s linear!important;
}
#faehigkeiten .showcase-tab.active .tab-progress{
  animation:tabTimer 4s linear infinite!important;
}
@keyframes tabTimer{
  0%{width:0%}
  100%{width:100%}
}

/* ── Kachel 4: Material & Atmosphäre (Sattes Moodboard Marquee) ── */
#faehigkeiten .bento-card-materials{grid-column:span 6!important}
#faehigkeiten .material-marquee-outer{
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
  padding:14px 0!important;
  margin-top:auto!important;
  margin-bottom:auto!important;
  mask-image:linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%)!important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%)!important;
}
#faehigkeiten .material-marquee-track{
  display:flex!important;
  gap:18px!important;
  width:max-content!important;
  animation:marqueeScroll 26s linear infinite!important;
}
#faehigkeiten .material-marquee-track:hover{animation-play-state:paused!important}
@keyframes marqueeScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
#faehigkeiten .material-tile{
  flex:0 0 clamp(190px, 18vw, 240px)!important;
  width:clamp(190px, 18vw, 240px)!important;
  height:clamp(190px, 18vw, 240px)!important;
  aspect-ratio:1/1!important;
  border-radius:16px!important;
  position:relative!important;
  overflow:hidden!important;
  box-shadow:0 6px 20px rgba(0, 0, 0, .08)!important;
  border:1.5px solid rgba(42, 42, 42, 0.08)!important;
  cursor:pointer!important;
  transition:transform .35s cubic-bezier(.16, 1, .3, 1),border-color .25s ease,box-shadow .25s ease!important;
}
#faehigkeiten .material-tile:hover{
  border-color:rgba(156, 79, 62, 0.7)!important;
  box-shadow:0 14px 34px rgba(156, 79, 62, 0.24), 0 4px 12px rgba(20, 15, 13, 0.1)!important;
  transform:scale(1.05)!important;
}
#faehigkeiten .material-tile img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  aspect-ratio:1/1!important;
  display:block!important;
  transition:transform .45s cubic-bezier(.16, 1, .3, 1)!important;
}
#faehigkeiten .material-tile:hover img{transform:scale(1.06)!important}

/* ── Bento Responsive Queries ── */
@media(max-width:1024px){
  #faehigkeiten .bento-card-workflow,
  #faehigkeiten .bento-card-milestones,
  #faehigkeiten .bento-card-concepts,
  #faehigkeiten .bento-card-materials{grid-column:span 12!important}
}
@media(max-width:640px){
  #faehigkeiten .showcase-nav{grid-template-columns:repeat(2, 1fr)!important}
  #faehigkeiten .material-tile{flex:0 0 160px!important;width:160px!important;height:160px!important}
  #faehigkeiten .beam-stage{padding:10px 4px!important;min-height:260px!important}
  #faehigkeiten .wf-logo-standalone{width:36px!important;height:36px!important}
  #faehigkeiten .cluster-icon{width:32px!important;height:32px!important}
  #faehigkeiten .beam-cluster{padding:8px!important;gap:6px!important;border-radius:14px!important}
  #faehigkeiten .beam-node-target{width:40px!important;height:40px!important}
  #faehigkeiten .beam-station-2{gap:18px!important}
  #faehigkeiten .beam-station-3{gap:24px!important}
}

/* Werdegang → Einzelnes 3D-geneigtes Band mit interaktivem Drag & Auto-Move */
.werdegang-section{
  background:#E8DDD0!important;
  position:relative;
  overflow:hidden;
  padding:clamp(44px,5.5vw,78px) 0 clamp(48px,6vw,84px)!important;
}
.werdegang-section h2{
  color:#141210!important;
  font-family:Jost,sans-serif!important;
  font-weight:600!important;
}
.werdegang-section .section-kicker{
  color:#915851!important;
  font-family:"IBM Plex Mono",monospace!important;
  font-size:11px!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  font-weight:600!important;
}
.werdegang-section .wd-header{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto clamp(28px,3.8vw,48px);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}
.werdegang-section::after{display:none!important}

/* 1. Layout & 3D-Bühne (Nur 1 zentraler Stream, perspective: 800px) */
.werdegang-section .wd-stream-container{
  position:relative;
  width:min(560px,calc(100% - 32px));
  height:clamp(580px,72vh,740px);
  margin:0 auto;
  overflow:hidden;
  perspective:800px;
  -webkit-perspective:800px;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.werdegang-section .wd-stream-container.is-dragging{
  cursor:grabbing!important;
}

/* 3D-Neigung: rotateX(16deg) rotateY(-10deg) rotateZ(6deg) */
.werdegang-section .wd-stream-stage{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform:rotateX(16deg) rotateY(-10deg) rotateZ(6deg);
  will-change:transform;
}

.werdegang-section .wd-stream-track{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:32px;
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:0;
  flex:0 0 auto;
  height:auto;
  min-height:max-content;
  will-change:transform;
}

/* 2. & 3. Kartengröße & Design (Spürbar vergrößert: py-8 px-10, min-w-[380px] / [460px]) */
.werdegang-section .wd-stream-card{
  flex:0 0 auto !important;
  flex-shrink:0 !important;
  width:100% !important;
  max-width:520px !important;
  min-width:clamp(380px,86vw,460px) !important;
  min-height:164px !important;
  background:#242220;
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  padding:32px clamp(28px,4vw,40px) !important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 12px 36px rgba(0,0,0,.28);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
  box-sizing:border-box;
}

/* Hover-Feedback: Rand leuchtet sauber auf, minimaler Lift */
.werdegang-section .wd-stream-card:hover{
  border-color:rgba(255,255,255,.5)!important;
  transform:scale(1.02)!important;
  background:#2A2724!important;
  box-shadow:0 20px 48px rgba(0,0,0,.42)!important;
}

/* Oben: Zeitraum / Status (text-sm font-medium tracking-wide text-neutral-300) */
.werdegang-section .wd-stream-kicker{
  font-family:"IBM Plex Mono",monospace;
  font-size:clamp(13px,1.05vw,14.5px);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#D4D4D4;
  line-height:1.3;
}

/* Mitte: Titel / Rolle (text-xl font-bold text-white) */
.werdegang-section .wd-stream-title{
  font-family:Jost,sans-serif;
  font-size:clamp(20px,1.9vw,24px);
  font-weight:700;
  color:#FFFFFF;
  line-height:1.3;
  margin:12px 0 10px;
  text-transform:none;
}

/* Unten: Institution / Ort (text-base text-neutral-400) */
.werdegang-section .wd-stream-org{
  font-family:Jost,sans-serif;
  font-size:clamp(15px,1.2vw,16.5px);
  color:#A3A3A3;
  line-height:1.4;
  margin:0;
}

/* Sanfte Gradients oben und unten */
.werdegang-section .wd-edge-top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:24%;
  pointer-events:none;
  z-index:10;
  background:linear-gradient(to bottom,#E8DDD0 0%,transparent 100%);
}
.werdegang-section .wd-edge-bottom{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:24%;
  pointer-events:none;
  z-index:10;
  background:linear-gradient(to top,#E8DDD0 0%,transparent 100%);
}

/* Mobile Responsiveness */
@media (max-width: 640px){
  .werdegang-section .wd-stream-stage{
    transform:scale(0.86) rotateX(15deg) rotateY(-8deg) rotateZ(5deg);
  }
}
@media (max-width: 440px){
  .werdegang-section .wd-stream-stage{
    transform:scale(0.76) rotateX(14deg) rotateY(-6deg) rotateZ(4deg);
  }
}

/* === Perspectives: Zentriertes Cinema-Layout === */
#perspectives{background:#2a2a2a!important;color:#E8DDD0!important}
#perspectives .current-section{background:transparent!important}
#perspectives .section-kicker{color:rgba(232,221,208,.45)!important}
#perspectives .ps-live-kicker>span:last-child{color:#915851!important}
#perspectives .ping-dot span{background:#915851!important}
#perspectives .ps-intro h2{color:#E8DDD0!important}
#perspectives .ps-subhead{color:rgba(232,221,208,.65)!important}

/* Cinema-Container: Zentriert, großzügig max-w-5xl (1024px) */
.ps-cinema-wrap{
  width:min(1024px,100%);
  margin:0 auto;
}

/* 1. Video-Player (Zentrierter Cinema-View, 16:9, rounded-2xl, shadow-xl) */
.ps-video-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:20px;
  overflow:hidden;
  background:#141414;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  margin-bottom:28px;
  transition:box-shadow .3s ease,border-color .3s ease;
}
.ps-video-stage:hover{
  border-color:rgba(255,255,255,.2);
  box-shadow:0 32px 75px rgba(0,0,0,.75);
}
.ps-video-stage iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* 2. Zwei Cards unter dem Video (50/50 Grid, bündig zum Video) */
.ps-cards-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  width:100%;
}

.ps-card{
  background:#242220;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:32px clamp(24px,2.8vw,36px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
  min-height:280px;
  transition:border-color .25s ease,background-color .25s ease,transform .25s ease,box-shadow .25s ease;
  box-sizing:border-box;
}
.ps-card:hover{
  border-color:rgba(255,255,255,.25);
  background:#282624;
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}

/* Badges: "ZU GAST" & "THEMA & KONTEXT" – sanftes Warmweiß/Beige auf dezentem Tag-Hintergrund */
.ps-card-badge{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#E8DDD0;
  background:rgba(232,221,208,.12);
  border:1px solid rgba(232,221,208,.22);
  padding:6px 14px;
  border-radius:40px;
  margin-bottom:20px;
  line-height:1;
}

/* Linke Card (Gast-Steckbrief) */
.ps-guest-title{
  font-family:Jost,sans-serif;
  font-size:clamp(22px,2.2vw,26px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#FFFFFF;
  margin:0 0 6px;
  line-height:1.2;
}
.ps-guest-subline{
  font-family:"IBM Plex Mono",monospace;
  font-size:clamp(12px,1.05vw,13.5px);
  color:rgba(232,221,208,.65);
  margin-bottom:18px;
  line-height:1.4;
}
.ps-card-bio{
  font-family:Jost,sans-serif;
  font-size:clamp(14.5px,1.15vw,15.5px);
  line-height:1.7;
  color:#D4D4D4;
  margin:0 0 20px;
  flex:1;
}
.ps-card-action{
  margin-top:auto;
  padding-top:10px;
}
.ps-card-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;
  letter-spacing:.06em;
  color:#E8DDD0;
  text-decoration:none;
  opacity:.85;
  transition:opacity .2s ease,color .2s ease,border-color .2s ease;
  border-bottom:1px solid rgba(232,221,208,.3);
  padding-bottom:2px;
}
.ps-card-link:hover{
  opacity:1;
  color:#FFFFFF;
  border-bottom-color:#FFFFFF;
}

/* Rechte Card (Thema & Kontext) */
.ps-context-title{
  font-family:Jost,sans-serif;
  font-size:clamp(22px,2.2vw,26px);
  font-weight:700;
  letter-spacing:.01em;
  color:#FFFFFF;
  margin:0 0 16px;
  line-height:1.2;
}
.ps-card-lead{
  font-family:Jost,sans-serif;
  font-size:clamp(14.5px,1.15vw,15.5px);
  font-weight:500;
  line-height:1.7;
  color:#E8DDD0;
  margin:0 0 14px;
}
.ps-card-body{
  font-family:Jost,sans-serif;
  font-size:clamp(14.5px,1.15vw,15.5px);
  line-height:1.7;
  color:#D4D4D4;
  margin:0;
  flex:1;
}

/* Responsive für Mobile & Tablets */
@media (max-width: 820px){
  .ps-cards-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .ps-card{
    padding:26px 20px;
    min-height:auto;
  }
}

/* Kontakt → #915851 */
.contact-section{background:#E8DDD0!important}
.contact-section h2{color:#2a2a2a!important}
.contact-section .section-kicker{color:rgba(42,42,42,.45)!important}
.contact-section .number-kicker span:last-child{color:rgba(42,42,42,.5)!important}
.contact-section .contact-lead{color:rgba(42,42,42,.72)!important}
.contact-section .email-card{background:rgba(42,42,42,.05)!important;border-color:rgba(42,42,42,.15)!important;border-radius:8px!important}
.contact-section .email-card strong,.contact-section .email-card em{color:#2a2a2a!important}
.contact-section .contact-meta small{color:#915851!important}
.contact-section .contact-meta span,.contact-section .contact-meta a{color:#2a2a2a!important}
.contact-section .portfolio-note{color:rgba(42,42,42,.42)!important}
.contact-section .contact-form{background:rgba(255,255,255,.5)!important;border-color:rgba(42,42,42,.12)!important;border-radius:10px!important;box-shadow:0 4px 24px rgba(42,42,42,.08)!important}
.contact-section .contact-form label{color:#915851!important}
.contact-section .contact-form input,.contact-section .contact-form textarea{color:#2a2a2a!important;border-bottom-color:rgba(42,42,42,.2)!important;background:transparent!important}
.contact-section .contact-form input::placeholder,.contact-section .contact-form textarea::placeholder{color:rgba(42,42,42,.32)!important}
.contact-section .contact-form .primary{background:#2a2a2a!important;color:#E8DDD0!important}
.contact-section .contact-form .primary:hover{background:#3a3a3a!important;transform:translateY(-2px)!important}

/* === Hero Split-Layout: Konzept 1 (Geerdeter Freisteller & Ambient-Gradients) === */
.hero{height:230vh;position:relative;background:#121212}
.hero-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;background-color:#121212;background-image:radial-gradient(circle at 85% 15%,rgba(215,195,170,.12) 0%,transparent 60%),radial-gradient(circle at 25% 85%,rgba(0,0,0,.45) 0%,transparent 65%),linear-gradient(180deg,#161616 0%,#121212 50%,#0d0d0d 100%)}
.hero-canvas-col{position:relative;width:60%;height:100%;overflow:visible;background:transparent;flex:0 0 60%;display:flex;align-items:center;justify-content:center;padding:clamp(76px,9.5vh,96px) clamp(16px,2vw,32px) clamp(28px,3.5vh,44px) clamp(24px,3.2vw,56px);box-sizing:border-box}
.hero-canvas-stage{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;background:#161616;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-scroll-bar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:35;background:rgba(232,221,208,.14)}
.hero-scroll-bar div{height:100%;background:rgba(232,221,208,.65);transform:scaleX(0);transform-origin:left}
.hero-bottom-fade{position:absolute;left:0;right:0;bottom:0;height:clamp(70px,12vh,140px);pointer-events:none;z-index:32;background:linear-gradient(to bottom,rgba(232,221,208,0) 0%,rgba(232,221,208,.35) 45%,#E8DDD0 100%);opacity:0;will-change:opacity}
/* ── Hero mobile: video top, name below, portrait bleeds left+bottom ─── */
@media(max-width:880px){
  .hero-text{display:none}
  .hero-copy{flex:0 0 auto;padding:14px 20px 0}
  .hero-grid{padding-top:52px;padding-left:0;padding-right:0;gap:0}
  .hero-name-video{height:auto}
  .hero-video-col{order:-1;width:100%;max-width:100%;height:42vh;overflow:visible}
  .video-stage{overflow:visible}
  .portrait{width:110px;left:-14px;bottom:-14px;border-width:3px;z-index:10}
}
/* ── Hero: SVG foreignObject breaks on iOS — show plain text instead ─── */
@media(max-width:880px){.hero-name-video svg{display:none}.hero-name-video .sr-only{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;display:block;font-family:Jost,sans-serif;font-size:clamp(46px,13vw,72px);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--ink);text-transform:uppercase}}
/* ── Projekte: all cards same height on mobile ───────────────── */
@media(max-width:620px){.project-cell.feature{grid-row:span 1!important}.project-cell.feature .pc-title{font-size:20px;max-width:none}.project-grid{grid-auto-rows:300px}}
/* ── Kontakt: cards fill section width on mobile ─────────────── */
@media(max-width:620px){.email-card{width:100%;box-sizing:border-box}.contact-meta{flex-direction:column;gap:14px}.contact-form input,.contact-form textarea{font-size:16px;-webkit-appearance:none}.cf-btn,.contact-form .primary{width:100%}}

/* === Project Modal — 2-column: image left, scrollable text right === */
.modal.open{padding:clamp(14px,2vw,30px)!important;align-items:center!important}
.mp-panel{width:min(1200px,calc(100vw - clamp(28px,4vw,60px)));height:min(calc(100vh - clamp(28px,4vw,60px)),860px);background:#2a2a2a;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-radius:8px;animation:modalUp .35s cubic-bezier(.16,1,.3,1) both}
.mp-header{grid-column:1/-1;grid-row:1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:clamp(12px,1.4vw,20px) clamp(22px,3vw,44px) clamp(8px,.8vw,12px);border-bottom:1px solid rgba(232,221,208,.1)}
.mp-header-meta{flex:1;min-width:0}
.mp-kicker{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,221,208,.35);margin-bottom:6px}
.mp-title{font-family:Jost,sans-serif;font-size:clamp(18px,2.6vw,38px);font-weight:800;text-transform:uppercase;color:#E8DDD0;margin:0 0 5px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-sub{font-family:"IBM Plex Mono",monospace;font-size:10px;color:rgba(232,221,208,.38);letter-spacing:.04em}
.mp-sep{margin:0 7px;opacity:.3}
.mp-tools{color:rgba(42,42,42,.35)}
.mp-close{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:rgba(232,221,208,.1);border:none;color:#E8DDD0;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.mp-close:hover{background:rgba(232,221,208,.22)}
.mp-media{grid-column:1;grid-row:2;position:relative;height:auto;min-height:0;background:#1a1a1a;overflow:hidden;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(232,221,208,.08);cursor:grab;user-select:none;touch-action:pan-y pinch-zoom}
.mp-media:active{cursor:grabbing}
.mp-media img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s ease;pointer-events:none}
.mp-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(22,19,16,0.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(232,221,208,.32);color:#E8DDD0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;z-index:10;transition:background .25s,border-color .25s,transform .2s,color .25s;line-height:1}
.mp-arrow:hover{background:#B8614A;border-color:#FFFFFF;color:#FFFFFF;transform:translateY(-50%) scale(1.1)}
.mp-arrow:active{transform:translateY(-50%) scale(0.95)}
.mp-prev{left:14px}
.mp-next{right:14px}
.mp-counter{position:absolute;bottom:12px;left:14px;font-family:"IBM Plex Mono",monospace;font-size:10px;color:rgba(232,221,208,.8);letter-spacing:.08em;background:rgba(20,16,14,.7);padding:3px 9px;border-radius:4px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(232,221,208,.15);pointer-events:none;z-index:5}
.mp-caption{position:absolute;bottom:12px;right:14px;font-family:"IBM Plex Mono",monospace;font-size:10px;color:rgba(232,221,208,.8);letter-spacing:.08em;background:rgba(20,16,14,.7);padding:3px 9px;border-radius:4px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(232,221,208,.15);pointer-events:none;z-index:5}
.mp-controls{display:none!important;grid-column:1;grid-row:3;display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);padding:8px clamp(12px,1.5vw,22px);border-top:1px solid rgba(232,221,208,.1);border-right:1px solid rgba(232,221,208,.08)}
.mp-controls .filter-row{margin:0;flex-shrink:0;gap:5px;flex-wrap:nowrap}
.mp-controls .thumb-row{margin:0;flex:1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px}
.mp-controls .thumb-row::-webkit-scrollbar{display:none}
.mp-controls .filter-row button{border-color:rgba(232,221,208,.22)!important;color:rgba(232,221,208,.45)!important;background:transparent!important;padding:4px 10px!important;font-size:9px!important}
.mp-controls .filter-row button.active{background:#E8DDD0!important;border-color:#E8DDD0!important;color:#2a2a2a!important}
.mp-controls .thumb{background:rgba(232,221,208,.12)!important;border-color:rgba(232,221,208,.15)!important;width:64px!important;height:44px!important}
.mp-controls .thumb.active{border-color:#E8DDD0!important;border-width:2px!important}
.mp-details{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:0;padding:clamp(20px,2.4vw,32px) clamp(24px,3vw,42px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(232,221,208,.18) transparent}
.mp-col{display:contents}
.mp-col-right{display:contents}
.mp-label{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#915851;margin:20px 0 6px;opacity:.85}
.mp-label:first-child{margin-top:0}
.mp-text{font-size:14px;color:rgba(232,221,208,.82);line-height:1.7;margin:0 0 8px}
.mp-list{padding-left:15px;margin:0 0 10px;font-size:13px;color:rgba(232,221,208,.7);line-height:1.75}
.mp-pills.pill-list{gap:6px!important;flex-wrap:wrap!important}
.mp-pills span{font-size:11px!important;color:rgba(232,221,208,.55)!important;border-color:rgba(232,221,208,.18)!important;padding:4px 11px!important}
.mp-nav{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:clamp(7px,.8vw,11px) clamp(22px,3vw,44px);border-top:1px solid rgba(232,221,208,.1)}
.mp-nav-btn{background:transparent;border:none;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,221,208,.38);cursor:pointer;padding:5px 0;transition:color .2s}
.mp-nav-btn:hover{color:#E8DDD0}
.mp-nav-right{text-align:right}
.mp-nav-mid{color:rgba(232,221,208,.22);font-size:9px}

/* === Footer → dark gray === */
.site-footer{background:#2a2a2a!important;color:rgba(232,221,208,.4)!important}
.site-footer strong{color:#E8DDD0!important}
.site-footer nav span{color:rgba(232,221,208,.4)!important}
.site-footer a{color:rgba(232,221,208,.4)!important}
.site-footer a:hover{color:#915851!important}
.site-footer small{color:rgba(232,221,208,.28)!important}

/* === Mobile fixes === */
/* Über mich: responsive breakpoints */
@media(max-width:1080px){
  #ueber .about-two-col-grid{
    grid-template-columns:1fr!important;
    gap:32px!important;
  }
  #ueber .about-main-text{
    grid-column:span 1!important;
  }
  #ueber .about-profile-col{
    grid-column:span 1!important;
    margin-top:clamp(110px, 15vh, 160px)!important;
  }
}
@media(max-width:880px){
  #ueber.about-section{
    background:#E8DDD0!important;
  }
  #ueber .about-grid{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
  #ueber .about-image-col{
    min-height:clamp(300px,56vw,440px)!important;
    justify-content:center!important;
    background:#D8CEBE!important;
  }
  #ueber .about-photo{
    max-height:clamp(300px,56vw,440px)!important;
    object-position:bottom center!important;
  }
  #ueber .about-content-col{
    padding:40px 20px 60px!important;
  }
}

/* Project modal: stack at ≤700px */
@media(max-width:700px){
  .mp-panel{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,45vh) minmax(0,1fr) auto!important;height:min(calc(100vh - 20px),900px)!important}
  .mp-header{grid-column:1!important;grid-row:1!important}
  .mp-media{grid-column:1!important;grid-row:2!important;border-right:none!important;border-bottom:1px solid rgba(232,221,208,.08)!important}
  .mp-details{grid-column:1!important;grid-row:3!important}
  .mp-nav{grid-column:1!important;grid-row:4!important}
  .mp-title{font-size:clamp(16px,5vw,28px)!important;white-space:normal!important}
}

/* Werdegang cards: column layout at ≤480px */
@media(max-width:480px){
  .werdegang-section .tl-content,
  .werdegang-section .tl-above .tl-content,
  .werdegang-section .tl-below .tl-content{flex-direction:column!important;align-items:flex-start!important;gap:6px!important;min-height:clamp(130px,16vh,180px)!important}
  .werdegang-section .tl-meta{width:100%!important;flex-direction:row!important;gap:10px!important;align-items:center!important}
  .werdegang-section .tl-event{width:100%!important}
}

/* Fähigkeiten cat-cards: single column at ≤480px */
@media(max-width:480px){
  #faehigkeiten .skills-card-right{grid-template-columns:1fr!important;grid-template-rows:auto!important}
}

/* === Hero Split: Konzept 1 (Geerdeter Freisteller, Schnittkanten-Überlappung & z-25) === */
/* === Hero Split: Freisteller, Skalierung & Typografie === */
.hero-freisteller{
  position:absolute!important;
  left:59%!important;
  bottom:0!important;
  transform:translateX(-42%)!important;
  height:clamp(340px,48vh,620px)!important;
  width:auto!important;
  max-width:55vw!important;
  object-fit:contain!important;
  object-position:bottom center!important;
  z-index:10!important;
  pointer-events:none!important;
  user-select:none!important;
  filter:drop-shadow(0 20px 48px rgba(0,0,0,.65))!important;
}

.hero-info-col{
  position:relative;
  width:40%;
  flex:0 0 40%;
  height:100%;
  background:transparent;
  overflow:visible;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-end;
  padding-top:clamp(80px,12vh,140px);
  padding-left:clamp(20px,3vw,60px);
  padding-right:clamp(32px,6vw,96px);
  box-sizing:border-box;
  z-index:30;
}
.hero-brand-block{
  flex-shrink:0!important;
  z-index:30!important;
  pointer-events:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  text-align:right!important;
  margin-left:auto!important;
  position:relative!important;
  max-width:100%!important;
  width:100%!important;
}

/* Desktop: Kollisionsschutz flache Viewports & Laptops (Mindestabstand 2.5rem) */
@media (min-width: 881px) {
  .hero-brand-block{
    flex-shrink:0!important;
    z-index:30!important;
    pointer-events:auto!important;
  }
  .hero-freisteller{
    max-height:calc(100vh - clamp(80px, 12vh, 140px) - clamp(3rem, 5vw, 5.5rem) * 1.84 - clamp(16px, 2vw, 30px) - clamp(54px, 5.5vw, 84px) - 2.5rem)!important;
  }
}
@media (min-width: 881px) and (max-height: 820px) {
  .hero-info-col{
    padding-top:clamp(48px, 8vh, 72px)!important;
  }
  .hero-freisteller{
    max-height:calc(100vh - clamp(48px, 8vh, 72px) - 170px - 2.5rem)!important;
  }
}
@media (min-width: 881px) and (max-height: 680px) {
  .hero-info-col{
    padding-top:40px!important;
  }
  .hero-freisteller{
    max-height:calc(100vh - 40px - 150px - 2.5rem)!important;
  }
}
.hero-brand-name{
  font-family:Jost,sans-serif;
  font-weight:800;
  font-size:clamp(3rem,5vw,5.5rem);
  line-height:.92;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:#FFFFFF;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
}
.hero-brand-name span{
  white-space:nowrap;
  display:block;
  text-align:right;
}
.hero-morph-wrapper{
  margin-top:clamp(16px,2vw,30px)!important;
  position:relative;
  height:clamp(54px,5.5vw,84px);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  filter:url(#morph-threshold);
  overflow:visible;
}
.hero-morph-text{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
  font-family:'Cormorant Garamond',serif;
}
.morph-word{
  position:absolute;
  right:0;
  left:auto;
  top:50%;
  transform:translateY(-50%);
  text-align:right;
  font-family:'Cormorant Garamond',serif!important;
  font-style:italic!important;
  font-size:clamp(2.5rem,4vw,3.75rem)!important;
  font-weight:400!important;
  letter-spacing:.01em;
  color:#E6DFD5!important;
  white-space:nowrap;
  line-height:1.15!important;
  user-select:none;
  will-change:filter,opacity;
}
.morph-svg-defs{
  position:absolute;
  width:0;
  height:0;
  pointer-events:none;
}

/* Responsive: Tablet & Mobile */
@media (max-width: 880px){
  .hero{
    height:200vh!important;
    position:relative!important;
    background:#121212!important;
  }
  .hero-sticky{
    position:sticky!important;
    top:0!important;
    height:100vh!important;
    height:100dvh!important;
    width:100%!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    background-color:#121212!important;
  }
  .hero-canvas-col{
    order:1!important;
    width:100%!important;
    flex:0 0 auto!important;
    height:clamp(210px, 30vh, 290px)!important;
    padding:68px 16px 0!important;
    box-sizing:border-box!important;
    pointer-events:none!important;
  }
  .hero-canvas-stage{
    border-radius:12px!important;
    width:100%!important;
    height:100%!important;
    pointer-events:none!important;
  }
  #hero-canvas{
    pointer-events:none!important;
  }
  .hero-info-col{
    order:2!important;
    width:100%!important;
    flex:0 0 auto!important;
    min-height:auto!important;
    padding:clamp(12px, 2.2vh, 22px) 16px 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    justify-content:flex-start!important;
    z-index:25!important;
    box-sizing:border-box!important;
  }
  .hero-brand-block{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    margin:0 auto!important;
    width:100%!important;
    max-width:100%!important;
    z-index:25!important;
    position:relative!important;
  }
  .hero-brand-name{
    font-family:Jost,sans-serif!important;
    font-weight:800!important;
    font-size:clamp(30px, 8.5vw, 46px)!important;
    line-height:.92!important;
    letter-spacing:-.025em!important;
    text-transform:uppercase!important;
    color:#FFFFFF!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    gap:2px!important;
  }
  .hero-brand-name span{
    white-space:nowrap!important;
    display:block!important;
    text-align:center!important;
  }
  .hero-morph-wrapper{
    margin-top:clamp(8px, 1.4vh, 14px)!important;
    position:relative!important;
    height:clamp(36px, 4.5vh, 46px)!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  .hero-morph-text{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  .morph-word{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    text-align:center!important;
    font-family:'Cormorant Garamond',serif!important;
    font-style:italic!important;
    font-size:clamp(20px, 5.5vw, 28px)!important;
    font-weight:400!important;
    letter-spacing:.01em!important;
    color:#E6DFD5!important;
    white-space:nowrap!important;
    line-height:1.15!important;
  }
  .hero-freisteller{
    order:3!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin-top:clamp(12px, 2.2vh, 22px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    height:clamp(280px, 38vh, 420px)!important;
    width:auto!important;
    max-width:88vw!important;
    object-fit:contain!important;
    object-position:bottom center!important;
    z-index:10!important;
    pointer-events:none!important;
    display:block!important;
  }
  .hero-bottom-fade{
    display:block!important;
    height:60px!important;
    z-index:20!important;
  }
}
@media (max-width: 480px){
  .hero-canvas-col{
    height:clamp(190px, 28vh, 250px)!important;
    padding:68px 12px 0!important;
  }
  .hero-brand-name{
    font-size:clamp(28px, 8.2vw, 38px)!important;
  }
  .morph-word{
    font-size:clamp(19px, 5.2vw, 25px)!important;
  }
  .hero-freisteller{
    margin-top:clamp(10px, 1.8vh, 16px)!important;
    height:clamp(260px, 37vh, 380px)!important;
  }
}

/* === Perspectives: prevent iframe height stretch on mobile === */
@media(max-width:960px){
  .ps-video-wrap{height:auto!important}
}
/* Perspectives section height constraint on mobile */
@media(max-width:640px){
  #perspectives .section{padding:clamp(44px,8vw,76px) 0!important}
}

/* === Modal close button: bigger + clearly visible === */
.mp-close{background:rgba(232,221,208,.18)!important;border:1px solid rgba(232,221,208,.42)!important;width:38px!important;height:38px!important;font-size:16px!important;flex-shrink:0!important}
.mp-close:hover{background:rgba(232,221,208,.34)!important;border-color:rgba(232,221,208,.7)!important}
@media(max-width:700px){
  .mp-close{width:42px!important;height:42px!important;font-size:18px!important}
}

/* === Modal image arrows: clearly visible === */
.mp-arrow{background:rgba(20,20,20,.82)!important;border:1.5px solid rgba(232,221,208,.6)!important;color:#E8DDD0!important;padding:10px 18px!important;font-size:20px!important;font-weight:700!important;opacity:1!important}
.mp-arrow:hover{background:rgba(42,42,42,.96)!important;border-color:#E8DDD0!important}
@media(max-width:700px){
  .mp-arrow{padding:8px 14px!important;font-size:18px!important}
  .mp-prev{left:8px!important}
  .mp-next{right:8px!important}
}

/* === PDF Badge on Project Bento Cards === */
.proj-card{position:relative}
.proj-card-badge{position:absolute;top:14px;right:14px;z-index:4;background:rgba(20,20,20,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(232,221,208,0.35);color:#E8DDD0;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border-radius:20px;display:flex;align-items:center;gap:5px;box-shadow:0 4px 12px rgba(0,0,0,0.3);transition:all .25s ease}
.proj-card:hover .proj-card-badge{background:rgba(145,88,81,0.92);border-color:rgba(232,221,208,0.6);transform:scale(1.04)}

/* === Dedicated Full-PDF Modal Overlay === */
.mp-panel.mp-panel-pdf-only {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  width: min(1440px, calc(100vw - clamp(16px, 3vw, 40px))) !important;
  height: min(calc(100vh - clamp(16px, 3vw, 40px)), 960px) !important;
  background: #1e1e1e !important;
}

.mp-media-wrapper.pdf-only {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  border-right: none !important;
  height: 100% !important;
  width: 100% !important;
}

.mp-panel.mp-panel-pdf-only .mp-pdf-view {
  height: 100% !important;
}

.mp-panel.mp-panel-pdf-only .mp-pdf-frame {
  height: 100% !important;
  flex: 1 !important;
  min-height: 500px;
}


/* === PDF View Stage inside Modal === */
.mp-pdf-view{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:#121212;overflow:hidden}
.mp-pdf-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:#1e1e1e;border-bottom:1px solid rgba(232,221,208,.1);flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.mp-pdf-title-wrap{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.mp-pdf-tag{background:rgba(145,88,81,.85);color:#E8DDD0;font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:.08em;flex-shrink:0}
.mp-pdf-name{font-family:"IBM Plex Mono",monospace;font-size:11px;color:rgba(232,221,208,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-pdf-subnav{display:flex;align-items:center;gap:4px;flex-shrink:0}
.mp-sub-btn{background:transparent;border:1px solid rgba(232,221,208,.18);color:rgba(232,221,208,.5);font-family:"IBM Plex Mono",monospace;font-size:9px;padding:3px 9px;border-radius:3px;cursor:pointer;transition:all .15s ease}
.mp-sub-btn:hover{color:#E8DDD0;border-color:rgba(232,221,208,.35)}
.mp-sub-btn.active{background:rgba(232,221,208,.18);color:#E8DDD0;border-color:rgba(232,221,208,.45);font-weight:600}
.mp-pdf-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mp-pdf-tool-btn{background:rgba(232,221,208,.1);border:1px solid rgba(232,221,208,.25);color:#E8DDD0;font-family:"IBM Plex Mono",monospace;font-size:10px;padding:4px 10px;border-radius:4px;text-decoration:none;transition:all .15s ease;display:inline-flex;align-items:center;gap:4px}
.mp-pdf-tool-btn:hover{background:rgba(232,221,208,.22);border-color:#E8DDD0}
.mp-pdf-tool-btn.mp-dl{background:rgba(145,88,81,.4);border-color:rgba(145,88,81,.7)}
.mp-pdf-tool-btn.mp-dl:hover{background:rgba(145,88,81,.8)}

.mp-pdf-stage {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  background: #121212;
  overflow: hidden;
}

.mp-pdf-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #181818;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(232, 221, 208, 0.7);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.pdf-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(232, 221, 208, 0.15);
  border-top-color: #915851;
  border-radius: 50%;
  animation: pdfSpin 0.8s linear infinite;
}

@keyframes pdfSpin {
  to { transform: rotate(360deg); }
}

.mp-pdf-frame{flex:1;width:100%;height:100%;border:none;background:#2b2b2b}