/* 58 · Museum – die Reise als Ausstellung: White Cube, Exponate, Objektschilder, Raumnummern */
:root {
  --wall: #f5f5f3;
  --wall-2: #efeeea;
  --floor: #dcd8cf;
  --ink: #1d1d1b;
  --grey: #65645f;
  --hair: #d8d7d1;
  --way: #0f5c4d;
  --sun: #f0b400;
  --oak: #b88c5a;
  --wrap: 1240px;
  --pad: clamp(16px, 4vw, 48px);
  --disp: 'Gilda Display', 'Didot', 'Bodoni 72', 'Times New Roman', Georgia, serif;
  --sans: 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--wall); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
svg use { pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--way); outline-offset: 4px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); margin-right: 10px; vertical-align: .1em; }

/* ===== Infozeile + Kopf ===== */
.infobar { background: var(--ink); color: #e9e8e3; font-size: .8rem; letter-spacing: .02em; }
.infobar-in { display: flex; justify-content: space-between; gap: 20px; min-height: 34px; align-items: center; }
.top { position: relative; z-index: 20; border-bottom: 1px solid var(--hair); background: var(--wall); }
.top-in { display: flex; align-items: center; gap: 36px; min-height: 78px; }
.logo img { width: 64px; }
.nav { margin-inline: auto; }
.plan-title, .plan-here, .nav .nav-call { display: none; }
.nav ul { display: flex; gap: clamp(18px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.nav a { display: grid; text-decoration: none; padding: 6px 0; line-height: 1.25; }
.room { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.rn { font-family: var(--disp); font-size: 1.12rem; border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav a:hover .rn { border-color: var(--ink); }
.tools { display: flex; align-items: center; gap: 22px; }
.phone { font-size: .95rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.phone:hover { text-decoration: underline; }
.lang { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ink); text-decoration: none; font-size: .8rem; font-weight: 600; letter-spacing: .08em; transition: background .2s, color .2s; }
.lang:hover { background: var(--ink); color: var(--wall); }
.menu-btn { display: none; }

/* ===== Gemeinsame Ausstellungs-Bausteine ===== */
.frame { position: relative; padding: 12px; background: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 18px 28px -12px rgba(0,0,0,.32), 0 40px 60px -30px rgba(0,0,0,.25); }
.frame-oak { background: linear-gradient(135deg, #c99d6a, #a87c4c 50%, #c69a66); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.12), 0 18px 28px -12px rgba(0,0,0,.32), 0 40px 60px -30px rgba(0,0,0,.25); }
.frame-white { background: #fbfbf9; box-shadow: inset 0 0 0 1px #e1e0da, 0 1px 1px rgba(0,0,0,.08), 0 18px 28px -12px rgba(0,0,0,.26); }
.mat { background: #fdfdfb; padding: clamp(18px, 3.4vw, 46px); box-shadow: inset 0 2px 4px rgba(0,0,0,.12); }
.mat img { box-shadow: 0 0 0 1px rgba(0,0,0,.08), inset 0 0 0 1px #000; }
.label-card { display: grid; gap: 2px; align-content: start; font-size: .86rem; line-height: 1.45; color: var(--ink); }
.lc-no { font-size: .72rem; letter-spacing: .12em; color: var(--grey); font-variant-numeric: tabular-nums; }
.lc-title { font-family: var(--disp); font-style: italic; font-size: 1.18rem; line-height: 1.25; }
.lc-meta { color: var(--grey); }
.lc-loan { margin-top: 6px; font-size: .78rem; color: var(--grey); }
.lc-text { color: var(--ink); }

.sign-btn { display: inline-flex; align-items: center; gap: 18px; min-height: 52px; padding: 12px 22px; background: var(--ink); color: #fff; text-decoration: none; font-size: .98rem; font-weight: 500; letter-spacing: .01em; transition: background .2s; }
.sign-btn svg { width: 22px; height: 22px; transition: transform .25s; }
.sign-btn:hover { background: var(--way); }
.sign-btn:hover svg { transform: translateX(4px); }
.way { display: inline-flex; align-items: center; gap: 12px; color: var(--way); text-decoration: none; font-size: .98rem; font-weight: 500; }
.way svg { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--way); color: #fff; transition: transform .25s; }
.way:hover span { text-decoration: underline; text-underline-offset: 4px; }
.way:hover svg { transform: translateX(4px); }

/* ===== Hero / Foyer ===== */
.hero { position: relative; padding-top: clamp(28px, 4.4vh, 52px); background: linear-gradient(var(--wall) 0, var(--wall) calc(100% - 64px), var(--floor) calc(100% - 64px)); }
.hero-title { max-width: 980px; }
.kicker { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.hero h1 { margin-top: 12px; font-family: var(--disp); font-size: clamp(2.8rem, 6.6vw, 6.2rem); line-height: 1; letter-spacing: -.012em; text-wrap: balance; }
.hero-wall { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 5vw, 80px); align-items: end; margin-top: clamp(26px, 4vh, 48px); padding-bottom: 98px; }
.saaltext { padding-bottom: 6px; max-width: 420px; }
.st-label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--ink); }
.lead { font-size: 1.02rem; line-height: 1.62; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 24px; }
.exhibit { margin: 0; position: relative; }
.ex-hero { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 30px; align-items: end; }
.ex-hero .frame { grid-column: 1; }
.ex-hero .mat { padding: clamp(16px, 2.4vw, 34px); }
.ex-hero .label-card { padding-bottom: 4px; }
.hang-wires { position: absolute; left: 0; width: calc(100% - 220px); height: 64px; bottom: 100%; pointer-events: none;
  background: linear-gradient(to bottom right, transparent calc(50% - .7px), rgba(29,29,27,.45) 50%, transparent calc(50% + .7px)) 37.5% 0 / 20% 100% no-repeat,
              linear-gradient(to bottom left, transparent calc(50% - .7px), rgba(29,29,27,.45) 50%, transparent calc(50% + .7px)) 62.5% 0 / 20% 100% no-repeat; }
.hang-wires::before { content: ""; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #9a9890; box-shadow: inset 0 1px 1px rgba(255,255,255,.6); }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; border-top: 6px solid #fbfbf9; box-shadow: inset 0 1px 0 var(--hair); }
.bench { position: absolute; left: 50%; bottom: 22px; width: 220px; height: 22px; margin-left: -40px; background: #1d1d1b; box-shadow: 0 22px 12px -14px rgba(0,0,0,.35); }
.bench::before, .bench::after { content: ""; position: absolute; top: 22px; width: 8px; height: 22px; background: #1d1d1b; left: 18px; }
.bench::after { left: auto; right: 18px; }

/* ===== Räume ===== */
.room-sec { padding: clamp(100px, 12vw, 170px) 0 clamp(70px, 8vw, 110px); }
.room-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 clamp(20px, 4vw, 60px); align-items: end; padding-bottom: 26px; border-bottom: 1px solid var(--ink); }
.room-no { display: grid; justify-items: start; line-height: 1; }
.room-no span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.room-no b { font-family: var(--disp); font-weight: 400; font-size: clamp(4.4rem, 8vw, 7rem); line-height: .85; margin-top: 8px; }
.room-kicker { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--way); font-weight: 600; }
.room-head h2 { margin-top: 10px; font-family: var(--disp); font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.06; text-wrap: balance; }
.wall-text { margin: 40px 0 0 calc(120px + clamp(20px, 4vw, 60px)); max-width: 640px; font-size: 1.04rem; }
.wall-text p + p { margin-top: 10px; }
.wt-lead { font-family: var(--disp); font-size: 1.5rem; line-height: 1.3; break-inside: avoid; }
.wall-text .wt-lead { margin-bottom: 14px; }

/* Vitrinen */
.vitrines { list-style: none; margin: clamp(60px, 7vw, 100px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px clamp(24px, 4vw, 56px); }
.vitrines li { display: grid; gap: 22px; align-content: start; }
.case { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(180deg, #fbfbfa, #eceae5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px #d4d2cb, 0 26px 22px -20px rgba(0,0,0,.35); }
.case::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 38%, rgba(255,255,255,0) 46%, rgba(255,255,255,0) 60%, rgba(255,255,255,.5) 64%, rgba(255,255,255,0) 68%); pointer-events: none; }
.case::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -16px; height: 16px; background: #e4e2dc; box-shadow: 0 1px 0 #cfcdc6; }
.case svg { width: 54%; height: auto; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.case svg circle { fill: var(--wall); }
.vitrines li:nth-child(odd) .case svg circle:last-of-type { fill: var(--sun); stroke: var(--ink); }
.vitrines .label-card { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--ink); }
.vitrines .label-card p { margin-top: 6px; font-size: .95rem; color: #3a3a37; hyphens: auto; }

/* Wandkarte */
.ex-map { margin-top: clamp(90px, 10vw, 140px); display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 34px; align-items: end; }
.mat-wide { padding: clamp(16px, 3vw, 40px); }
.map { display: block; width: 100%; height: auto; background: #f7f5ef; }
.map .grat path { stroke: #e3e0d7; stroke-width: 1; fill: none; }
.map .coast { fill: none; stroke: #c9c4b6; stroke-width: 1.4; stroke-dasharray: 1 5; stroke-linecap: round; }
.map .leg { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.map .leg-car { stroke-dasharray: 5 5; stroke: var(--way); stroke-width: 2.2; }
.map .stops circle { fill: var(--wall); stroke: var(--ink); stroke-width: 2; }
.map .stops circle:first-child { fill: var(--sun); }
.map .codes text { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: .1em; fill: var(--ink); }
.js .map .leg { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1); }
.js .map .leg-car { stroke-dasharray: 5 5; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s 1.2s; }
.js .map.drawn .leg { stroke-dashoffset: 0; }
.js .map.drawn .leg-car { opacity: 1; }
.label-wide .lc-text { margin-top: 6px; }

/* Kennzahlen */
.numbers { margin: clamp(90px, 10vw, 140px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.numbers div { padding: 22px 24px 0 0; }
.numbers div + div { padding-left: 24px; border-left: 1px solid var(--hair); }
.numbers dt { font-family: var(--disp); font-size: clamp(3rem, 5.4vw, 5rem); line-height: 1; white-space: nowrap; }
.numbers dd { margin: 10px 0 0; font-size: .95rem; color: var(--grey); max-width: 26ch; }
.way-next { margin-top: clamp(60px, 7vw, 90px); }

/* Raum 2: Hängung */
.room-2 { background: var(--wall-2); }
.hang { list-style: none; margin: clamp(70px, 8vw, 110px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 90px clamp(36px, 5vw, 80px); align-items: center; }
.work { display: grid; gap: 26px; justify-items: center; }
.work .frame { width: 100%; }
.w-p .frame { width: 78%; }
.w-s .frame { width: 86%; }
.work .mat { padding: clamp(16px, 2.6vw, 34px); }
.work .label-card { width: 100%; justify-self: center; }
.w-p .label-card { width: 78%; }
.w-s .label-card { width: 86%; }
.work .label-card p { margin-top: 6px; font-size: .92rem; color: #3a3a37; hyphens: auto; }
.work:hover .frame { transform: translateY(-4px); }
.frame { transition: transform .4s; }

/* Raum 3: Rundgang */
.tour { list-style: none; margin: clamp(60px, 7vw, 90px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; position: relative; }
.tour::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; border-top: 1px dashed var(--grey); }
.tour li { position: relative; padding-right: 10px; }
.audio { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--wall); border: 1.5px solid var(--ink); font-family: var(--disp); font-size: 1.3rem; }
.tour li:last-child .audio { background: var(--sun); border-color: var(--sun); }
.tour h3 { margin-top: 22px; font-family: var(--disp); font-size: 1.7rem; line-height: 1.15; }
.tour p { margin-top: 8px; font-size: .98rem; color: #3a3a37; }

/* Raum 4 */
.room-4 { background: var(--wall-2); }
.about-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: center; margin-top: clamp(50px, 6vw, 80px); }
.ex-portrait { display: grid; gap: 24px; }
.ex-portrait .label-card { max-width: 300px; }
.about-text .wt-lead { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.4; }
.feats { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; border-top: 1px solid var(--ink); }
.feats li { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 1rem; }
.feats li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 12px; background: var(--way); vertical-align: .15em; }

/* Besucherinformation */
.visit { padding: clamp(100px, 12vw, 170px) 0 clamp(90px, 10vw, 140px); }
.visit .room-no b { font-style: italic; }
.visit-intro { margin: 34px 0 0 calc(120px + clamp(20px, 4vw, 60px)); font-family: var(--disp); font-size: 1.5rem; }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; margin-top: clamp(44px, 5vw, 70px); border-top: 1px solid var(--ink); }
.v-col { padding: 24px 28px 26px 0; }
.v-col + .v-col { padding-left: 28px; border-left: 1px solid var(--hair); }
.v-col h3 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); margin-bottom: 14px; font-weight: 500; }
.v-hours table { border-collapse: collapse; width: 100%; }
.v-hours th, .v-hours td { text-align: left; vertical-align: top; padding: 10px 0; border-bottom: 1px solid var(--hair); font-weight: 400; }
.v-hours th { padding-right: 16px; }
.v-hours tr:first-child td { font-family: var(--disp); font-size: 1.7rem; line-height: 1.1; }
.v-hours td { text-align: right; }
.geo { margin-top: 10px; font-size: .85rem; color: var(--grey); }
.v-list { list-style: none; margin: 0; padding: 0; }
.v-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 14px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.v-list span { color: var(--grey); font-size: .9rem; }
.v-list a { text-underline-offset: 3px; text-decoration-color: var(--hair); }
.v-list a:hover { text-decoration-color: var(--ink); }
.ctas-visit { margin-top: 40px; }

/* ===== Fuß ===== */
.foot { background: var(--ink); color: #e9e8e3; }
.foot-in { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; padding-block: 40px 56px; }
.foot-logo { display: block; padding: 10px 12px; background: var(--wall); }
.foot-logo img { width: 70px; }
.foot-copy { font-size: .88rem; line-height: 1.7; color: #c9c8c2; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.foot-links a { text-decoration: none; font-size: .92rem; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ===== Rechtsseiten ===== */
.legal-hero { padding: clamp(50px, 7vw, 100px) 0 0; }
.legal-hero .room-head h1 { margin-top: 10px; font-family: var(--disp); font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.04; hyphens: auto; overflow-wrap: break-word; }
.back { display: inline-block; margin-top: 22px; color: var(--way); font-weight: 500; }
.legal-wrap { display: grid; grid-template-columns: 200px minmax(0, 68ch); gap: clamp(30px, 6vw, 100px); padding-block: clamp(44px, 6vw, 80px) clamp(90px, 10vw, 140px); }
.legal-nav { list-style: none; margin: 0; padding: 0; position: sticky; top: 24px; align-self: start; border-top: 1px solid var(--ink); }
.legal-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--hair); text-decoration: none; font-family: var(--disp); font-size: 1.1rem; }
.legal-nav a:hover { color: var(--way); }
.legal-body { font-size: 1.02rem; line-height: 1.7; hyphens: auto; overflow-wrap: break-word; }
.legal-body h2 { margin: 2.2em 0 .6em; font-family: var(--disp); font-size: 1.6rem; line-height: 1.2; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 1em; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li::marker { color: var(--way); }
.legal-body a { color: var(--way); text-underline-offset: 3px; }
.legal-body .legal-note { padding: 14px 18px; background: #fff; border-left: 2px solid var(--ink); font-size: .92rem; color: #3a3a37; }
.legal-body .legal-address { display: inline-block; padding: 16px 20px 16px 16px; border-left: 2px solid var(--ink); background: #fff; font-size: .95rem; }

/* ===== Responsiv ===== */
@media (max-width: 1100px) {
  .vitrines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 50px; }
  .tour::before { display: none; }
  .ex-hero { grid-template-columns: 1fr; }
  .hang-wires { display: none; }
  .visit-grid { grid-template-columns: 1fr 1fr; }
  .v-col:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
}
@media (max-width: 960px) {
  .top-in { min-height: 68px; gap: 14px; }
  .logo img { width: 54px; }
  .phone { display: none; }
  .tools { margin-left: auto; gap: 12px; }
  .menu-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); background: var(--wall); color: var(--ink); font: 500 .95rem/1 var(--sans); cursor: pointer; }
  .bars { display: grid; gap: 5px; width: 18px; }
  .bars i { display: block; height: 1.5px; background: currentColor; transition: transform .25s; }
  .menu-btn[aria-expanded="true"] .bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .bars i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  /* Mobilmenü als Saalplan */
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 20px var(--pad) 26px; background: var(--wall); border-bottom: 1px solid var(--ink); box-shadow: 0 30px 40px -20px rgba(0,0,0,.25); }
  .menu-open .nav { display: block; }
  .plan-title { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px; }
  .nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 3px solid var(--ink); }
  .nav li { position: relative; }
  .nav li.r1 { border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
  .nav li.r2 { border-bottom: 3px solid var(--ink); }
  .nav li.r3 { border-right: 3px solid var(--ink); }
  .nav li::after { content: ""; position: absolute; background: var(--wall); }
  .nav li.r1::after { right: -3px; top: 38%; width: 3px; height: 26px; }
  .nav li.r2::after { bottom: -3px; left: 40%; width: 30px; height: 3px; }
  .nav li.r3::after { top: -3px; left: 30%; width: 30px; height: 3px; }
  .nav a { min-height: 110px; padding: 14px 16px; align-content: space-between; }
  .nav a:hover { background: var(--wall-2); }
  .rn { font-size: 1.4rem; }
  .plan-here { display: block; margin-top: 12px; font-size: .82rem; color: var(--grey); }
  .nav .nav-call { display: inline-flex; min-height: 0; margin-top: 14px; padding: 12px 18px; background: var(--ink); color: #fff; text-decoration: none; }
  html:not(.js) .top-in { flex-wrap: wrap; }
  html:not(.js) .nav { width: 100%; order: 3; }
  .hero-wall { grid-template-columns: 1fr; }
  .saaltext { max-width: 60ch; }
  .room-head { grid-template-columns: 80px minmax(0, 1fr); }
  .wall-text, .visit-intro { margin-left: 0; }
  .ex-map { grid-template-columns: 1fr; }
  .about-in { grid-template-columns: 1fr; }
  .ex-portrait { max-width: 520px; }
  .foot-in { grid-template-columns: 1fr; }
  .legal-wrap { grid-template-columns: 1fr; }
  .legal-nav { position: static; display: flex; flex-wrap: wrap; gap: 0 24px; border-top: 0; }
  .legal-nav a { border-bottom: 0; }
}
@media (max-width: 640px) {
  .ib-addr { display: none; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .hero-wall { padding-bottom: 90px; }
  .sign-btn { width: 100%; justify-content: space-between; }
  .bench { width: 150px; margin-left: -75px; }
  .room-no b { font-size: 3.6rem; }
  .room-head { grid-template-columns: 64px minmax(0, 1fr); }
  .room-head h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .vitrines { grid-template-columns: 1fr; gap: 56px; }
  .hang { grid-template-columns: 1fr; gap: 70px; }
  .tour { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr; }
  .numbers div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .numbers div { padding-bottom: 20px; }
  .feats { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .v-col + .v-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .v-hours tr:first-child td { font-size: 1.4rem; }
  .map .codes text { font-size: 30px; }
  .map .leg { stroke-width: 3; }
  .mat-wide { padding: 10px; }
  .foot-links { flex-direction: column; }
}