/* ==========================================================================
   DERRAHMEN – static clone
   Tokens & type taken 1:1 from live Elementor kit post-8.css + page post-52.css
   + header post-197.css + footer post-215.css (2026-08-11 dump).
   ========================================================================== */

/* --- Fonts: Epilogue self-hosted (live kit uses Epilogue for display) --- */
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/epilogue-latin.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: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/epilogue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Elementor kit-8 globals (exact) ------------------------------------ */
:root {
  --e-global-color-primary: #191D1F;
  --e-global-color-secondary: #4E5D64;
  --e-global-color-text: #191D1F;
  --e-global-color-accent: #CB3424;
  --e-global-color-9042db2: #F4F0EE; /* body / subpages */
  --e-global-color-c77c6c3: #EFEFF0; /* home + footer */
  --e-global-color-541fa18: #FFFFFF;
  --e-global-color-1873939: #191D1F;
  --e-global-color-116e0da: #CB3424;

  --red: var(--e-global-color-accent);
  --ink: var(--e-global-color-primary);
  --ink-soft: #282828; /* h1 page title on home */
  --muted: var(--e-global-color-secondary);
  --paper: var(--e-global-color-9042db2);
  --paper-cool: var(--e-global-color-c77c6c3);
  --line: #e0e0e0;
  --white: #fff;
  --link: #312C2A; /* kit a color */

  --font-text: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Epilogue", Helvetica, Arial, sans-serif;

  /* kit typography */
  --type-primary-size: 30px;
  --type-primary-weight: 500;
  --type-primary-lh: 1.2em;
  --type-primary-ls: -0.5px;

  --type-secondary-size: 21px;
  --type-secondary-weight: 400;
  --type-secondary-lh: 1.2em;
  --type-secondary-ls: -0.5px;

  --type-text-size: 20px;
  --type-text-weight: 300;
  --type-text-lh: 1.5em;
  --type-text-ls: 0px;

  --type-accent-size: 18px;
  --type-accent-weight: 400;
  --type-accent-lh: 1em;
  --type-accent-ls: 0px;

  --type-display-size: 11vw;
  --type-display-weight: 600;
  --type-display-lh: 1em;
  --type-display-ls: -8px;

  --type-xl-size: 46px; /* kit 85fbefb */
  --type-xl-weight: 400;
  --type-xl-lh: 1.2em;
  --type-xl-ls: -0.5px;

  --pad-x: 5%;
  --gap-col: 60px;
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper-cool);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--type-text-size);
  font-weight: var(--type-text-weight);
  line-height: var(--type-text-lh);
  letter-spacing: var(--type-text-ls);
  overflow-x: hidden;
}
body.is-home { background: var(--paper-cool); }
body.is-home .hero__text .btn { background: var(--paper-cool); }
body:not(.is-home) .hero__text .btn { background: var(--paper); }

[hidden] { display: none !important; }

img, svg { max-width: 100%; display: block; }

a { color: var(--link); }
a:hover { color: var(--ink); }

h1, h2, h3 {
  margin: 0;
  font-weight: var(--type-primary-weight);
  letter-spacing: var(--type-primary-ls);
  line-height: var(--type-primary-lh);
}

p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--red);
  color: var(--white);
  padding: 12px 20px;
  font-size: 16px;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { padding-inline: var(--pad-x); }
.section { padding-block: 0; }

/* --- Header (post-197) -------------------------------------------------- */
.site-header { background: inherit; }

/*
 * Header height = logo zone + 1px rule + nav zone.
 * Desktop/tablet: 165 + 1 + 61 = 227 (live @768/1024/1440).
 * Mobile: 218 + 1 + 50 (.nav-toggle) = 269 (live @390).
 */
.header-top {
  position: relative;
  height: 165px;
  /* The logo's 10px offset lives HERE, not as margin-top on .logo: as the first
     child of a block with no top padding or border, that margin would collapse
     out of the header and push the whole header down by 10px. */
  padding: 10px 0 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
}

/*
 * Logo — 135x135, centred, 10px from the top (measured on live).
 *
 * Live is broken here and we deliberately do NOT copy it: its markup uses
 * `srcset="…svg 1x, …png 2x"`, and the SVG carries only a viewBox, no width or
 * height. Inside Royal Elementor's `inline-table` wrapper it therefore
 * collapses to 0x0, so anyone on a non-retina display sees no logo at all —
 * only 2x displays load the PNG and show it. We ship one asset with explicit
 * dimensions, which renders identically at every pixel density.
 */
.logo {
  display: block;
  width: 135px;
  margin: 0 auto;
}
.logo img { display: block; width: 100%; height: auto; }

.header-contact {
  position: absolute;
  right: calc((100vw - min(90vw, 1140px))/2 + min(5vw, 57px));
  top: 65px;
  display: flex;
  gap: 9px; /* --grid-column-gap: 9px */
}
.header-contact a {
  color: var(--ink);
  display: inline-flex;
  line-height: 0;
}
.header-contact svg { width: 20px; height: 20px; } /* --icon-size: 20px */

.nav-toggle {
  display: none;
  width: 100%;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 29px;
  height: 2px;
  background: currentColor;
}

.mainnav ul {
  display: flex;
  justify-content: center;
  gap: 20px; /* menu-item margin 10px L+R => ~20 between */
  padding: 10px 0;
}
.mainnav a {
  position: relative;
  display: inline-block; /* live menu links are blockified; padding must count */
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.9px;
  line-height: 27px; /* live wpr-menu-item height 41 = 27 + 7 + 7 */
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 7px 12px; /* live wpr-menu-item → h 41 */
}
.mainnav a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px; /* wpr-pointer-underline height: 1px */
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.mainnav a:hover { color: var(--red); }
.mainnav a:hover::after,
.mainnav a:focus-visible::after,
.mainnav a[aria-current='page']::after {
  transform: scaleX(1);
}
.mainnav a[aria-current='page'] { color: var(--red); }

