/* Seitenspezifisch: buero.html - ergaenzt base.css */

nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:22px 5vw;transition:background .4s ease,padding .4s ease,border-color .4s ease,backdrop-filter .4s ease;border-bottom:1px solid transparent;background:transparent;backdrop-filter:none;}
nav.scrolled{border-bottom:1px solid var(--line);background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);}
.nav-logo{display:flex;align-items:center;}
.nav-logo img{height:62px;width:auto;display:block;}
.nav-links{display:none;}
.nav-links a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;position:relative;padding-bottom:4px;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0%;height:1px;background:var(--ink);transition:width .35s ease;}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-cta{display:none;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;border:1px solid var(--ink);padding:9px 16px;text-decoration:none;color:var(--ink);transition:background .3s ease,color .3s ease;white-space:nowrap;}
.nav-cta:hover{background:var(--ink);color:var(--bg);}
/* Hamburger - auf allen Viewports, verschieden lange Balken, symmetrisch (Schliessen gleichmaessig) */
.nav-burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:30px;height:22px;background:none;border:none;cursor:pointer;padding:0;z-index:210;position:relative;}
.nav-burger span{display:block;height:2px;background:var(--ink);transform-origin:center;transition:width .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1),opacity .3s ease,background .3s ease;}
.nav-burger span:nth-child(1){width:100%;}
.nav-burger span:nth-child(2){width:64%;}
.nav-burger span:nth-child(3){width:40%;}
.nav-burger:hover span:nth-child(1){width:56%;}
.nav-burger:hover span:nth-child(2){width:100%;}
.nav-burger:hover span:nth-child(3){width:84%;}
.nav-burger.active span{width:100%;background:#F6F4EF;}
.nav-burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-burger.active span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Navbar-Zustand bei offenem Menue: transparent, Logo blendet aus (Burger bleibt sichtbar/hell) */
nav.menu-open{background:transparent!important;backdrop-filter:none!important;border-bottom-color:transparent!important;}
nav.menu-open .nav-logo{opacity:0;pointer-events:none;}
.nav-logo{transition:opacity .35s ease;}

/* Vollbild-Menue-Overlay - wischt von unten hoch (clip-path), hinter der Navbar */
.menu-overlay{position:fixed;inset:0;z-index:150;background:var(--dark);color:#F6F4EF;display:flex;align-items:stretch;overflow-y:auto;visibility:hidden;clip-path:inset(100% 0 0 0);}
.menu-overlay.open{visibility:visible;}
.menu-logo{position:absolute;top:22px;left:5vw;height:62px;display:block;}
.menu-logo img{height:100%;width:auto;display:block;}
.menu-inner{width:100%;min-height:100%;padding:96px 5vw 48px;display:flex;flex-direction:column;gap:48px;}
/* <nav class="menu-list"> erbt sonst die fixierte Kopfleisten-Regel fuer nav (position:fixed, align-items:center) - hier explizit zuruecknehmen */
.menu-list{position:static;z-index:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px;margin:auto 0;padding:0;background:none;backdrop-filter:none;border:none;}
.menu-list a{display:flex;align-items:center;gap:22px;text-decoration:none;color:#F6F4EF;width:max-content;will-change:transform;}
.menu-index{font-family:'JetBrains Mono',monospace;font-size:13px;color:#8A6E4E;width:34px;flex:none;}
.menu-line{position:relative;display:block;overflow:hidden;}
.menu-line-inner{position:relative;display:block;will-change:transform;}
.menu-line-inner span{display:block;font-family:'Jost',sans-serif;font-weight:800;font-size:clamp(2.4rem,7.5vw,5.6rem);line-height:1.25;text-transform:uppercase;letter-spacing:-0.01em;}
.menu-line-inner .alt{position:absolute;top:100%;left:0;width:100%;color:var(--copper);}
.menu-foot{display:flex;gap:30px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:#A38A67;}
.menu-foot a{color:#A38A67;text-decoration:none;}
@media (max-width:600px){
  .menu-inner{padding:84px 5vw 40px;gap:34px;}
  .menu-list{gap:8px;}
  .menu-list a{width:100%;gap:14px;}
  .menu-index{width:26px;font-size:11px;}
  .menu-line-inner span{font-size:clamp(1.75rem,8.2vw,2.6rem);}
  .menu-foot{flex-direction:column;gap:8px;font-size:11px;}
}


section{padding:min(12vw,120px) 5vw;}
.page-hero{padding:170px 5vw 70px;border-bottom:1px solid var(--line);}
.page-hero .label{margin-bottom:16px;}
.page-hero h1{font-size:clamp(2.4rem,7vw,5rem);line-height:1.2;text-transform:uppercase;max-width:14ch;}
.page-hero p{margin-top:20px;max-width:52ch;color:var(--ink-soft);font-size:15px;line-height:1.7;}

/* Die Zeilenmaske von SplitText clippt bei line-height 1 die Umlautpunkte von
   Ü, Ö und Ä ab. Etwas Luft nach oben, ohne das Layout zu verschieben. */
.sl-mask{padding-top:0.14em;margin-top:-0.14em;}
.reveal{opacity:0;transform:translateY(32px);}
.reveal.in{opacity:1;transform:translateY(0);}

/* Custom Cursor - Kreis (mix-blend-mode -> auf hell UND dunkel sichtbar) */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;opacity:0;}
.cursor-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#2D1A02,#D29761,#E6D5BE);filter:drop-shadow(0 1px 2px rgba(20,19,18,0.3));}
.cursor-ring{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#2D1A02,#D29761,#E6D5BE);-webkit-mask:radial-gradient(circle at center,transparent 0 15.5px,#000 16.2px);mask:radial-gradient(circle at center,transparent 0 15.5px,#000 16.2px);filter:drop-shadow(0 1px 3px rgba(20,19,18,0.28));}
@media (hover:hover) and (pointer:fine){*{cursor:none!important;}}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none!important;}}

.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;background:var(--bg-paper);}
.marquee-track{display:flex;white-space:nowrap;width:max-content;}
.marquee-track span{font-family:'Jost',sans-serif;font-weight:700;font-size:clamp(1.3rem,3.2vw,2.2rem);padding:0 1.6vw;display:flex;align-items:center;gap:1.6vw;text-transform:uppercase;}
.marquee-track span::after{content:'●';font-size:9px;color:var(--accent);margin-left:1.6vw;}

/* PROJECT GRID (shared: home preview + full archive) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.tile{position:relative;overflow:hidden;border-radius:2px;cursor:pointer;aspect-ratio:4/3;}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.tile:hover img{transform:scale(1.06);}
.tile::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(20,19,18,0.8) 0%,rgba(20,19,18,0.05) 55%,transparent 75%);z-index:1;}
.tile-info{position:absolute;left:0;right:0;bottom:0;padding:18px;color:#F6F4EF;z-index:2;}
.tile-info .p-title{font-family:'Jost',sans-serif;font-weight:700;font-size:1rem;text-transform:uppercase;line-height:1.2;}
.tile-info .p-meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.06em;color:#DCCDB6;margin-top:6px;}
.tile-info .p-year{font-family:'JetBrains Mono',monospace;font-size:10px;color:#C6B49A;display:block;margin-bottom:4px;}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;border-bottom:1px solid var(--line);padding-bottom:22px;flex-wrap:wrap;gap:14px;}
.section-head h2{font-size:clamp(1.8rem,4vw,2.8rem);text-transform:uppercase;}

/* FILTER BAR */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:50px;}
.filter-btn{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .25s ease;}
.filter-btn:hover{border-color:var(--ink);color:var(--ink);}
.filter-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}

/* CONTACT */
.contact{background:var(--dark);color:var(--dark-paper);}
.contact .label{color:#A38A67;}
.contact h2{font-size:clamp(2.2rem,6.5vw,5rem);max-width:14ch;margin-bottom:60px;text-transform:uppercase;}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;border-top:1px solid #4A3418;padding-top:36px;}
.contact-grid a{color:var(--dark-paper);text-decoration:none;font-size:15px;}
.contact-grid div .label{display:block;margin-bottom:12px;}

footer{background:var(--dark);color:#A38A67;padding:60px 5vw 34px;border-top:1px solid #4A3418;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:50px;}
.footer-col .label{display:block;margin-bottom:16px;color:#8A6E4E;}
.footer-col a,.footer-col p{display:block;color:#C6B49A;text-decoration:none;font-size:13.5px;line-height:2;}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #4A3418;padding-top:24px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.06em;color:#8A6E4E;flex-wrap:wrap;gap:10px;}
.footer-credit a{color:#C6B49A;text-decoration:none;border-bottom:1px solid rgba(198,180,154,0.4);transition:color .3s ease,border-color .3s ease;}
.footer-credit a:hover{color:var(--copper);border-color:var(--copper);}
.footer-wordmark{display:flex;justify-content:space-between;align-items:center;width:100%;font-family:'Jost',sans-serif;font-weight:800;font-size:clamp(3rem,13vw,12rem);line-height:.82;text-transform:uppercase;color:#F6F4EF;margin:10px 0 44px;}

/* BUERO PAGE */
/* BUEROBILD: geschichtete Ansicht. Beide Zeichnungen liegen freigestellt auf Weiss,
   deshalb blenden sie per multiply ohne Freistellen in den Papierton der Buehne ein.
   Hinten die serielle Rahmenstruktur als blasse Tiefenschicht, davor scharf die
   Strassenansicht auf einer Grundlinie. Beim Scrollen laufen die Ebenen leicht
   versetzt (Parallax) - mehr Bewegung braucht es nicht. */
.buerobild{position:relative;margin:0;background:var(--bg-paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;}
.bb-buehne{position:relative;padding:clamp(64px,9vw,132px) 5vw clamp(30px,4vw,52px);}
/* feines Achsraster, nach unten auslaufend - der Blattgrund, nicht mehr */
.bb-raster{position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 8.3333%);
  opacity:.6;-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.45) 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.45) 68%,transparent 100%);}
.bb-lagen{position:relative;max-width:1500px;margin:0 auto;}
.bb-ansicht{display:block;width:100%;height:auto;mix-blend-mode:multiply;will-change:transform;}
/* Grundlinie unter der Ansicht, mit kupfernem Anschlag links */
.bb-linie{position:relative;z-index:2;grid-column:1 / -1;height:1px;background:var(--line);margin-top:clamp(6px,1.2vw,16px);}
.bb-linie::before{content:'';position:absolute;left:0;top:-4px;width:1px;height:9px;background:var(--accent);}
.bb-linie::after{content:'';position:absolute;right:0;top:-4px;width:1px;height:9px;background:var(--line);}
.bb-fuss{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;padding:14px 5vw clamp(20px,3vw,32px);max-width:1500px;margin:0 auto;}
.bb-signet{display:flex;align-items:center;gap:12px;}
.bb-signet img{width:22px;height:22px;flex:none;}
.bb-fuss-rechts{display:flex;align-items:center;gap:16px;}
.bb-wisch{display:none;}
@media (max-width:900px){
  .bb-buehne{padding:56px 5vw 22px;}
  .bb-fuss{font-size:10px;gap:10px;}
  /* Die Ansicht ist fast 5:1 - auf schmalen Schirmen bliebe sie briefmarkengross.
     Deshalb laeuft sie hier in Ueberbreite und wird seitlich gewischt. */
  .bb-lage-ansicht{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .bb-lage-ansicht::-webkit-scrollbar{display:none;}
  .bb-ansicht{width:190%;max-width:none;transform:none !important;}
  .bb-wisch{display:inline;color:var(--accent);}
}
.leistungen-intro{max-width:70ch;font-size:15px;line-height:1.8;color:var(--ink-soft);margin-bottom:100px;padding-bottom:60px;border-bottom:1px solid var(--line);}
.leistungen-intro strong{color:var(--ink);font-weight:400;}
/* WERDEGANG-TIMELINE: sticky Jahr links, Text rechts, mittige Linie faellt beim Scrollen in Moosgruen */
/* LEISTUNGSBILD / BUERO-TECHNIK (zwei nuechterne Spalten mit Aufzaehlung) */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;max-width:1100px;margin:0 auto 40px;}
.spec-col .label{display:block;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.spec-col ul{list-style:none;padding:0;margin:0;}
.spec-col li{font-size:15px;line-height:1.6;color:var(--ink-soft);padding:12px 0 12px 22px;position:relative;border-bottom:1px solid var(--line);}
.spec-col li::before{content:'';position:absolute;left:0;top:20px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.spec-col li strong{color:var(--ink);font-weight:400;}
@media (max-width:900px){.spec-grid{grid-template-columns:1fr;gap:60px;}}

.timeline{position:relative;max-width:900px;margin:0 auto;}
.tl-track{position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--line);-webkit-mask:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);mask:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);}
.tl-fill{position:absolute;left:0;top:0;width:100%;height:0%;background:var(--accent);}
/* Der wandernde Punkt laeuft am unteren Ende der wachsenden Linie mit. Er steht
   bewusst NICHT im .tl-track: dessen Maske blendet oben und unten aus und wuerde
   ihn verschlucken. Die Y-Position setzt das Skript. */
.tl-runner{position:absolute;left:9px;top:0;margin-top:-7px;width:14px;height:14px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,0);z-index:2;
  box-shadow:0 0 0 6px rgba(176,110,54,0.14);}
.tl-entry{position:relative;display:grid;grid-template-columns:220px 1fr;gap:50px;padding:48px 0 48px 60px;}
.tl-dot{position:absolute;left:1px;top:56px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--line);}
.tl-dot::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--line);transition:background .35s ease;}
.tl-entry.on .tl-dot{border-color:var(--accent);}
.tl-entry.on .tl-dot::after{background:var(--accent);}
.tl-yearwrap{position:sticky;top:130px;align-self:start;}
.tl-year{font-family:'Jost',sans-serif;font-weight:800;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1;color:var(--ink-soft);text-transform:uppercase;letter-spacing:-0.01em;
  transform-origin:left center;}
