/* Marte Holzbau — Entwurf (VCSLV). Tokens, base, sections, then the Screens and Type system layers last. */
@font-face{font-family:'Hind';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hind-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hind';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hind-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hind';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hind-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Petrona';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/petrona-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Petrona';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/petrona-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --blue: #005d89; --blue-d: #0a3f5c; --night: #071c27; --night-2: #0c2836;
  --yel: #ffcc00; --yel-d: #e6b800; --paper: #f4f1ea; --paper-2: #ebe6da;
  --ink: #10232d; --muted: #586871; --line: rgba(16, 35, 45, .14); --line-d: rgba(255, 255, 255, .16);
  --serif: 'Petrona', Georgia, serif; --sans: 'Hind', 'Helvetica Neue', Arial, sans-serif;
  --hdr-h: 68px; --gut: clamp(18px, 4.4vw, 64px); --max: 1360px; --r: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 0; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.55 var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--yel); color: var(--ink); padding: 10px 14px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--yel); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.show-s { display: none; }
@media (max-width: 719px) { .hide-s { display: none; } .show-s { display: inline; } }
em { font-style: italic; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 22px 11px; border: 1px solid transparent; border-radius: var(--r);
  font: 600 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; overflow: hidden; isolation: isolate;
  -webkit-touch-callout: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ease), background-color .25s, border-color .25s, color .25s; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; margin-top: -2px; }