/* --- Display words (Epilogue 11vw / 600 / -8px) -------------------------- */
.bigword {
  font-family: var(--font-display);
  font-size: var(--type-display-size); /* 11vw = 158.4px @1440 */
  font-weight: var(--type-display-weight);
  line-height: 1em;
  letter-spacing: var(--type-display-ls);
  text-transform: none;
  color: var(--red);
  /* spacing-graph 2026-08-11: hero_cta→display_1 live≈171 @1440.
     Top clearance only (no negative top — overlaps CTA).
     Bottom ≈ live bite into cards (~-17). */
  margin: 172px 0 -17px; /* measured desktop CTA→display spacing */
  /* MUST match .wrap / cards content inset — padding:0 overrode .wrap and
     put glyphs at x=0 while images sit at pad-x (live glyphLeft === img.left). */
  padding-block: 0;
  padding-inline: var(--pad-x);
  position: relative;
  z-index: 0;
  text-align: left;
  box-sizing: border-box;
  width: 100%;
}

/* display_3 "werkstatt" after split — own top (spacing-graph split→display_3) */
.split + .bigword {
  margin-top: 171px; /* live @1440 */
  margin-bottom: -17px;
}

.bigword--page {
  font-size: 12vw; /* kit 34f8ef0 */
  /* Keep horizontal inset — shorthand padding:24px 0 0 would zero pad-x. */
  padding-inline: var(--pad-x);
  margin-bottom: 0;
  text-transform: none; /* alte Rechtschreibung: Anfahrt, Handwerk, Impressum */
}
.bigword--caps {
  text-transform: none;
}
/*
 * Subpage display word sticks to the HEADER — measured 2026-08-13, route-contract.
 *
 * `.bigword` carries `margin-top: 172px/162px/110px/101px` per MQ: that is the
 * homepage clearance between hero CTA and the first display word. Subpages have
 * no CTA above, and live puts the glyph flush under the header (header bottom →
 * first glyph = -1 / -2 / -2 / -3 at 390 / 768 / 1024 / 1440). `.bigword--page`
 * only reset margin-bottom, so it inherited the homepage top margin plus its own
 * 24px padding-top and sat 101…195px too low on every subpage.
 *
 * Specificity 0-2-0 on purpose: single-class `.bigword` MQ rules appear LATER in
 * this file (e.g. the 768–900 block), so a plain `.bigword--page` override loses
 * the order tie-break at exactly those widths. Do not weaken this back to one
 * class, and do not re-add padding-block here.
 */
.bigword.bigword--page {
  margin-top: 0;
  padding-block: 0;
}
/*
 * Right-aligned display words (handwerk / rahmenwerkstatt):
 * Live Elementor uses a BOXED heading container (max-width 1140px, centered)
 * with text-align:end — NOT full-bleed + pad-x. Last glyph @1440 ends ~1268
 * (≈172px from viewport), flush with the 1140 box minus ~22px widget margin.
 * Using only padding-inline:var(--pad-x) pushed the word 100px too far right.
 */
.bigword--right {
  text-align: right;
  margin: 40px auto -16px;
  max-width: 1140px; /* live e-con-inner max for display_2 */
  width: 100%;
  padding-block: 0;
  padding-inline: 0 22px; /* live widget-container margin-right ≈22 */
  box-sizing: border-box;
  letter-spacing: var(--type-display-ls); /* keep -8px; do not soften on tablet */
}
.bigword--full {
  text-align: right;
  margin: 57px auto -42px;
  max-width: none;
  width: 100%;
  padding-block: 0;
  padding-inline: var(--pad-x);
  box-sizing: border-box;
  letter-spacing: var(--type-display-ls);
}
.bigword--full .nowrap-mobile { display: none; }
.bigword--full .nowrap-desktop { position: relative; left: -42px; }

@media (max-width: 1024px) {
  .bigword--full .nowrap-desktop { display: none; }
  .bigword--full .nowrap-mobile { display: block; }
}

/* --- Motion (Elementor animations) -------------------------------------- */
.js [data-anim] {
  visibility: hidden;
  opacity: 0;
}
.js [data-anim].anim-in { visibility: visible; }
.js .animated {
  animation-duration: 1.25s;
  animation-fill-mode: both;
}
.js .anim-in[data-anim="up"] { animation-name: fadeInUp; }
.js .anim-in[data-anim="down"] { animation-name: fadeInDown; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; }
}

.anim-sink {
  transition-duration: .3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  display: block;
}
.anim-sink:hover,
.anim-sink:focus,
.anim-sink:active { transform: translateY(8px); }

@keyframes elementor-animation-pulse {
  25% { transform: scale(1.1); }
  75% { transform: scale(0.9); }
}
.anim-pulse:hover,
.anim-pulse:focus,
.anim-pulse:active {
  animation-name: elementor-animation-pulse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.page-entry {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-cool);
  transition: opacity .4s ease, visibility .4s ease;
  pointer-events: none;
}
.page-entry img { width: 64px; height: 64px; object-fit: contain; }
.page-entry.is-done { opacity: 0; visibility: hidden; }
html:not(.js) .page-entry { display: none; }

.back-to-top {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  right: 10px;
  bottom: 41px;
  z-index: 9999;
  padding: 14px 15px;
  border: 1px solid #E48659;
  border-radius: 40px;
  background: transparent;
  color: #E48659;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-in-out;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0);
}
.back-to-top svg { width: 16px; height: 16px; fill: currentColor; transition: fill .3s ease-in-out; }
.back-to-top.is-visible { opacity: 1; }
.back-to-top:hover,
.back-to-top:focus-visible {
  background: #E48659;
  border-color: #E48659;
  color: #fff;
}

/* --- Price orientation, gallery inquiry and appointment request ---------- */
.path-chooser {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto 112px;
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  border: 1px solid var(--ink);
  background: var(--white);
  padding: clamp(30px, 5vw, 58px);
  overflow: hidden;
}

.path-card--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.path-card__number {
  position: absolute;
  top: 20px;
  right: 24px;
  margin: 0;
  color: var(--red);
  font-family: var(--font-display);
  font-size: clamp(54px, 7vw, 96px);
  font-weight: 700;
  line-height: 1;
  opacity: .28;
}

