/* Atelier Beaux-Arts · „Cahier d'atelier“
   Gelesen wie das Programmheft eines Pariser Kunstverlags: Papierfläche, Tuschetext, leichte
   Elzévir-Titel mit einem kursiven Wort, Kapitälchen als Ordnung, Haarlinien statt Schatten.
   Bewusst nur hell. Farben und Schriften nur über diese Tokens. */
:root {
  color-scheme: light;
  --velin: #F4EFE6;      /* Papier, Grundfläche */
  --lin: #E8DFD0;        /* Leinen, Zweitfläche */
  --encre: #1F1B18;      /* Tusche, Text */
  --payne: #536878;      /* Gris de Payne, Sekundärtext und Labels (5.1:1 auf Vélin) */
  --outremer: #1F2E8A;   /* Ultramarin, Links, aktiv, Primärknopf */
  --sienne: #965434;     /* Terre de Sienne, Serien-Badge */
  --garance: #A62A1C;    /* Fehler */
  --rule: #D9D2C5;       /* Haarlinie */
  --serif: "Spectral", "Iowan Old Style", Georgia, serif;
  --sc: "Spectral SC", "Spectral", Georgia, serif;
  --sans: "Syne", "Helvetica Neue", Arial, sans-serif;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --head: 60px;
}

*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 16px); -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(--velin); color: var(--encre); font: 400 18px/1.55 var(--serif); -webkit-font-smoothing: antialiased; font-kerning: normal }
body.locked { overflow: hidden }
img { max-width: 100%; display: block }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.1; margin: 0; text-wrap: balance }
h1 em, h2 em, .empty-title em { font-style: italic; font-weight: 300 }
p { margin: 0 }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover { color: var(--outremer) }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--outremer); outline-offset: 3px }
address { font-style: normal }

.inner { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r) }
.sc { font-family: var(--sc); font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: .06em; color: var(--payne) }
.vh, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: 12px; top: -60px; background: var(--encre); color: var(--velin); padding: 8px 14px; z-index: 100; font: 600 13px var(--sans) }
.skip:focus { top: 8px }
.lede { font-size: 1.2rem; line-height: 1.5; max-width: 36ch }
.textlink { all: unset; cursor: pointer; font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--encre); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; white-space: nowrap }
.textlink:hover { color: var(--outremer) }
.textlink:focus-visible { outline: 2px solid var(--outremer); outline-offset: 4px }
.btn { all: unset; cursor: pointer; display: inline-block; font: 700 13px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; background: var(--outremer); color: var(--velin); padding: 16px 24px; white-space: nowrap; transition: background .2s }
.btn:hover { background: var(--encre); color: var(--velin) }
.btn:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px }
.btn.busy { opacity: .6; cursor: progress }

/* ---------- Kopfzeile ---------- */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--velin); border-bottom: 1px solid var(--rule) }
.site-head .inner { display: flex; align-items: center; gap: 28px; min-height: var(--head) }
.logo { font: 400 1.3rem/1 var(--serif); text-decoration: none; white-space: nowrap; letter-spacing: -.005em }
.logo em { font-style: italic; font-weight: 300 }
.head-note { white-space: nowrap }
.main-nav { display: flex; gap: 26px; margin-left: auto; font: 500 14.5px/1 var(--sans) }
.main-nav a { text-decoration: none; padding-block: 8px; border-bottom: 1px solid transparent }
.main-nav a:hover { color: var(--encre); border-color: var(--encre) }
.head-end { display: flex; align-items: center; gap: 18px }
.lang-switch { display: flex; gap: 6px; align-items: baseline; font: 500 13px/1 var(--sans); letter-spacing: .06em; color: var(--payne) }
.lang-switch a { text-decoration: none; padding: 6px 2px; color: var(--payne) }
.lang-switch a[aria-current="true"] { color: var(--encre); text-decoration: underline; text-underline-offset: 5px }
.menu-btn { display: none }
@media (max-width: 1080px) { .head-note { display: none } }
@media (max-width: 860px) {
  .js .menu-btn { all: unset; display: inline-block; cursor: pointer; font: 600 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 10px 0 10px 4px }
  .js .menu-btn:focus-visible { outline: 2px solid var(--outremer); outline-offset: 2px }
  .js .main-nav { display: none }
  .js.menu-open .main-nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    background: var(--velin); border-bottom: 1px solid var(--encre); padding: 8px var(--gutter-r) 20px var(--gutter-l); font: 300 1.8rem/1.2 var(--serif) }
  .js.menu-open .main-nav a { padding-block: 12px; border-bottom: 1px solid var(--rule) }
  .head-end { margin-left: auto }
  html:not(.js) .site-head .inner { flex-wrap: wrap; padding-block: 8px }
  html:not(.js) .main-nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: 6px 18px }
}

