/* Gemeinsame Basis aller vier Buero-Entwuerfe. Schrift, Farben und Bewegungsvokabular
   der bestehenden Seite: Quicksand, #f6a429, Schwarz/Weiss, Kurven aus Home-Reveal und Portraets. */
.bb{--o:#f6a429;--ink:#000;--paper:#fff;--muted:#595959;--hair:#000;
  --ease-reveal:cubic-bezier(.645,.045,.355,1);--ease-soft:cubic-bezier(.4,0,.2,1);
  position:relative;display:block;margin:104px 0 0;color:var(--ink);
  font:18px/1.6 quicksand,'Trebuchet MS',sans-serif;}
.bb *,.bb *::before,.bb *::after{box-sizing:border-box;}
.bb .bb-shell{width:calc(100% - 96px);max-width:1296px;margin:0 auto;}
.td .bb h2{font-size:24px;line-height:1.4;font-weight:400;letter-spacing:normal;margin:0;color:inherit;text-wrap:balance;}
.bb .bb-label{display:block;font-size:13px;line-height:1.4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.bb address{font-style:normal;font-size:18px;line-height:1.6;margin:0;}
.bb .bb-icons{display:flex;gap:12px;align-items:center;}
.td .bb .bb-icon{display:inline-grid;place-items:center;width:48px;height:48px;flex:0 0 48px;color:inherit;
  text-decoration:none;border:1px solid currentColor;background:transparent;
  transition:background .5s var(--ease-soft),border-color .5s var(--ease-soft),color .5s var(--ease-soft);}
.td .bb .bb-icon:hover{background:var(--o);border-color:var(--o);color:#000;text-decoration:none;}
.td .bb a:focus-visible{outline:3px solid var(--o);outline-offset:4px;}
.bb .bb-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.bb .bb-flap{transform-origin:12px 6px;transition:transform .5s ease-out;}
.bb .bb-mail:hover .bb-flap,.bb .bb-mail:focus-visible .bb-flap{transform:rotateX(180deg);}

/* Karte: Fenster + innerer Plan im Originalformat 565x873. Der Ausschnitt wird ueber
   --pz (Breite), --px (links) und --pt (margin-top, % der Fensterbreite) gesetzt,
   damit der Pin garantiert im Bild bleibt. */
.bb .bb-map{position:relative;display:block;overflow:hidden;background:#fff;color:inherit;}
.bb .bb-plan{position:absolute;top:0;left:var(--px,0%);width:var(--pz,100%);aspect-ratio:565/873;margin-top:var(--pt,-80%);}
.bb .bb-plan img{display:block;width:100%;height:100%;filter:grayscale(1);transition:filter 1s var(--ease-soft) .5s;}
.bb.is-in .bb-plan img{filter:none;}
.td .bb a.bb-map:hover{text-decoration:none;}

/* Entwurfsleiste ganz unten, nicht fixiert, damit sie nichts ueberdeckt. */
.bb-draftbar{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center;justify-content:center;padding:18px 20px 26px;
  background:#f3f3f3;color:#333;font:500 14px/1.5 quicksand,'Trebuchet MS',sans-serif;border-top:1px solid #e2e2e2;}
.bb-draftbar a{display:inline-flex;align-items:center;min-height:44px;color:#000;text-underline-offset:4px;}
.bb-draftbar a:focus-visible{outline:3px solid #f6a429;outline-offset:3px;}

@media (max-width:1023px){.bb{margin-top:80px;}.bb .bb-shell{width:calc(100% - 48px);}}
@media (max-width:760px){.bb{margin-top:64px;}.bb .bb-shell{width:calc(100% - 40px);}.td .bb h2{font-size:21px;}}
@media (prefers-reduced-motion:reduce){.bb *,.bb *::before,.bb *::after{transition:none!important;animation:none!important;}}
/* Entwurf 3 «360°»: runder Kartenausschnitt, Hinweislinie vom Pin zur Adresse wie eine
   Markierung im Zustandsbericht. Signature: der orange Ring zieht einmal 360° herum
   (Anspielung aufs Logo), danach waechst die Hinweislinie zur Adresse. */
.bb-v3 .bb-orbit{display:grid;grid-template-columns:440px minmax(0,1fr);column-gap:96px;align-items:start;padding:20px 0 20px 20px;}
.bb-v3 .bb-disc{position:relative;width:440px;height:440px;}
.bb-v3 .bb-map{position:absolute;inset:0;border-radius:50%;--pz:162%;--px:-0.7%;--pt:-147.7%;}
.bb-v3 .bb-ring{position:absolute;inset:-18px;width:calc(100% + 36px);height:calc(100% + 36px);overflow:visible;pointer-events:none;transform:rotate(-90deg);}
.bb-v3 .bb-ring circle{fill:none;}
.bb-v3 .bb-ring-track{stroke:#e3e3e3;stroke-width:.25;}
.bb-v3 .bb-ring-draw{stroke:var(--o);stroke-width:.45;stroke-dasharray:360;stroke-dashoffset:360;transition:stroke-dashoffset 1.6s var(--ease-reveal);}
.bb-v3.is-in .bb-ring-draw{stroke-dashoffset:0;}
/* Hinweislinie: startet rechts neben dem Bodenring des Pins (64.8 % Hoehe) */
.bb-v3 .bb-lead{position:absolute;top:64.8%;left:50%;width:calc(50% + 96px);height:1px;background:#000;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-reveal) 1.5s;}
.bb-v3 .bb-lead::before{content:"";position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:#000;}
.bb-v3.is-in .bb-lead{transform:none;}
.bb-v3 .bb-note{padding-top:235px;}
.bb-v3 .bb-rule{display:block;height:1px;background:#000;margin:16px 0 24px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-reveal) 2.1s;}
.bb-v3.is-in .bb-rule{transform:none;}
.bb-v3 .bb-note address{margin-bottom:24px;}
.bb-v3 .bb-note>h2,.bb-v3 .bb-note>address,.bb-v3 .bb-note>.bb-icons{opacity:0;transition:opacity .6s var(--ease-soft) 2.1s;}
.bb-v3.is-in .bb-note>*{opacity:1;}

@media (max-width:1023px){
 .bb-v3 .bb-orbit{grid-template-columns:340px minmax(0,1fr);column-gap:56px;padding-left:16px;}
 .bb-v3 .bb-disc{width:340px;height:340px;}
 .bb-v3 .bb-lead{width:calc(50% + 56px);}
 .bb-v3 .bb-note{padding-top:170px;}
}
@media (max-width:760px){
 .bb-v3 .bb-orbit{display:block;padding:16px 0 0;text-align:center;}
 .bb-v3 .bb-disc{width:min(290px,calc(100% - 40px));height:auto;aspect-ratio:1/1;margin:0 auto;}
 .bb-v3 .bb-ring{inset:-13px;width:calc(100% + 26px);height:calc(100% + 26px);}
 .bb-v3 .bb-lead{left:50%;top:64.8%;width:1px;height:calc(35.2% + 40px);transform:scaleY(0);transform-origin:top;}
 .bb-v3 .bb-lead::before{left:-4px;top:-4px;}
 .bb-v3 .bb-note{padding-top:48px;}
 .bb-v3 .bb-rule{width:64px;margin:14px auto 20px;}
 .bb-v3 .bb-icons{justify-content:center;}
}

/* A single stroke reaches beneath the heading; the rule only reserves spacing. */
@media (min-width:761px){.bb-v3 .bb-rule{background:transparent;}}

/* Title-length underline, quick and reversible whenever the title leaves view. */
.bb-v3 .bb-note>h2{width:fit-content;max-width:100%;}
.bb-v3 .bb-lead,.bb-v3 .bb-rule{transition:transform 1.1s var(--ease-reveal) .08s;}
.bb-v3:not(.line-visible) .bb-lead,.bb-v3:not(.line-visible) .bb-rule{transform:scaleX(0);transition-delay:0s;}
.bb-v3.line-visible .bb-lead,.bb-v3.line-visible .bb-rule{transform:none;}
.bb-v3 .bb-note>h2,.bb-v3 .bb-note>address,.bb-v3 .bb-note>.bb-icons{transition-delay:.08s;}
@media(max-width:760px){
 .bb-v3 .bb-note>h2{margin-inline:auto;}
 .bb-v3:not(.line-visible) .bb-lead{transform:scaleY(0);}
}

/* Match the two portrait columns on desktop. */
@media(min-width:761px){
 .bb-v3 .bb-orbit{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;padding:20px 0;}
 .bb-v3 .bb-disc{justify-self:center;}
}
/* Remove the dash seam once the drawing finishes: a genuinely closed circle. */
.bb-v3 .bb-ring-draw{stroke-linecap:round;}
.bb-v3.ring-complete .bb-ring-draw{stroke-dasharray:none;}


/* Centre the office heading/group beneath Matthias' portrait on desktop. */
@media(min-width:761px){
 .bb-v3 .bb-note{width:fit-content;max-width:100%;justify-self:center;}
}

/* Centre the start dot directly on the pin axis, without the half-pixel offset. */
.bb-v3 .bb-lead::before{left:0;top:0;transform:translate(-50%,-50%);}