.path-card h2 {
  max-width: 690px;
  margin: 18px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 58px);
  letter-spacing: -.045em;
  line-height: 1.02;
}

.path-card > p:not(.eyebrow):not(.path-card__number) {
  max-width: 620px;
  font-size: 18px;
  line-height: 1.55;
}

.path-card__facts {
  display: grid;
  gap: 9px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.path-card__facts li {
  position: relative;
  padding-left: 22px;
}

.path-card__facts li::before {
  position: absolute;
  left: 0;
  color: var(--red);
  content: '—';
  font-weight: 700;
}

.path-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 38px;
}

.path-card--primary .text-link {
  color: var(--white);
}

.text-link {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.booking-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(36px, 7vw, 100px);
  max-width: 1240px;
  margin: 0 auto 120px;
  border-block: 1px solid var(--ink);
  padding-block: clamp(64px, 8vw, 104px);
  scroll-margin-top: 24px;
}

.booking-copy h2,
.calculator-intro h2 {
  max-width: 820px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 66px);
  letter-spacing: -.045em;
  line-height: 1.02;
}

.booking-copy > p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.6;
}

.booking-steps {
  display: grid;
  gap: 18px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.booking-steps li {
  border-left: 4px solid var(--red);
  padding-left: 18px;
}

.booking-fallback {
  margin-top: 34px !important;
  font-weight: 700;
}

.booking-panel {
  align-self: start;
  border: 1px solid var(--ink);
  background: var(--paper-cool);
  padding: clamp(28px, 5vw, 52px);
}

.booking-panel__title {
  margin: 8px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.08;
}

.booking-panel .btn {
  width: 100%;
  margin-top: 30px;
}

.booking-panel__note {
  margin-top: 16px;
  color: #3d3d3d;
  font-size: 14px;
  line-height: 1.5;
}

.calculator-intro {
  max-width: 1240px;
  margin: 0 auto 42px;
}

.calculator-intro > p:last-child {
  max-width: 720px;
  margin-top: 20px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.request-intro,
.gallery-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr);
  gap: clamp(36px, 8vw, 120px);
  max-width: 1240px;
  margin: 40px auto 100px;
}

.request-intro h2,
.gallery-callout h2,
.calculator-panel h2,
.inquiry-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.request-intro > p,
.gallery-callout > div:last-child {
  align-self: end;
}

.calculator-shell,
.inquiry-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: clamp(28px, 5vw, 72px);
  max-width: 1240px;
  margin: 0 auto 120px;
}

.calculator-panel,
.inquiry-form {
  border-top: 4px solid var(--red);
  background: var(--white);
  padding: clamp(28px, 5vw, 60px);
}

.price-form {
  margin-top: 44px;
}

.price-form fieldset {
  margin: 32px 0 0;
  padding: 0;
  border: 0;
}

.price-form legend {
  margin-bottom: 12px;
  font-weight: 700;
}

.form-row {
  display: grid;
  gap: 20px;
}

.form-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-form label:not(.choice),
.inquiry-form label {
  display: grid;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.price-form input[type='number'],
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 18px/1.4 var(--font-text);
  padding: 14px 16px;
}

.inquiry-form textarea {
  min-height: 170px;
  resize: vertical;
}

.inquiry-form input[readonly] {
  background: var(--paper-cool);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
}

.choice input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 4px 0 0;
  accent-color: var(--red);
}

.price-card {
  align-self: start;
  position: sticky;
  top: 24px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  padding: clamp(28px, 5vw, 52px);
}

.price-card .eyebrow { color: #ff8173; }

.price-card__value {
  margin: 12px 0 20px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}

.price-card .btn {
  width: 100%;
  margin-top: 28px;
}

.price-card__note,
.form-note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.btn--solid {
  border: 1px solid var(--red);
  background: var(--red) !important;
  color: var(--white);
  cursor: pointer;
}

.btn--solid:hover {
  border-color: var(--white);
  color: var(--white);
}

.btn--solid:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.gallery-callout {
  border-block: 1px solid var(--ink);
  margin-bottom: 120px;
  padding-block: 70px;
}

.gallery-callout .btn {
  margin-top: 22px;
}

.tickmarks--compact {
  margin-top: 22px;
}

.tickmarks--compact li {
  margin-bottom: 8px;
}

.inquiry-copy {
  padding-top: 36px;
}

.inquiry-shell--gallery {
  margin-bottom: 150px;
}

.gallery-price-boundary {
  margin-top: 30px;
  border-left: 4px solid var(--red);
  background: var(--white);
  padding: 18px 20px;
}

.appointment-window {
  margin-top: 48px;
  border-left: 4px solid var(--red);
  padding-left: 24px;
}

.appointment-window h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.slot-list span {
  border: 1px solid var(--ink);
  padding: 7px 10px;
  font-size: 15px;
  font-weight: 700;
}

.inquiry-form {
  display: grid;
  gap: 22px;
}

.inquiry-form .form-row--two {
  grid-template-columns: 1fr;
}

.inquiry-form .btn {
  justify-self: start;
}

.inquiry-shell--callback {
  margin: 0 auto 100px;
}

.inquiry-shell--gallery {
  grid-template-columns: minmax(0, 1fr);
}

.inquiry-shell--gallery .inquiry-copy {
  max-width: 720px;
}

.inquiry-shell--gallery .inquiry-form + .inquiry-form {
  margin-top: 28px;
}

.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.choice--privacy {
  align-items: flex-start;
  font-weight: 400;
}

.choice--privacy span {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
}

.form-note[data-state='success'] {
  color: #0f7a3a;
  font-weight: 700;
}

.form-note[data-state='error'] {
  color: var(--red);
  font-weight: 700;
}

.form-note[data-state='pending'] {
  color: var(--ink);
}

.home-request-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  gap: clamp(32px, 8vw, 120px);
  max-width: 1240px;
  margin: 120px auto 0;
  border-top: 4px solid var(--red);
  padding-top: 52px;
}