/* ---------- Abschnitte ---------- */
.sec { padding-block: clamp(64px, 9vw, 112px) }
.sec + .sec { border-top: 1px solid var(--rule) }
.sec-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px) }
.sec-head h2 { font-size: clamp(2.5rem, 1.7rem + 3vw, 4.25rem); font-weight: 200; letter-spacing: -.01em }
.calendar, .about { background: var(--lin) }
.calendar + .sec, .about + .sec { border-top: 0 }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 112px) }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: end }
.hero-text { grid-column: 1 / span 7; display: grid; gap: 26px; align-content: end }
.hero h1 { font-size: clamp(3.1rem, 1.6rem + 5.6vw, 6.6rem); font-weight: 200; line-height: 1.01; letter-spacing: -.02em; max-width: 13ch }
.hero .lede { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem) }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap }
.hero-plate { grid-column: 9 / span 4; margin: 0 }
.hero-plate figcaption { margin-top: 12px }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px }
  .hero-text, .hero-plate { grid-column: 1 }
  .hero-plate { max-width: 340px }
}

/* Passepartout und Pigmentflächen */
.mat { display: block; background: var(--velin); border: 1px solid var(--rule); padding: clamp(10px, 1.6vw, 18px) }
.mat > img, .mat > .swatch { width: 100%; aspect-ratio: 4 / 5; object-fit: cover }
.swatch { position: relative; background: var(--pig); color: var(--pig-ink) }
.swatch-name { position: absolute; left: 14px; bottom: 12px; right: 14px; font: 500 13px/1.3 var(--sc); letter-spacing: .06em; color: var(--pig-ink) }
.p-outremer { --pig: #1F2E8A; --pig-ink: #F4EFE6 }
.p-sienne { --pig: #965434; --pig-ink: #F4EFE6 }
.p-ocre { --pig: #CC7722; --pig-ink: #1F1B18 }
.p-payne { --pig: #536878; --pig-ink: #F4EFE6 }
.p-ombre { --pig: #826644; --pig-ink: #F4EFE6 }
.p-vessie { --pig: #507D2A; --pig-ink: #F4EFE6 }
.p-garance { --pig: #A62A1C; --pig-ink: #F4EFE6 }
.p-celadon { --pig: #8FA99A; --pig-ink: #1F1B18 }

/* ---------- Programm ---------- */
.filters { border-top: 1px solid var(--encre); border-bottom: 1px solid var(--rule); padding-block: 10px; display: grid; gap: 2px }
.filter-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; padding-block: 6px }
.filter-label { min-width: 10.5rem }
.filter-opts { display: flex; flex-wrap: wrap; gap: 2px 22px }
.opt { all: unset; cursor: pointer; font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--payne); padding: 8px 0 6px; border-bottom: 2px solid transparent }
.opt:hover { color: var(--encre) }
.opt[aria-pressed="true"] { color: var(--encre); border-color: var(--encre) }
.opt:focus-visible { outline: 2px solid var(--outremer); outline-offset: 3px }
.filter-opts.small .opt { font-size: 12.5px }
.count { margin-left: auto }
@media (max-width: 640px) { .filter-label { min-width: 100% } .count { margin-left: 0 } }

.course-list { transition: min-height .25s ease }
.course { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) 190px; gap: 32px; padding-block: 28px; border-bottom: 1px solid var(--rule); align-items: start }
.course-pic .mat { padding: 8px }
.course-pic .mat > img, .course-pic .mat > .swatch { aspect-ratio: 3 / 2 }
.course.is-full .course-pic { filter: grayscale(.7); opacity: .7 }
.course-main { display: grid; gap: 8px; min-width: 0; align-content: start }
.course-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center }
.tag-format { font: 700 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--encre) }
.badge-series { font: 500 13.5px/1 var(--sc); letter-spacing: .05em; color: var(--sienne); border: 1px solid var(--sienne); padding: 4px 9px 5px; border-radius: 2px; white-space: nowrap }
.course h3 { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.15rem); line-height: 1.12 }
.course-open { all: unset; cursor: pointer }
.course-open::after { content: ""; position: absolute; inset: 0 }
.course-open:focus-visible { outline: none }
.course-open:focus-visible::after { outline: 2px solid var(--outremer); outline-offset: 4px }
.course:hover .course-open { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px }
.course-when { font-size: 1.05rem }
.course-side { display: grid; justify-items: end; gap: 6px; text-align: right; align-content: start; height: 100% }
.price { font: 400 1.6rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap }
.avail { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--encre); margin-top: 8px }
.avail i { width: 8px; height: 8px; border-radius: 50%; background: var(--outremer); flex: none }
.av-few i { background: var(--sienne) }
.av-full { color: var(--payne) }
.av-full i { background: transparent; border: 1px solid var(--payne) }
.course-arrow { font: 400 1.4rem/1 var(--sans); margin-top: auto; transition: transform .2s }
.course:hover .course-arrow { transform: translateX(5px) }
@media (max-width: 1000px) { .course { grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 24px } }
@media (max-width: 720px) {
  .course { grid-template-columns: 92px minmax(0, 1fr); gap: 14px 16px; padding-block: 22px 24px }
  .course-pic .mat { padding: 5px }
  .course-pic .mat > img, .course-pic .mat > .swatch { aspect-ratio: 1 }
  .course-pic .swatch-name { display: none }
  .course-side { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; align-items: baseline; gap: 4px 12px; height: auto }
  .course-side .avail { grid-column: 1 / -1; margin-top: 2px; order: 3 }
  .course-side .course-arrow { justify-self: end }
}
.empty { padding-block: 32px; display: grid; gap: 14px; justify-items: start; color: var(--payne); font-style: italic }
.empty-state { border-top: 1px solid var(--encre); padding-block: 36px 8px; display: grid; gap: 18px }
.empty-title { font: 200 clamp(1.9rem, 1.4rem + 2vw, 3rem)/1.15 var(--serif); max-width: 22ch }

/* ---------- Kalender ---------- */
.cal-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start }
.cal-box { position: sticky; top: calc(var(--head) + 24px); border-top: 1px solid var(--encre); padding-top: 16px; display: grid; gap: 16px }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.cal-top h3 { font-size: 1.65rem; font-weight: 300 }
.arrow-btn { all: unset; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; font: 400 1.05rem/1 var(--sans) }
.arrow-btn:hover { border-color: var(--encre) }
.arrow-btn:focus-visible { outline: 2px solid var(--outremer); outline-offset: 2px }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center }
.cal-grid .wd { font: 500 12.5px/1 var(--sc); letter-spacing: .06em; color: var(--payne); padding-bottom: 10px }
.day { all: unset; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 3px; border-top: 1px solid var(--rule); font: 500 15px/1 var(--sc); color: var(--payne); font-variant-numeric: tabular-nums; box-sizing: border-box; position: relative }
.day.has { color: var(--encre); cursor: pointer; font-weight: 600 }
.day.has::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--encre) }
.day.has:hover { background: var(--velin) }
.day.sel { background: var(--encre); color: var(--velin) }
.day.sel::after { background: var(--velin) }
.day.today::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--outremer); border-radius: 50% }
.day.past { opacity: .5 }
.day:focus-visible { outline: 2px solid var(--outremer); outline-offset: -2px }
.legend { display: flex; gap: 20px; align-items: center }
.legend span { display: inline-flex; align-items: center; gap: 8px }
.legend .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--encre) }
.legend .ring { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--outremer) }
.cal-list { min-width: 0 }
.cal-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 1px solid var(--encre); padding-top: 16px }
.agenda { list-style: none; margin: 0; padding: 0 }
.ag { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 22px; padding-block: 22px; border-bottom: 1px solid var(--rule); align-items: center }
.ag-date { display: grid; justify-items: center; gap: 2px; text-align: center }
.ag-date b { font: 300 2.1rem/1 var(--serif); font-variant-numeric: lining-nums }
.ag-date .sc { font-size: 12.5px }
.ag-main { display: grid; gap: 5px; min-width: 0 }
.ag-main h4 { font-size: 1.35rem; font-weight: 400; line-height: 1.2 }
.ag-line { font-size: 1rem; font-variant-numeric: tabular-nums }
.ag-main .avail { margin-top: 2px }
.btn-line { all: unset; cursor: pointer; font: 700 12px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; border: 1px solid var(--encre); padding: 12px 16px; white-space: nowrap; text-align: center }
.btn-line:hover { background: var(--encre); color: var(--lin) }
.btn-line[aria-disabled="true"] { color: var(--payne); border-color: var(--rule) }
.btn-line[aria-disabled="true"]:hover { background: transparent; color: var(--encre) }
.btn-line:focus-visible { outline: 2px solid var(--outremer); outline-offset: 2px }
#cal-more { padding-top: 18px }
.agenda .empty { list-style: none }
@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr } .cal-box { position: static; max-width: 440px } }
@media (max-width: 560px) { .ag { grid-template-columns: 52px minmax(0, 1fr); gap: 12px 16px } .ag .btn-line { grid-column: 2; justify-self: start } }

