/* Florian Irnberger – Korridor (v33) */
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Variable.ttf") format("truetype");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --ink:#1B1C1E;--ink2:#3D4045;--txt:#55585E;--mute:#8A8D93;--line:#D8DADD;--line2:#ECEEF1;
  --accent:#7A6A9C;--form:#D2D6DB;--form-k:#C9CDD3;--btn:#A3A9B2;--hover:#958FBA;--bg:#FFFFFF;
  --gx:7.5vw;           /* linker Rand Desktop */
  --rx:150px;           /* rechte Spalte für Sechseck-Navigation */
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
a:hover{opacity:.7}
img{max-width:100%}
h1,h2,h3,p{margin:0}
address{font-style:normal}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Sprache */
html[lang="de"] [data-lang="en"],html[lang="en"] [data-lang="de"]{display:none}

/* ---------- Typo ---------- */
.kicker{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.num{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:.06em}
h2{font-weight:300;letter-spacing:-.03em;color:var(--ink)}
h3{font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.item p,.txt p{color:var(--txt);line-height:1.6}

.p-home .logo{display:block;width:300px;height:auto;margin:0 0 40px}
.p-home .kicker{font-size:14px;margin:0 0 22px}
.p-home h1{max-width:11ch;font-size:clamp(46px,min(6.6vw,10.5vh),96px);line-height:1.02;font-weight:300;letter-spacing:-.035em;color:var(--ink)}
.p-home h1 strong{font-weight:800}
.p-home .intro{margin-top:32px;max-width:440px;font-size:19px;line-height:1.6;color:var(--txt)}

.p-services .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:16px}
.p-services h2{font-size:clamp(36px,3.8vw,52px)}
.p-services .kicker{font-size:13px}
.grid2{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
.grid2 h3{margin:10px 0 8px;font-size:22px}
.grid2 p{font-size:15px}

.p-approach .kicker{margin-bottom:12px}
.p-approach h2{font-size:clamp(30px,3.2vw,44px)}
.grid3{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--line);padding-top:18px}
.grid3 h3{margin:10px 0 8px;font-size:21px}
.grid3 p{font-size:15px}

.p-about .inner{display:flex;gap:56px;align-items:center}
.hexpic{display:block;flex:none;width:260px;height:300px;object-fit:cover;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.p-about .txt{max-width:520px}
.p-about .kicker{margin-bottom:12px}
.p-about h2{margin-bottom:22px;font-size:clamp(30px,3vw,42px);line-height:1.12}
.p-about .txt p{font-size:16px;line-height:1.65}
.p-about .txt p+p{margin-top:14px}

.p-contact .kicker{margin-bottom:16px}
.p-contact h2{max-width:13ch;font-size:clamp(44px,min(5vw,8vh),72px);line-height:1.04;letter-spacing:-.035em}
.grid3.contact{margin-top:44px;gap:32px;padding-top:22px}
.contact .label{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.contact a{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none}
.contact address{margin-top:8px;font-size:16px;line-height:1.5;color:var(--ink)}

.p-legal .kicker{margin-bottom:10px}
.p-legal h2{font-size:clamp(34px,3.6vw,48px)}
.scroll{margin-top:24px;border-top:1px solid var(--line);padding:22px 12px 8px 0;column-count:2;column-gap:56px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.scroll .entry{break-inside:avoid;margin:0 0 20px}
.scroll h3{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.scroll p{font-size:15px;line-height:1.6;color:var(--ink)}
.scroll .lead{margin-bottom:20px;color:var(--txt)}
.scroll .stand{font-size:13px;color:var(--mute)}
.scroll a{text-decoration-color:var(--line);text-underline-offset:3px}

/* ---------- Ohne JS: normale Seite ---------- */
.pattern,.deco,.hexbtn,.scrim{display:none}
.panel{padding:72px 24px;max-width:1100px;margin:0 auto}
.panel+.panel{border-top:1px solid var(--line2)}
.menu{display:none}

/* ---------- Mit JS: Korridor-Bühne ---------- */
.js,.js body{height:100%;overflow:hidden;overscroll-behavior:none}
.js .stage{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;height:var(--appH,100dvh);overflow:hidden;background:var(--bg);touch-action:none}
.js .panel .inner,.js .scroll{touch-action:pan-y}
.js .pattern{display:block;position:absolute;inset:0;pointer-events:none}
.js .deco,.js .hexbtn{display:block}

.js .panel{position:absolute;inset:0;margin:0;max-width:none;border:0;display:flex;flex-direction:column;pointer-events:none}
.js .panel .inner{max-height:100%;overflow:auto;scrollbar-width:none;opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease}
.js .panel .inner::-webkit-scrollbar{display:none}
.js .panel.before .inner{transform:translateY(-12px)}
.js .panel.on .inner{opacity:1;transform:none;pointer-events:auto;transition-delay:1.1s}
.js .panel.on.first .inner{transition-delay:.2s;transition-duration:1.6s}

/* Desktop-Anordnung (aus v33, 1280×800) */
.js .p-home{padding:max(48px,8.5vh) var(--rx) 32px var(--gx)}
.js .p-home .inner{width:min(600px,52vw)}
.js .p-services{justify-content:center;padding:40px var(--rx) 40px 42vw}
.js .p-services .inner{width:min(600px,100%)}
.js .p-approach{justify-content:flex-end;padding:40px var(--rx) max(48px,12vh) var(--gx)}
.js .p-approach .inner{width:min(1060px,100%)}
.js .p-about{justify-content:center;align-items:center;padding:40px var(--rx) 40px var(--gx)}
.js .p-about .inner{width:min(840px,100%)}
.js .p-contact{padding:max(48px,12.5vh) var(--rx) 40px var(--gx)}
.js .p-contact .inner{width:min(760px,100%)}
.js .p-legal{padding:56px var(--rx) 40px var(--gx)}
.js .p-legal .inner{width:min(1060px,100%);height:100%;display:flex;flex-direction:column;overflow:hidden}
.js .p-legal .scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}

/* Hinweis auf weiteren Text: unten ausblenden, solange gescrollt werden kann */
.js .panel .inner.more,.js .p-legal .scroll.more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent)}

/* ---------- Formen ---------- */
.f{position:absolute;overflow:visible;opacity:0;stroke:var(--form);animation:kx-in 3.2s cubic-bezier(.45,0,.25,1) both}
.f path{stroke-linejoin:miter;fill:#FFFFFF}
.f .o{stroke-width:1.1}
.f .k{stroke:var(--form-k);stroke-width:.6;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:kx-kin 3.2s cubic-bezier(.45,0,.25,1) both}
.f .v{transform-box:fill-box;transform-origin:center;transition:opacity 1s ease,transform 1s ease}
.f .v.off{opacity:0;transform:scale(.9)}
.f .pc{animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:14s}
.p1{animation-name:p1}.p2{animation-name:p2}.p3{animation-name:p3}.p4{animation-name:p4}.p5{animation-name:p5}
.pattern.noin .f,.pattern.noin .f .k{animation:none;opacity:1}
@keyframes p1{0%,15%{stroke:#D2D6DB}35%,55%{stroke:#A88592}75%,100%{stroke:#D2D6DB}}
@keyframes p2{0%,15%{stroke:#D2D6DB}35%,55%{stroke:#86A89B}75%,100%{stroke:#D2D6DB}}
@keyframes p3{0%,15%{stroke:#D2D6DB}35%,55%{stroke:#958FBA}75%,100%{stroke:#D2D6DB}}
@keyframes p4{0%,15%{stroke:#D2D6DB}35%,55%{stroke:#B39880}75%,100%{stroke:#D2D6DB}}
@keyframes p5{0%,15%{stroke:#D2D6DB}35%,55%{stroke:#829EBE}75%,100%{stroke:#D2D6DB}}
@keyframes kx-kin{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@keyframes kx-in{0%{opacity:0;transform:perspective(1200px) translateZ(-60px)}100%{opacity:1;transform:perspective(1200px) translateZ(0)}}
@keyframes kx-fade{0%{opacity:0}100%{opacity:1}}
@keyframes kx-menu{0%{opacity:0;transform:translateX(32px)}100%{opacity:1;transform:translateX(0)}}

/* ---------- Sechseck-Navigation ---------- */
.deco{position:absolute;overflow:visible;pointer-events:none;opacity:1;transition:opacity 1s ease .6s}
.deco.off{opacity:0;transition-delay:0s}
.deco .o{fill:#FFFFFF;stroke:var(--form);stroke-width:1.1;stroke-linejoin:miter}
.deco .i{fill:#FFFFFF;stroke:var(--form-k);stroke-width:.6;stroke-linejoin:miter}
.hexbtn{position:absolute;padding:0;margin:0;border:0;background:transparent;cursor:pointer;z-index:4;-webkit-tap-highlight-color:transparent}
.hexbtn[hidden]{display:none}
.hexbtn svg{display:block;width:100%;height:100%;overflow:visible}
.hexbtn .o{fill:#FFFFFF;stroke:var(--btn);stroke-width:1.1;stroke-linejoin:miter;transition:stroke .3s ease}
.hexbtn .ic{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hexbtn:hover .o,.hexbtn:focus-visible .o{stroke:var(--hover)}
.hexbtn:focus-visible{outline:none}
.hexbtn:focus-visible .o{stroke:var(--accent);stroke-width:1.8}
#btnUp,#btnDown{animation:kx-fade .6s ease both}
.menubtn{z-index:7;opacity:0;animation:kx-fade 1.2s cubic-bezier(.45,0,.25,1) .9s both}

/* ---------- Menü ---------- */
.js .scrim{position:absolute;inset:0;background:rgba(255,255,255,.55);z-index:5;animation:kx-fade .3s ease both}
.js .scrim[hidden]{display:none}
.js .menu{position:absolute;top:0;right:0;bottom:0;width:440px;max-width:100%;padding:40px 56px 48px;background:#FFFFFF;border-left:1px solid var(--form);display:flex;flex-direction:column;z-index:6;animation:kx-menu .45s cubic-bezier(.2,.8,.25,1) both;overflow:auto}
.js .menu[hidden]{display:none}
.lang{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;align-self:flex-start}
.lang button{min-width:52px;min-height:44px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:600;letter-spacing:.08em;background:transparent;color:var(--txt);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:#FFFFFF}
.menu-list{list-style:none;margin:72px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.menu-list a{display:flex;align-items:baseline;gap:18px;padding:10px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line2)}
.menu-list a span:last-child{font-size:34px;font-weight:300;letter-spacing:-.02em}
.menu-list a[aria-current="page"] .num{color:var(--accent)}
.menu-list a[aria-current="page"] span:last-child{font-weight:600}
.menu-foot{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--txt)}
.menu-foot .mail{text-decoration:none;color:var(--ink);font-weight:600}
.legal-links{display:flex;gap:20px}
.legal-links a,.menu-foot .mail{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.legal-links a[aria-current="page"]{font-weight:600}

/* ---------- Handy / schmale Fenster ---------- */
@media (max-width:759px),(max-height:520px) and (max-width:1100px) and (orientation:landscape){
  :root{--gx:24px;--rx:76px}
  .kicker{font-size:11px}
  .num{font-size:12px}
  .p-home .logo{width:210px;margin-bottom:28px}
  .p-home .kicker{font-size:12px;margin-bottom:16px}
  .p-home h1{font-size:clamp(36px,11.3vw,52px);line-height:1.04;letter-spacing:-.03em}
  .p-home .intro{margin-top:24px;font-size:17px}
  .p-services .head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:6px;padding-bottom:12px}
  .p-services h2{font-size:34px}
  .grid2{margin-top:22px;grid-template-columns:1fr;gap:22px}
  .grid2 h3{margin:6px 0;font-size:18px}
  .grid2 p{font-size:14px;line-height:1.55}
  .p-approach .kicker{margin-bottom:8px}
  .p-approach h2{font-size:28px;line-height:1.12}
  .grid3{margin-top:20px;grid-template-columns:1fr;gap:18px;padding-top:16px}
  .grid3 h3{margin:4px 0;font-size:17px}
  .grid3 p{font-size:14px;line-height:1.5}
  .p-about .inner{display:block}
  .hexpic{width:156px;height:180px}
  .p-about .kicker{margin:22px 0 8px}
  .p-about h2{margin-bottom:14px;font-size:26px;line-height:1.15}
  .p-about .txt p{font-size:14px;line-height:1.55}
  .p-about .txt p+p{margin-top:10px}
  .p-contact .kicker{margin-bottom:10px}
  .p-contact h2{font-size:36px;line-height:1.06;letter-spacing:-.03em}
  .grid3.contact{margin-top:26px;gap:12px;padding-top:16px}
  .contact .label{font-size:11px}
  .contact a{font-size:16px}
  .contact address{margin-top:6px;font-size:15px}
  .p-legal .kicker{margin-bottom:6px}
  .p-legal h2{font-size:30px}
  .scroll{margin-top:16px;padding:16px 6px 0 0;column-count:1}
  .scroll .entry{margin-bottom:16px}
  .scroll h3{font-size:11px;margin-bottom:4px}
  .scroll p{font-size:14px;line-height:1.55}

  .js .p-home{justify-content:flex-end;padding:96px var(--rx) max(40px,9vh) 24px}
  .js .p-home .inner{width:100%;max-width:520px}
  .js .p-services{justify-content:flex-start;padding:96px var(--rx) 24px 24px}
  .js .p-approach{justify-content:center;padding:96px var(--rx) 24px 24px}
  .js .p-about{justify-content:flex-start;align-items:flex-start;padding:88px var(--rx) 24px 24px}
  .js .p-contact{justify-content:flex-end;padding:96px var(--rx) max(40px,9vh) 24px}
  .js .p-legal{padding:88px var(--rx) 24px 24px}
  .js .p-services .inner,.js .p-approach .inner,.js .p-about .inner,.js .p-contact .inner{width:100%;max-width:520px}
  .js .menu{width:100%;border-left:0;padding:36px 28px 40px}
  .menu-list{margin-top:56px;gap:0}
  .menu-list a{gap:14px;padding:14px 0}
  .menu-list a span:last-child{font-size:28px}
  .hexbtn .ic{stroke-width:1.8}
}
@media (max-height:520px) and (max-width:1100px) and (orientation:landscape){
  :root{--rx:220px}
  .js .p-home .inner{max-width:none}
  .js .p-home{justify-content:center;padding-top:24px}
  .p-home .logo{margin-bottom:16px}
  .p-home .intro{margin-top:14px}
}

/* kleine Handys (z. B. iPhone SE) */
@media (max-width:759px) and (max-height:640px){
  .p-home .logo{width:180px;margin-bottom:20px}
  .p-home .kicker{margin-bottom:12px}
  .p-home h1{font-size:clamp(34px,10vw,44px)}
  .p-home .intro{margin-top:16px;font-size:16px;line-height:1.5}
  .hexpic{width:110px;height:127px}
  .p-about .kicker{margin-top:16px}
  .p-about h2{font-size:23px;margin-bottom:10px}
  .js .p-services,.js .p-about,.js .p-approach,.js .p-legal{padding-top:80px}
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .f,.f .k{animation:none!important;opacity:1}
  .f .pc{animation:none!important}
  .js .panel .inner,.f .v,.deco{transition-duration:.01s!important;transition-delay:0s!important}
  .menubtn,#btnUp,#btnDown,.js .menu,.js .scrim{animation:none;opacity:1}
}