.home-request-teaser h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.03;
  letter-spacing: -.04em;
}

.home-request-teaser__action {
  align-self: end;
}

@media (max-width: 767px) {
  .request-intro,
  .gallery-callout,
  .path-chooser,
  .booking-shell,
  .calculator-shell,
  .inquiry-shell,
  .home-request-teaser {
    grid-template-columns: 1fr;
  }

  .path-chooser {
    gap: 16px;
    margin-bottom: 78px;
  }

  .path-card {
    min-height: auto;
    padding: 30px 22px;
  }

  .path-card h2 {
    max-width: 300px;
    font-size: 34px;
  }

  .path-card__actions {
    align-items: stretch;
  }

  .path-card__actions .btn {
    width: 100%;
    text-align: center;
  }

  .booking-shell {
    margin-bottom: 78px;
    padding-block: 54px;
  }

  .booking-panel {
    padding: 26px 22px;
  }

  .calculator-intro {
    margin-bottom: 32px;
  }

  .request-intro {
    margin-top: 24px;
    margin-bottom: 72px;
  }

  .request-intro h2,
  .gallery-callout h2,
  .calculator-panel h2,
  .inquiry-copy h2 {
    font-size: 30px;
  }

  .calculator-shell,
  .inquiry-shell {
    margin-bottom: 80px;
  }

  .calculator-panel,
  .inquiry-form,
  .price-card {
    padding: 26px 22px;
  }

  .price-card {
    position: static;
  }

  .form-row--two {
    grid-template-columns: 1fr;
  }

  .gallery-callout {
    margin-bottom: 78px;
    padding-block: 48px;
  }

  .home-request-teaser {
    margin-top: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { visibility: visible; opacity: 1; }
  .js .anim-in[data-anim] { animation: none; }
  .anim-sink { transition: none; }
  .anim-sink:hover { transform: none; }
  .anim-pulse:hover { animation: none; }
  .page-entry { display: none; }
  * { scroll-behavior: auto; }
}

/* --- Type helpers ------------------------------------------------------- */
.lead { max-width: 460px; } /* 1747235 max-width 460px */

h1.page-title, .h-large {
  font-family: var(--font-text);
  font-size: var(--type-xl-size); /* 46px */
  font-weight: var(--type-xl-weight); /* 400 */
  line-height: var(--type-xl-lh);
  letter-spacing: var(--type-xl-ls);
  color: var(--ink-soft);
}

h2, .h-mid {
  font-family: var(--font-text);
  font-size: var(--type-primary-size); /* 30px */
  font-weight: var(--type-primary-weight); /* 500 */
  line-height: var(--type-primary-lh);
  letter-spacing: var(--type-primary-ls);
}

.h3, h3 {
  font-family: var(--font-text);
  font-size: var(--type-secondary-size); /* 21px default; cards override 700 */
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.5px;
}

.footnote {
  font-size: 13px; /* e333b7d */
  font-weight: 300;
  line-height: 1.5em;
  color: var(--ink);
}

/* --- Buttons (5a47fb20 desktop) ----------------------------------------- */
.btn {
  display: inline-block;
  border: 3px solid var(--ink); /* live Elementor button border-width 3px */
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--type-accent-size); /* 18px */
  font-weight: var(--type-accent-weight); /* 400 */
  line-height: 18px;
  letter-spacing: var(--type-accent-ls);
  text-transform: capitalize;
  padding: 20px 35px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  transition: color .15s linear, border-color .15s linear, background-color .15s linear;
}
.btn:hover, .btn:focus-visible {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}

/* Solid CTA states must win over the later base-button contract above. */
.btn.btn--solid {
  border-color: var(--red);
  background: var(--red) !important;
  color: var(--white);
}

.btn.btn--solid:hover,
.btn.btn--solid:focus-visible {
  border-color: var(--red);
  background: var(--white) !important;
  color: var(--red);
}

/* --- Home: Hero — live @1440: text 700 (mt 8% of col, pr 20% of col), img 596×546
   NOTE: CSS % padding/margin are relative to the *containing block width*,
   not the element. Live Elementor applies 8%/20% on the 700px column itself.
   On a full-row child we must convert: 8%*54%≈4.32% and 20%*54%≈10.8% of row. */
.hero {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 2; /* CTA stays above the following display word */
}
.hero__text {
  flex: 0 0 54.012345%; /* 700/1296 of padded row @1440 */
  width: 54.012345%;
  max-width: none;
  margin-top: 4.321%; /* = 8% of column = 56px @1440 */
  padding-right: 10.802%; /* = 20% of column = 140px @1440 → content ~560 */
  padding-top: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px; /* live column gap */
  min-height: 0;
}
.hero__text .lead {
  max-width: 460px;
  width: 100%;
  margin-top: 0;
}
.hero__text h1 {
  margin: 0;
  max-width: 100%;
  color: #282828;
  font-size: 46px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.5px;
}
.hero__text p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5em;
  letter-spacing: 0;
  margin-bottom: 14.4px;
}
.hero__text .btn {
  margin-top: auto;
  align-self: flex-start;
  position: relative;
  z-index: 3;
  background: var(--paper-cool); /* solid so giant word can't show through */
}
.hero__media {
  flex: 0 0 45.987%; /* 596/1296 */
  width: 45.987%;
  min-height: 546px;
  height: auto;
  align-self: stretch;
  background-image: url('img/hero-rahmen-928.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* Desktop hero: grow with content; media keeps live min height via stretch. */
@media (min-width: 1025px) {
  .hero {
    min-height: 546px;
    height: auto;
    align-items: stretch;
  }
  .hero__media {
    /* empty bg box needs an intrinsic min height; stretch matches text column */
    min-height: 546px;
    height: auto !important;
    align-self: stretch;
  }
  .hero__text {
    min-height: 546px; /* match media so row is at least live height */
    height: auto;
    margin-top: 0;
    padding-top: 4.321%; /* former margin-top, inside the column */
    margin-bottom: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 20px;
  }
  .hero__text .btn {
    margin-top: auto;
  }
}


/* --- Cards (image-box 1580e38c etc.) ------------------------------------- */
/* Cards = Elementor 2791502d: row, gap 5%, 3 equal columns from 768+.
   NO padding-top — live "rahmen" sticks to the card IMAGES (word→img ≈ 0/-17),
   not to empty padding above them. */
.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 5%; /* live --gap: 5% */
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 22px;
  padding-inline: var(--pad-x); /* same content inset as .bigword — flush left with images */
  box-sizing: border-box;
  width: 100%;
}
.cards .card {
  flex: 1 1 0;
  width: 0; /* force equal columns in a row flex */
  min-width: 0;
}
.card { overflow: visible; }
.card__media {
  overflow: hidden;
  margin-bottom: 30px; /* image-box-img margin-bottom */
}
.card img { width: 100%; height: auto; }
.card h3 {
  margin: 8px 0 16px; /* live image-box-title */
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2em; /* 25.2px */
  letter-spacing: -0.5px;
  text-transform: capitalize;
  color: var(--ink);
}
.card p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5em; /* 30px */
  letter-spacing: 0;
  margin: 0; /* live description is one block, no inter-p gap from theme */
}
.card p + p { margin-top: 1.5em; }