.btn:active { transform: scale(.97); }
.btn--yel { background: var(--yel); color: var(--ink); }
.btn--yel:hover { background: #ffd633; }
.btn--yel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn--yel:hover::after { transform: translateX(120%); }
.btn--line { border-color: currentColor; background: transparent; }
.btn--line::after { content: ''; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: .14; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.btn--line:hover::after { transform: scaleX(1); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn--ghost:hover { border-color: currentColor; color: var(--ink); }
.btn[disabled] { opacity: .35; pointer-events: none; }

/* ---------- header ---------- */
.hdr { position: fixed; z-index: 40; inset: 0 0 auto; height: var(--hdr-h); display: flex; align-items: center; gap: 18px; padding: 0 var(--gut); color: #fff;
  transition: transform .45s var(--ease), background-color .35s, box-shadow .35s; }
.hdr.is-solid { background: rgba(7, 28, 39, .94); box-shadow: 0 1px 0 var(--line-d); }
.hdr.is-hidden { transform: translateY(-105%); }
.hdr__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; transition: opacity .4s; }
.hdr__brand svg { width: 36px; height: 37px; flex: none; }
.hdr__brand span { font: 500 19px/1 var(--serif); letter-spacing: .01em; padding-top: 2px; }
.hdr__brand em { color: var(--yel); }
.hdr.has-crest .hdr__brand { opacity: 0; pointer-events: none; }
.hdr__nav { display: flex; gap: clamp(12px, 1.5vw, 24px); }
.hdr__nav a { position: relative; text-decoration: none; font: 500 14.5px/1 var(--sans); letter-spacing: .02em; padding: 8px 0 6px; opacity: .88; }
.hdr__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--yel); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hdr__nav a:hover { opacity: 1; } .hdr__nav a:hover::after, .hdr__nav a.is-cur::after { transform: scaleX(1); }
.hdr__call { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 500 15px/1 var(--sans); padding-top: 2px; }
.hdr__call svg { width: 16px; height: 16px; fill: var(--yel); margin-top: -3px; }
.hdr__cta { min-height: 40px; padding: 11px 16px 9px; font-size: 13px; }
.hdr__menu { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 2px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.hdr__menu i { position: relative; width: 22px; height: 2px; background: currentColor; transition: background .2s; }
.hdr__menu i::before, .hdr__menu i::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.hdr__menu i::before { top: -7px; } .hdr__menu i::after { top: 7px; }
.menu-open .hdr__menu i { background: transparent; } .menu-open .hdr__menu i::before { transform: translateY(7px) rotate(45deg); } .menu-open .hdr__menu i::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1180px) {
  .hdr__nav { position: fixed; inset: var(--hdr-h) 0 auto; flex-direction: column; gap: 0; padding: 8px var(--gut) 22px; background: rgba(7, 28, 39, .98); box-shadow: 0 1px 0 var(--line-d);
    visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s; }
  .hdr__nav a { font: 400 26px/1.1 var(--serif); padding: 12px 0; border-bottom: 1px solid var(--line-d); }
  .hdr__nav a::after { display: none; }
  .menu-open .hdr__nav { visibility: visible; opacity: 1; transform: none; transition: opacity .3s, transform .3s var(--ease); }
  .menu-open .hdr { background: rgba(7, 28, 39, .98); }
  .hdr__menu { display: flex; }
  .menu-open .hdr__cta, .menu-open .hdr__call { display: none; }
}
@media (max-width: 719px) {
  :root { --hdr-h: 58px; }
  .hdr { gap: 12px; }
  .hdr__call span, .hdr__cta { display: none; }
  .hdr__call { width: 40px; height: 40px; justify-content: center; border: 1px solid var(--line-d); border-radius: 50%; }
  .hdr__call svg { margin: 0; }
  .hdr__brand svg { width: 32px; height: 33px; } .hdr__brand span { font-size: 17px; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--hdr-h); color: #fff; background: var(--night); overflow: hidden; overflow-anchor: none; }
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__bg picture, .hero__fg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__fg { object-fit: cover; object-position: 42% 62%; transform-origin: 46% 60%; }
.hero__shade { position: absolute; inset: 0; background:
  radial-gradient(48% 36% at 50% var(--crest-y, 34%), rgba(5, 20, 30, .56), rgba(5, 20, 30, .22) 62%, rgba(5, 20, 30, 0) 100%),
  linear-gradient(180deg, rgba(5, 20, 30, .66) 0%, rgba(5, 20, 30, .28) 22%, rgba(5, 20, 30, .12) 46%, rgba(5, 20, 30, .42) 70%, rgba(5, 20, 30, .9) 100%); }
.crest { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(14px, 3svh, 40px) var(--gut) clamp(12px, 2.4svh, 28px); }
.crest__mark { width: clamp(108px, 17svh, 176px); height: auto; overflow: visible; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35)); }
.crest__club { margin: clamp(14px, 2.6svh, 26px) 0 0; font: 600 12px/1.6 var(--sans); letter-spacing: .5em; text-transform: uppercase; color: var(--yel); padding-left: .5em; }
.crest__motto { margin: clamp(4px, 1svh, 10px) 0 0; font: 400 clamp(2.9rem, min(6vw, 9.4svh), 6rem)/1.02 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.crest__motto em { font-style: italic; }
.crest__w { display: inline-block; }
.crest__since { display: flex; align-items: center; gap: 14px; margin: clamp(8px, 1.6svh, 16px) 0 0; font: 500 13px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; opacity: .9; }
.crest__since i { display: block; width: 46px; height: 1px; background: rgba(255, 255, 255, .55); }
.crest__since span { padding-left: .3em; padding-top: 2px; }

/* the console: what are you planning, where — and the matching references */
.con { position: relative; z-index: 2; width: min(1240px, calc(100% - 2 * var(--gut))); margin: 0 auto clamp(18px, 4svh, 44px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 0;
  background: rgba(6, 22, 31, .86); border: 1px solid var(--line-d); border-radius: var(--r); }
.con__ask { display: flex; gap: 18px; padding: 18px 22px; border-right: 1px solid var(--line-d); }
.con__ask .con__q:first-child { flex: none; }
.con__q { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.con__ort { flex: 1; }
.con__out { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px 14px 22px; }
.con__count { display: flex; align-items: center; gap: 10px; margin: 0; }
.con__n { font: 400 46px/1 var(--serif); color: var(--yel); min-width: 1.1ch; }
.con__count span { font: 500 13px/1.25 var(--sans); max-width: 9ch; opacity: .82; padding-top: 3px; }
.con__near { display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; padding: 6px; margin: -6px; border-radius: var(--r); transition: background-color .25s; }
.con__near:hover { background: rgba(255, 255, 255, .07); }
.con__near img { width: 74px; height: 52px; object-fit: cover; border-radius: 2px; flex: none; }
.con__near span { display: flex; flex-direction: column; min-width: 0; }
.con__near small { font: 500 var(--t-cap)/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.con__near b { font: 500 17px/1.2 var(--serif); }
.con__near small { white-space: nowrap; }
.con__near em { font: 500 13px/1.4 var(--sans); font-style: normal; color: var(--yel); }
.con__go { white-space: nowrap; }
.sel { position: relative; display: block; }
.sel::after { content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; opacity: .7; }
.sel select { width: 100%; height: 44px; padding: 4px 36px 0 14px; appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--line-d); border-radius: var(--r); font: 500 16px/1 var(--sans); color: inherit; }
.con .sel select option { color: var(--ink); }
.seg { position: relative; display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line-d); border-radius: var(--r); }
.seg button { flex: 1 1 auto; min-height: 36px; padding: 9px 13px 6px; border-radius: 2px; font: 500 15px/1 var(--sans); white-space: nowrap; transition: background-color .25s, color .25s; }
.seg button:hover { background: rgba(255, 255, 255, .08); }
.seg button[aria-checked="true"] { background: var(--yel); color: var(--ink); }
.seg--sm button { min-height: 30px; padding: 7px 12px 5px; font-size: 13px; }
@media (max-width: 1360px) {
  .con { grid-template-columns: minmax(0, 1fr); width: min(980px, calc(100% - 2 * var(--gut))); }
  .con__ask { padding-block: 14px; } .con__out { padding-block: 12px; }
  .con__ask { border-right: 0; border-bottom: 1px solid var(--line-d); }
}
@media (max-width: 719px) {
  .hero__fg { object-position: 50% 70%; }
  .crest { justify-content: flex-start; padding-top: clamp(22px, 5svh, 54px); }
  .crest__mark { width: clamp(96px, min(30vw, 15svh), 140px); }
  .crest__club { letter-spacing: .4em; font-size: 11px; }
  .crest__motto { font-size: clamp(2.3rem, 11vw, 3.1rem); white-space: normal; line-height: 1.04; }
  .crest__motto em { display: block; }
  .con { margin-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .con__ask { flex-direction: column; gap: 12px; padding: 14px 14px 12px; }
  .con__ort { flex-direction: row; align-items: center; gap: 12px; }
  .con__ort .cap { flex: none; }
  .con__ort .sel { flex: 1; }
  .con__ort .sel select { height: 40px; }
  .seg button { padding-inline: 8px; font-size: 14.5px; }
  .con__out { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 12px 14px 14px; }
  .con__n { font-size: 38px; }
  .con__count span { display: none; }
  .con__near img { width: 56px; height: 42px; }
  .con__near b { font-size: 15.5px; }
  .con__go { grid-column: 1 / -1; width: 100%; }
}

/* ---------- sections ---------- */
.h-label { margin: 0 0 12px; color: var(--blue); }
.h2 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.012em; }
.h2 em { font-style: italic; }
.dark { color: #fff; }
.ref, .team, .ftr { background: var(--night); color: #fff; }
.ref .h-label, .team .h-label { color: var(--yel); }
.flow { background: var(--blue); color: #fff; }
.flow .h-label { color: var(--yel); }
.lehre { background: var(--yel); color: var(--ink); }
.lehre .h-label { color: var(--blue-d); }
.cap { display: block; font: 500 var(--t-cap)/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 10px 14px 7px; border: 1px solid currentColor; border-radius: 40px; font: 500 15px/1 var(--sans); opacity: .78; transition: background-color .25s, color .25s, opacity .25s, border-color .25s; }
.chips button b { font: 500 14px/1 var(--sans); opacity: .7; }
.chips button:hover { opacity: 1; background: rgba(127, 127, 127, .12); }
.chips button[aria-selected="true"], .chips button[aria-pressed="true"] { opacity: 1; background: var(--yel); border-color: var(--yel); color: var(--ink); }

/* Leistungen */
.lei__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.lei__tabs { display: flex; flex-direction: column; margin-top: clamp(20px, 3.4svh, 40px); border-top: 1px solid var(--line); }
.lei__tabs button { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 6px; text-align: left; padding: clamp(12px, 2.1svh, 20px) 4px; border-bottom: 1px solid var(--line); transition: background-color .3s; position: relative; }
.lei__tabs button::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--yel); transform: scaleY(0); transition: transform .35s var(--ease); }
.lei__tabs button:hover { background: rgba(0, 93, 137, .05); }
.lei__tabs button[aria-selected="true"]::before { transform: scaleY(1); }
.lei__n { grid-row: span 2; font: 400 15px/1.7 var(--serif); color: var(--blue); padding-left: 12px; }
.lei__tabs b { font: 400 var(--h3m)/1.15 var(--serif); }
.lei__tabs button[aria-selected="false"] b { color: var(--muted); }
.lei__tabs small { font: 400 var(--t-small)/1.45 var(--sans); color: var(--muted); margin-top: 4px; }
.lei__stage { position: relative; margin: 0; }
.lei__imgs { position: relative; height: clamp(300px, calc(var(--scr-h) - 150px), 640px); overflow: hidden; border-radius: var(--r); background: var(--paper-2); }
.lei__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.lei__img.is-on { opacity: 1; }
.lei__cap { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; }
.lei__quote { margin: 0; font: italic 400 var(--quote)/1.35 var(--serif); max-width: 34ch; }
.lei__go { flex: none; color: var(--blue); }

/* Referenzen */
.ref__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 22px clamp(24px, 3vw, 48px); }
.ref__top { grid-column: 2; grid-row: 1; }
.ref__filter { margin-top: 18px; }
.ref__filter button { color: #fff; }
.ref__stage { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; min-width: 0; }
.ref__frame { position: relative; height: clamp(300px, calc(var(--scr-h) - 70px), 760px); overflow: hidden; border-radius: var(--r); background: #0d2633; }
.ref__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.ref__img.is-on { opacity: 1; }
.ref__nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border-radius: 50%; background: rgba(7, 28, 39, .62); color: #fff; transition: background-color .25s, transform .2s; }
.ref__nav:hover { background: var(--yel); color: var(--ink); }
.ref__nav:active { transform: scale(.94); }
.ref__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.ref__nav--p { left: 14px; } .ref__nav--n { right: 14px; }
.ref__vn { position: absolute; left: 14px; top: 14px; background: rgba(7, 28, 39, .78); border-radius: var(--r); }
.ref__vn .seg { border-color: transparent; }
.ref__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding-top: 14px; }
.ref__t { margin: 0; font: 400 var(--h3m)/1.1 var(--serif); }
.ref__m { margin: 4px 0 0; font: 400 var(--t-small)/1.4 var(--sans); opacity: .72; }
.ref__count { margin: 0; font: 400 20px/1 var(--serif); color: var(--yel); white-space: nowrap; }
.ref__list { grid-column: 2; grid-row: 2; list-style: none; margin: 0; padding: 0 6px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-content: start; overflow-y: auto; max-height: calc(var(--scr-h) - 210px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.ref__list li { min-width: 0; }
.ref__list li[hidden] { display: none; }
.ref__it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; text-align: left; border-radius: var(--r); border: 1px solid transparent; transition: background-color .25s, border-color .25s; }
.ref__it:hover { background: rgba(255, 255, 255, .06); }
.ref__it[aria-pressed="true"] { border-color: var(--yel); background: rgba(255, 204, 0, .08); }
.ref__it img { width: 64px; height: 46px; object-fit: cover; border-radius: 2px; flex: none; }
.ref__it span { display: flex; flex-direction: column; min-width: 0; }
.ref__it b { font: 500 15px/1.2 var(--sans); hyphens: auto; overflow-wrap: break-word; }
.ref__it small { font: 400 13px/1.35 var(--sans); opacity: .65; hyphens: auto; }

@media (min-width: 900px) and (max-width: 1240px) { .ref__list { grid-template-columns: minmax(0, 1fr); } }

/* Karte */
.map__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.map__places { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(18px, 3svh, 32px); }
.map__places button { color: var(--ink); }
.map__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; min-height: 172px; }
.mcard { display: flex; flex-direction: column; text-align: left; min-width: 0; border-radius: var(--r); transition: transform .3s var(--ease); }
.mcard:hover { transform: translateY(-3px); }
.mcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--paper-2); }
.mcard b { margin-top: 8px; font: 500 15px/1.2 var(--sans); }
.mcard small { font: 400 13px/1.35 var(--sans); color: var(--muted); }
.mcard--text { grid-column: span 2; padding: 16px; background: #fff; border: 1px solid var(--line); justify-content: flex-start; }
.mcard--text b { margin-top: 0; font: 400 19px/1.2 var(--serif); }
.mcard--text p { margin: 8px 0 0; font: 400 13.5px/1.45 var(--sans); color: var(--muted); }
.map__board { position: relative; height: clamp(320px, var(--scr-h), 820px); aspect-ratio: 1000 / 1490; justify-self: center; max-width: 100%; }
.map__img { width: 100%; height: 100%; object-fit: contain; }
.map__pins { position: absolute; inset: 0; }
.pin { position: absolute; display: flex; }
.pin--r { transform: translate(12px, -50%); }
.pin--l { transform: translate(calc(-100% - 12px), -50%); }
.pin::before { content: ''; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--blue); box-sizing: border-box; transition: transform .25s var(--ease); }
.pin--r::before { left: -18px; } .pin--l::before { right: -18px; }
.pin__b { display: flex; align-items: center; gap: 6px; padding: 7px 10px 5px; border-radius: 30px; background: #fff; color: var(--ink); border: 1px solid var(--line); font: 600 13px/1 var(--sans); white-space: nowrap; box-shadow: 0 6px 16px rgba(16, 35, 45, .12); transition: background-color .25s, color .25s, border-color .25s; }
.pin__b i { font-style: normal; display: grid; place-items: center; min-width: 20px; height: 20px; margin: -2px -4px -1px 0; padding-top: 2px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 11.5px; }
.pin:hover::before, .pin.is-on::before { transform: scale(1.25); }
.pin:hover .pin__b { border-color: var(--blue); }
.pin.is-on .pin__b { background: var(--yel); border-color: var(--yel); }
.pin.is-on .pin__b i { background: var(--ink); }
.pin.is-on::before { background: var(--yel); box-shadow: 0 0 0 1px var(--ink); }
.pin--home::before { background: var(--yel); box-shadow: 0 0 0 1px var(--ink); }
.pin--home .pin__b { padding: 3px; border-radius: 3px; background: var(--night); border-color: var(--night); }
.pin--home .pin__b svg { width: 24px; height: 25px; display: block; }
.pin--home .pin__b span { color: #fff; padding: 3px 6px 0 2px; font-size: 12px; }
@media (max-width: 719px) { .pin__b { padding: 6px 8px 4px; font-size: 12px; } .pin--home { transform: translate(-50%, 9px); } .pin--home::before { left: 50%; top: -9px; margin: -6px 0 0 -6px; } .pin--home .pin__b span { display: none; } .pin--home .pin__b svg { width: 20px; height: 21px; } }
.map__src { position: absolute; right: 0; bottom: -22px; margin: 0; font: 400 11px/1 var(--sans); color: var(--muted); }

/* Anfrage */
.flow__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 22px clamp(24px, 3.4vw, 56px); }
.flow__head { grid-column: 1 / -1; }
.flow__card { display: flex; flex-direction: column; min-width: 0; background: var(--paper); color: var(--ink); border-radius: var(--r); box-shadow: 0 30px 60px rgba(0, 20, 32, .28); }
.flow__steps { display: flex; justify-content: space-between; gap: 4px; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.flow__steps li { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px; color: var(--muted); font: 500 14px/1 var(--sans); border-bottom: 3px solid transparent; margin-bottom: -1px; min-width: 0; }
.flow__steps li span { display: grid; place-items: center; width: 24px; height: 24px; padding-top: 2px; border-radius: 50%; border: 1px solid currentColor; font-size: 12px; flex: none; }
.flow__steps li b { font-weight: 500; white-space: nowrap; padding-top: 2px; }
.flow__steps li.is-on { color: var(--ink); border-bottom-color: var(--yel); }
.flow__steps li.is-done { color: var(--blue); }
.flow__steps li.is-done span { background: var(--blue); border-color: var(--blue); color: #fff; }
.flow__body { position: relative; flex: 1; padding: clamp(18px, 2.8svh, 30px) clamp(18px, 2.4vw, 32px); min-height: 330px; }
.flow__p { display: none; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.flow__p.is-on { display: block; }
.flow__q { padding: 0; margin: 0 0 16px; font: 400 var(--h3m)/1.15 var(--serif); }
.pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pick button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 12px; min-height: 76px; text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .25s, background-color .25s, transform .15s; font: 500 17px/1.15 var(--sans); }
.pick button small { font: 400 13px/1.3 var(--sans); color: var(--muted); }
.pick button:hover { border-color: var(--blue); }
.pick button:active { transform: scale(.98); }
.pick button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.pick button[aria-pressed="true"] small { color: rgba(255, 255, 255, .78); }
.flow__hint { margin: 14px 0 0; font: 400 var(--t-small)/1.45 var(--sans); color: var(--muted); }
.flow__hint.is-warn { color: #a33b16; font-weight: 500; }
.fld { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; min-width: 0; }
.fld .cap { opacity: .62; }
.fld2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.fld input[type="text"], .fld input[type="tel"], .fld input[type="email"] { height: 46px; padding: 4px 14px 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font: 400 16px/1 var(--sans); }
.fld input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.fld input[aria-invalid="true"] { border-color: #a33b16; }
.flow .sel select, .snup .sel select { border-color: var(--line); background: #fff; color: var(--ink); }
.chips--pick button { color: var(--ink); border-color: var(--line); opacity: 1; background: #fff; }
.chips--pick button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.fld--range { gap: 4px; }
.flow__big { font: 400 44px/1.1 var(--serif); color: var(--blue); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue) var(--p, 40%), var(--line) var(--p, 40%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--blue); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--yel); border: 2px solid var(--ink); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--yel); border: 2px solid var(--ink); }
.drop { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px dashed rgba(16, 35, 45, .35); border-radius: var(--r); cursor: pointer; background: #fff; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop__btn { padding: 11px 14px 8px; background: var(--ink); color: #fff; border-radius: var(--r); font: 600 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.drop__note { font: 400 13.5px/1.35 var(--sans); color: var(--muted); }
.drop:focus-within { outline: 2px solid var(--blue); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; }
.flow__nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px clamp(18px, 2.4vw, 32px); border-top: 1px solid var(--line); }
.flow__pos { margin: 0; font: 400 var(--t-small)/1 var(--sans); color: var(--muted); padding-top: 3px; }
.flow__ticket { outline: none; }
.flow__tt { margin: 6px 0 14px; font: 400 var(--h3m)/1.15 var(--serif); }
.flow__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; font: 400 15px/1.4 var(--sans); }
.flow__dl dt { color: var(--muted); }
.flow__dl dd { margin: 0; font-weight: 500; }
.flow__note { margin: 16px 0 0; font: 400 var(--t-small)/1.45 var(--sans); color: var(--muted); max-width: 52ch; }
.flow__end { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.flow__end .btn--line { color: var(--blue); }
.is-ticket .flow__nav, .is-ticket .flow__steps { display: none; }
.flow__aside { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.flow__match { display: grid; gap: 10px; }
.fm { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; padding: 8px; border-radius: var(--r); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background-color .25s; }
.fm:hover { background: rgba(255, 255, 255, .14); }
.fm img { width: 112px; height: 76px; object-fit: cover; border-radius: 2px; }
.fm b { display: block; font: 400 19px/1.15 var(--serif); }
.fm small { display: block; margin-top: 4px; font: 400 13.5px/1.35 var(--sans); opacity: .78; }
.fm em { font-style: normal; color: var(--yel); }
.flow__bring ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.flow__bring li { position: relative; padding-left: 26px; font: 400 15px/1.4 var(--sans); }
.flow__bring li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border: solid var(--yel); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.flow__ticket .fm { background: #fff; border-color: var(--line); color: var(--ink); }
.flow__ticket .fm em { color: var(--blue); }
.flow__ticket .flow__match { margin-top: 14px; }

/* Betrieb */
.biz__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4.4vw, 80px); align-items: center; }
.biz__fig { margin: 0; height: clamp(320px, var(--scr-h), 800px); }
.biz__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: var(--r); }
.biz__lead { margin: 18px 0 0; font: italic 400 var(--quote)/1.4 var(--serif); color: var(--blue-d); max-width: 40ch; }
.biz__time { list-style: none; margin: clamp(18px, 3svh, 34px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.biz__time li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: clamp(9px, 1.6svh, 14px) 0; border-bottom: 1px solid var(--line); }
.biz__time b { font: 400 26px/1 var(--serif); color: var(--blue); }
.biz__time span { font: 400 var(--t-body)/1.45 var(--sans); }
.biz__nums { display: flex; gap: clamp(20px, 3.4vw, 54px); margin-top: clamp(18px, 3svh, 32px); }
.biz__nums p { margin: 0; display: flex; flex-direction: column; }
.biz__nums b { font: 400 clamp(2.4rem, 4.2svh, 3.4rem)/1 var(--serif); color: var(--ink); }
.biz__nums span { margin-top: 6px; font: 500 var(--t-cap)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Team */
.team__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto minmax(0, 1fr); gap: 26px clamp(28px, 4vw, 64px); align-items: start; }
.team__head { grid-column: 1; }
.team__gf { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.gf img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); max-height: calc(var(--scr-h) - 260px); }
.gf div { padding-top: 12px; }
.gf__n { margin: 0; font: 400 var(--h3s)/1.15 var(--serif); }
.gf .cap { margin-top: 2px; }
.gf__tel { display: inline-block; margin-top: 8px; font: 500 16px/1 var(--sans); color: var(--yel); text-decoration: none; border-bottom: 1px solid rgba(255, 204, 0, .4); padding: 3px 0 4px; }
.gf__tel:hover { border-bottom-color: var(--yel); }
.crew { grid-column: 2; grid-row: 1 / span 2; align-self: center; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
.crew li { display: flex; flex-direction: column; min-width: 0; }
.crew img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); max-height: calc((var(--scr-h) - 120px) / 2); }
.crew b { margin-top: 10px; font: 500 16px/1.2 var(--sans); }
.crew span { font: 400 13.5px/1.35 var(--sans); opacity: .7; }
.crew__founder img { filter: none; }

/* Lehre */
.lehre__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 80px); align-items: center; }
.lehre__fig { margin: 0; height: clamp(300px, var(--scr-h), 760px); }
.lehre__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: var(--r); }
.lehre__lead { margin: 16px 0 0; font: 400 var(--t-lead)/1.5 var(--sans); max-width: 40ch; }
.snup { margin-top: clamp(18px, 3svh, 32px); max-width: 520px; }
.snup .chips--pick button { border-color: rgba(16, 35, 45, .3); }
.snup .chips--pick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.snup .fld input { border-color: rgba(16, 35, 45, .3); }
.snup .btn--yel { background: var(--ink); color: #fff; }
.snup .btn--yel:hover { background: var(--blue-d); }
.snup__hint { margin: 0 0 12px; font: 400 var(--t-small)/1.45 var(--sans); }
.snup__hint.is-warn { color: #8a2a00; font-weight: 600; background: rgba(255, 255, 255, .6); padding: 8px 12px 6px; border-radius: 3px; display: inline-block; }
.snup__ok { outline: none; padding: 20px; background: rgba(255, 255, 255, .55); border-radius: var(--r); }
.snup__t { margin: 6px 0 0; font: 400 var(--h3m)/1.15 var(--serif); }
.snup__s { margin: 8px 0 16px; font: 400 15px/1.45 var(--sans); }
.snup .btn--ghost { border-color: rgba(16, 35, 45, .3); color: var(--ink); }

/* Kontakt */
.kon__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 80px); align-items: center; }
.kon__adr { font-style: normal; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(18px, 3svh, 30px); font: 400 var(--t-lead)/1.5 var(--sans); }
.kon__adr p { margin: 0; }
.kon__adr a { text-decoration: none; border-bottom: 1px solid var(--line); }
.kon__adr a:hover { border-bottom-color: var(--blue); }
.kon__gf { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.kon__gf li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0 9px; border-bottom: 1px solid var(--line); font: 400 15.5px/1.3 var(--sans); }
.kon__gf a { color: var(--blue); text-decoration: none; font-weight: 500; }
.kon__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kon__act .btn--line { color: var(--blue); }
.kon__map { position: relative; height: clamp(300px, calc(var(--scr-h) - 30px), 720px); }
.kon__mapin { position: relative; height: 100%; overflow: hidden; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.kon__canvas { position: absolute; left: 50%; top: 50%; width: 210%; aspect-ratio: 1000 / 1490; transform: translate(-58.81%, -52.58%); }
.kon__canvas img { width: 100%; height: 100%; }
.kon__lab { position: absolute; transform: translate(-50%, -50%); font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding: 5px 7px 3px; background: rgba(255, 255, 255, .82); border-radius: 2px; }
.kon__pin { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -32px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22)); }
.kon__pin svg { width: 50px; height: 51px; }
.kon__pin b { font: 600 13px/1 var(--sans); background: var(--night); color: #fff; padding: 6px 9px 4px; border-radius: 2px; white-space: nowrap; }
.kon__map .map__src { bottom: -20px; }

/* footer */
.ftr { padding: 34px 0 calc(34px + env(safe-area-inset-bottom)); }
.ftr__in { display: grid; gap: 14px; }
.ftr__brand { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 18px/1.2 var(--serif); }
.ftr__brand svg { width: 34px; height: 35px; }
.ftr__imp { margin: 0; font: 400 13px/1.6 var(--sans); opacity: .62; max-width: 110ch; }

/* draft note */
.note { position: fixed; z-index: 45; left: 0; top: 50%; transform: translateY(-50%); }
.note__tab { display: block; writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 7px 12px; background: var(--night); color: rgba(255, 255, 255, .86); border: 1px solid var(--line-d); border-left: 0; border-radius: 0 var(--r) var(--r) 0; font: 600 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.note__tab:hover { color: var(--yel); }
.note__panel { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); width: min(330px, calc(100vw - 52px)); padding: 20px 20px 16px; background: var(--night); color: #fff; border: 1px solid var(--line-d); border-radius: var(--r); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); font: 400 14.5px/1.5 var(--sans); }
.note__panel p { margin: 0 0 10px; }
.note__panel a:not(.btn) { color: var(--yel); }
.note__t { font: 400 20px/1.2 var(--serif) !important; }
.note__btn { color: #fff; min-height: 40px; margin: 4px 0 12px; }
.note__fine { font-size: 12.5px; opacity: .7; margin: 0 !important; }
.note__x { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; font-size: 22px; color: rgba(255, 255, 255, .7); }

/* phone dock */
.dock { display: none; }
@media (max-width: 899px) {
  .dock { position: fixed; z-index: 38; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1.3fr 1fr 1fr 40px; gap: 6px; padding: 6px; background: rgba(7, 28, 39, .95); border: 1px solid var(--line-d); border-radius: 10px; transform: translateY(150%); transition: transform .45s var(--ease); }
  .dock.is-on { transform: none; }
  .dock__b { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 6px; color: #fff; text-decoration: none; font: 600 13px/1 var(--sans); letter-spacing: .04em; padding-top: 2px; -webkit-tap-highlight-color: transparent; }
  .dock__b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; margin-top: -2px; }
  .dock__b:active { background: rgba(255, 255, 255, .1); }
  .dock__main { background: var(--yel); color: var(--ink); }
  .note { transform: none; }
  .note__tab { display: none; }
  .note__panel { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(82px + env(safe-area-inset-bottom)); transform: none; width: auto; }
  .dock__note i { width: 7px; height: 7px; border-radius: 50%; background: var(--yel); }
}

/* ---------- animation states ---------- */
.js .crest__yel, .js .crest__blue { transform-box: fill-box; }
.js .crest__mark, .js .crest__club, .js .crest__motto, .js .crest__since, .js .hero__fg, .js .hero__shade, .js .con { opacity: 0; }
.no-anim .crest__mark, .no-anim .crest__club, .no-anim .crest__motto, .no-anim .crest__since, .no-anim .hero__fg, .no-anim .hero__shade, .no-anim .con,
.is-static .crest__mark, .is-static .crest__club, .is-static .crest__motto, .is-static .crest__since, .is-static .hero__fg, .is-static .hero__shade, .is-static .con { opacity: 1 !important; transform: none !important; }
.ln-mask { display: block; overflow: hidden; padding: 0 .16em .14em; margin: 0 -.16em -.14em; }
.rv { opacity: 0; transform: translateY(26px); }
.no-anim .rv, .is-static .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ---------- Screens layer ---------- */
:root {
  --scr-t: calc(var(--hdr-h) + clamp(14px, 3.4svh, 46px));
  --scr-b: clamp(18px, 3.8svh, 50px);
  --scr-h: calc(100svh - var(--scr-t) - var(--scr-b));
  --h2s: clamp(2.1rem, min(3.4vw, 5.4svh), 3.8rem);
}
@media (max-width: 899px) { :root { --scr-b: calc(86px + env(safe-area-inset-bottom)); } }
@media (max-width: 719px) { :root { --scr-t: calc(var(--hdr-h) + 14px); --h2s: clamp(1.95rem, 8.4vw, 2.4rem); } }
main .h2 { font-size: var(--h2s); }
main > section:not(.hero) { padding-top: var(--scr-t); padding-bottom: var(--scr-b); }
@media (min-width: 900px) {
  main > section:not(.hero) { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-height: 800px) and (min-width: 900px) {
  :root { --h2s: clamp(1.9rem, min(3vw, 5svh), 3rem); }
  .lei__tabs button { padding-block: 10px; }
  .biz__time li { padding-block: 7px; }
  .flow__body { min-height: 290px; }
}

/* tablets and phones */
@media (max-width: 899px) {
  .lei__grid, .map__grid, .biz__grid, .lehre__grid, .kon__grid { grid-template-columns: minmax(0, 1fr); }
  .lei__grid { gap: 18px; }
  .lei__tabs { flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; scrollbar-width: none; margin-top: 16px; }
  .lei__tabs::-webkit-scrollbar { display: none; }
  .lei__tabs button { flex: none; display: block; padding: 10px 14px 7px; border: 1px solid var(--line); border-radius: 40px; }
  .lei__tabs button::before, .lei__n, .lei__tabs small { display: none; }
  .lei__tabs b { font: 500 15px/1 var(--sans); }
  .lei__tabs button[aria-selected="true"] { background: var(--blue); border-color: var(--blue); }
  .lei__tabs button[aria-selected="true"] b { color: #fff; }
  .lei__imgs { height: clamp(220px, 50vw, 420px); }
  .lei__cap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ref__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 14px; }
  .ref__top, .ref__stage, .ref__list { grid-column: 1; grid-row: auto; }
  .ref__filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); }
  .ref__filter::-webkit-scrollbar { display: none; }
  .ref__filter button { flex: none; }
  .ref__frame { height: clamp(220px, 62vw, 460px); }
  .ref__nav { width: 42px; height: 42px; margin-top: -21px; }
  .ref__list { display: flex; overflow-x: auto; max-height: none; gap: 8px; padding: 0 var(--gut) 4px 0; margin-right: calc(-1 * var(--gut)); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ref__list::-webkit-scrollbar { display: none; }
  .ref__list li { flex: none; width: 40%; scroll-snap-align: start; }
  .ref__it { flex-direction: column; align-items: stretch; gap: 6px; padding: 0; }
  .ref__it img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .ref__it span { padding: 0 2px 4px; }
  .map__board { width: min(100%, 520px); height: auto; aspect-ratio: 1000 / 1490; justify-self: center; }
  .map__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .flow__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .flow__aside { display: none; }
  .biz__fig { height: clamp(220px, 56vw, 420px); }
  .team__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .team__gf, .crew { grid-column: 1; grid-row: auto; }
  .crew { display: flex; overflow-x: auto; gap: 12px; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .crew::-webkit-scrollbar { display: none; }
  .crew li { flex: none; width: 36%; scroll-snap-align: start; }
  .crew img, .gf img { max-height: none; }
  .lehre__fig { height: clamp(220px, 60vw, 420px); }
  .kon__map { height: clamp(240px, 64vw, 420px); }
}
@media (max-width: 719px) {
  .pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .pick button { min-height: 64px; padding: 11px 12px 9px; font-size: 16px; }
  .flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .flow__steps li { justify-content: center; padding: 12px 4px 10px; }
  .flow__steps li b { display: none; }
  .flow__steps li.is-on b { display: none; }
  .flow__body { min-height: 0; padding: 16px; }
  .flow__q { font-size: 1.45rem; margin-bottom: 12px; }
  .flow__nav { padding: 12px 16px; }
  .flow__pos { display: none; }
  .fld2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .flow__p .fld { margin-bottom: 12px; }
  .flow__dl { gap: 2px 14px; font-size: 14px; line-height: 1.35; }
  .flow__tt { margin-bottom: 10px; font-size: 1.4rem; }
  .flow__ticket .flow__match { margin-top: 10px; gap: 8px; }
  .flow__ticket .fm { grid-template-columns: 64px minmax(0, 1fr); padding: 6px; }
  .flow__ticket .fm img { width: 64px; height: 48px; }
  .flow__ticket .fm b { font-size: 16px; }
  .flow__ticket .fm small { font-size: 12.5px; margin-top: 2px; }
  .flow__note { margin-top: 10px; font-size: 12.5px; }
  .flow__end { margin-top: 10px; flex-wrap: nowrap; }
  .has-ticket .flow__head { display: none; }
  .flow__end .btn { flex: 1; padding-inline: 10px; font-size: 12.5px; }
  .flow__big { font-size: 36px; }
  .fm { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .fm img { width: 84px; height: 60px; }
  .fm b { font-size: 17px; }
  .biz__time li { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .biz__time b { font-size: 21px; }
  .biz__nums b { font-size: 2.2rem; }
  .biz__nums span { font-size: 10px; }
  .biz__lead { display: none; }
  .kon__adr { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .map__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref__count { font-size: 17px; }
  .ref__bar { padding-top: 10px; }
  .ref__it small { display: none; }
}
@media (max-width: 899px) { .contact, .kon { min-height: 100vh; min-height: 100svh; } }


/* phone: every screen fits one viewport */
@media (max-width: 719px) {
  .map__places { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); margin-top: 14px; }
  .map__places::-webkit-scrollbar { display: none; }
  .map__places button { flex: none; }
  .map__grid { gap: 12px; }
  .map__side { display: contents; }
  .map__side > .h-label, .map__side > .h2 { order: 0; }
  .map__places { order: 1; }
  .map__board { order: 2; height: clamp(230px, calc(var(--scr-h) - 330px), 430px); width: auto; aspect-ratio: 1000 / 1490; }
  .map__cards { order: 3; display: flex; overflow-x: auto; gap: 10px; margin: 0 calc(-1 * var(--gut)) 0 0; padding-right: var(--gut); scroll-snap-type: x mandatory; scrollbar-width: none; min-height: 0; }
  .map__cards::-webkit-scrollbar { display: none; }
  .mcard { flex: none; width: 38%; scroll-snap-align: start; }
  .mcard--text { width: 62%; padding: 12px; }
  .mcard--text b { font-size: 17px; } .mcard--text p { font-size: 13px; margin-top: 4px; }
  .map__src { bottom: -16px; }
  .biz__grid { gap: 14px; }
  .biz__fig { height: clamp(150px, calc(var(--scr-h) - 520px), 260px); }
  .biz__time { margin-top: 12px; }
  .biz__time li { padding-block: 7px; }
  .biz__time span { font-size: 14px; line-height: 1.38; }
  .biz__nums { margin-top: 12px; gap: 22px; }
  .team__grid { gap: 14px; }
  .team__gf { gap: 12px; }
  .gf { display: flex; flex-direction: column; }
  .gf img { max-height: clamp(150px, calc(var(--scr-h) - 470px), 300px); aspect-ratio: auto; height: clamp(150px, calc(var(--scr-h) - 470px), 300px); object-position: 50% 22%; }
  .gf div { padding-top: 8px; }
  .gf__tel { margin-top: 4px; }
  .crew li { width: 27%; }
  .crew img { aspect-ratio: 1; }
  .crew b { font-size: 14px; margin-top: 6px; } .crew span { font-size: 12.5px; }
  .lehre__grid { gap: 14px; }
  .lehre__fig { height: clamp(140px, calc(var(--scr-h) - 500px), 300px); }
  .lehre__lead { margin-top: 8px; }
  .snup { margin-top: 12px; }
  .snup .fld2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .snup .fld { margin-bottom: 10px; }
  .kon__grid { gap: 14px; }
  .kon__adr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 14px; font-size: 15px; }
  .kon__gf { margin-top: 12px; }
  .kon__act { margin-top: 14px; }
  .kon__act .btn { flex: 1; padding-inline: 12px; }
  .kon__map { height: clamp(120px, calc(var(--scr-h) - 430px), 300px); }
}


/* iOS Safari shows ~120 px less than Chrome at the same width: size the phone visuals by svh */
@media (max-width: 719px) {
  .ref__frame { height: clamp(180px, min(62vw, calc(100svh - 500px)), 460px); }
  .ref__list li { width: 34%; }
  .flow__p[data-p="1"] .flow__hint:not(.is-warn):not(.is-info) { display: none; }
  .flow__hint.is-info { color: var(--blue); font-weight: 500; }
  .pick button { min-height: 58px; }
  .lei__imgs { height: clamp(200px, min(50vw, calc(100svh - 470px)), 420px); }
  .map__board { height: clamp(220px, calc(100svh - 470px), 430px); }
  .biz__fig { height: clamp(130px, calc(100svh - 600px), 260px); }
  .gf img { height: clamp(140px, calc(100svh - 560px), 300px); max-height: none; }
  .lehre__fig { height: clamp(120px, calc(100svh - 590px), 300px); }
  .kon__map { height: clamp(110px, calc(100svh - 520px), 300px); }
}

/* short Safari viewports (390x664): tighten spacing before the photos shrink */
@media (max-width: 719px) {
  .map__board { height: clamp(196px, calc(100svh - 470px), 430px); }
  .biz__time li { padding-block: clamp(4px, calc((100svh - 640px) / 6), 7px); }
  .lehre__fig { height: clamp(100px, calc(100svh - 590px), 300px); }
  .lehre__lead { margin-top: clamp(4px, calc((100svh - 640px) / 6), 8px); }
  .snup { margin-top: clamp(8px, calc((100svh - 640px) / 4), 12px); }
  .snup .fld { margin-bottom: clamp(6px, calc((100svh - 640px) / 6), 10px); }
}


@media (max-width: 719px) {
  .flow__p .chips--pick { gap: 6px; }
  .flow__p .chips--pick button { min-height: 36px; padding: 8px 11px 6px; font-size: 14.5px; }
  .flow__p .fld { margin-bottom: 10px; gap: 6px; }
  .flow__p label.fld:has(select) { flex-direction: row; align-items: center; gap: 12px; }
  .flow__p label.fld:has(select) .sel { flex: 1; }
  .flow__p label.fld:has(select) select { height: 42px; }
  .flow__q { margin-bottom: 10px; }
  .flow__body { padding-top: 12px; }
  .flow__nav { padding-block: 10px; }
}

/* ---------- Type system layer ---------- */
:root { --t-lab: 11.5px; --t-cap: 11px; --t-lead: 17px; --t-body: 15.5px; --t-small: 14px;
  --h3m: clamp(1.6rem, 2.1vw, 1.95rem); --h3s: clamp(1.3rem, min(1.7vw, 2.8svh), 1.6rem); --quote: clamp(1.25rem, min(1.6vw, 2.5svh), 1.6rem); }
@media (max-width: 719px) { :root { --t-lab: 11px; --t-cap: 10.5px; --t-lead: 15.5px; --t-small: 13.5px; --h3m: 1.6rem; --h3s: 1.25rem; --quote: 1.15rem; } }
.h-label { font: 600 var(--t-lab)/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; }