/* ---------- Galerie ---------- */
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px }
@media (max-width: 1000px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 640px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px } }
.work { margin: 0; display: grid; gap: 12px; align-content: start; min-width: 0 }
.work-zoom { all: unset; cursor: zoom-in; display: block }
.work-zoom:focus-visible { outline: 2px solid var(--outremer); outline-offset: 3px }
.work-zoom .mat { transition: border-color .2s }
.work-zoom:hover .mat { border-color: var(--encre) }
.work figcaption { display: grid; gap: 4px }
.work-cap { font-size: 1rem; line-height: 1.4 }
.work-cap i { font-style: italic }
.work-from { all: unset; cursor: pointer; font-size: 13px; justify-self: start; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px }
.work-from:hover { color: var(--encre); text-decoration-color: var(--encre) }
.work-from:focus-visible { outline: 2px solid var(--outremer); outline-offset: 2px }
@media (max-width: 640px) { .work-cap { font-size: .92rem } .work-zoom .mat { padding: 6px } }

.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(31, 27, 24, .97); display: grid; place-items: center;
  padding: max(64px, env(safe-area-inset-top, 0px)) max(72px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(72px, env(safe-area-inset-left, 0px)) }
.lb-fig { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: min(880px, 100%) }
.lb-pic { max-height: 74vh; width: auto; max-width: 100% }
.lightbox .swatch.lb-pic { width: min(56vh, 78vw); aspect-ratio: 4 / 5 }
.lb-fig figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; width: 100%; color: var(--velin) }
.lb-fig .work-cap { font-size: 1.05rem }
.lb-fig .sc { color: #B9B0A3 }
.lb-close { all: unset; cursor: pointer; position: absolute; top: max(18px, env(safe-area-inset-top, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); font: 600 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--velin); padding: 10px }
.lb-nav { all: unset; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(244, 239, 230, .4); border-radius: 50%; color: var(--velin); font: 400 1.2rem/1 var(--sans) }
.lb-nav:hover { border-color: var(--velin) }
.lb-prev { left: max(14px, env(safe-area-inset-left, 0px)) }
.lb-next { right: max(14px, env(safe-area-inset-right, 0px)) }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--velin); outline-offset: 2px }
@media (max-width: 640px) {
  .lightbox { padding-inline: 16px; padding-bottom: 88px }
  .lb-nav { top: auto; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: none }
  .lb-prev { left: calc(50% - 60px) } .lb-next { right: calc(50% - 60px) }
}