/* --- Split / handwerk (6b21c9b7 / 2d2fd175 / 176f11e5) ------------------- */
.split {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px; /* live 6b21c9b7 gap @desktop */
  padding-bottom: 4px;
  margin-top: 0;
}
.split__media {
  flex: 0 0 50%;
  width: 50%;
  min-height: 600px; /* live 2d2fd175 */
  height: 600px;
  background-image: url('img/gemaelde-holzrahmen-928.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.split__text {
  flex: 0 0 30%;
  width: 30%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.split__text h2 {
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: 500;
}
.split__text h2 + p { margin-bottom: 1em; }
.split__text .h-mid {
  margin-top: 44px;
  font-size: 30px;
  font-weight: 500;
}
.split__text p,
.tickmarks {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5em;
}

.tickmarks li {
  padding-left: 18px;
  position: relative;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5em;
  color: var(--ink);
}
/* Live Elementor icon-list uses thin red minus icons (#cb3424). */
.tickmarks li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: #cb3424;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5em;
  top: 0;
}

/* Keep the availability note at the measured live size. The generic
   `.split__text p` rule above is intentionally larger body copy. */
.split__text p.footnote {
  font-size: 13px;
  line-height: 1.5em;
}

/* --- Workshop carousel (image-carousel + Swiper) ------------------------ */
.workshop-carousel {
  margin-top: 0;
  overflow: hidden;
  /* Live carousel starts directly below the oversized display word. */
  padding-top: 0;
  padding-left: var(--pad-x);
  padding-right: 0;
}
.workshop-swiper { overflow: hidden; width: calc(100% + 200px); }
.workshop-swiper .swiper-slide { height: auto; }
.workshop-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 377 / 501;
  object-fit: cover;
  display: block;
}

/* --- Wayfinding white band (1008eb2) ------------------------------------ */
.band-white {
  background: var(--white);
  min-height: 530px;
  padding: 12% var(--pad-x) 0;
  /* spacing-graph: carousel→band live≈172 @1440 */
  margin-top: 172px;
  overflow: visible; /* allow display word bite; was hidden clipping footer rhythm */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;
}
.band-white .wrap { padding-inline: 0; }
.wayfinding {
  display: flex;
  gap: var(--gap-col);
  align-items: flex-start;
  width: 100%;
}
.wayfinding h2 {
  width: 45%;
  font-size: 46px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.2em;
  color: var(--ink-soft);
}
.wayfinding__text {
  width: 55%;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5em;
}
.wayfinding__text .btn { margin-top: 30px; }

/* --- Subpages ----------------------------------------------------------- */
.page-cols {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-col);
  padding-top: 70px;
  padding-bottom: 90px;
}
.page-cols__main { width: 45%; }
.page-cols__side { width: 45%; }

.infoblock { margin-top: 56px; }
.infoblock h2 {
  border-left: 2px solid var(--red);
  padding-left: 18px;
  margin-bottom: 14px;
  font-size: 30px;
  font-weight: 500;
}
.infoblock ul { border-left: 2px solid var(--red); padding-left: 18px; }
.infoblock li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 300;
}
.infoblock li + li { margin-top: 6px; }
.infoblock svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ink); }
.infoblock a { text-decoration: none; color: var(--link); }
.infoblock a:hover { text-decoration: underline; color: var(--ink); }

.markmark { width: 100%; max-width: 620px; margin-left: auto; }

/* --- Map ---------------------------------------------------------------- */
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--white);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 32px;
  background: repeating-linear-gradient(
    45deg, var(--paper), var(--paper) 14px, var(--paper-cool) 14px, var(--paper-cool) 28px
  );
}
.map__placeholder p { font-size: 16px; max-width: 42ch; color: var(--ink); }
.map__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.map__actions .btn { font-size: 16px; padding: 14px 24px; background: var(--white); }

/* --- Legal -------------------------------------------------------------- */
.legal { max-width: 44em; padding-block: 40px 90px; }
.legal h2 { margin: 48px 0 16px; font-size: 30px; font-weight: 500; }
.legal h3 { margin: 32px 0 12px; font-size: 21px; font-weight: 700; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; font-weight: 300; }
.legal ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1.5em; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--red); }
.legal .updated { color: var(--muted); font-size: 15px; }

/* --- Footer (post-215) -------------------------------------------------- */
.site-footer {
  background: var(--paper-cool);
  padding: 30px var(--pad-x); /* live footer section padding 30px 0 */
  text-align: center;
}
.footer-nav-toggle {
  display: none;
  width: 100%;
  height: 29px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.footer-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
}
.site-footer nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.site-footer nav a {
  position: relative;
  display: inline-block;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.9px;
  line-height: 26px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 7px 12px;
}
.site-footer nav a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.site-footer nav a:hover { color: var(--red); }
.site-footer nav a:hover::after,
.site-footer nav a:focus-visible::after,
.site-footer nav a[aria-current='page']::after {
  transform: scaleX(1);
}
.site-footer nav a[aria-current='page'] { color: var(--red); }