.tl-content{padding-top:12px;}
.tl-content p{font-family:'Oswald',sans-serif;font-weight:400;font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.55;letter-spacing:0.01em;color:var(--ink);max-width:36ch;}

/* KONTAKT PAGE */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start;}
.kontakt-block{margin-bottom:36px;}
.kontakt-block .label{margin-bottom:10px;}
.kontakt-block a, .kontakt-block p{font-family:'Jost',sans-serif;font-weight:500;font-size:1.4rem;text-decoration:none;color:var(--ink);}
.kontakt-photo img{width:100%;border-radius:2px;}

@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr;}
  .kontakt-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-wordmark{flex-wrap:nowrap;justify-content:space-between;gap:0;font-size:clamp(1.4rem,11.6vw,6rem);}
  .tl-entry{grid-template-columns:1fr;gap:10px;padding:34px 0 34px 44px;}
  .tl-yearwrap{position:static;}
  .tl-year{font-size:1.6rem;}
  .tl-dot{top:38px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
  html{scroll-behavior:auto;}
}

/* Sprungmarke fuer Tastatur und Screenreader: erst bei Fokus sichtbar */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--accent);color:#fff;
  padding:12px 20px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.1em;
  text-transform:uppercase;text-decoration:none;}
.skip-link:focus{left:8px;top:8px;}
/* Durchgehend sichtbarer Fokus bei Tastaturbedienung */
a:focus-visible,button:focus-visible,.p-toggle:focus-visible,.filter-btn:focus-visible,
.lst-row:focus-visible,.nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* Ohne JavaScript bleiben die Reveal-Elemente sichtbar */
@media (scripting: none){.reveal{opacity:1;transform:none;}}