/* Studio-Grundriss mit einblendbaren Details. Alles unter .ygk-gr, keine globalen Regeln. */
.ygk-gr{--gr-ink:#1A1917;--gr-oak:#A97B4F;--gr-line:#E3DCCD;--gr-paper:#FFFFFF;--gr-bg:#FCFBF8;--gr-mono:"JetBrains Mono",ui-monospace,monospace;margin:0 auto;max-width:940px}
.ygk-gr__bar{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:0 0 18px}
.ygk-gr__tabs{display:flex;flex-wrap:wrap;gap:5px}
.ygk-gr__tab,.ygk-gr__toggle{font:500 12.5px/1 var(--gr-mono);letter-spacing:0;padding:9px 10px;border-radius:999px;border:1px solid var(--gr-line);background:transparent;color:var(--gr-ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ygk-gr__tab[aria-selected="true"]{background:var(--gr-ink);border-color:var(--gr-ink);color:#fff}
.ygk-gr__toggle{border-color:var(--gr-oak);color:var(--gr-oak)}
.ygk-gr__toggle[aria-pressed="true"]{background:var(--gr-oak);color:#fff}
.ygk-gr__tab:focus-visible,.ygk-gr__toggle:focus-visible{outline:2px solid var(--gr-oak);outline-offset:2px}
.ygk-gr__scroll{background:transparent}
.ygk-gr__fig{position:relative;margin:0;aspect-ratio:2120/1960;overflow:hidden}
/* Plan immer in derselben Größe, die Notizen blenden nur ein — nichts springt. */
.ygk-gr__stage{background:var(--gr-bg);isolation:isolate;position:absolute;inset:0;}
.ygk-gr__plan{mix-blend-mode:multiply;position:absolute;left:24.528%;top:14.286%;width:55.189%;height:79.592%;display:block}
.ygk-gr__notes{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;visibility:hidden;transition:opacity .45s .2s,visibility 0s .65s;pointer-events:none}
.ygk-gr.is-notes .ygk-gr__notes{opacity:1;visibility:visible;transition:opacity .45s .2s,visibility 0s}
.ygk-gr__hint{font:400 12px/1.4 var(--gr-mono);color:#7A746A;margin:0 0 18px;text-align:center}
.ygk-gr__bar>.ygk-gr__hint{flex:1 0 100%;margin:8px 0 0} /* der Hinweis läuft mit den Reitern mit */
.ygk-gr__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){
  .ygk-gr__tab,.ygk-gr__toggle{font-size:11.5px;padding:8px 11px}
  .ygk-gr__tabs{gap:5px;justify-content:center}
  .ygk-gr__bar{justify-content:center}
}
/* Mitlaufende Reiter: Die Leiste bleibt unter der Navigation (78 px) stehen,
   bis das Ende des Grundrisses sie nach oben aus dem Bild schiebt.
   Am Handy nicht nötig, dort passt der ganze Plan auf den Bildschirm. */
@media (min-width:701px){
  .ygk-gr__bar{position:sticky;top:var(--gr-top,78px);z-index:20;background:var(--gr-bg);padding:10px 0;margin:-10px 0 8px}
  .ygk-gr__tabs{flex:1 1 0;min-width:0}
  .ygk-gr__toggle{align-self:flex-start} /* Pillen brechen links um, „Details einblenden“ bleibt rechts in der ersten Zeile */
  .ygk-gr[id$="-mobil"]{--gr-top:57px} /* Mobil-Ansicht (Tablet quer/hoch) hat die schmalere Navigation */
}
@media (prefers-reduced-motion:reduce){.ygk-gr__stage,.ygk-gr__notes{transition:none!important}}
.ygk-gr{scroll-margin-top:96px}
.ygk-gr-link{display:inline-block;font-family:'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#A97B4F;border-bottom:1px solid currentColor;padding-bottom:3px;text-decoration:none}
.ygk-gr-link:hover{color:#1A1917}
/* Hinweis-Pfeil auf „Details einblenden": zeichnet sich einmal ein, ist bei eingeblendeten Details weg */
@font-face{font-family:"YGK Architects Daughter";font-style:normal;font-weight:400;font-display:swap;src:url("architects-daughter.woff2") format("woff2")}
.ygk-gr__cue{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ygk-gr__cue text{font-family:"YGK Architects Daughter",cursive;fill:var(--gr-oak);paint-order:stroke;stroke:var(--gr-bg);stroke-width:5px;stroke-linejoin:round} /* heller Rand, damit die Notiz über den Planlinien lesbar bleibt */
.ygk-gr__cue-s{letter-spacing:.06em}
.ygk-gr__cue-pad{fill:var(--gr-bg);opacity:0;transition:opacity .6s}
.ygk-gr.is-cue .ygk-gr__cue-pad{opacity:.94}
.ygk-gr__cue-line,.ygk-gr__cue-head{fill:none;stroke:var(--gr-oak);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ygk-gr__cue-line{stroke-dashoffset:var(--cue-len,200);transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) .35s}
.ygk-gr__cue-head{opacity:0;transition:opacity .25s 1.2s}
.ygk-gr__cue text{opacity:0;transition:opacity .6s}
.ygk-gr.is-cue .ygk-gr__cue-line{stroke-dashoffset:0}
.ygk-gr.is-cue .ygk-gr__cue-head,.ygk-gr.is-cue .ygk-gr__cue text{opacity:1}
.ygk-gr__cue{transition:opacity .3s}
.ygk-gr.is-notes .ygk-gr__cue{opacity:0} /* weg, solange die Details zu sehen sind */
@media (prefers-reduced-motion:reduce){.ygk-gr__cue *{transition:none!important}}
/* Menü: Mit dem Punkt „Grundriss" sind es neun Einträge. Die Schrift richtet sich jetzt
   auch nach der Fensterhöhe, damit „Anfrage" auf kleineren Laptops nicht abgeschnitten wird. */
body #menu-overlay{overflow-y:auto}
body #menu-overlay a.menu-link{font-size:clamp(30px,min(5.8vw,calc((100vh - 200px) / 10.4)),64px)}
@supports (height:100dvh){body #menu-overlay a.menu-link{font-size:clamp(30px,min(5.8vw,calc((100dvh - 200px) / 10.4)),64px)}}