/* ---------- Über uns ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px }
.person { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 28px; align-items: start; border-top: 1px solid var(--encre); padding-top: 24px }
.portrait { aspect-ratio: 4 / 5; display: grid; place-items: center; border: clamp(8px, 1.4vw, 14px) solid var(--velin); outline: 1px solid var(--rule) }
.portrait span { font: italic 300 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--serif); color: var(--pig-ink); letter-spacing: .02em }
.person-text { display: grid; gap: 12px }
.person-text h3 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem) }
.person-text p { font-size: 1.05rem; max-width: 42ch }
@media (max-width: 900px) { .people { grid-template-columns: 1fr } }
@media (max-width: 480px) { .person { grid-template-columns: 120px minmax(0, 1fr); gap: 18px } }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px }
.contact-grid > div { display: grid; gap: 12px; align-content: start; border-top: 1px solid var(--encre); padding-top: 16px; min-width: 0 }
.contact-grid address, .mail-line a { font-size: 1.3rem; line-height: 1.45 }
.mail-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px }
.mail-line a { overflow-wrap: anywhere }
.copy-btn { all: unset; cursor: pointer; font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule); padding: 7px 10px }
.copy-btn:hover { border-color: var(--encre) }
.copy-btn:focus-visible { outline: 2px solid var(--outremer); outline-offset: 2px }
.contact-note { color: var(--payne) }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr } }

/* ---------- Kolophon ---------- */
.site-foot { border-top: 1px solid var(--encre); padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px)) }
.colophon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px }
.colophon > * { display: grid; gap: 10px; align-content: start; min-width: 0 }
.colophon a { text-decoration-color: var(--rule) }
.foot-lang a { text-decoration: none }
.foot-lang a[aria-current="true"] { color: var(--encre); text-decoration: underline }
.legal-links { display: grid; gap: 8px; font-size: 1rem }
.foot-small { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--payne) }
@media (max-width: 760px) { .colophon { grid-template-columns: 1fr } }

