/* Beispielbetriebe (fiktiv). Jede Ansicht wird in einem festen Viewport gerendert
   (Desktop 1280 × 800, Smartphone 390 × 780) und über --k skaliert. */

.ex-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ex-layer--after { clip-path: inset(0 0 0 calc((1 - var(--r, .5)) * 100%)); }
.ex-vp { container-type: size; position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--k, .5)); }
.ex-vp svg { display: inline-block; }

/* =========================================================
   VORHER
   ========================================================= */

/* Maler · Homepage-Baukasten um 2014: Stockfoto-Slider, grüne Buttons, Cookie-Leiste über allem */
.kb { position: relative; width: 100%; min-height: 100%; background: #fff; font: 14px/1.6 Arial, Helvetica, sans-serif; color: #555; }
.kb__top { display: flex; justify-content: flex-end; gap: 24px; padding: 6px 60px; background: #F2F2F2; font-size: 12px; color: #777; }
.kb__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 60px; }
.kb__logo { display: flex; gap: 12px; align-items: center; }
.kb__mark { display: flex; gap: 3px; transform: skewX(-12deg); }
.kb__mark i { width: 11px; height: 40px; background: #D7262E; }
.kb__mark i:nth-child(2) { background: #F4C300; }
.kb__mark i:nth-child(3) { background: #1F6FB5; }
.kb__logo b { display: block; font: bold 25px/1.1 Arial, sans-serif; color: #5A9A2B; }
.kb__logo small { display: block; font-size: 12px; color: #888; font-style: italic; }
.kb__nav { display: flex; gap: 4px; }
.kb__nav span { padding: 9px 14px; font-size: 13px; text-transform: uppercase; color: #555; }
.kb__nav .on { background: #6BAA35; color: #fff; border-radius: 3px; }
.kb__slider { position: relative; height: 430px; overflow: hidden; }
.kb__slider img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.kb__arr { position: absolute; top: 50%; left: 20px; width: 40px; height: 60px; margin-top: -30px; background: rgba(0,0,0,.35); color: #fff; font: 44px/56px Arial, sans-serif; text-align: center; }
.kb__arr--r { left: auto; right: 20px; }
.kb__cap { position: absolute; left: 90px; bottom: 60px; padding: 12px 22px; background: rgba(90,154,43,.85); color: #fff; font: italic bold 30px Georgia, serif; }
.kb__dots, .pb__dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.kb__dots i, .pb__dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.6); }
.kb__dots .on { background: #6BAA35; }
.kb__band { background: #6BAA35; color: #fff; text-align: center; padding: 16px; font: bold 18px Arial, sans-serif; }
.kb__in { width: 1000px; margin: 0 auto; padding: 30px 0; }
.kb__in h1 { font: 28px/1.3 Arial, sans-serif; color: #5A9A2B; text-align: center; margin: 0 0 12px; }
.kb__intro { text-align: center; margin: 0 60px 30px; }
.kb__teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kb__teaser { border: 1px solid #E3E3E3; box-shadow: 0 2px 4px rgba(0,0,0,.08); padding-bottom: 16px; }
.kb__timg { height: 170px; background-size: 200% auto; }
.kb__teaser h2 { margin: 14px 16px 6px; font: bold 18px Arial, sans-serif; color: #333; }
.kb__teaser p { margin: 0 16px 12px; }
.kb__more { margin-left: 16px; display: inline-block; padding: 6px 12px; background: #6BAA35; color: #fff; font-size: 13px; border-radius: 3px; }
.kb__why { display: grid; grid-template-columns: 1fr 340px; gap: 30px; margin: 40px 0; }
.kb__why h2, .kb__h { font: bold 20px Arial, sans-serif; color: #5A9A2B; margin: 0 0 12px; }
.kb__why p { margin: 0 0 6px; }
.kb__box { background: #F4F9EF; border: 2px dashed #6BAA35; padding: 20px; text-align: center; }
.kb__box p { margin: 0; }
.kb__tel { font: bold 26px/1.4 Arial, sans-serif; color: #D7262E; }
.kb__btn { display: inline-block; margin-top: 12px; padding: 8px 16px; background: #D7262E; color: #fff; border-radius: 3px; font-weight: bold; }
.kb__h { text-align: center; }
.kb__refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 30px; }
.kb__refs i { height: 150px; background-size: 250% auto; }
.kb__partner { display: flex; justify-content: center; gap: 16px; border-top: 1px solid #eee; padding-top: 24px; }
.kb__partner span { padding: 16px 18px; border: 1px solid #ddd; color: #999; font: bold 12px Arial, sans-serif; text-transform: uppercase; }
.kb__foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 30px 140px; background: #3A3A3A; color: #BBB; font-size: 13px; }
.kb__foot b { color: #fff; }
.kb__foot p { margin: 6px 0 0; }
.kb__sub { background: #2A2A2A; color: #888; text-align: center; font-size: 12px; padding: 10px; }
.kb__cookie { position: absolute; left: 0; right: 0; top: calc(100cqh - 58px); display: flex; align-items: center; gap: 16px; padding: 14px 60px; background: rgba(30,30,30,.92); color: #fff; font-size: 14px; }
.kb__cookie b { padding: 5px 18px; background: #6BAA35; border-radius: 3px; }
.kb__cookie u { color: #ccc; }

/* Praxis · gekauftes WordPress-Theme um 2016: Sonnenuntergang als Aufmacher, Beispieltext stehen gelassen */
.pb { width: 100%; min-height: 100%; background: #fff; font: 15px/1.7 "Helvetica Neue", Arial, sans-serif; color: #666; }
.pb__top { display: flex; justify-content: space-between; padding: 8px 80px; background: #1BA39C; color: #fff; font-size: 13px; }
.pb__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 80px; border-bottom: 1px solid #eee; }
.pb__logo { display: flex; align-items: center; gap: 12px; }
.pb__logo i { width: 52px; height: 52px; border-radius: 50%; background: #1BA39C; color: #fff; display: grid; place-items: center; font: italic bold 20px Georgia, serif; }
.pb__logo b { display: block; font: 300 25px/1.2 "Helvetica Neue", Arial, sans-serif; color: #1BA39C; }
.pb__logo small { display: block; font-size: 12px; color: #999; }
.pb__nav { display: flex; }
.pb__nav span { padding: 8px 13px; font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: .05em; color: #444; }
.pb__nav .on { color: #1BA39C; box-shadow: inset 0 -3px 0 #1BA39C; }
.pb__hero { position: relative; height: 470px; overflow: hidden; }
.pb__hero img { width: 100%; height: 100%; object-fit: cover; }
.pb__welcome { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 620px; padding: 28px; background: rgba(255,255,255,.75); text-align: center; }
.pb__welcome h1 { margin: 0; font: 300 44px/1.2 "Helvetica Neue", Arial, sans-serif; color: #1BA39C; }
.pb__welcome p { margin: 6px 0 16px; font-size: 18px; color: #555; }
.pb__welcome span { display: inline-block; padding: 10px 26px; background: #1BA39C; color: #fff; text-transform: uppercase; font-size: 13px; font-weight: bold; border-radius: 30px; }
.pb__dots .on { background: #1BA39C; }
.pb__services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 50px 80px; background: #F7F7F7; text-align: center; }
.pb__services i { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 14px; border-radius: 50%; border: 2px solid #1BA39C; color: #1BA39C; font: 32px/1 Arial, sans-serif; }
.pb__services h3 { margin: 0 0 8px; color: #333; font-size: 17px; }
.pb__services p { margin: 0; font-size: 14px; color: #999; }
.pb__cols { display: grid; grid-template-columns: 1fr 300px; gap: 50px; padding: 50px 80px; }
.pb__main h2 { font: 300 28px/1.3 "Helvetica Neue", Arial, sans-serif; color: #1BA39C; margin: 30px 0 16px; clear: both; }
.pb__main h2:first-child { margin-top: 0; }
.pb__main img { float: left; width: 340px; margin: 6px 24px 12px 0; }
.pb__main p { margin: 0 0 14px; }
.pb__hours { border-collapse: collapse; width: 100%; }
.pb__hours td { padding: 8px 12px; border-bottom: 1px solid #eee; }
.pb__hours tr:nth-child(odd) td { background: #F7F7F7; }
.pb__map { height: 280px; display: grid; place-content: center; justify-items: start; gap: 6px; padding: 0 180px; background: linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px) 0 0 / 60px 60px, #D9D6CF; font-size: 13px; color: #555; }
.pb__map b, .pb__map span, .pb__map em { background: #fff; }
.pb__map b { padding: 18px 20px 4px; color: #222; font-size: 15px; }
.pb__map span { padding: 0 20px 6px; margin-top: -6px; }
.pb__map em { font-style: normal; color: #1A73E8; font-weight: bold; padding: 0 20px 14px; margin-top: -6px; justify-self: stretch; text-align: right; }
.pb__side h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #333; border-bottom: 2px solid #1BA39C; padding-bottom: 6px; margin: 0 0 14px; }
.pb__side h3 ~ h3 { margin-top: 28px; }
.pb__post { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #eee; }
.pb__post small { display: block; color: #aaa; font-size: 12px; }
.pb__post b { display: block; color: #333; font-size: 15px; line-height: 1.4; }
.pb__post u { color: #1BA39C; font-size: 13px; text-decoration: none; }
.pb__side p { margin: 0; }
.pb__search { display: flex; }
.pb__search span { flex: 1; height: 36px; border: 1px solid #ddd; }
.pb__search b { padding: 0 14px; line-height: 36px; background: #1BA39C; color: #fff; font-size: 13px; }
.pb__foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 40px 80px; background: #2B2B2B; color: #999; font-size: 14px; }
.pb__foot h4 { color: #fff; margin: 0 0 10px; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.pb__foot p { margin: 0; }
.pb__sub { background: #222; color: #777; font-size: 12px; text-align: center; padding: 12px; }

/* Gasthaus · CMS-Template um 2009: Foto vom Parkplatz mit Datumsstempel, drei Spalten, Besucherzähler */
.gb { width: 100%; min-height: 100%; background: repeating-linear-gradient(45deg, #4A2E1B 0 6px, #52341F 6px 12px); font: 12px/1.5 Verdana, Geneva, sans-serif; color: #3B2A1C; padding-bottom: 30px; }
.gb__wrap { width: 980px; margin: 0 auto; background: #F7F0DF; box-shadow: 0 0 14px rgba(0,0,0,.6); }
.gb__head { position: relative; height: 250px; overflow: hidden; border-bottom: 3px solid #C9A45C; }
.gb__head img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.gb__stamp { position: absolute; right: 14px; bottom: 10px; font: bold 17px "Courier New", monospace; color: #FF8A1E; text-shadow: 0 0 3px rgba(255,120,0,.8); letter-spacing: 1px; }
.gb__title { position: absolute; left: 28px; top: 24px; font: italic bold 52px/1 "Monotype Corsiva", "Apple Chancery", "Brush Script MT", cursive; color: #F3D27A; text-shadow: 2px 2px 0 #3A1E0C, 3px 3px 8px #000; }
.gb__sub { position: absolute; left: 32px; top: 88px; font: italic bold 14px Georgia, serif; color: #fff; text-shadow: 1px 1px 2px #000, 0 0 6px #000; }
.gb__nav { display: flex; background: linear-gradient(#9E2B25, #6E1712); border-top: 1px solid #C4544C; border-bottom: 1px solid #3E0B08; }
.gb__nav span { padding: 9px 15px; color: #fff; font: bold 11px Verdana, sans-serif; border-right: 1px solid #4E100C; box-shadow: inset -1px 0 0 #B8453E; }
.gb__nav .on { background: linear-gradient(#E8C46A, #B8902F); color: #3B1B0A; }
.gb__crumb { padding: 6px 14px; font-size: 10px; color: #7A6650; border-bottom: 1px dotted #C8B48E; }
.gb__cols { display: grid; grid-template-columns: 180px 1fr 180px; gap: 14px; padding: 14px; }
.gb__mod { margin-bottom: 14px; background: #FFFBF0; border: 1px solid #CDB88D; font-size: 11px; }
.gb__mod h3 { margin: 0; padding: 5px 8px; background: linear-gradient(#8C241F, #661510); color: #F3D27A; font: bold 11px Verdana, sans-serif; text-transform: uppercase; }
.gb__mod p { margin: 6px 8px; }
.gb__mod a { display: block; padding: 4px 8px; border-bottom: 1px dotted #D5C4A1; color: #6E1712; }
.gb__small { font-size: 9px; color: #8A7760; }
.gb__count { display: flex; gap: 2px; justify-content: center; margin: 8px 0 2px; }
.gb__count i { font: bold 14px "Courier New", monospace; background: #111; color: #7CFF4E; padding: 2px 4px; }
.gb .gb__count + .gb__small { text-align: center; }
.gb__wx { margin: 8px; padding: 14px 6px; background: #EEE; border: 1px dashed #AAA; color: #888; text-align: center; font-size: 10px; }
.gb__main { text-align: justify; min-width: 0; }
.gb__ticker { background: #FFF3A6; border: 1px solid #E0C040; color: #C00000; font-weight: bold; padding: 5px 8px; margin-bottom: 12px; font-size: 11px; white-space: nowrap; overflow: hidden; }
.gb__main h1 { font: bold 20px/1.3 Georgia, serif; color: #8C241F; margin: 0 0 10px; text-align: left; }
.gb__main h2 { font: bold 15px Georgia, serif; color: #8C241F; border-bottom: 1px solid #C9A45C; margin: 18px 0 8px; padding-bottom: 3px; text-align: left; clear: both; }
.gb__main p { margin: 0 0 10px; }
.gb__float { float: right; width: 180px; margin: 2px 0 8px 12px; border: 1px solid #999; padding: 3px; background: #fff; }
.gb__pdf { clear: both; display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #CDB88D; padding: 8px; text-align: left; }
.gb__pdf b { background: #C4161C; color: #fff; font: bold 11px Arial, sans-serif; padding: 10px 6px; }
.gb__pdf u { color: #6E1712; }
.gb__thumbs { display: flex; gap: 10px; margin-bottom: 8px; }
.gb__thumbs img { width: 33%; height: 120px; object-fit: cover; border: 1px solid #999; padding: 3px; background: #fff; }
.gb__table { border-collapse: collapse; width: 100%; font-size: 11px; text-align: left; }
.gb__table th { background: #C9A45C; color: #3B1B0A; padding: 4px 6px; }
.gb__table td { border: 1px solid #CDB88D; padding: 4px 6px; background: #FFFBF0; }
.gb__upd { font-size: 10px; color: #8A7760; font-style: italic; }
.gb__input { margin: 4px 8px; height: 18px; border: 1px solid #999; background: #fff; box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); }
.gb__btn { display: inline-block; margin: 4px 8px 8px; padding: 2px 8px; border: 1px solid #777; background: linear-gradient(#FAFAFA, #DDD); font-size: 11px; }
.gb__foot { padding: 10px; background: #661510; color: #E8C98A; text-align: center; font-size: 10px; line-height: 1.7; }

/* =========================================================
   NACHHER
   ========================================================= */

/* ---------- Maler Kessler: der Raum streicht sich beim Scrollen in den Tönen des Fächers ---------- */
.ka { container-type: inline-size; position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 4fr 8fr; background: #EFE9DD; color: #23231F; font: 400 16px/1.55 "Schibsted Grotesk", sans-serif; overflow: hidden; }
.ka__room { position: relative; order: 2; overflow: hidden; background: #D9D2C3; }
.ka__room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.ka__coat { clip-path: inset(0 0 calc((1 - var(--rv, 0)) * 100%) 0); }
.ka__roller { position: absolute; left: 0; right: 0; top: calc(var(--roll, 0) * 100%); height: 3px; margin-top: -1px; background: rgba(255,255,255,.75); box-shadow: 0 0 18px 4px rgba(255,255,255,.35); opacity: var(--roll-on, 0); }
.ka__paper { padding: 34px 40px 40px 48px; display: flex; flex-direction: column; }
.ka__nav { display: flex; align-items: baseline; gap: 28px; margin-bottom: auto; }
.ka__logo { height: 58px; width: auto; }
.ka__links { display: flex; gap: 20px; margin-left: auto; font-size: 14px; color: #5A564C; }
.ka h1 { font: 300 50px/1.08 "Newsreader", Georgia, serif; font-variation-settings: "opsz" 72; letter-spacing: -.012em; color: #2E2B25; margin: 0 0 18px; max-width: 9.5em; }
.ka h1 em { font-style: italic; color: #94402E; }
.ka__sub { font-size: 15px; line-height: 1.6; color: #6A655A; margin: 0 0 26px; max-width: 26em; }
.ka__chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 28px; }
.ka__chip { pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: #FBF8F2; text-align: left; font: inherit; color: inherit; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(35,35,31,.12); transition: box-shadow 200ms ease, transform 200ms ease; }
.ka__chip i { display: block; height: 58px; background: var(--c); }
.ka__chip span { display: block; padding: 6px 8px 8px; font-size: 10px; letter-spacing: .06em; color: #7A7466; }
.ka__chip span b { display: block; font-size: 13px; letter-spacing: 0; font-weight: 500; color: #23231F; }
.ka__chip.is-on { box-shadow: 0 0 0 2px #23231F; transform: translateY(-4px); }
.ka__act { display: flex; align-items: center; gap: 20px; }
.ka__btn { padding: 16px 24px; background: #94402E; color: #F6EFE3; font-size: 16px; font-weight: 500; border-radius: 40px; }
.ka__tel { font-size: 16px; border-bottom: 1.5px solid currentColor; }
@container (max-width: 600px) {
  .ka { grid-template-columns: 1fr; grid-template-rows: 44% 1fr; }
  .ka__room { order: 0; }
  .ka__paper { padding: 18px 20px 22px; }
  .ka__nav { position: absolute; top: 16px; left: 20px; right: 20px; margin: 0; }
  .ka__logo { height: 40px; background: rgba(239,233,221,.92); padding: 6px 10px; border-radius: 6px; }
  .ka__links { display: none; }
  .ka h1 { font-size: 34px; margin-bottom: 10px; }
  .ka__sub { font-size: 14px; margin-bottom: 14px; }
  .ka__chips { gap: 5px; margin-bottom: 16px; }
  .ka__chip i { height: 40px; }
  .ka__chip span { padding: 4px 5px 6px; font-size: 8px; }
  .ka__chip span b { font-size: 10px; }
  .ka__btn { padding: 13px 18px; font-size: 14px; }
}

/* ---------- Physiotherapie Seeufer: eine Wirbelsäule richtet sich beim Scrollen auf ---------- */
.pa { container-type: inline-size; position: relative; width: 100%; height: 100%; overflow: hidden; background: #050D21; color: #fff; font: 400 16px/1.5 "Onest", sans-serif; }
.pa__film { position: absolute; top: 0; right: 0; width: 64%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pa__shade { position: absolute; inset: 0; background: linear-gradient(90deg, #050D21 36%, rgba(5,13,33,.85) 44%, rgba(5,13,33,0) 62%); }
.pa__nav { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 30px; padding: 26px 56px; }
.pa__logo { height: 58px; width: auto; }
.pa__links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; opacity: .8; }
.pa__call { font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 99px; background: #3FE0B0; color: #050D21; }
.pa__copy { position: absolute; left: 56px; bottom: 56px; width: 520px; }
.pa__day { font-size: 15px; font-weight: 600; color: #3FE0B0; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.pa__day::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3FE0B0; box-shadow: 0 0 0 5px rgba(63,224,176,.2); }
.pa h1 { font: 800 88px/.92 "Onest", sans-serif; letter-spacing: -.055em; margin: 0 0 22px; }
.pa h1 em { font-style: normal; color: #3FE0B0; }
.pa__sub { font-size: 18px; color: #C6D2EA; margin-bottom: 26px; }
.pa__slots { display: flex; gap: 10px; }
.pa__slot { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 13px; color: #C6D2EA; }
.pa__slot b { font-size: 24px; color: #fff; letter-spacing: -.02em; }
.pa__slot:first-child { background: #3FE0B0; color: #050D21; box-shadow: none; }
.pa__slot:first-child b { color: #050D21; }
@container (max-width: 600px) {
  .pa__film { width: 100%; height: 56%; }
  .pa__shade { background: linear-gradient(180deg, rgba(5,13,33,0) 30%, #050D21 56%); }
  .pa__nav { padding: 18px 20px; }
  .pa__logo { height: 38px; }
  .pa__links { display: none; }
  .pa__call { margin-left: auto; }
  .pa__copy { left: 20px; right: 20px; bottom: 22px; width: auto; }
  .pa h1 { font-size: 50px; margin-bottom: 12px; }
  .pa__sub { font-size: 14px; margin-bottom: 16px; }
  .pa__slots { gap: 6px; }
  .pa__slot { padding: 9px 10px; font-size: 11px; flex: 1; }
  .pa__slot b { font-size: 18px; }
}

/* ---------- Hotel Lindenhof: der Park ist der Held, der Drohnenflug läuft mit dem Scrollen ---------- */
.ga { container-type: inline-size; position: relative; width: 100%; height: 100%; overflow: hidden; color: #FBF7EE; font: 400 16px/1.5 "Schibsted Grotesk", sans-serif;
  background: #2F4A2E radial-gradient(120% 90% at 70% 30%, #7FA06A 0%, #3E6138 45%, #1E3320 100%); }
.ga__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ga__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,12,.55) 0%, rgba(10,22,12,0) 22%), radial-gradient(110% 85% at 0% 100%, rgba(8,18,10,.86) 0%, rgba(8,18,10,.5) 38%, rgba(8,18,10,0) 68%); }
.ga__nav { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 34px; padding: 28px 56px; }
.ga__logo { height: 66px; width: auto; margin-right: auto; filter: drop-shadow(0 1px 8px rgba(0,0,0,.25)); }
.ga__links { display: flex; gap: 28px; font-size: 15px; }
.ga__book { padding: 12px 20px; background: #FBF7EE; color: #1F2E1D; font-weight: 600; font-size: 15px; border-radius: 99px; }
.ga__copy { position: absolute; left: 56px; bottom: 150px; max-width: 760px; }
.ga__kicker { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; margin-bottom: 14px; }
.ga h1 { font: 400 108px/.95 "Gloock", Georgia, serif; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.ga__bar { position: absolute; left: 56px; right: 56px; bottom: 40px; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: stretch; background: rgba(251,247,238,.94); color: #1F2E1D; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); }
.ga__bar span { padding: 16px 22px; font-size: 17px; font-weight: 500; border-right: 1px solid rgba(31,46,29,.14); }
.ga__bar small { display: block; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.ga__bar b { display: grid; place-items: center; padding: 0 30px; background: #1F2E1D; color: #FBF7EE; font-size: 16px; font-weight: 600; }
@container (max-width: 600px) {
  .ga__nav { padding: 18px 20px; }
  .ga__logo { height: 40px; }
  .ga__links { display: none; }
  .ga__book { padding: 10px 14px; font-size: 13px; }
  .ga__copy { left: 20px; right: 20px; bottom: 238px; }
  .ga__kicker { font-size: 11px; }
  .ga h1 { font-size: 56px; }
  .ga__bar { left: 14px; right: 14px; bottom: 16px; grid-template-columns: 1fr 1fr; }
  .ga__bar span { padding: 12px 14px; font-size: 14px; border-bottom: 1px solid rgba(31,46,29,.14); }
  .ga__bar span:nth-child(3) { grid-column: 1 / -1; }
  .ga__bar b { grid-column: 1 / -1; padding: 16px; }
}