.footer-contact {
  display: flex;
  justify-content: center;
  gap: 19px; /* --grid-column-gap: 19px */
  margin-top: 40px;
}
.footer-contact a {
  color: var(--ink);
  display: inline-flex;
  line-height: 0;
}
.footer-contact svg { width: 22px; height: 22px; } /* footer icon-size 22px */

.copyright {
  margin: 30px 0 0; /* widget container margin-top 30px */
  font-family: var(--font-text); /* live Open Sans; Helvetica is kit-safe fallback */
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.4px;
  color: var(--muted); /* secondary #4E5D64 */
}

/* --- Breakpoints — exact Elementor post-52 queries --------------------- */
/* Desktop default: >1024. Tablet: max 1024. Mobile: max 767.
   Live also uses min-width:768 width locks (54/46 hero, 50/30 split). */

@media (min-width: 768px) {
  .hero__text { flex-basis: 54%; width: 54%; }
  .hero__media { flex-basis: 46%; width: 46%; }
  .split__media { flex-basis: 50%; width: 50%; }
  .split__text { flex-basis: 30%; width: 30%; }
  /* live: 3-column cards from 768 up */
  .cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .cards .card {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
  }
}

/* Tablet + small laptop: stack hero image above text, keep 3 cards in a row */
@media (max-width: 1024px) {
  body { font-size: 16px; }

  .bigword {
    font-size: 14vw;
    /* Live keeps display ls ≈ -8px on tablet for handwerk/rahmen; -5 was too loose */
    letter-spacing: var(--type-display-ls);
    /* spacing-graph: cta→display_1 live≈170 @1024 */
    margin: 162px 0 -5px; /* stick to images @1024 live≈-5 */
    /* NEVER padding:0 — that zeroed padding-inline and pulled glyphs to x=0
       while card images stay at --pad-x (live glyphLeft === img.left). */
    padding-block: 0;
    padding-inline: var(--pad-x);
  }
  .split + .bigword {
    margin-top: 101px; /* live @1024 */
    margin-bottom: -5px;
  }
  .bigword--right {
    text-align: right;
    margin: 43px auto -16px;
    max-width: 1140px;
    /* Live right inset ≈43px @1024/768 (not the desktop 22px widget margin) */
    padding-inline: 0 43px;
    padding-block: 0;
    letter-spacing: var(--type-display-ls); /* live keeps -8px on tablet */
  }
  .bigword--page {
    font-size: 14vw;
    padding-block: 24px 0;
    padding-inline: var(--pad-x);
  }
  .bigword--full {
    margin: 50px 0 -25px;
    font-size: 14vw;
    padding-inline: var(--pad-x) 0;
    padding-block: 0;
  }

  h1.page-title, .h-large, .wayfinding h2 { font-size: 38px; line-height: 1.2em; }
  h2, .h-mid, .split__text h2, .split__text .h-mid { font-size: 26px; }
  /* Live shrinks the contact list text below desktop: 16/24 up to 1024,
     20/30 only from 1025. Measured 2026-08-13 on /kontakt/.
     Needs .infoblock li (0-1-1) — a bare `li` rule loses to the base rule. */
  .infoblock li { font-size: 16px; line-height: 24px; }
  .card h3 { font-size: 18px; }
  .card p,
  .hero__text p,
  .lead,
  .split__text p,
  .tickmarks li,
  .wayfinding__text { font-size: 16px; line-height: 1.5em; }
  .split__text p.footnote { font-size: 14px; line-height: 1.5em; }

  .btn {
    padding: 20px 35px; /* still desktop pad until 767 */
    font-size: 14px; /* live tablet accent size */
    line-height: 14px;
  }

  /* Hero: column-reverse, gap 50px, image first visually on top */
  .hero {
    flex-direction: column-reverse;
    gap: 50px;
    min-height: 0;
    padding-bottom: 8px; /* keep CTA clear of following display word */
  }
  .hero__text,
  .hero__media {
    flex: 0 0 auto;
    width: 100%;
  }
  .hero__text {
    margin-top: 0;
    padding-right: 15%; /* live 5b1700be tablet — % of text column = parent */
    min-height: 340px;
    justify-content: flex-start;
    gap: 20px;
  }
  .hero__text .lead { max-width: 460px; }
  .hero__text .btn { margin-top: auto; }
  .hero__media {
    min-height: 350px;
    background-position: bottom center; /* live tablet */
  }

  /* Cards: STILL 3 columns on tablet (live), gap 5% */
  .cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5%;
    padding-top: 0; /* keep word stuck to images */
    padding-bottom: 29px;
  }
  .cards .card {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
  }
  .card__media { margin-bottom: 20px; }

  /* Split: stack, gap 60px, image full width min 703 */
  .split {
    flex-direction: column;
    gap: 60px;
    padding-bottom: 40px;
  }
  .split__media,
  .split__text {
    flex: 0 0 auto;
    width: 100%;
  }
  .split__media {
    min-height: 703px;
    height: 703px;
  }
  .split__text {
    padding-right: 15%; /* live 176f11e5 tablet */
  }

  .workshop-carousel { padding-top: 0; }
  .workshop-swiper .swiper-slide img { aspect-ratio: 377 / 501; }

  .band-white {
    min-height: 410px;
    padding-top: 44px;
    margin-top: 92px; /* carousel→band live≈92 @1024 */
  }
  .wayfinding { gap: 40px; }
  .wayfinding h2 { width: 45%; max-width: 348px; }
  .wayfinding__text { width: auto; max-width: 321px; font-size: 16px; }

  .page-cols { flex-direction: column; gap: 50px; padding-top: 50px; }
  .page-cols__main, .page-cols__side { width: 100%; }
  .markmark { margin-inline: auto; }
}

/* Between 768 and 1024 Elementor forces hero/split children to 100% width
   (already handled by column flex above). */