/* ---------- Seitenfenster ---------- */
.scrim { position: fixed; inset: 0; background: rgba(31, 27, 24, .38); z-index: 40; opacity: 0; transition: opacity .25s ease }
.scrim.on { opacity: 1 }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: var(--velin); z-index: 41; overflow-y: auto; overscroll-behavior: contain;
  border-left: 1px solid var(--encre); transform: translateX(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px) }
.drawer.on { transform: none }
.drawer-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--velin); border-bottom: 1px solid var(--rule);
  padding: max(12px, env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-right, 0px)) 12px 32px; min-height: 56px }
.close-btn { all: unset; cursor: pointer; font: 600 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 10px 0 10px 10px; white-space: nowrap }
.close-btn:focus-visible { outline: 2px solid var(--outremer); outline-offset: 2px }
.drawer-body { padding: 28px max(32px, env(safe-area-inset-right, 0px)) 64px 32px; display: grid; gap: 28px }
@media (max-width: 520px) { .drawer-body { padding-inline: 20px } .drawer-bar { padding-left: 20px; padding-right: 20px } }
.d-pic .mat { padding: 10px }
.d-pic .mat > img, .d-pic .mat > .swatch { aspect-ratio: 3 / 2 }
.d-head { display: grid; gap: 12px }
.d-head h2 { font-size: clamp(2.1rem, 1.6rem + 1.8vw, 2.9rem); font-weight: 200; letter-spacing: -.01em }
.d-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--encre); border-bottom: 1px solid var(--rule); margin: 0 }
.d-facts > div { padding: 12px 12px 14px 0; display: grid; gap: 4px; align-content: start }
.d-facts dt { font-size: 13px }
.d-facts dd { margin: 0; font-size: 1rem; line-height: 1.35; font-variant-numeric: tabular-nums }
.d-facts dd b { font-weight: 500; white-space: nowrap }
.d-facts .avail { margin-top: 0 }
@media (max-width: 520px) { .d-facts { grid-template-columns: 1fr 1fr } .d-facts > div:first-child { grid-column: 1 / -1 } }
.d-text { display: grid; gap: 14px; font-size: 1.08rem; line-height: 1.6 }
.d-sec { display: grid; gap: 10px }
.d-dates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule) }
.d-dates li { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--rule) }
.d-dates li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 6px; height: 6px; border-radius: 50%; background: var(--encre) }
.d-dates .tm { color: var(--payne); white-space: nowrap; font-variant-numeric: tabular-nums }
.note { font-size: .98rem; color: var(--payne); font-style: italic }
.pay-line { color: var(--encre); border-top: 1px solid var(--encre); padding-top: 14px; font-size: 14.5px }
.notice { font-style: italic; color: var(--payne); border-left: 2px solid var(--sienne); padding-left: 14px }

/* Formular */
.form { display: grid; gap: 20px }
.form h3 { font-size: 1.85rem; font-weight: 300 }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px }
@media (max-width: 520px) { .f-row { grid-template-columns: 1fr } }
.field { display: grid; gap: 2px; min-width: 0 }
.field label { font: 500 13.5px/1.3 var(--sc); letter-spacing: .06em; color: var(--payne) }
.field input { font: 400 1.12rem/1.3 var(--serif); color: var(--encre); background: transparent; border: 0; border-bottom: 1px solid var(--encre); border-radius: 0; padding: 8px 0 7px; width: 100%; min-width: 0 }
.field input:focus { outline: none; border-bottom: 2px solid var(--outremer); padding-bottom: 6px }
.field input[aria-invalid="true"] { border-bottom-color: var(--garance) }
.err { font-size: .9rem; font-style: italic; color: var(--garance) }
.err:empty { display: none }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 1rem; align-items: start }
.check input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--outremer) }
.inl { text-decoration: underline; text-underline-offset: 3px }
.form-msg { color: var(--garance); font-style: italic }
.form-msg:empty { display: none }
.form .btn { justify-self: start; margin-top: 4px }
.thanks { border-top: 2px solid var(--outremer); padding-top: 18px; display: grid; gap: 12px; justify-items: start }
.thanks h3 { font-size: 1.85rem; font-weight: 300 }
.thanks:focus { outline: none }

/* ---------- Rechtstexte ---------- */
.legal-page { padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 112px) }
.legal-page .inner { max-width: 820px }
.legal-page .back { display: inline-block; margin-bottom: 36px }
.legal-page h1 { font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.6rem); font-weight: 200 }
.legal { display: grid; gap: 22px }
.legal section { display: grid; gap: 6px; border-top: 1px solid var(--rule); padding-top: 14px }
.legal h2, .legal h3 { font: 500 1.12rem/1.3 var(--serif) }
.legal p { font-size: 1.05rem; line-height: 1.6; max-width: 62ch }