/* Mid tablet: cta→display_1 live≈118 @768 */
@media (max-width: 900px) and (min-width: 768px) {
  .bigword {
    margin: 110px 0 -3px; /* stick to images @768 live≈-3 */
  }
  .split + .bigword {
    margin-top: 74px; /* live @768 */
    margin-bottom: -5px;
  }
  .bigword--right {
    margin: 43px auto -15px;
    max-width: 1140px;
    padding-inline: 0 43px; /* match live lastGlyph inset @768 */
    letter-spacing: var(--type-display-ls);
  }
  .band-white {
    margin-top: 69px;
    padding-top: 0;
  }
  .wayfinding h2 { width: 50%; }
  .cards { padding-bottom: 28px; }
  .hero__text { min-height: 378px; }
}

/* Mobile */
@media (max-width: 767px) {
  body { font-size: 16px; }

  .bigword {
    font-size: 15vw;
    letter-spacing: -1.8px;
    /* spacing-graph: cta→display_1 live≈109 @390 */
    margin: 101px 0 0; /* mobile live word→img 0 — flush to images */
    padding-block: 0;
    padding-inline: var(--pad-x); /* flush first glyph with first card image */
  }
  .split + .bigword {
    margin-top: 80px; /* live @390 */
    margin-bottom: 0;
  }
  .bigword--right {
    margin: 65px auto -69px;
    max-width: none;
    padding-inline: var(--pad-x); /* mobile: full width with content inset */
  }
  .bigword--page {
    font-size: 15vw;
    letter-spacing: -1.8px;
    padding-inline: var(--pad-x);
  }
  .bigword--full {
    font-size: 15vw;
    letter-spacing: -1.8px;
    margin: 20px 0 -12px;
    padding-inline: var(--pad-x) 0;
  }

  h1.page-title, .h-large, .wayfinding h2 { font-size: 30px; line-height: 1.2em; }
  h2, .h-mid { font-size: 22px; }
  /* Live drops the infoblock heading to 22/26.4 only below 768; it stays 30/36
     at 768 and above. The base `.infoblock h2` (0-1-1) outranks the bare `h2`
     rule above, so it must be restated here. Measured 2026-08-13. */
  .infoblock h2 { font-size: 22px; line-height: 26.4px; }
  .card h3 { font-size: 17px; }
  .card p { font-size: 16px; }

  .header-top { height: 218px; } /* + 1px rule + 50px .nav-toggle = 269 live */
  .header-contact {
    top: 172px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    gap: 9px;
  }
  .header-contact svg { width: 19px; height: 19px; }
  .nav-toggle { display: flex; }
  .mainnav { display: none; padding-inline: var(--pad-x); }
  .site-header.is-menu-open .mainnav { display: block; }
  .mainnav ul {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 8px 0 14px;
  }
  .mainnav a { font-size: 13px; padding: 7px 8px; } /* live header mobile 13px */
  .mainnav a::after { left: 8px; right: 8px; }

  .hero { gap: 20px; padding-bottom: 8px; }
  .hero__text {
    padding-right: 0; /* live mobile clears side pad */
    gap: 20px;
    min-height: 387px;
  }
  .hero__media {
    min-height: 220px;
    background-position: bottom center;
  }

  .btn {
    padding: 18px 25px; /* live mobile */
    font-size: 15px;
    line-height: 15px;
  }

  /* Cards stack full width, gap 65px (live 2791502d mobile) */
  /* Mobile only: stack cards (live 3col false below 768) */
  .cards {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 65px; /* live 2791502d mobile gap */
    padding-top: 0;
    padding-bottom: 50px;
  }
  .cards .card {
    flex: 0 0 auto;
    width: 100%;
  }
  .card__media { margin-bottom: 30px; }

  .split {
    flex-direction: column;
    gap: 60px;
    margin-top: 19%;
    padding-bottom: 19px;
  }
  .split__media {
    min-height: 310px;
    height: 310px;
    margin-top: -2px;
    background-position: 0 -37px;
  }
  .split__text { padding-right: 0; }

  .workshop-carousel { padding-top: 0; }
  .workshop-swiper .swiper-slide img { aspect-ratio: 377 / 501; }

  .band-white {
    min-height: 0;
    padding-top: 11.3%;
    margin-top: 117px; /* carousel→band live≈117 @390 */
  }
  .wayfinding {
    flex-direction: column;
    gap: 20px;
  }
  .wayfinding h2,
  .wayfinding__text {
    width: 100%;
    max-width: none;
  }

  .footer-nav-toggle { display: flex; }
  .site-footer nav { display: none; }
  .site-footer.is-menu-open nav { display: block; }
  .site-footer nav ul {
    flex-direction: column;
    gap: 0;
    padding-top: 12px;
  }
  .site-footer nav a { font-size: 13px; }
  .footer-contact svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Anfrage: same visual language as the accepted home page ------------
 * Conversion structure may differ, but this route must use the homepage's
 * typography, cool paper, open sections, square edges and outlined controls.
 * Do not introduce a separate landing-page design system here.
 */
body.request-page {
  background: var(--paper-cool);
}

.request-hero {
  display: flex;
  align-items: stretch;
  min-height: 500px;
  margin-bottom: 120px;
}

.request-hero__copy {
  display: flex;
  flex: 0 0 54.012345%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 54.012345%;
  padding-right: 10.802%;
}

.request-hero__copy h1 {
  max-width: 560px;
  margin-bottom: 24px;
}

.request-hero__copy > p:not(.eyebrow) {
  max-width: 540px;
  margin-bottom: 34px;
}

.request-hero__media {
  flex: 0 0 45.987%;
  width: 45.987%;
  min-height: 500px;
  background-image: url('img/leisten-auswahl-928.webp');
  background-position: center 38%;
  background-repeat: no-repeat;
  background-size: cover;
}

.request-page .eyebrow {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}

.request-page .request-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: clamp(36px, 8vw, 120px);
  max-width: 1240px;
  margin: 0 auto 84px;
}

.request-page .request-intro h2,
.request-page .path-card h2,
.request-page .booking-copy h2,
.request-page .calculator-intro h2,
.request-page .calculator-panel h2,
.request-page .inquiry-copy h2 {
  font-family: var(--font-text);
  font-size: var(--type-primary-size);
  font-weight: var(--type-primary-weight);
  line-height: var(--type-primary-lh);
  letter-spacing: var(--type-primary-ls);
}

.request-page .request-intro > p {
  align-self: end;
}

.request-page .path-chooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5%;
  max-width: 1240px;
  margin: 0 auto 132px;
}

.request-page .path-card,
.request-page .path-card--primary {
  display: flex;
  min-height: 0;
  border: 0;
  border-top: 4px solid var(--red);
  background: transparent;
  color: var(--ink);
  padding: 38px 0 0;
  overflow: visible;
}

.request-page .path-card__number {
  position: static;
  margin: 0 0 18px;
  color: var(--red);
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
}

.request-page .path-card h2 {
  max-width: 520px;
  margin: 0 0 22px;
}

.request-page .path-card > p:not(.eyebrow):not(.path-card__number) {
  max-width: 540px;
  font-size: var(--type-text-size);
  line-height: var(--type-text-lh);
}

.request-page .path-card__facts {
  margin-top: 22px;
}

.request-page .path-card__actions {
  margin-top: 34px;
  padding-top: 0;
}

.request-page .path-card--primary .text-link {
  color: var(--ink);
}

.request-page .booking-shell {
  display: block;
  max-width: 1240px;
  margin: 0 auto 132px;
  border: 0;
  border-top: 4px solid var(--red);
  padding-block: 52px 0;
}

.request-page .booking-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: clamp(36px, 8vw, 120px);
  margin-bottom: 46px;
}

.request-page .booking-copy .eyebrow,
.request-page .booking-copy h2 {
  grid-column: 1;
}

.request-page .booking-copy h2 {
  margin-top: -8px;
}

.request-page .booking-copy > p:not(.eyebrow) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: none;
  margin: 0;
  font-size: var(--type-text-size);
  line-height: var(--type-text-lh);
}

.booking-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5%;
}

.booking-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 380px;
  border: 3px solid var(--ink);
  background: transparent;
  padding: clamp(28px, 4vw, 46px);
}

.booking-option h3 {
  margin: 0 0 18px;
  font-family: var(--font-text);
  font-size: 24px;
  font-weight: 500;
}

.booking-option > p:not(.eyebrow):not(.booking-panel__note) {
  margin-bottom: 28px;
}

.booking-option .btn {
  margin-top: auto;
}

.request-page .booking-panel__note {
  margin-top: 16px;
  color: var(--muted);
}

.request-page .booking-fallback {
  margin-top: 28px !important;
  font-weight: 400;
}

.request-page .calculator-intro {
  max-width: 1240px;
  margin: 0 auto 42px;
  border-top: 4px solid var(--red);
  padding-top: 52px;
}

.request-page .calculator-intro > p:last-child {
  max-width: 720px;
}

.request-page .calculator-shell,
.request-page .inquiry-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 5%;
  max-width: 1240px;
  margin: 0 auto 132px;
}

.request-page .calculator-panel,
.request-page .inquiry-form {
  border: 0;
  border-top: 1px solid var(--ink);
  background: transparent;
  padding: 38px 0 0;
}

.request-page .price-card {
  position: sticky;
  top: 24px;
  align-self: start;
  border: 3px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: clamp(28px, 4vw, 46px);
}

.request-page .price-card .eyebrow {
  color: var(--red);
}

.request-page .price-card__value {
  color: var(--red);
  font-family: var(--font-text);
  font-size: 46px;
  font-weight: 400;
  letter-spacing: -.5px;
  line-height: 1.2;
}

.request-page .price-card .btn {
  width: 100%;
}

.request-page .inquiry-copy {
  padding-top: 38px;
}

.request-page .gallery-price-boundary {
  background: transparent;
}

.request-page .inquiry-form .btn {
  justify-self: start;
}

@media (max-width: 767px) {
  .request-hero {
    flex-direction: column;
    margin-bottom: 80px;
  }

  .request-hero__copy,
  .request-hero__media {
    flex: 0 0 auto;
    width: 100%;
  }

  .request-hero__copy {
    padding: 52px 0 58px;
  }

  .request-hero__copy h1 {
    font-size: 30px;
  }

  .request-hero__media {
    min-height: 360px;
  }

  .request-page .request-intro,
  .request-page .path-chooser,
  .request-page .booking-copy,
  .booking-options,
  .request-page .calculator-shell,
  .request-page .inquiry-shell {
    grid-template-columns: 1fr;
  }

  .request-page .request-intro,
  .request-page .booking-copy {
    gap: 18px;
  }

  .request-page .request-intro {
    margin-bottom: 64px;
  }

  .request-page .request-intro h2,
  .request-page .path-card h2,
  .request-page .booking-copy h2,
  .request-page .calculator-intro h2,
  .request-page .calculator-panel h2,
  .request-page .inquiry-copy h2 {
    font-size: 22px;
  }

  .request-page .path-chooser,
  .booking-options {
    gap: 58px;
  }

  .request-page .path-chooser,
  .request-page .booking-shell,
  .request-page .calculator-shell,
  .request-page .inquiry-shell {
    margin-bottom: 86px;
  }

  .request-page .path-card {
    padding: 28px 0 0;
  }

  .request-page .path-card > p:not(.eyebrow):not(.path-card__number),
  .request-page .booking-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .request-page .booking-copy > p:not(.eyebrow) {
    grid-column: 1;
    grid-row: auto;
  }

  .booking-option {
    min-height: 0;
    padding: 26px 22px;
  }

  .booking-option .btn {
    width: 100%;
  }

  .request-page .calculator-intro {
    padding-top: 38px;
  }

  .request-page .calculator-panel,
  .request-page .inquiry-copy,
  .request-page .inquiry-form {
    padding: 28px 0 0;
  }

  .request-page .price-card {
    position: static;
  }
}