:root {
  --ink: #173f38;
  --ink-deep: #0c2c28;
  --cream: #f7f0e4;
  --paper: #fffaf2;
  --sun: #f2c45f;
  --coral: #e56d4e;
  --coral-dark: #c84f35;
  --sage: #b9c9aa;
  --sky: #c8e0df;
  --line: rgba(23, 63, 56, 0.16);
  --muted: #64716c;
  --serif: "Bodoni 72", Didot, "Bodoni MT", "Iowan Old Style", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Century Gothic", "Segoe UI", sans-serif;
  --shadow: 0 26px 80px rgba(21, 57, 50, 0.12);
  --radius: 34px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(242, 196, 95, 0.2), transparent 25rem),
    linear-gradient(180deg, #fffaf2 0%, #f7f0e4 70%, #f2e9da 100%);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.menu-open, body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, select, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 200; padding: 12px 18px;
  background: var(--ink-deep); color: white; border-radius: 999px;
}
.skip-link:focus { top: 16px; }
.shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }

.site-header {
  position: sticky; z-index: 80; top: 0; border-bottom: 1px solid rgba(23, 63, 56, 0.1);
  background: rgba(255, 250, 242, 0.9); backdrop-filter: blur(18px);
}
.header-inner { min-height: 90px; display: flex; align-items: center; gap: 32px; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 13px; line-height: 1; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--coral); color: white; font-family: var(--serif); font-size: 26px;
  font-style: italic; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.18);
}
.brand-copy { display: grid; gap: 6px; }
.brand-name { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: 0.065em; }
.brand-place { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.main-nav a { position: relative; padding: 13px 14px; font-size: 14px; font-weight: 700; }
.main-nav a::after {
  content: ""; position: absolute; right: 14px; bottom: 8px; left: 14px; height: 2px;
  background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { flex: 0 0 auto; }
.menu-toggle {
  width: 48px; height: 48px; display: none; border: 1px solid var(--line);
  border-radius: 50%; background: white; color: var(--ink); cursor: pointer;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after {
  content: ""; width: 20px; height: 2px; display: block; margin: 4px auto;
  background: currentColor; transition: 180ms ease;
}
.menu-toggle[aria-expanded="true"] span { opacity: 0; }
.menu-toggle[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav { display: none; }

.button {
  min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border: 1px solid transparent; border-radius: 999px; background: var(--ink);
  color: white; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.button:hover { transform: translateY(-2px); background: var(--ink-deep); box-shadow: 0 12px 30px rgba(12,44,40,.18); }
.button.coral { background: var(--coral); }
.button.coral:hover { background: var(--coral-dark); }
.button.light { border-color: rgba(255,255,255,.38); background: white; color: var(--ink); }
.button.outline { border-color: var(--ink); background: transparent; color: var(--ink); }
.button.whatsapp { background: #1c8e5c; }
.button.small { min-height: 46px; padding: 10px 18px; font-size: 13px; }

main { overflow: clip; }
.hero { position: relative; padding: clamp(72px,9vw,128px) 0 clamp(82px,10vw,142px); }
.hero::before {
  content: ""; position: absolute; z-index: -1; right: -12vw; top: -15rem; width: 52rem; height: 52rem;
  border-radius: 47% 53% 62% 38% / 44% 43% 57% 56%;
  background: linear-gradient(145deg, rgba(200,224,223,.66), rgba(185,201,170,.16)); transform: rotate(12deg);
}
.hero-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(360px,.82fr); align-items: center; gap: clamp(48px,8vw,112px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--coral-dark);
  font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 32px; height: 2px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: .97; text-wrap: balance; }
h1 { max-width: 13ch; margin-bottom: 30px; font-size: clamp(66px,8.2vw,126px); letter-spacing: -.055em; }
h1 .accent, h2 .accent { color: var(--coral); font-style: italic; font-weight: 400; }
h2 { max-width: 15ch; margin-bottom: 24px; font-size: clamp(48px,6vw,82px); letter-spacing: -.045em; }
h3 { margin-bottom: 14px; font-size: clamp(28px,3vw,40px); letter-spacing: -.025em; }
.lead { max-width: 680px; margin-bottom: 34px; color: #53645e; font-size: clamp(19px,2vw,23px); line-height: 1.58; }
.hero-actions, .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.trust-line { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 13px; font-weight: 700; }
.trust-line span::before { content: "•"; margin-right: 9px; color: var(--coral); }
.hero-art { position: relative; min-height: 510px; }
.hero-orbit { position: absolute; inset: 2% 3% 8% 7%; border: 1px solid rgba(23,63,56,.28); border-radius: 49% 51% 58% 42% / 45% 40% 60% 55%; transform: rotate(-8deg); }
.hero-blob {
  position: absolute; inset: 9% 8% 3% 4%; display: grid; place-items: center;
  border-radius: 55% 45% 44% 56% / 47% 55% 45% 53%;
  background: radial-gradient(circle at 64% 26%, rgba(255,255,255,.75) 0 10%, transparent 11%), linear-gradient(145deg,var(--sun),#f4a76b);
  box-shadow: var(--shadow); transform: rotate(4deg);
}
.hero-foot { position: relative; width: 160px; height: 310px; border-radius: 48% 52% 44% 56% / 35% 36% 64% 65%; background: rgba(255,250,242,.94); box-shadow: 0 20px 60px rgba(23,63,56,.13); transform: rotate(24deg); }
.hero-foot::before { content: ""; position: absolute; left: -21px; top: -37px; width: 60px; height: 76px; border-radius: 60% 50% 48% 55%; background: inherit; box-shadow: 38px -12px 0 -5px rgba(255,250,242,.94),71px -1px 0 -11px rgba(255,250,242,.94),97px 18px 0 -15px rgba(255,250,242,.94); }
.price-seal { position: absolute; right: -12px; bottom: 8px; width: 146px; height: 146px; display: grid; place-items: center; padding: 20px; border-radius: 50%; background: var(--ink); color: white; text-align: center; transform: rotate(7deg); box-shadow: 0 18px 45px rgba(12,44,40,.25); }
.price-seal strong { display: block; font-family: var(--serif); font-size: 40px; line-height: 1; }
.price-seal span { display: block; margin-top: 7px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.section { position: relative; padding: clamp(88px,11vw,150px) 0; }
.section.compact { padding: clamp(66px,8vw,104px) 0; }
.section.paper { background: rgba(255,250,242,.72); }
.section.ink { overflow: hidden; background: radial-gradient(circle at 85% 5%, rgba(242,196,95,.2), transparent 25rem),var(--ink); color: white; }
.section.sun { background: radial-gradient(circle at 80% 20%,rgba(255,255,255,.35),transparent 22rem),var(--sun); }
.section-head { margin-bottom: 54px; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.55fr); align-items: end; gap: 48px; }
.section-head h2 { margin-bottom: 0; }
.section-head p { margin-bottom: 8px; color: var(--muted); font-size: 18px; }
.ink .section-head p, .ink .muted { color: rgba(255,255,255,.7); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.card { position: relative; min-height: 100%; padding: clamp(30px,4vw,48px); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,250,242,.9); box-shadow: 0 12px 38px rgba(23,63,56,.06); }
.card.colored { border-color: transparent; background: var(--sky); }
.card.sunny { border-color: transparent; background: #f8d886; }
.card.coral-card { border-color: transparent; background: #ee8a6e; color: var(--ink-deep); }
.card-number { margin-bottom: 46px; display: block; color: var(--coral-dark); font-family: var(--serif); font-size: 58px; font-style: italic; line-height: 1; }
.card p:last-child { margin-bottom: 0; }
.pill { display: inline-flex; align-items: center; padding: 7px 13px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }

.offer { position: relative; overflow: hidden; padding: clamp(40px,7vw,80px); border-radius: 44px; background: radial-gradient(circle at 90% 0,rgba(255,255,255,.24),transparent 23rem),var(--coral); color: var(--ink-deep); }
.offer::after { content: "60"; position: absolute; right: -10px; bottom: -78px; color: rgba(255,255,255,.18); font-family: var(--serif); font-size: clamp(230px,36vw,460px); line-height: .7; }
.offer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
.offer h2 { max-width: 10ch; }
.offer-price { text-align: right; }
.offer-price strong { display: block; font-family: var(--serif); font-size: clamp(88px,13vw,166px); font-weight: 500; letter-spacing: -.06em; line-height: .75; }
.offer-price span { display: block; margin-top: 24px; font-size: 13px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.check-list, .plain-list, .area-list { margin: 26px 0 0; padding: 0; list-style: none; }
.check-list { display: grid; gap: 13px; }
.check-list li { position: relative; padding-left: 30px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--coral-dark); font-weight: 900; }
.plain-list { display: grid; gap: 15px; }
.plain-list li { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.area-list { display: flex; flex-wrap: wrap; gap: 10px; }
.area-list li { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.48); font-size: 13px; font-weight: 800; }

.portrait-layout { display: grid; grid-template-columns: minmax(340px,.78fr) minmax(0,1.05fr); align-items: center; gap: clamp(48px,8vw,110px); }
.portrait-frame { position: relative; padding: 16px; border: 1px solid var(--line); border-radius: 46% 46% 30px 30px; background: rgba(255,255,255,.42); }
.portrait-frame::before { content: ""; position: absolute; z-index: -1; left: -44px; bottom: -44px; width: 180px; height: 180px; border-radius: 50%; background: var(--sun); }
.portrait-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: calc(46% - 10px) calc(46% - 10px) 22px 22px; }
.quote { max-width: 900px; margin: 0 auto; text-align: center; }
.quote blockquote { margin: 0 0 34px; font-family: var(--serif); font-size: clamp(44px,6vw,78px); font-weight: 500; line-height: 1.02; letter-spacing: -.04em; }
.quote cite { font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }

.page-hero { position: relative; padding: clamp(72px,9vw,126px) 0 clamp(74px,9vw,118px); }
.page-hero::after { content: ""; position: absolute; z-index: -1; right: -10rem; bottom: -16rem; width: 36rem; height: 36rem; border-radius: 50%; background: rgba(200,224,223,.44); }
.page-hero h1 { max-width: 12ch; font-size: clamp(62px,8vw,112px); }
.page-hero .lead { max-width: 760px; }
.breadcrumbs { margin-bottom: 44px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumbs a:hover { color: var(--coral-dark); }
.split { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.75fr); align-items: start; gap: clamp(44px,8vw,108px); }
.sticky-card { position: sticky; top: 120px; }
.big-fact { margin: 0; font-family: var(--serif); font-size: clamp(68px,10vw,130px); letter-spacing: -.06em; line-height: .85; }
.big-fact small { display: block; margin-top: 20px; font-family: var(--sans); font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.timeline { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.timeline li { position: relative; padding: 0 0 56px 86px; counter-increment: step; }
.timeline li::before { content: counter(step,decimal-leading-zero); position: absolute; left: 0; top: -5px; color: var(--coral); font-family: var(--serif); font-size: 42px; font-style: italic; }
.timeline li::after { content: ""; position: absolute; left: 30px; top: 50px; bottom: 8px; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline h3 { font-size: 34px; }

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 27px 58px 27px 0; list-style: none; cursor: pointer; font-family: var(--serif); font-size: clamp(26px,3vw,36px); font-weight: 600; line-height: 1.2; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 6px; top: 23px; color: var(--coral); font-family: var(--sans); font-size: 36px; font-weight: 300; }
.faq-list details[open] summary::after { content: "−"; }
.faq-answer { max-width: 790px; padding: 0 40px 28px 0; color: var(--muted); font-size: 18px; }

.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.article-card { min-height: 430px; display: flex; flex-direction: column; padding: 34px; border: 1px solid var(--line); border-radius: 32px; background: var(--paper); transition: transform 180ms ease,box-shadow 180ms ease; }
.article-card:nth-child(2) { background: var(--sky); }
.article-card:nth-child(3) { background: #f7d88a; }
.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.article-card h3 { margin-top: auto; }
.article-card .arrow-link { margin-top: 24px; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; color: var(--coral-dark); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.article { max-width: 840px; margin-inline: auto; }
.article h2 { max-width: 18ch; margin-top: 76px; font-size: clamp(40px,5vw,62px); }
.article h3 { margin-top: 46px; }
.article p, .article li { font-size: 19px; }
.article li + li { margin-top: 12px; }
.article-note { margin: 54px 0; padding: 32px; border-left: 5px solid var(--coral); border-radius: 0 24px 24px 0; background: var(--sky); }

.contact-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(420px,1.2fr); gap: clamp(44px,8vw,100px); }
.contact-links { display: grid; gap: 12px; margin-top: 32px; }
.contact-link { padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-link small { display: block; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.contact-link strong { display: block; margin-top: 4px; font-family: var(--serif); font-size: clamp(25px,3vw,34px); }
.booking-box { padding: clamp(30px,5vw,54px); border-radius: 36px; background: var(--ink); color: white; box-shadow: var(--shadow); }
.booking-box h2, .booking-box h3 { color: white; }
.booking-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 34px; }
.booking-step { padding-top: 12px; border-top: 2px solid rgba(255,255,255,.2); color: rgba(255,255,255,.56); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.booking-step.active { border-color: var(--sun); color: white; }
.field { display: grid; gap: 8px; margin-top: 18px; }
.field label { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.field select { width: 100%; min-height: 58px; padding: 12px 46px 12px 17px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; background: #fffaf2; color: var(--ink); cursor: pointer; }
.message-preview { min-height: 118px; margin: 20px 0; padding: 18px; border: 1px solid rgba(255,255,255,.17); border-radius: 16px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); font-size: 13px; white-space: pre-line; }
.booking-box .button { width: 100%; }
.booking-note { margin: 14px 0 0; color: rgba(255,255,255,.58); font-size: 11px; text-align: center; }

.legal { max-width: 860px; }
.legal h1 { max-width: none; font-size: clamp(58px,8vw,92px); }
.legal h2 { max-width: none; margin-top: 64px; font-size: 42px; }
.legal h3 { margin-top: 36px; font-size: 28px; }
.legal p, .legal li { font-size: 16px; }
.notice { padding: 22px 26px; border: 1px solid rgba(229,109,78,.45); border-radius: 18px; background: rgba(229,109,78,.09); }
.cta-band { position: relative; overflow: hidden; padding: clamp(56px,8vw,90px); border-radius: 44px; background: var(--ink); color: white; }
.cta-band::after { content: ""; position: absolute; right: -120px; top: -180px; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.035),0 0 0 110px rgba(255,255,255,.025); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { max-width: 12ch; }

.site-footer { padding: 82px 0 28px; background: var(--ink-deep); color: white; }
.footer-main { display: grid; grid-template-columns: 1.15fr .65fr 1.15fr; gap: clamp(40px,7vw,90px); padding-bottom: 66px; }
.footer-brand .brand { color: white; }
.footer-brand p { max-width: 420px; margin: 28px 0 30px; color: rgba(255,255,255,.64); font-size: 16px; }
.footer-kicker { margin-bottom: 19px; color: var(--sun); font-size: 10px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.footer-links { display: grid; gap: 12px; }
.footer-links a { color: rgba(255,255,255,.82); font-size: 14px; }
.footer-links a:hover { color: var(--sun); }
.footer-phone { display: block; margin-bottom: 18px; font-family: var(--serif); font-size: clamp(26px,2.7vw,35px); line-height: 1.1; white-space: nowrap; }
.footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.48); font-size: 11px; }

.booking-modal { position: fixed; z-index: 150; inset: 0; display: none; place-items: center; padding: 24px; background: rgba(8,30,27,.65); backdrop-filter: blur(10px); }
.booking-modal.open { display: grid; }
.modal-panel { position: relative; width: min(100%,610px); max-height: calc(100vh - 48px); overflow: auto; border-radius: 36px; box-shadow: 0 40px 100px rgba(0,0,0,.34); }
.modal-close { position: absolute; z-index: 2; right: 18px; top: 18px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.13); color: white; font-size: 25px; cursor: pointer; }
.reveal { animation: rise-in 600ms both; }
.reveal.delay-1 { animation-delay: 80ms; }
.reveal.delay-2 { animation-delay: 160ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

@media (max-width:1080px) {
  .main-nav,.header-cta { display:none; }
  .menu-toggle { margin-left:auto; display:block; }
  .mobile-nav { position:fixed; z-index:75; inset:90px 0 0; display:grid; align-content:start; gap:2px; padding:32px 24px 56px; background:var(--paper); transform:translateX(100%); transition:transform 220ms ease; }
  .mobile-nav.open { transform:translateX(0); }
  .mobile-nav a { padding:14px 0; border-bottom:1px solid var(--line); font-family:var(--serif); font-size:32px; line-height:1.1; }
  .mobile-nav .button { margin-top:22px; border:0; color:white; font-family:var(--sans); font-size:14px; }
  .hero-grid,.portrait-layout,.split,.contact-grid { grid-template-columns:1fr; }
  .hero-grid { gap:34px; }
  .hero-art { width:min(100%,600px); min-height:480px; margin-inline:auto; }
  .portrait-layout { gap:70px; }
  .portrait-frame { width:min(100%,570px); }
  .sticky-card { position:relative; top:auto; }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  body { font-size:16px; line-height:1.62; }
  .shell { width:min(calc(100% - 30px),var(--max)); }
  .header-inner { min-height:76px; }
  .brand-mark { width:38px; height:38px; font-size:23px; }
  .brand-name { font-size:21px; }
  .brand-place { font-size:8px; }
  .mobile-nav { inset:76px 0 0; }
  h1,.page-hero h1 { max-width:11ch; font-size:clamp(52px,17vw,78px); line-height:.96; }
  h2 { font-size:clamp(42px,13vw,62px); }
  h3 { font-size:30px; }
  .hero,.page-hero { padding-top:58px; }
  .hero-art { min-height:370px; }
  .hero-foot { width:126px; height:244px; }
  .price-seal { right:0; width:124px; height:124px; }
  .price-seal strong { font-size:34px; }
  .hero-actions,.action-row { align-items:stretch; flex-direction:column; }
  .hero-actions .button,.action-row .button { width:100%; }
  .trust-line { display:grid; gap:6px; }
  .section-head { grid-template-columns:1fr; gap:14px; margin-bottom:38px; }
  .grid-2,.grid-3,.grid-4,.article-grid { grid-template-columns:1fr; }
  .card { padding:28px; border-radius:26px; }
  .card-number { margin-bottom:30px; }
  .offer { padding:36px 26px; border-radius:30px; }
  .offer-grid { grid-template-columns:1fr; gap:38px; }
  .offer-price { text-align:left; }
  .offer-price strong { font-size:100px; }
  .portrait-frame { padding:10px; border-radius:45% 45% 24px 24px; }
  .portrait-frame::before { left:-15px; bottom:-24px; width:120px; height:120px; }
  .timeline li { padding-left:68px; }
  .timeline li::after { left:23px; }
  .article-card { min-height:340px; padding:28px; }
  .contact-grid { grid-template-columns:minmax(0,1fr); }
  .booking-box { padding:28px 20px; border-radius:28px; }
  .booking-steps { gap:5px; }
  .booking-step { font-size:8px; }
  .cta-band { padding:42px 27px; border-radius:30px; }
  .footer-main { grid-template-columns:1fr; gap:42px; }
  .footer-bottom { flex-direction:column; gap:8px; }
  .booking-modal { align-items:end; padding:0; }
  .modal-panel { width:100%; max-height:92vh; border-radius:30px 30px 0 0; }
}

/* Premium editorial refinements */
.section.ink .card {
  color: var(--ink-deep);
  background: linear-gradient(145deg, #fffdf7 0%, #efe9de 100%);
}

.section.ink .card p,
.section.ink .card li {
  color: #465852;
}

.cta-band .lead,
.cta-band .muted,
.cta-band p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.78fr);
  align-items: center;
  gap: clamp(44px, 8vw, 108px);
}

.route-visual {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(23, 63, 56, 0.14);
  border-radius: 42px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(200, 224, 223, 0.48)),
    repeating-linear-gradient(35deg, transparent 0 36px, rgba(23, 63, 56, 0.04) 37px 38px);
  box-shadow: var(--shadow);
}

.route-visual::before,
.route-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(23, 63, 56, 0.16);
  border-radius: 50%;
}

.route-visual::before {
  width: 420px;
  height: 420px;
  right: -150px;
  top: -140px;
  box-shadow: 0 0 0 45px rgba(255, 255, 255, 0.16), 0 0 0 90px rgba(255, 255, 255, 0.1);
}

.route-visual::after {
  width: 280px;
  height: 280px;
  left: -120px;
  bottom: -110px;
  background: rgba(242, 196, 95, 0.22);
}

.route-river {
  position: absolute;
  left: 43%;
  top: -10%;
  width: 76px;
  height: 122%;
  border-radius: 58% 42% 55% 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.2));
  transform: rotate(14deg);
}

.route-line {
  position: absolute;
  left: 20%;
  top: 18%;
  width: 62%;
  height: 62%;
  border: 3px dashed var(--coral);
  border-left-color: transparent;
  border-radius: 48% 52% 44% 56%;
  transform: rotate(-12deg);
}

.route-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 8px solid rgba(255,255,255,.84);
  border-radius: 50% 50% 50% 8px;
  background: var(--coral);
  color: white;
  transform: rotate(-45deg);
  box-shadow: 0 14px 34px rgba(23,63,56,.18);
}

.route-pin::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
}

.route-pin.one { left: 18%; top: 18%; }
.route-pin.two { right: 17%; bottom: 23%; }

.route-label {
  position: absolute;
  z-index: 3;
  padding: 9px 14px;
  border: 1px solid rgba(23,63,56,.12);
  border-radius: 999px;
  background: rgba(255,250,242,.9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(23,63,56,.1);
}

.route-label.start { left: 11%; top: 33%; }
.route-label.end { right: 8%; bottom: 10%; }

.route-note {
  position: absolute;
  z-index: 4;
  left: 32px;
  right: 32px;
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  background: rgba(12,44,40,.9);
  color: white;
  backdrop-filter: blur(10px);
}

.route-note strong {
  font-family: var(--serif);
  font-size: 24px;
}

.route-note span {
  color: rgba(255,255,255,.66);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.signature-offer {
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 7vw, 82px);
  border-radius: 46px;
  background:
    radial-gradient(circle at 100% 0, rgba(242,196,95,.22), transparent 27rem),
    linear-gradient(135deg, #0b2f2a 0%, #17483f 58%, #245f51 100%);
  color: white;
  box-shadow: 0 36px 100px rgba(12,44,40,.2);
}

.signature-offer::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -190px;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
}

.signature-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .6fr);
  align-items: end;
  gap: clamp(48px, 8vw, 110px);
}

.signature-offer h2 {
  color: white;
}

.signature-offer .eyebrow {
  color: var(--sun);
}

.signature-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 34px 0;
}

.signature-feature {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.signature-price {
  padding: 32px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 30px;
  background: rgba(255,255,255,.1);
  text-align: center;
  backdrop-filter: blur(14px);
}

.signature-price strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(86px, 11vw, 142px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .78;
}

.signature-price span {
  display: block;
  margin-top: 26px;
  color: rgba(255,255,255,.7);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.voucher-stage {
  position: relative;
  padding: clamp(38px, 7vw, 82px);
  border-radius: 46px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.68), transparent 18rem),
    linear-gradient(135deg, #f4dfb4 0%, #d9e4d4 48%, #b9d7d5 100%);
  box-shadow: var(--shadow);
}

.voucher-stage::before {
  content: "";
  position: absolute;
  right: 7%;
  top: 8%;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(23,63,56,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255,255,255,.14), 0 0 0 68px rgba(255,255,255,.09);
}

.voucher-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(400px, 1.18fr);
  align-items: center;
  gap: clamp(38px, 7vw, 92px);
}

.voucher-card {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 32px;
  background:
    radial-gradient(circle at 86% 12%, rgba(242,196,95,.55), transparent 14rem),
    linear-gradient(145deg, rgba(255,250,242,.98), rgba(247,240,228,.9));
  box-shadow: 0 30px 70px rgba(23,63,56,.15);
  transform: rotate(2deg);
}

.voucher-card::after {
  content: "f";
  position: absolute;
  right: -18px;
  bottom: -68px;
  color: rgba(229,109,78,.12);
  font-family: var(--serif);
  font-size: 270px;
  font-style: italic;
  line-height: 1;
}

.voucher-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.voucher-card h3 {
  max-width: 8ch;
  margin-top: 80px;
  font-size: clamp(48px, 6vw, 76px);
}

.voucher-card-price {
  position: absolute;
  z-index: 2;
  right: 42px;
  bottom: 36px;
  font-family: var(--serif);
  font-size: 58px;
}

.profile-editorial {
  display: grid;
  grid-template-columns: minmax(420px, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(50px, 8vw, 112px);
}

.profile-visual {
  position: relative;
  padding: 18px 18px 70px;
  border: 1px solid rgba(23,63,56,.14);
  border-radius: 34px;
  background:
    radial-gradient(circle at 15% 85%, rgba(242,196,95,.42), transparent 16rem),
    linear-gradient(145deg, rgba(255,255,255,.8), rgba(200,224,223,.45));
}

.profile-visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 34%;
  border-radius: 22px;
}

.profile-caption {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 25px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.credential-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 34px;
}

.credential {
  min-height: 116px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.5);
}

.credential strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.05;
}

.credential span {
  color: var(--muted);
  font-size: 11px;
}

.transparency-card {
  border-color: rgba(242,196,95,.35) !important;
  background: linear-gradient(145deg, #fff7df, #f4e7c7) !important;
}

.promo-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 36px;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid rgba(23,63,56,.14);
  border-radius: 34px;
  background:
    radial-gradient(circle at 100% 0, rgba(242,196,95,.35), transparent 16rem),
    linear-gradient(135deg, #e8f0e8, #fffaf2);
}

.promo-code {
  padding: 17px 24px;
  border: 1px dashed var(--coral-dark);
  border-radius: 16px;
  background: white;
  color: var(--coral-dark);
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}

.footer-whatsapp {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin: 4px 0 10px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #1c8e5c;
  color: white !important;
  font-weight: 900;
}

.footer-whatsapp::before {
  content: "↗";
  margin-right: 9px;
}

.privacy-banner {
  position: fixed;
  z-index: 140;
  right: 22px;
  bottom: 22px;
  width: min(calc(100% - 44px), 560px);
  padding: 24px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 26px;
  background: rgba(12,44,40,.96);
  color: white;
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
}

.privacy-banner h2 {
  max-width: none;
  margin-bottom: 10px;
  color: white;
  font-size: 30px;
}

.privacy-banner p {
  margin-bottom: 18px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.55;
}

.privacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.privacy-actions .button {
  min-height: 44px;
  padding: 9px 16px;
  font-size: 12px;
}

.privacy-actions a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1080px) {
  .page-hero-grid,
  .profile-editorial,
  .voucher-layout {
    grid-template-columns: 1fr;
  }

  .route-visual {
    min-height: 430px;
  }

  .profile-visual {
    width: min(100%, 620px);
  }

  .voucher-card {
    width: min(100%, 700px);
  }
}

@media (max-width: 760px) {
  .route-visual {
    min-height: 330px;
    border-radius: 28px;
  }

  .route-note {
    left: 15px;
    right: 15px;
    bottom: 15px;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
  }

  .route-label {
    font-size: 8px;
  }

  .signature-offer,
  .voucher-stage {
    padding: 30px 20px;
    border-radius: 30px;
  }

  .signature-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .signature-features {
    grid-template-columns: 1fr;
  }

  .signature-price {
    padding: 28px 20px;
  }

  .voucher-layout {
    grid-template-columns: minmax(0,1fr);
  }

  .voucher-card {
    min-height: 340px;
    padding: 26px;
    transform: none;
  }

  .voucher-card h3 {
    margin-top: 62px;
    font-size: 50px;
  }

  .voucher-card-price {
    right: 26px;
    bottom: 26px;
    font-size: 48px;
  }

  .profile-editorial {
    grid-template-columns: minmax(0,1fr);
    gap: 46px;
  }

  .profile-visual {
    padding: 10px 10px 62px;
    border-radius: 26px;
  }

  .profile-visual img {
    border-radius: 18px;
  }

  .profile-caption {
    left: 24px;
    right: 24px;
    bottom: 20px;
    flex-direction: column;
    gap: 2px;
  }

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

  .promo-card {
    grid-template-columns: 1fr;
    gap: 22px;
    border-radius: 26px;
  }

  .privacy-banner {
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    padding: 20px;
    border-radius: 22px;
  }

  .privacy-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .privacy-actions .button,
  .privacy-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* Final brand, editorial and booking layer */
.brand-mark img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

.hero-symbol {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(23,63,56,.94);
  box-shadow: 0 28px 70px rgba(23,63,56,.2);
  transform: rotate(-4deg);
}

.hero-symbol::before,
.hero-symbol::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
}

.hero-symbol::before { inset: 22px; }
.hero-symbol::after { inset: 43px; }

.hero-symbol img {
  position: relative;
  z-index: 2;
  width: 78px;
  height: 78px;
  filter: brightness(0) invert(1);
}

.hero-symbol-label {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  color: rgba(255,255,255,.7);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.field input {
  width: 100%;
  min-height: 58px;
  padding: 12px 17px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  background: #fffaf2;
  color: var(--ink);
  color-scheme: light;
  cursor: pointer;
}

.booking-steps.four {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.article-card p {
  margin: 16px 0 0;
  color: #52635d;
  font-size: 15px;
  line-height: 1.55;
}

.home-profile {
  display: grid;
  grid-template-columns: minmax(430px,.92fr) minmax(0,1.08fr);
  align-items: center;
  gap: clamp(50px,8vw,110px);
}

.home-profile-image {
  position: relative;
}

.home-profile-image::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px 32px 24px -24px;
  border-radius: 34px;
  background: linear-gradient(145deg,rgba(200,224,223,.8),rgba(242,196,95,.24));
}

.home-profile-image img {
  width: 100%;
  height: clamp(400px,42vw,560px);
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 31%;
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.home-profile-badge {
  position: absolute;
  right: -18px;
  bottom: -18px;
  max-width: 220px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px;
  background: rgba(255,250,242,.94);
  box-shadow: 0 16px 38px rgba(23,63,56,.14);
}

.home-profile-badge strong {
  display: block;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.05;
}

.home-profile-badge span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mobile-whatsapp {
  display: none;
}

@media (max-width:1080px) {
  .home-profile { grid-template-columns:1fr; }
  .home-profile-image { width:min(100%,680px); }
}

@media (max-width:760px) {
  .hero-symbol { width:166px; height:166px; }
  .hero-symbol img { width:58px; height:58px; }
  .hero-symbol-label { bottom:20px; font-size:8px; }

  .home-profile {
    grid-template-columns:minmax(0,1fr);
    gap:46px;
  }

  .home-profile-image::before {
    inset:-10px 10px 12px -10px;
    border-radius:24px;
  }

  .home-profile-image img {
    height:310px;
    aspect-ratio:16 / 11;
    object-position:50% 28%;
    border-radius:20px;
  }

  .home-profile-badge {
    right:12px;
    bottom:-28px;
    max-width:210px;
    padding:14px 16px;
  }

  .profile-visual img {
    height:360px;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:50% 24%;
  }

  .mobile-whatsapp {
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-height:48px;
    margin-top:18px;
    border:0 !important;
    border-radius:999px;
    background:#1c8e5c;
    color:white !important;
    font-family:var(--sans) !important;
    font-size:13px !important;
    font-weight:900;
  }
}

/* Photographic hero system */
.hero::before {
  display: none;
}

.hero-photo-card {
  position: relative;
  min-width: 0;
  height: clamp(470px, 46vw, 620px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(23,63,56,.14);
  border-radius: 42px;
  background: #e8e2d7;
  box-shadow: 0 32px 90px rgba(23,63,56,.15);
}

.hero-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(12,44,40,.62) 100%),
    linear-gradient(90deg, rgba(255,250,242,.2), transparent 35%);
  pointer-events: none;
}

.hero-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 63% 50%;
}

.hero-photo-card figcaption {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  color: white;
}

.hero-photo-card figcaption strong {
  font-family: var(--serif);
  font-size: clamp(28px,3vw,40px);
  font-weight: 500;
}

.hero-photo-card figcaption span {
  padding-bottom: 6px;
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.page-hero:not(.no-photo) {
  min-height: 620px;
  display: grid;
  align-items: center;
  border-bottom: 1px solid rgba(23,63,56,.1);
  background-image:
    linear-gradient(90deg,
      rgba(255,250,242,1) 0%,
      rgba(255,250,242,.99) 38%,
      rgba(255,250,242,.9) 52%,
      rgba(255,250,242,.26) 72%,
      rgba(255,250,242,.04) 100%),
    url("foot-massage-hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
}

.page-hero:not(.no-photo)::after {
  right: auto;
  left: -16rem;
  bottom: -19rem;
  background: rgba(242,196,95,.16);
}

.page-hero:not(.no-photo) .shell {
  position: relative;
  z-index: 2;
}

.page-hero:not(.no-photo) h1 {
  max-width: 8.7ch;
}

.page-hero:not(.no-photo) .lead {
  max-width: 620px;
  color: #40534d;
}

.page-hero.no-photo {
  background:
    radial-gradient(circle at 88% 16%, rgba(200,224,223,.42), transparent 27rem),
    linear-gradient(180deg, rgba(255,250,242,.95), rgba(247,240,228,.78));
}

@media (max-width:1080px) {
  .hero-photo-card {
    width: min(100%,720px);
    height: 490px;
    margin-inline: auto;
  }

  .page-hero:not(.no-photo) {
    min-height: 820px;
    align-items: start;
    padding-bottom: 390px;
    background-image:
      linear-gradient(180deg,
        rgba(255,250,242,1) 0%,
        rgba(255,250,242,1) 46%,
        rgba(255,250,242,.86) 58%,
        rgba(255,250,242,.12) 76%,
        rgba(255,250,242,0) 100%),
      url("foot-massage-hero.webp");
    background-size: 100% auto, auto 480px;
    background-position: center, center bottom;
  }
}

@media (max-width:760px) {
  .hero-photo-card {
    height: 360px;
    border-radius: 26px;
  }

  .hero-photo-card img {
    object-position: 69% 50%;
  }

  .hero-photo-card figcaption {
    left: 18px;
    right: 18px;
    bottom: 17px;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .hero-photo-card figcaption strong {
    font-size: 29px;
  }

  .page-hero:not(.no-photo) {
    min-height: 0;
    padding-bottom: 300px;
    background-image:
      linear-gradient(180deg,
        rgba(255,250,242,1) 0%,
        rgba(255,250,242,1) 53%,
        rgba(255,250,242,.88) 65%,
        rgba(255,250,242,.06) 84%,
        rgba(255,250,242,0) 100%),
      url("foot-massage-hero.webp");
    background-size: 100% auto, auto 320px;
    background-position: center, 61% bottom;
  }

  .page-hero:not(.no-photo) h1 {
    max-width: 10.5ch;
  }
}

/* Dedicated service hero */
.service-hero {
  padding: clamp(62px,7vw,102px) 0;
  background:
    radial-gradient(circle at 88% 10%, rgba(200,224,223,.58), transparent 26rem),
    radial-gradient(circle at 12% 90%, rgba(242,196,95,.18), transparent 24rem),
    linear-gradient(135deg,#fffaf2 0%,#f7f0e4 100%) !important;
}

.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(400px,.78fr);
  align-items: center;
  gap: clamp(48px,7vw,96px);
}

.service-hero h1 {
  max-width: 8.5ch;
}

.service-photo-card {
  position: relative;
  height: clamp(520px,52vw,690px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(23,63,56,.14);
  border-radius: 38px;
  background: #e5e0d5;
  box-shadow: 0 32px 90px rgba(23,63,56,.16);
}

.service-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 60%,rgba(12,44,40,.62) 100%);
  pointer-events: none;
}

.service-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.service-photo-card figcaption {
  position: absolute;
  z-index: 2;
  left: 26px;
  right: 26px;
  bottom: 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  color: white;
}

.service-photo-card figcaption strong {
  font-family: var(--serif);
  font-size: clamp(24px,2.4vw,34px);
  font-weight: 500;
}

.service-photo-card figcaption span {
  padding-bottom: 5px;
  color: rgba(255,255,255,.7);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

@media (max-width:1080px) {
  .service-hero-grid {
    grid-template-columns: 1fr;
  }

  .service-photo-card {
    width: min(100%,680px);
    height: 620px;
  }
}

@media (max-width:760px) {
  .service-hero {
    padding: 52px 0 76px;
  }

  .service-hero-grid {
    gap: 40px;
  }

  .service-photo-card {
    height: 430px;
    border-radius: 26px;
  }

  .service-photo-card img {
    object-position: 50% 62%;
  }

  .service-photo-card figcaption {
    left: 18px;
    right: 18px;
    bottom: 17px;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* Full-bleed premium photography: no boxed hero images */
.hero {
  min-height: 720px;
  display: grid;
  align-items: center;
  border-bottom: 1px solid rgba(23,63,56,.1);
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg,
      rgba(255,250,242,1) 0%,
      rgba(255,250,242,.99) 38%,
      rgba(255,250,242,.9) 51%,
      rgba(255,250,242,.26) 68%,
      rgba(255,250,242,.02) 100%),
    linear-gradient(180deg,rgba(255,250,242,.06) 58%,rgba(12,44,40,.18) 100%),
    url("foot-massage-hero.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center right;
}

.hero-grid {
  grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr);
}

.hero-grid > div:first-child {
  position: relative;
  z-index: 2;
}

.page-hero,
.page-hero:not(.no-photo),
.service-hero {
  min-height: 640px;
  display: grid;
  align-items: center;
  padding: clamp(72px,8vw,116px) 0;
  border-bottom: 1px solid rgba(23,63,56,.1);
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(90deg,
      rgba(255,250,242,1) 0%,
      rgba(255,250,242,1) 43%,
      rgba(255,250,242,.93) 55%,
      rgba(255,250,242,.38) 72%,
      rgba(255,250,242,.06) 100%),
    linear-gradient(180deg,transparent 55%,rgba(12,44,40,.16) 100%),
    url("foot-massage-service.webp") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 100% 100%, auto 118% !important;
  background-position: center, center, right 42% !important;
}

.page-hero.no-photo {
  background-image:
    linear-gradient(90deg,
      rgba(255,250,242,.99) 0%,
      rgba(255,250,242,.96) 48%,
      rgba(255,250,242,.76) 70%,
      rgba(255,250,242,.52) 100%),
    url("foot-massage-hero.webp") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center right !important;
}

.service-hero-grid {
  grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr);
}

.service-hero-grid > div:first-child {
  position: relative;
  z-index: 2;
}

@media (max-width:1080px) {
  .hero {
    min-height: 920px;
    align-items: start;
    padding-bottom: 430px;
    background-image:
      linear-gradient(180deg,
        rgba(255,250,242,1) 0%,
        rgba(255,250,242,1) 45%,
        rgba(255,250,242,.9) 58%,
        rgba(255,250,242,.12) 78%,
        rgba(255,250,242,0) 100%),
      url("foot-massage-hero.webp");
    background-size: 100% 100%, auto 520px;
    background-position: center, 60% bottom;
  }

  .page-hero:not(.no-photo),
  .service-hero {
    min-height: 900px;
    align-items: start;
    padding-bottom: 420px;
    background-image:
      linear-gradient(180deg,
        rgba(255,250,242,1) 0%,
        rgba(255,250,242,1) 48%,
        rgba(255,250,242,.9) 60%,
        rgba(255,250,242,.14) 80%,
        rgba(255,250,242,0) 100%),
      url("foot-massage-service.webp") !important;
    background-size: 100% 100%, auto 500px !important;
    background-position: center, center bottom !important;
  }
}

@media (max-width:760px) {
  .hero {
    min-height: 0;
    padding: 58px 0 350px;
    background-image:
      linear-gradient(180deg,
        rgba(255,250,242,1) 0%,
        rgba(255,250,242,1) 57%,
        rgba(255,250,242,.88) 68%,
        rgba(255,250,242,.05) 88%,
        rgba(255,250,242,0) 100%),
      url("foot-massage-hero.webp");
    background-size: 100% 100%, auto 370px;
    background-position: center, 61% bottom;
  }

  .page-hero:not(.no-photo),
  .service-hero {
    min-height: 0;
    padding: 52px 0 350px !important;
    background-image:
      linear-gradient(180deg,
        rgba(255,250,242,1) 0%,
        rgba(255,250,242,1) 55%,
        rgba(255,250,242,.9) 67%,
        rgba(255,250,242,.05) 88%,
        rgba(255,250,242,0) 100%),
      url("foot-massage-service.webp") !important;
    background-size: 100% 100%, auto 380px !important;
    background-position: center, 50% bottom !important;
  }

  .page-hero.no-photo {
    background-image:
      linear-gradient(180deg,
        rgba(255,250,242,.99) 0%,
        rgba(255,250,242,.93) 62%,
        rgba(255,250,242,.72) 100%),
      url("foot-massage-hero.webp") !important;
    background-size: 100% 100%, auto 100% !important;
    background-position: center, center right !important;
  }
}
/* Mobile composition repair: one true column, balanced type and full-bleed image */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .shell {
    width: calc(100% - 32px);
    max-width: 100%;
    margin-inline: auto;
  }

  .hero-grid,
  .service-hero-grid,
  .page-hero .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .hero-grid > *,
  .service-hero-grid > *,
  .page-hero .hero-grid > * {
    grid-column: 1 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .hero,
  .page-hero:not(.no-photo),
  .service-hero {
    min-height: 0 !important;
    padding-top: 42px !important;
    padding-bottom: 340px !important;
    background-size: 100% 100%, 100% 100%, auto 350px !important;
    background-position: center, center, center bottom !important;
  }

  .hero {
    background-image:
      linear-gradient(180deg, rgba(251, 247, 239, 1) 0%, rgba(251, 247, 239, 0.98) 48%, rgba(251, 247, 239, 0.72) 66%, rgba(251, 247, 239, 0.08) 100%),
      linear-gradient(90deg, rgba(251, 247, 239, 0.18), rgba(20, 67, 58, 0.08)),
      url("foot-massage-hero.webp") !important;
  }

  .page-hero:not(.no-photo),
  .service-hero {
    background-image:
      linear-gradient(180deg, rgba(251, 247, 239, 1) 0%, rgba(251, 247, 239, 0.98) 50%, rgba(251, 247, 239, 0.76) 67%, rgba(251, 247, 239, 0.08) 100%),
      linear-gradient(90deg, rgba(251, 247, 239, 0.12), rgba(20, 67, 58, 0.08)),
      url("foot-massage-service.webp") !important;
  }

  .page-hero.no-photo {
    min-height: 0 !important;
    padding: 42px 0 64px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .breadcrumbs {
    margin-bottom: 34px !important;
    font-size: 0.68rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.11em !important;
  }

  .eyebrow {
    width: 100%;
    max-width: 100% !important;
    margin-bottom: 24px !important;
    align-items: flex-start;
    gap: 10px !important;
    font-size: 0.67rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.16em !important;
  }

  .eyebrow::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    margin-top: 0.68em;
  }

  .hero h1,
  .page-hero h1,
  .page-title,
  .service-hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    font-size: clamp(3rem, 14vw, 3.75rem) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.045em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero .lead,
  .page-hero .lead,
  .service-hero .lead,
  .service-hero-copy {
    width: 100% !important;
    max-width: 32rem !important;
    margin: 0 0 28px !important;
    font-size: 1.08rem !important;
    line-height: 1.56 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-actions,
  .page-hero .hero-actions,
  .service-hero .hero-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }

  .hero-actions .button,
  .page-hero .button,
  .service-hero .button {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
  }

  .trust-line,
  .hero-trust,
  .service-trust {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 22px !important;
  }

  .trust-line > *,
  .hero-trust > *,
  .service-trust > * {
    min-width: 0;
    margin: 0 !important;
  }
}

@media (max-width: 390px) {
  .shell {
    width: calc(100% - 28px);
  }

  .hero h1,
  .page-hero h1,
  .page-title,
  .service-hero h1 {
    font-size: clamp(2.8rem, 13.5vw, 3.3rem) !important;
  }

  .hero,
  .page-hero:not(.no-photo),
  .service-hero {
    padding-bottom: 315px !important;
    background-size: 100% 100%, 100% 100%, auto 325px !important;
  }
}

/* Refined identity, controls and photographic mobile heroes */
.brand-mark {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.54);
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.28), transparent 32%),
    linear-gradient(145deg, #f48368 0%, #dc5c43 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.12),
    0 8px 20px rgba(117,47,34,.16);
}

.brand-mark img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  filter: none;
}

.brand-name {
  letter-spacing: .075em;
}

.button {
  min-height: 54px;
  padding: 13px 24px;
  border: 1px solid rgba(18,61,53,.22);
  border-radius: 999px;
  box-shadow:
    0 10px 24px rgba(19,61,53,.08),
    inset 0 1px 0 rgba(255,255,255,.62);
  letter-spacing: .012em;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.button.coral {
  border-color: rgba(161,63,43,.22);
  background: linear-gradient(135deg, #f27b5f 0%, #e45f45 100%);
  box-shadow:
    0 13px 28px rgba(190,75,52,.2),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.button.outline {
  border-color: rgba(18,61,53,.44);
  background: rgba(255,250,242,.68);
  backdrop-filter: blur(12px);
}

@media (hover:hover) {
  .button:hover {
    transform: translateY(-2px);
    box-shadow:
      0 16px 32px rgba(19,61,53,.14),
      inset 0 1px 0 rgba(255,255,255,.68);
  }

  .button.coral:hover {
    box-shadow:
      0 17px 34px rgba(190,75,52,.28),
      inset 0 1px 0 rgba(255,255,255,.4);
  }
}

@media (max-width: 760px) {
  .brand {
    gap: 11px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .brand-mark img {
    width: 26px;
    height: 26px;
  }

  .button {
    min-height: 56px;
    padding-inline: 22px;
  }

  .hero,
  .page-hero:not(.no-photo),
  .service-hero {
    min-height: clamp(620px, 154vw, 760px) !important;
    padding: 54px 0 68px !important;
    align-items: center !important;
    background-repeat: no-repeat !important;
    background-size: cover, cover, cover !important;
    background-position: center, center, center center !important;
  }

  .hero {
    background-image:
      linear-gradient(180deg, rgba(255,250,242,.98) 0%, rgba(255,250,242,.93) 46%, rgba(255,250,242,.72) 73%, rgba(255,250,242,.5) 100%),
      linear-gradient(90deg, rgba(255,250,242,.58), rgba(16,60,52,.08)),
      url("foot-massage-hero.webp") !important;
  }

  .page-hero:not(.no-photo),
  .service-hero {
    background-image:
      linear-gradient(180deg, rgba(255,250,242,.98) 0%, rgba(255,250,242,.94) 43%, rgba(255,250,242,.76) 70%, rgba(255,250,242,.54) 100%),
      linear-gradient(90deg, rgba(255,250,242,.52), rgba(16,60,52,.09)),
      url("foot-massage-service.webp") !important;
  }

  .page-hero:not(.no-photo) .shell,
  .service-hero .shell,
  .hero .shell {
    position: relative;
    z-index: 2;
  }

  .page-hero:not(.no-photo) h1,
  .service-hero h1,
  .hero h1 {
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255,255,255,.38);
  }

  .page-hero:not(.no-photo) .lead,
  .service-hero .lead,
  .hero .lead {
    max-width: 29rem !important;
    color: #29463f !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.42);
  }
}

@media (max-width: 390px) {
  .hero,
  .page-hero:not(.no-photo),
  .service-hero {
    min-height: 610px !important;
    padding: 48px 0 58px !important;
    background-size: cover, cover, cover !important;
  }
}

/* Global conversion widget */
.floating-booking {
  position: fixed;
  z-index: 72;
  right: 24px;
  bottom: 24px;
  width: min(330px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 24px;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 14px 15px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 25px;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.1), transparent 34%),
    linear-gradient(145deg, #164a40 0%, #0c322c 100%);
  color: #fffaf2;
  text-align: left;
  box-shadow:
    0 24px 60px rgba(4,30,26,.28),
    0 7px 18px rgba(4,30,26,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
  cursor: pointer;
  isolation: isolate;
  animation: floatingBookingIn 620ms cubic-bezier(.2,.8,.2,1) both;
  transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.floating-booking::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70%;
  bottom: -70%;
  left: -42%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: rotate(16deg) translateX(-320%);
  animation: floatingBookingShine 6.2s ease-in-out 1.4s infinite;
}

.floating-booking-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 17px;
  background: linear-gradient(145deg, #f48468, #df5d44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 9px 20px rgba(0,0,0,.13);
}

.floating-booking-icon svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.floating-booking-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.floating-booking-kicker {
  color: #f4cb75;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.25;
  text-transform: uppercase;
}

.floating-booking strong {
  color: white;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.018em;
  line-height: 1.05;
}

.floating-booking-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.64);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}

.floating-booking-note i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8fd6ac;
  box-shadow: 0 0 0 4px rgba(143,214,172,.1);
}

.floating-booking-arrow {
  color: rgba(255,255,255,.8);
  font-size: 20px;
  transition: transform 180ms ease;
}

.floating-booking.is-footer-visible,
body.modal-open .floating-booking,
body.menu-open .floating-booking,
body:has(#privacy-banner) .floating-booking {
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.97);
}

@media (hover:hover) {
  .floating-booking:hover {
    transform: translateY(-3px);
    box-shadow:
      0 30px 74px rgba(4,30,26,.34),
      0 9px 22px rgba(4,30,26,.2),
      inset 0 1px 0 rgba(255,255,255,.15);
  }

  .floating-booking:hover .floating-booking-arrow {
    transform: translate(2px,-2px);
  }
}

@keyframes floatingBookingIn {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatingBookingShine {
  0%, 72% { transform: rotate(16deg) translateX(-320%); }
  86%, 100% { transform: rotate(16deg) translateX(760%); }
}

@media (max-width:760px) {
  .floating-booking {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    grid-template-columns: 46px minmax(0,1fr) 20px;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 20px;
  }

  .floating-booking-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .floating-booking-icon svg {
    width: 24px;
    height: 24px;
  }

  .floating-booking strong {
    font-size: 18px;
  }
}

@media (max-width:370px) {
  .floating-booking-kicker { display: none; }
}

@media (prefers-reduced-motion:reduce) {
  .floating-booking,
  .floating-booking::before {
    animation: none !important;
  }
}

/* Cookie and legal notice */
.privacy-banner {
  position: fixed;
  z-index: 130;
  right: auto;
  bottom: 22px;
  left: 22px;
  width: min(500px, calc(100vw - 44px));
  max-width: none;
  padding: 30px;
  border: 1px solid rgba(23,63,56,.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0 0, rgba(200,224,223,.5), transparent 40%),
    rgba(255,250,242,.97);
  color: var(--ink);
  box-shadow:
    0 30px 80px rgba(8,39,34,.24),
    0 8px 24px rgba(8,39,34,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  animation: privacyNoticeIn 520ms cubic-bezier(.2,.8,.2,1) both;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--coral-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.privacy-badge span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ink);
  color: white;
}

.privacy-badge svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.privacy-banner h2 {
  max-width: 11ch;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(34px,4vw,48px);
  line-height: .98;
}

.privacy-banner > p {
  margin: 0 0 22px;
  color: #53655f;
  font-size: 14px;
  line-height: 1.6;
}

.privacy-banner .privacy-actions {
  display: grid;
  grid-template-columns: minmax(180px,.9fr) minmax(0,1.2fr);
  align-items: center;
  gap: 14px;
}

.privacy-banner .privacy-actions .button {
  width: 100%;
  min-height: 50px;
  justify-content: center;
}

.privacy-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px 13px;
}

.privacy-banner .privacy-legal a {
  width: auto;
  padding: 3px 0;
  color: #53655f;
  font-size: 11px;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(83,101,95,.32);
  text-underline-offset: 3px;
}

.privacy-banner .privacy-legal a:hover {
  color: var(--coral-dark);
}

@keyframes privacyNoticeIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width:620px) {
  .privacy-banner {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .privacy-banner h2 {
    font-size: 36px;
  }

  .privacy-banner .privacy-actions {
    grid-template-columns: minmax(0,1fr);
  }

  .privacy-legal {
    justify-content: center;
  }
}

@media (prefers-reduced-motion:reduce) {
  .privacy-banner { animation: none !important; }
}
/* Human-readable legal layer and 2026 withdrawal function */
.legal-hero .legal-title { max-width: 14ch; }
.legal-address { margin: 0 0 28px; color: var(--ink); font-style: normal; line-height: 1.75; }
.legal code { padding: 2px 7px; border-radius: 6px; background: rgba(23,63,56,.08); font-size: .88em; }
.legal .notice { margin: 36px 0 54px; }
.footer-withdraw { width: fit-content; margin-top: 6px; padding: 9px 13px !important; border: 1px solid rgba(242,196,95,.5); border-radius: 999px; color: var(--sun) !important; }
.booking-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.withdrawal-box { max-width: 920px; margin-inline: auto; padding: clamp(30px,5vw,64px); border: 1px solid rgba(255,255,255,.18); border-radius: 36px; background: rgba(255,255,255,.06); box-shadow: 0 28px 70px rgba(0,0,0,.14); }
.withdrawal-box h2 { max-width: 11ch; color: white; }
.withdrawal-box > p:not(.eyebrow) { max-width: 760px; color: rgba(255,255,255,.72); }
.withdrawal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.withdrawal-form .field input, .withdrawal-form .field textarea { width: 100%; padding: 15px 17px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; background: #fffaf2; color: var(--ink); font: inherit; }
.withdrawal-form .field textarea { min-height: 118px; resize: vertical; }
.withdrawal-form > .button { margin-top: 22px; }
.withdrawal-confirm { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.16); }
.withdrawal-confirm[hidden] { display: none; }
.withdrawal-confirm .message-preview { min-height: 0; }
.withdrawal-confirm .button { width: 100%; }
@media (max-width:760px) {
  .legal-hero .legal-title { max-width: 100% !important; font-size: clamp(2.65rem,12.5vw,3.45rem) !important; overflow-wrap: anywhere !important; word-break: normal !important; }
  .legal h2 { margin-top: 48px; font-size: clamp(2rem,10vw,2.8rem); }
  .withdrawal-grid { grid-template-columns: minmax(0,1fr); }
  .withdrawal-box { padding: 28px 20px; border-radius: 26px; }
}


/* =========================================================
   FUSSZEIT Ratgeber editorial system
   ========================================================= */
.guide-hub,
.guide-article {
  --guide-ink: #113f37;
  --guide-paper: #fbf7ef;
  --guide-coral: #eb6e50;
  --guide-gold: #e8bb5e;
  --guide-mist: #d8e9e6;
}

.guide-hub-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(620px, 76vh, 830px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(251,247,239,.98) 0%, rgba(251,247,239,.94) 36%, rgba(251,247,239,.64) 59%, rgba(17,63,55,.13) 100%),
    url("ratgeber/guide-hausbesuch.webp") 64% 42% / cover no-repeat;
}

.guide-hub-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(251,247,239,.88));
}

.guide-hub-hero-inner {
  width: 100%;
  padding-top: clamp(140px, 17vh, 210px);
  padding-bottom: clamp(72px, 9vw, 128px);
}

.guide-hub-hero h1,
.guide-hero h1 {
  max-width: 920px;
  margin: 28px 0 30px;
  color: var(--guide-ink);
  font-size: clamp(4.25rem, 7.2vw, 7.5rem);
  line-height: .88;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.guide-hub-hero .lead {
  max-width: 700px;
  color: #4e655f;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.58;
}

.guide-hub-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}

.guide-hub-trust span {
  padding: 11px 16px;
  border: 1px solid rgba(17,63,55,.2);
  border-radius: 999px;
  background: rgba(251,247,239,.72);
  color: var(--guide-ink);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.guide-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
  margin-bottom: clamp(52px, 7vw, 96px);
}

.guide-intro-row h2 {
  margin: 20px 0 0;
  max-width: 760px;
  font-size: clamp(3rem, 5.5vw, 5.7rem);
  line-height: .95;
  letter-spacing: -.045em;
}

.guide-intro-row > p {
  margin: 0;
  color: #5b6e69;
  font-size: 1.12rem;
  line-height: 1.7;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 42px);
}

.guide-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid rgba(17,63,55,.14);
  border-radius: 34px;
  background: #fffaf2;
  color: var(--guide-ink);
  text-decoration: none;
  box-shadow: 0 24px 80px rgba(44,57,49,.07);
  transition: transform .35s ease, box-shadow .35s ease;
}

.guide-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 34px 90px rgba(44,57,49,.14);
}

.guide-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.guide-card:hover img {
  transform: scale(1.025);
}

.guide-card-wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .75fr);
  grid-template-rows: none;
}

.guide-card-wide img {
  height: 100%;
  min-height: 440px;
  aspect-ratio: auto;
}

.guide-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 4vw, 54px);
}

.guide-card h3 {
  margin: 26px 0 20px;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.guide-card p {
  margin: 0 0 34px;
  color: #566a64;
  font-size: 1.04rem;
  line-height: 1.65;
}

.guide-card .arrow-link {
  margin-top: auto;
  color: var(--guide-coral);
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.guide-card-dark {
  background: #123f37;
  color: #fffaf2;
  border-color: transparent;
}

.guide-card-dark p {
  color: rgba(255,250,242,.73);
}

.guide-author-band {
  background:
    radial-gradient(circle at 12% 12%, rgba(232,187,94,.26), transparent 28%),
    linear-gradient(135deg, #123f37, #1b5147);
  color: #fffaf2;
}

.guide-author-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: center;
}

.guide-author-band h2 {
  margin: 20px 0 0;
  color: inherit;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: .94;
}

.guide-author-band p {
  color: rgba(255,250,242,.77);
  font-size: 1.14rem;
  line-height: 1.7;
}

.guide-author-band .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.guide-author-band .button:not(.coral) {
  color: #fffaf2;
  border-color: rgba(255,255,255,.4);
}

.guide-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(690px, 82vh, 920px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background-image: var(--guide-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.guide-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(251,247,239,.99) 0%, rgba(251,247,239,.96) 34%, rgba(251,247,239,.78) 52%, rgba(251,247,239,.14) 76%, rgba(17,63,55,.06) 100%),
    linear-gradient(0deg, rgba(251,247,239,.58) 0%, transparent 28%);
}

.guide-hero-inner {
  width: 100%;
  padding-top: clamp(150px, 18vh, 220px);
  padding-bottom: clamp(68px, 8vw, 112px);
}

.guide-hero-copy {
  width: min(850px, 70%);
  min-width: 0;
}

.guide-hero .breadcrumbs {
  margin-bottom: 50px;
  color: rgba(17,63,55,.68);
}

.guide-hero .eyebrow {
  color: #d95539;
}

.guide-hero .lead {
  max-width: 720px;
  margin: 0;
  color: #4f655f;
  font-size: clamp(1.18rem, 1.9vw, 1.5rem);
  line-height: 1.58;
}

.guide-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  color: #48615a;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.guide-byline span + span::before {
  content: "•";
  margin-right: 26px;
  color: var(--guide-coral);
}

.guide-article {
  width: min(920px, calc(100% - 48px));
  padding-top: 18px;
  padding-bottom: clamp(70px, 9vw, 140px);
  color: #193f38;
}

.guide-article > .lead {
  margin: 54px 0 72px;
  color: #405d56;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.66;
}

.guide-article h2 {
  margin: clamp(64px, 9vw, 104px) 0 24px;
  color: var(--guide-ink);
  font-size: clamp(2.45rem, 4.8vw, 4.5rem);
  line-height: .99;
  letter-spacing: -.042em;
  text-wrap: balance;
}

.guide-article h3 {
  color: var(--guide-ink);
}

.guide-article p,
.guide-article li {
  font-size: clamp(1.06rem, 1.45vw, 1.22rem);
  line-height: 1.78;
}

.guide-article p {
  margin: 0 0 24px;
}

.guide-article a:not(.button) {
  color: #bd462e;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.guide-answer {
  position: relative;
  margin: -74px 0 48px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(17,63,55,.14);
  border-radius: 28px;
  background: rgba(255,251,244,.95);
  box-shadow: 0 24px 70px rgba(38,64,56,.1);
  backdrop-filter: blur(18px);
}

.guide-answer span,
.guide-price-answer span,
.guide-compare span,
.guide-quote small {
  display: block;
  color: #ce5338;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.guide-answer p {
  margin: 12px 0 0;
  color: var(--guide-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.7vw, 2.25rem);
  line-height: 1.28;
  letter-spacing: -.02em;
}

.guide-price-answer {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
  margin: -74px 0 62px;
  padding: clamp(32px, 5vw, 58px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 0%, rgba(232,187,94,.3), transparent 42%),
    #123f37;
  color: #fffaf2;
  box-shadow: 0 28px 80px rgba(17,63,55,.2);
}

.guide-price-answer strong {
  display: inline-block;
  margin-top: 6px;
  color: #fffaf2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 10vw, 8.5rem);
  font-weight: 500;
  line-height: .85;
  letter-spacing: -.07em;
}

.guide-price-answer small {
  display: inline-block;
  margin-left: 10px;
  color: #fffaf2;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.guide-price-answer p {
  margin: 0;
  color: rgba(255,250,242,.78);
  font-size: 1.13rem;
}

.guide-price-answer b {
  color: #fffaf2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
}

.guide-checks {
  display: grid;
  gap: 14px;
  margin: 34px 0;
  padding: 0;
  list-style: none;
}

.guide-checks li {
  position: relative;
  padding: 18px 22px 18px 54px;
  border: 1px solid rgba(17,63,55,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
}

.guide-checks li::before {
  content: "✓";
  position: absolute;
  left: 21px;
  top: 18px;
  color: #d6553b;
  font-weight: 900;
}

.guide-steps,
.guide-stop-list {
  display: grid;
  gap: 16px;
  margin: 34px 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-step;
}

.guide-steps li {
  counter-increment: guide-step;
}

.guide-steps li,
.guide-stop-list li {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr);
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(17,63,55,.14);
}

.guide-steps li::before {
  content: "0" counter(guide-step);
  grid-row: 1 / span 2;
  color: #dc6449;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  font-style: italic;
  line-height: 1;
}

.guide-steps strong,
.guide-stop-list strong {
  color: var(--guide-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.48rem;
  line-height: 1.2;
}

.guide-steps span,
.guide-stop-list span {
  color: #536963;
  font-size: 1rem;
  line-height: 1.65;
}

.guide-steps-large li {
  grid-template-columns: 62px minmax(190px, .65fr) minmax(0, 1fr);
}

.guide-stop-list li {
  grid-template-columns: minmax(230px, .7fr) minmax(0, 1fr);
  padding-left: 28px;
  border: 1px solid rgba(17,63,55,.12);
  border-radius: 18px;
  background: #fffaf2;
}

.guide-stop-list li::before {
  content: "—";
  color: #dc6449;
  font-weight: 900;
}

.guide-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 54px 0;
}

.guide-compare > div {
  min-width: 0;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 26px;
  background: #dceae7;
}

.guide-compare > div:nth-child(2) {
  background: #f4d984;
}

.guide-compare-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-compare-three > div:nth-child(3) {
  background: #f2c1b2;
}

.guide-compare h3 {
  margin: 20px 0 14px;
  font-size: clamp(1.65rem, 2.7vw, 2.35rem);
  line-height: 1.05;
}

.guide-compare p {
  margin: 0;
  color: #3f5c55;
  font-size: 1rem;
  line-height: 1.62;
}

.guide-caution {
  margin: clamp(58px, 8vw, 94px) 0;
  padding: clamp(28px, 4vw, 46px);
  border-left: 5px solid #e06a4e;
  border-radius: 0 22px 22px 0;
  background: #f5df9d;
  color: #24463f;
  font-size: 1.08rem;
  line-height: 1.72;
}

.guide-caution strong {
  color: #123f37;
}

.guide-quote {
  margin: clamp(60px, 9vw, 110px) 0;
  padding: clamp(42px, 7vw, 78px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 86% 14%, rgba(232,187,94,.28), transparent 28%),
    #123f37;
  color: #fffaf2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 4.7vw, 4.3rem);
  font-style: italic;
  line-height: 1.15;
}

.guide-quote small {
  margin-top: 24px;
  color: rgba(255,250,242,.65);
  font-family: inherit;
  font-style: normal;
}

.guide-next {
  margin-top: clamp(70px, 10vw, 130px);
  padding: clamp(38px, 7vw, 78px);
  border-radius: 38px;
  background:
    radial-gradient(circle at 88% 8%, rgba(232,187,94,.28), transparent 33%),
    linear-gradient(135deg, #123f37, #1a4c43);
  color: #fffaf2;
  box-shadow: 0 30px 90px rgba(17,63,55,.16);
}

.guide-next h2 {
  max-width: 700px;
  margin: 20px 0 24px;
  color: #fffaf2;
}

.guide-next p:not(.eyebrow) {
  max-width: 650px;
  margin-bottom: 32px;
  color: rgba(255,250,242,.74);
}

.guide-next .eyebrow {
  color: #f0c66f;
}

.guide-related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.guide-related a {
  min-width: 0;
  padding: 26px;
  border: 1px solid rgba(17,63,55,.15);
  border-radius: 20px;
  background: rgba(255,255,255,.56);
  color: var(--guide-ink) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.25;
  text-decoration: none !important;
  transition: background .25s ease, transform .25s ease;
}

.guide-related a:hover {
  transform: translateY(-3px);
  background: #fff;
}

.guide-related span {
  display: block;
  margin-bottom: 10px;
  color: #d45b40;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .guide-card-wide {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .guide-card-wide img {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .guide-author-band-inner,
  .guide-intro-row {
    grid-template-columns: 1fr;
  }

  .guide-compare-three {
    grid-template-columns: 1fr;
  }

  .guide-hero-copy {
    width: min(760px, 82%);
  }
}

@media (max-width: 720px) {
  .guide-hub-hero {
    min-height: 760px;
    background-position: 66% center;
    background-image:
      linear-gradient(180deg, rgba(251,247,239,.98) 0%, rgba(251,247,239,.91) 53%, rgba(251,247,239,.58) 78%, rgba(17,63,55,.16) 100%),
      url("ratgeber/guide-hausbesuch.webp");
  }

  .guide-hub-hero-inner {
    padding: 116px 22px 54px;
  }

  .guide-hub-hero h1,
  .guide-hero h1 {
    margin: 20px 0 22px;
    font-size: clamp(3.15rem, 15.5vw, 4.65rem);
    line-height: .92;
    letter-spacing: -.05em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .guide-hub-hero .lead,
  .guide-hero .lead {
    font-size: 1.08rem;
    line-height: 1.55;
  }

  .guide-hub-trust {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .guide-intro-row {
    gap: 26px;
    margin-bottom: 46px;
  }

  .guide-intro-row h2 {
    font-size: 3.05rem;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-card,
  .guide-card-wide {
    grid-column: auto;
    border-radius: 25px;
  }

  .guide-card img,
  .guide-card-wide img {
    aspect-ratio: 4 / 3;
  }

  .guide-card-body {
    padding: 28px 24px 32px;
  }

  .guide-card h3 {
    margin-top: 20px;
    font-size: 2.22rem;
  }

  .guide-author-band-inner {
    gap: 34px;
  }

  .guide-author-band h2 {
    font-size: 3.25rem;
  }

  .guide-hero {
    min-height: 790px;
    background-position: 63% center;
  }

  .guide-hero::before {
    background:
      linear-gradient(180deg, rgba(251,247,239,.99) 0%, rgba(251,247,239,.94) 50%, rgba(251,247,239,.72) 72%, rgba(17,63,55,.16) 100%),
      linear-gradient(90deg, rgba(251,247,239,.9), rgba(251,247,239,.25));
  }

  .guide-hero-inner {
    padding: 116px 22px 56px;
  }

  .guide-hero-copy {
    width: 100%;
    max-width: 100%;
  }

  .guide-hero .breadcrumbs {
    margin-bottom: 32px;
    font-size: .7rem;
  }

  .guide-byline {
    display: grid;
    gap: 7px;
    margin-top: 25px;
    font-size: .68rem;
  }

  .guide-byline span + span::before {
    display: none;
  }

  .guide-article {
    width: min(100% - 36px, 920px);
    padding-top: 0;
  }

  .guide-answer,
  .guide-price-answer {
    margin-top: -34px;
    border-radius: 23px;
  }

  .guide-answer {
    padding: 27px 23px;
  }

  .guide-answer p {
    font-size: 1.48rem;
  }

  .guide-price-answer {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 25px;
  }

  .guide-price-answer strong {
    font-size: 5.6rem;
  }

  .guide-article > .lead {
    margin: 44px 0 58px;
    font-size: 1.22rem;
  }

  .guide-article h2 {
    margin-top: 64px;
    font-size: 2.7rem;
    overflow-wrap: normal;
    word-break: normal;
  }

  .guide-article p,
  .guide-article li {
    font-size: 1.04rem;
    line-height: 1.72;
  }

  .guide-steps li,
  .guide-steps-large li,
  .guide-stop-list li {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .guide-steps li::before {
    grid-row: auto;
  }

  .guide-stop-list li {
    padding: 23px;
  }

  .guide-compare,
  .guide-compare-three,
  .guide-related {
    grid-template-columns: 1fr;
  }

  .guide-next {
    margin-left: -4px;
    margin-right: -4px;
    padding: 36px 25px;
    border-radius: 27px;
  }

  .guide-next h2 {
    font-size: 2.75rem;
  }

  .guide-related a {
    padding: 23px;
  }
}

/* Michael: premium trust credentials */
.trust-credentials {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 34px;
}

.trust-credentials .credential {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-width: 0;
  min-height: 230px;
  flex-direction: column;
  align-items: flex-start;
  padding: 25px 23px 23px !important;
  border: 1px solid rgba(13, 64, 56, .14) !important;
  border-radius: 26px !important;
  color: #103f38;
  background:
    radial-gradient(circle at 92% 8%, rgba(239, 109, 80, .12), transparent 31%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,243,234,.86)) !important;
  box-shadow: 0 18px 44px rgba(28, 58, 51, .08);
  text-align: left;
  text-decoration: none !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.trust-credentials a.credential:hover,
.trust-credentials button.credential:hover {
  border-color: rgba(239, 109, 80, .42) !important;
  box-shadow: 0 25px 55px rgba(25, 58, 51, .14);
  transform: translateY(-4px);
}

.trust-credentials button.credential {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.trust-credentials .credential::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -38px;
  bottom: -54px;
  width: 125px;
  aspect-ratio: 1;
  border: 1px solid rgba(239, 109, 80, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(239, 109, 80, .035);
}

.credential-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 29px;
  border: 1px solid rgba(13, 64, 56, .14);
  border-radius: 15px;
  color: #0f594d;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(22, 65, 57, .09);
}

.credential-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-credentials .credential small {
  display: block;
  margin-bottom: 9px;
  color: #d95c42;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .15em;
  line-height: 1.3;
  text-transform: uppercase;
}

.trust-credentials .credential strong {
  display: block;
  margin: 0 0 10px;
  color: inherit;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.42rem, 1.9vw, 1.78rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}

.trust-credentials .credential > span:last-child {
  margin-top: auto;
  color: #687b75;
  font-size: .82rem;
  line-height: 1.5;
}

.trust-credentials .credential-google {
  border-color: rgba(255,255,255,.12) !important;
  color: #fff;
  background:
    radial-gradient(circle at 92% 4%, rgba(245, 171, 97, .25), transparent 32%),
    linear-gradient(145deg, #0a3b34, #12594d) !important;
  box-shadow: 0 24px 55px rgba(13, 64, 56, .2);
}

.trust-credentials .credential-google small {
  color: #f5b06c;
}

.trust-credentials .credential-google > span:last-child {
  color: rgba(255,255,255,.78);
}

.trust-credentials .credential-google::after {
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 0 0 18px rgba(255,255,255,.035);
}

.google-stars {
  display: block;
  margin-bottom: 25px;
  color: #f3a35f;
  font-size: 1.13rem;
  letter-spacing: .16em;
  line-height: 1;
  text-shadow: 0 6px 20px rgba(243, 163, 95, .28);
}

.credential-google b {
  display: inline-block;
  margin-left: 5px;
  font-size: 1rem;
  transition: transform .2s ease;
}

.credential-google:hover b {
  transform: translate(3px, -3px);
}

@media (max-width: 900px) {
  .trust-credentials {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .trust-credentials .credential {
    min-height: 0;
  }

  .trust-credentials .credential-google {
    order: -1;
  }
}

@media (max-width: 720px) {
  .trust-credentials {
    gap: 12px !important;
    margin-top: 28px;
  }

  .trust-credentials .credential {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 15px;
    padding: 20px 18px !important;
    border-radius: 22px !important;
  }

  .trust-credentials .credential-icon,
  .trust-credentials .google-stars {
    grid-row: 1 / span 3;
    grid-column: 1;
    margin: 0;
  }

  .trust-credentials .google-stars {
    align-self: start;
    width: 46px;
    padding-top: 4px;
    font-size: .72rem;
    line-height: 1.45;
    letter-spacing: .03em;
    overflow-wrap: anywhere;
  }

  .trust-credentials .credential small,
  .trust-credentials .credential strong,
  .trust-credentials .credential > span:last-child {
    grid-column: 2;
  }

  .trust-credentials .credential strong {
    font-size: 1.42rem;
  }

  .trust-credentials .credential > span:last-child {
    margin-top: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-card,
  .guide-card img,
  .guide-related a {
    transition: none;
  }
}

/* Final gallery and profile alignment: compact, readable and stable at every width. */
@media (min-width: 1101px) {
  .self-massage-page .self-slider__thumbs {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    align-items: start !important;
    gap: 12px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 7px 2px 3px !important;
  }

  .self-massage-page .self-slider__thumbs button {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    align-self: start !important;
  }

  .self-massage-page .self-slider__thumbs img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .self-massage-page .self-slider__thumbs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    align-items: start !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .self-massage-page .self-slider__thumbs button {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
  }

  .self-massage-page .self-slider__thumbs img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

@media (max-width: 720px) {
  .self-massage-page .self-slider__thumbs {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 74px !important;
    align-items: start !important;
    gap: 9px !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 2px 12px !important;
  }

  .self-massage-page .self-slider__thumbs button {
    width: 74px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
  }

  .self-massage-page .self-slider__thumbs img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .home-profile {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }

  .home-profile-image {
    position: relative;
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 28px;
  }

  .home-profile-image > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 18% !important;
  }

  .home-profile-badge {
    right: 14px !important;
    bottom: 14px !important;
    left: 14px !important;
    width: auto !important;
    max-width: none !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
  }

  .home-profile h2 {
    font-size: clamp(3.05rem, 14vw, 4.5rem) !important;
    overflow-wrap: break-word;
  }

  .home-profile .action-row,
  .home-profile .action-row .button {
    width: 100%;
  }

  .home-profile .action-row .button {
    justify-content: center;
  }
}

/* Ratgeber spacing, pagination and shared navigation polish */
html:has(.guide-hero),
html:has(.guide-hub-hero),
body:has(.guide-hero),
body:has(.guide-hub-hero) {
  max-width: 100%;
  overflow-x: clip;
}

.guide-card-date {
  display: block;
  margin-top: 16px;
  color: rgba(17,63,55,.58);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.guide-card-dark .guide-card-date {
  color: rgba(255,250,242,.62);
}

.guide-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(54px, 8vw, 96px) 0 0;
}

.guide-pagination > a,
.guide-page-current {
  min-width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(17,63,55,.18);
  border-radius: 999px;
  color: #113f37;
  background: rgba(255,255,255,.66);
  font-weight: 850;
  text-decoration: none;
}

.guide-page-current {
  border-color: #113f37;
  color: #fffaf2;
  background: #113f37;
}

.guide-pagination .guide-page-next {
  width: auto;
  padding: 0 24px;
  display: inline-flex;
  gap: 20px;
  border-color: #eb6e50;
  color: #fff;
  background: #eb6e50;
}

.guide-pagination .guide-page-prev {
  border-color: rgba(17,63,55,.22);
  color: #113f37;
  background: transparent;
}

.guide-page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(180px, 19vw, 260px) 0 clamp(74px, 8vw, 118px);
  background:
    radial-gradient(circle at 84% 20%, rgba(232,187,94,.24), transparent 27%),
    linear-gradient(135deg, #fbf7ef 0%, #f7ecdd 58%, #dceae7 100%);
}

.guide-page-hero h1 {
  max-width: 960px;
  margin: 28px 0;
  color: #113f37;
  font-size: clamp(4rem, 7vw, 7rem);
  line-height: .91;
  letter-spacing: -.055em;
}

.guide-page-hero .lead {
  max-width: 720px;
  color: #526963;
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  line-height: 1.58;
}

.guide-article p a {
  font-weight: 720;
}

.floating-booking.is-footer-near {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(24px) scale(.97) !important;
}

.suvi-credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.46);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.suvi-credit a {
  color: rgba(255,255,255,.76);
  text-decoration: none;
  transition: color .2s ease;
}

.suvi-credit a:hover {
  color: #fff;
}

[data-site-header] .menu-link-icon {
  display: none;
}

@media (min-width: 721px) {
  .guide-hub-hero-inner,
  .guide-hero-inner,
  .guide-page-hero > .shell {
    box-sizing: border-box;
    padding-left: clamp(64px, 6.5vw, 112px);
    padding-right: clamp(64px, 6.5vw, 112px);
  }

  .guide-grid > .guide-card:last-child:nth-child(odd):not(.guide-card-wide) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    grid-template-rows: none;
  }

  .guide-grid > .guide-card:last-child:nth-child(odd):not(.guide-card-wide) img {
    height: 100%;
    min-height: 430px;
    aspect-ratio: auto;
  }
}

@media (max-width: 720px) {
  .guide-hub-hero,
  .guide-hero {
    width: 100%;
    max-width: 100%;
  }

  .guide-hub-hero .shell,
  .guide-hero .shell,
  .guide-page-hero .shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box;
  }

  .guide-hub-hero-inner,
  .guide-hero-inner {
    padding-top: 118px !important;
    padding-bottom: 54px !important;
  }

  .guide-hub-hero h1,
  .guide-hero h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.85rem, 13vw, 3.85rem) !important;
    line-height: .94 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  .guide-hub-hero .lead,
  .guide-hero .lead {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .guide-page-hero {
    padding: 132px 0 66px;
  }

  .guide-page-hero h1 {
    margin: 22px 0;
    font-size: 3.15rem;
    line-height: .94;
  }

  .guide-pagination {
    flex-wrap: wrap;
    margin-top: 52px;
  }

  .guide-pagination .guide-page-next {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  [data-site-header] .menu-icon-link {
    display: flex !important;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  [data-site-header] .menu-link-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(17,63,55,.12);
    border-radius: 14px;
    color: #d95f45;
    background: linear-gradient(145deg, #fffaf2, #f4e8d9);
    box-shadow: 0 8px 24px rgba(17,63,55,.07);
  }

  [data-site-header] .menu-link-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  [data-site-header] .menu-whatsapp-action,
  [data-site-header] .menu-booking-action {
    width: 100% !important;
    min-height: 58px;
    justify-content: center;
    border-radius: 20px !important;
    box-shadow: none !important;
  }

  [data-site-header] .menu-whatsapp-action {
    color: #fff !important;
    background: #178f5c !important;
  }

  [data-site-header] .menu-whatsapp-action::before {
    display: none !important;
    content: none !important;
  }

  [data-site-header] .menu-booking-action {
    color: #fff !important;
    background: linear-gradient(135deg, #ed7053, #e75e42) !important;
  }

  .suvi-credit {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 18px;
  }
}

/* Visual knowledge articles */
.infographic-article-hero {
  min-height: clamp(720px, 84vh, 940px);
  background-position: 82% 24%;
}

.infographic-article-hero::before {
  background:
    linear-gradient(90deg, rgba(251,247,239,1) 0%, rgba(251,247,239,.98) 40%, rgba(251,247,239,.78) 59%, rgba(251,247,239,.26) 82%, rgba(17,63,55,.05) 100%),
    linear-gradient(0deg, rgba(251,247,239,.74), transparent 32%);
}

.guide-infographic {
  margin: clamp(70px, 10vw, 126px) calc(50% - 50vw);
  padding: clamp(24px, 4vw, 54px) max(24px, calc((100vw - 1180px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .42fr);
  gap: clamp(30px, 6vw, 82px);
  align-items: start;
  background:
    radial-gradient(circle at 84% 12%, rgba(232,187,94,.22), transparent 28%),
    linear-gradient(135deg, #efe6d8, #fbf7ef);
}

.guide-infographic > a {
  display: block;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(17,63,55,.13);
}

.guide-infographic img {
  display: block;
  width: 100%;
  height: auto;
}

.guide-infographic figcaption {
  position: sticky;
  top: 120px;
  padding-top: 22px;
}

.guide-infographic figcaption > span {
  display: block;
  color: #d65c42;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.guide-infographic figcaption strong {
  display: block;
  margin: 20px 0;
  color: #113f37;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.guide-infographic figcaption p {
  color: #526963;
  font-size: 1.05rem;
  line-height: 1.7;
}

.guide-infographic figcaption .button {
  margin-top: 18px;
  color: #fff;
  background: #113f37;
  text-decoration: none;
}

@media (max-width: 820px) {
  .infographic-article-hero {
    background-position: 66% 22%;
  }

  .infographic-article-hero::before {
    background:
      linear-gradient(180deg, rgba(251,247,239,1) 0%, rgba(251,247,239,.96) 57%, rgba(251,247,239,.73) 78%, rgba(17,63,55,.12) 100%);
  }

  .guide-infographic {
    margin-left: -18px;
    margin-right: -18px;
    padding: 22px 18px 38px;
    grid-template-columns: 1fr;
  }

  .guide-infographic > a {
    border-radius: 20px;
  }

  .guide-infographic figcaption {
    position: static;
    padding: 8px 6px 0;
  }

  .guide-infographic figcaption strong {
    font-size: 2.55rem;
  }

  .guide-infographic figcaption .button {
    width: 100%;
    justify-content: center;
  }
}


/* Premium article FAQ */
.guide-faq{width:min(1180px,calc(100% - 64px));margin:clamp(86px,10vw,150px) auto}
.guide-faq__frame{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(480px,1.28fr);gap:clamp(46px,7vw,104px);padding:clamp(46px,6vw,88px);border:1px solid rgba(13,67,59,.14);border-radius:clamp(30px,4vw,58px);background:radial-gradient(circle at 8% 12%,rgba(241,111,79,.18),transparent 31%),radial-gradient(circle at 92% 90%,rgba(243,194,105,.22),transparent 34%),linear-gradient(145deg,#fffdf8 0%,#f8f1e7 54%,#edf3ec 100%);box-shadow:0 34px 90px rgba(25,54,47,.11)}
.guide-faq__frame::before{content:"?";position:absolute;left:-.045em;bottom:-.31em;font-family:var(--font-display,Georgia,serif);font-size:clamp(230px,27vw,440px);line-height:1;color:rgba(13,67,59,.035);pointer-events:none}
.guide-faq__heading,.guide-faq__list{position:relative;z-index:1}
.guide-faq__heading{align-self:start;position:sticky;top:132px}
.guide-faq__eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:25px;color:#d95539;font-size:.73rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.guide-faq__eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.guide-faq__heading h2{max-width:9ch;margin:0;color:#103f38;font-family:var(--font-display,Georgia,serif);font-size:clamp(2.65rem,5.15vw,5rem);line-height:.96;letter-spacing:-.045em}
.guide-faq__heading>p{max-width:34rem;margin:28px 0 0;color:#4e655f;font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.72}
.guide-faq__list{border-top:1px solid rgba(13,67,59,.18)}
.guide-faq__item{border-bottom:1px solid rgba(13,67,59,.18)}
.guide-faq__item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:36px minmax(0,1fr) 42px;align-items:center;gap:18px;padding:27px 0;color:#103f38}
.guide-faq__item summary::-webkit-details-marker{display:none}
.guide-faq__number{color:#df6447;font-size:.71rem;font-weight:800;letter-spacing:.13em}
.guide-faq__question{font-family:var(--font-display,Georgia,serif);font-size:clamp(1.25rem,2vw,1.72rem);font-weight:700;line-height:1.18;letter-spacing:-.02em}
.guide-faq__toggle{position:relative;width:42px;height:42px;border:1px solid rgba(13,67,59,.28);border-radius:50%;transition:transform .3s ease,background .3s ease,border-color .3s ease}
.guide-faq__toggle::before,.guide-faq__toggle::after{content:"";position:absolute;inset:50% auto auto 50%;width:14px;height:1.5px;background:#103f38;transform:translate(-50%,-50%);transition:transform .3s ease,background .3s ease}
.guide-faq__toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
.guide-faq__item[open] .guide-faq__toggle{transform:rotate(180deg);border-color:#103f38;background:#103f38}
.guide-faq__item[open] .guide-faq__toggle::before,.guide-faq__item[open] .guide-faq__toggle::after{background:#fffaf2}
.guide-faq__item[open] .guide-faq__toggle::after{transform:translate(-50%,-50%) rotate(0)}
.guide-faq__answer{padding:0 58px 28px 54px}
.guide-faq__answer p{max-width:670px;margin:0;color:#4d625d;font-size:clamp(1rem,1.28vw,1.14rem);line-height:1.75}
@media (hover:hover){.guide-faq__item summary:hover .guide-faq__question{color:#d95539}.guide-faq__item summary:hover .guide-faq__toggle{transform:rotate(8deg);border-color:#df6447}.guide-faq__item[open] summary:hover .guide-faq__toggle{transform:rotate(180deg)}}
@media (max-width:900px){.guide-faq{width:min(100% - 32px,760px);margin:74px auto}.guide-faq__frame{grid-template-columns:1fr;gap:32px;padding:42px 32px;border-radius:34px}.guide-faq__heading{position:relative;top:auto}.guide-faq__heading h2{max-width:13ch;font-size:clamp(2.65rem,10vw,4.2rem)}.guide-faq__heading>p{margin-top:20px}}
@media (max-width:560px){.guide-faq{width:calc(100% - 24px);margin:58px auto}.guide-faq__frame{gap:24px;padding:34px 20px 28px;border-radius:27px}.guide-faq__eyebrow{margin-bottom:17px;font-size:.64rem}.guide-faq__heading h2{font-size:clamp(2.25rem,12vw,3.15rem);overflow-wrap:anywhere}.guide-faq__heading>p{font-size:.98rem;line-height:1.62}.guide-faq__item summary{grid-template-columns:25px minmax(0,1fr) 36px;gap:10px;padding:22px 0}.guide-faq__question{font-size:1.18rem;overflow-wrap:anywhere}.guide-faq__toggle{width:36px;height:36px}.guide-faq__answer{padding:0 0 23px 35px}.guide-faq__answer p{font-size:.96rem;line-height:1.66}}
/* Compact breadcrumb rhythm below the shared header */
main :is(.breadcrumb, .breadcrumbs, [aria-label="Breadcrumb"], [aria-label="breadcrumb"]) {
  width: min(100%, 1180px);
  margin-top: 0 !important;
  margin-inline: auto;
  padding-top: 0 !important;
  color: #315c55;
  line-height: 1.45;
}

main > :is(article, section, div):first-child:has(:is(.breadcrumb, .breadcrumbs, [aria-label="Breadcrumb"], [aria-label="breadcrumb"])),
main > article:first-child > :is(header, section, div):first-child:has(:is(.breadcrumb, .breadcrumbs, [aria-label="Breadcrumb"], [aria-label="breadcrumb"])) {
  margin-top: 0 !important;
  padding-top: clamp(28px, 3.4vw, 52px) !important;
}

main > :is(.guide-hero, .guide-article-hero, .article-hero, .page-hero, .legal-hero):first-child,
main > article:first-child > :is(.guide-hero, .guide-article-hero, .article-hero, .page-hero, .legal-hero):first-child {
  margin-top: 0 !important;
  padding-top: clamp(28px, 3.4vw, 52px) !important;
}

main :is(.breadcrumb, .breadcrumbs, [aria-label="Breadcrumb"], [aria-label="breadcrumb"]) + * {
  margin-top: clamp(26px, 3.2vw, 46px);
}

@media (max-width: 700px) {
  main > :is(article, section, div):first-child:has(:is(.breadcrumb, .breadcrumbs, [aria-label="Breadcrumb"], [aria-label="breadcrumb"])),
  main > article:first-child > :is(header, section, div):first-child:has(:is(.breadcrumb, .breadcrumbs, [aria-label="Breadcrumb"], [aria-label="breadcrumb"])),
  main > :is(.guide-hero, .guide-article-hero, .article-hero, .page-hero, .legal-hero):first-child,
  main > article:first-child > :is(.guide-hero, .guide-article-hero, .article-hero, .page-hero, .legal-hero):first-child {
    padding-top: 22px !important;
  }

  main :is(.breadcrumb, .breadcrumbs, [aria-label="Breadcrumb"], [aria-label="breadcrumb"]) {
    margin-bottom: 0 !important;
    font-size: .66rem;
    letter-spacing: .105em;
    line-height: 1.55;
  }

  main :is(.breadcrumb, .breadcrumbs, [aria-label="Breadcrumb"], [aria-label="breadcrumb"]) + * {
    margin-top: 25px !important;
  }
}
/* Keep the branded header visible whenever the mobile menu is open */
@media (max-width: 900px) {
  body:has(.site-header button[aria-expanded="true"]) .site-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 2147483000 !important;
    width: 100% !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(255, 250, 242, .97) !important;
    border-bottom: 1px solid rgba(16, 63, 56, .12);
    box-shadow: 0 12px 34px rgba(16, 63, 56, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body:has(.site-header button[aria-expanded="true"]) .site-header__inner,
  body:has(.site-header button[aria-expanded="true"]) .header-inner {
    min-height: 74px;
  }

  body:has(.site-header button[aria-expanded="true"]) .site-header :is(.brand, .site-brand, .logo, .menu-toggle, .nav-toggle) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body:has(.site-header button[aria-expanded="true"]) :is(.mobile-menu, .mobile-nav, .nav-drawer, .site-nav) {
    overscroll-behavior: contain;
  }
}
/* Final Ratgeber spacing and overflow guard */
html:has(.guide-hero),
body:has(.guide-hero) {
  overflow-x: clip !important;
}

.guide-hero {
  min-width: 0;
}

.guide-hero-inner {
  box-sizing: border-box;
  min-width: 0;
  padding-top: clamp(30px, 3.6vw, 52px) !important;
}

.guide-hero-copy,
.guide-article,
.guide-infographic,
.guide-infographic > a,
.guide-infographic figcaption,
.guide-faq__frame,
.guide-faq__heading,
.guide-faq__list,
.guide-faq__item,
.guide-faq__question {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.guide-hero h1,
.guide-article h2,
.guide-article h3,
.guide-infographic figcaption strong,
.guide-faq__heading h2,
.guide-faq__question {
  overflow-wrap: break-word;
  hyphens: auto;
}

.guide-infographic {
  width: min(1180px, calc(100vw - 48px));
  margin: clamp(64px, 8vw, 112px) 50% !important;
  padding: clamp(24px, 4vw, 52px) !important;
  transform: translateX(-50%);
  grid-template-columns: minmax(0, 1.28fr) minmax(290px, .72fr);
  gap: clamp(34px, 5vw, 74px);
  overflow: hidden;
}

.guide-infographic > a {
  width: 100%;
  overflow: hidden;
}

.guide-infographic img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.guide-infographic figcaption strong {
  max-width: 100%;
  font-size: clamp(2.35rem, 4.6vw, 4.7rem);
  line-height: .98;
}

.guide-infographic figcaption .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.guide-faq__frame {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
}

.guide-faq__heading h2 {
  max-width: 100%;
  font-size: clamp(2.6rem, 4.45vw, 4.65rem);
}

.guide-faq__list,
.guide-faq__item summary {
  width: 100%;
}

@media (max-width: 1180px) {
  .guide-infographic {
    width: min(960px, calc(100vw - 40px));
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-infographic figcaption {
    position: static !important;
    top: auto !important;
    width: 100%;
    padding: 4px 4px 0;
  }

  .guide-infographic figcaption strong {
    max-width: 13ch;
    font-size: clamp(2.5rem, 7.2vw, 4.4rem);
  }

  .guide-faq {
    width: min(900px, calc(100% - 40px));
  }

  .guide-faq__frame {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 5vw, 48px);
  }

  .guide-faq__heading {
    position: static;
    top: auto;
  }

  .guide-faq__heading h2 {
    max-width: 15ch;
    font-size: clamp(2.7rem, 7vw, 4.5rem);
  }
}

@media (max-width: 720px) {
  .guide-hero-inner {
    padding-top: 20px !important;
    padding-bottom: 48px !important;
  }

  .guide-hero .breadcrumbs {
    margin-bottom: 27px !important;
  }

  .guide-hero .eyebrow {
    margin-top: 0 !important;
  }

  .infographic-article-hero {
    min-height: 0 !important;
  }

  .guide-infographic {
    width: calc(100vw - 24px);
    margin-top: 54px !important;
    margin-bottom: 68px !important;
    padding: 16px !important;
    border-radius: 26px;
    transform: translateX(-50%);
  }

  .guide-infographic > a {
    border-radius: 18px;
  }

  .guide-infographic figcaption {
    padding: 13px 4px 4px !important;
  }

  .guide-infographic figcaption strong {
    max-width: 100%;
    margin: 13px 0 17px;
    font-size: clamp(2.15rem, 11vw, 3.35rem) !important;
    line-height: 1;
  }

  .guide-infographic figcaption p {
    max-width: 36rem;
    font-size: .98rem;
    line-height: 1.62;
  }

  .guide-faq {
    width: calc(100% - 24px);
    margin-inline: auto;
  }

  .guide-faq__frame {
    width: 100%;
    padding: 32px 18px 26px;
    overflow: hidden;
  }

  .guide-faq__heading h2 {
    max-width: 100%;
    font-size: clamp(2.18rem, 10.5vw, 3.25rem);
    line-height: .98;
  }

  .guide-faq__item summary {
    grid-template-columns: 24px minmax(0, 1fr) 34px;
    gap: 9px;
  }

  .guide-faq__question {
    font-size: clamp(1.08rem, 5vw, 1.24rem);
    line-height: 1.24;
  }

  .guide-faq__answer {
    padding-right: 0;
    padding-left: 33px;
  }
}

@media (max-width: 390px) {
  .guide-hero-inner {
    padding-inline: 22px !important;
  }

  .guide-infographic {
    width: calc(100vw - 16px);
    padding: 10px !important;
  }

  .guide-faq {
    width: calc(100% - 16px);
  }

  .guide-faq__frame {
    padding-inline: 15px;
  }
}
/* One-line desktop footer signature */
@media (min-width: 901px) {
  .footer-bottom {
    display: grid !important;
    grid-template-columns: max-content minmax(280px, 1fr) max-content;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
  }

  .footer-bottom > span:nth-child(2) {
    min-width: 0;
    text-align: center;
  }

  .footer-bottom .suvi-credit {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    white-space: nowrap;
  }

  .footer-bottom .suvi-credit::before,
  .footer-bottom .suvi-credit::after {
    content: none !important;
    display: none !important;
  }

  .footer-bottom .suvi-credit span,
  .footer-bottom .suvi-credit a {
    margin: 0;
  }
}
/* FUSSZEIT self-massage knowledge product */
.self-massage-page {
  --self-ink: #0c4139;
  --self-coral: #ef6d50;
  --self-paper: #fbf7ef;
  overflow-x: clip;
}

.self-guide-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 790px;
  padding: clamp(38px, 4vw, 62px) 0 clamp(70px, 8vw, 118px);
  background:
    radial-gradient(circle at 82% 18%, rgba(240, 109, 80, .19), transparent 30%),
    radial-gradient(circle at 12% 90%, rgba(239, 195, 109, .23), transparent 32%),
    linear-gradient(135deg, #fffdf8 0%, #f9f2e8 56%, #eef4ed 100%);
}

.self-guide-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -8vw -25vw auto;
  width: min(58vw, 860px);
  aspect-ratio: 1;
  border: 1px solid rgba(12, 65, 57, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(12, 65, 57, .025), 0 0 0 100px rgba(12, 65, 57, .018);
}

.self-guide-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, .72fr);
  align-items: center;
  gap: clamp(50px, 7vw, 112px);
}

.self-guide-hero__copy,
.self-guide-hero__visual {
  min-width: 0;
}

.self-guide-hero__copy .breadcrumbs {
  margin-bottom: 34px;
}

.self-guide-hero__copy h1 {
  max-width: 10.5ch;
  margin: 23px 0 30px;
  color: var(--self-ink);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(4.3rem, 7.6vw, 8.1rem);
  line-height: .89;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.self-guide-hero__copy .lead {
  max-width: 730px;
  color: #4d655f;
  font-size: clamp(1.18rem, 2vw, 1.58rem);
  line-height: 1.58;
}

.self-guide-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 33px 0 28px;
}

.self-guide-trust span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid rgba(12, 65, 57, .2);
  border-radius: 999px;
  color: var(--self-ink);
  background: rgba(255, 255, 255, .53);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.self-guide-hero__copy .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.self-guide-hero__copy .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 28px;
  color: #657872;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.self-guide-hero__visual {
  position: relative;
  justify-self: end;
  width: min(100%, 465px);
  padding: 15px;
  border: 1px solid rgba(12, 65, 57, .14);
  border-radius: 38px;
  background: rgba(255, 255, 255, .48);
  box-shadow: 0 35px 90px rgba(26, 62, 54, .16);
  transform: rotate(2.4deg);
}

.self-guide-hero__visual img {
  display: block;
  width: 100%;
  border-radius: 27px;
}

.self-guide-hero__card {
  position: absolute;
  right: -32px;
  bottom: 46px;
  display: grid;
  place-items: center;
  width: 128px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background: var(--self-ink);
  box-shadow: 0 20px 45px rgba(12, 65, 57, .24);
  font-family: var(--font-display, Georgia, serif);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: .68;
  text-align: center;
  transform: rotate(-2.4deg);
}

.self-guide-hero__card small {
  max-width: 9ch;
  font-family: var(--sans, sans-serif);
  font-size: .54rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.self-slider-section {
  padding: clamp(82px, 10vw, 150px) 0;
  color: #fff;
  background:
    radial-gradient(circle at 95% 5%, rgba(239, 109, 80, .18), transparent 27%),
    linear-gradient(145deg, #092f2b, #0d453d 62%, #123b35);
}

.self-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .65fr);
  align-items: end;
  gap: clamp(42px, 8vw, 110px);
  margin-bottom: clamp(50px, 7vw, 88px);
}

.self-section-head h2 {
  max-width: 11ch;
  margin: 18px 0 0;
  color: #fff;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(3.3rem, 6.3vw, 6.8rem);
  line-height: .92;
  letter-spacing: -.045em;
}

.self-section-head > p {
  margin: 0;
  color: rgba(255, 255, 255, .67);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.7;
}

.self-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 22px;
}

.self-slider__stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 36px;
  background: #f7f1e8;
  touch-action: pan-y;
}

.self-slider__image-link {
  display: block;
  width: 100%;
}

.self-slider__stage img {
  display: block;
  width: 100%;
  max-height: 900px;
  object-fit: contain;
  transition: opacity .13s ease, transform .13s ease;
}

.self-slider__stage img.is-changing {
  opacity: .38;
  transform: scale(.992);
}

.self-slider__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  color: #fff;
  background: rgba(9, 47, 43, .82);
  box-shadow: 0 13px 30px rgba(0, 0, 0, .2);
  font-size: 1.45rem;
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.self-slider__arrow--prev { left: 18px; }
.self-slider__arrow--next { right: 18px; }

.self-slider__panel {
  align-self: stretch;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(34px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 36px;
  background: rgba(255, 255, 255, .055);
}

.self-slider__count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: rgba(255, 255, 255, .43);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.5rem;
}

.self-slider__count span:first-child {
  color: #f58a6d;
  font-size: 4.7rem;
  line-height: 1;
}

.self-slider__kicker {
  margin: auto 0 18px;
  color: #f58a6d;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.self-slider__panel h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.15rem, 3.7vw, 3.85rem);
  line-height: .99;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.self-slider__panel > p:not(.self-slider__kicker) {
  color: rgba(255, 255, 255, .65);
  font-size: 1.03rem;
  line-height: 1.62;
}

.self-slider__progress {
  overflow: hidden;
  height: 3px;
  margin: 28px 0 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
}

.self-slider__progress i {
  display: block;
  width: 10%;
  height: 100%;
  background: #f27759;
  transition: width .35s ease;
}

.self-slider__panel .button {
  width: 100%;
  justify-content: center;
}

.self-slider__thumbs {
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88px;
  gap: 10px;
  overflow-x: auto;
  padding: 5px 2px 13px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}

.self-slider__thumbs button {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 16px;
  opacity: .52;
  background: #f7f1e8;
  cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

.self-slider__thumbs button::after {
  content: attr(data-slide-index);
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background: rgba(9, 47, 43, .85);
  font-size: .62rem;
  font-weight: 800;
}

.self-slider__thumbs button.is-active {
  border-color: #f27759;
  opacity: 1;
  transform: translateY(-3px);
}

.self-slider__thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.self-guide-content {
  padding-top: clamp(90px, 11vw, 160px);
}

.self-guide-article {
  max-width: 1030px;
}

.self-guide-article > h2 {
  max-width: 15ch;
  margin-top: clamp(78px, 10vw, 132px);
  font-size: clamp(3rem, 5.5vw, 5.6rem);
}

.myth-reality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 56px 0 84px;
}

.myth-reality > div {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(12, 65, 57, .15);
  border-radius: 30px;
  background: #fffaf2;
}

.myth-reality > div:last-child {
  color: #fff;
  background: var(--self-ink);
}

.myth-reality span,
.source-list span {
  color: #e25f42;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.myth-reality h3 {
  margin: 20px 0 15px;
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
}

.myth-reality p {
  margin: 0;
}

.myth-reality > div:last-child p {
  color: rgba(255, 255, 255, .72);
}

.zone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin: 58px 0 84px;
}

.zone-grid section {
  position: relative;
  min-width: 0;
  padding: 31px 32px 31px 82px;
  border: 1px solid rgba(12, 65, 57, .13);
  border-radius: 25px;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(244,239,229,.72));
}

.zone-grid section:last-child {
  grid-column: 1 / -1;
}

.zone-grid b {
  position: absolute;
  top: 28px;
  left: 27px;
  color: #ec6a4c;
  font-size: .72rem;
  letter-spacing: .08em;
}

.zone-grid h3 {
  margin: 0 0 7px;
  color: var(--self-ink);
  font-size: 1.35rem;
}

.zone-grid p {
  margin: 0;
  color: #5d706b;
  font-size: .98rem;
  line-height: 1.58;
}

.routine-list {
  display: grid;
  gap: 0;
  margin: 58px 0 95px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.routine-list li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 25px;
  padding: 27px 0;
  border-bottom: 1px solid rgba(12, 65, 57, .15);
}

.routine-list li > span {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  color: #fff;
  background: #ee6c4e;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.routine-list h3 {
  margin: 0 0 6px;
  color: var(--self-ink);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.routine-list p {
  margin: 0;
}

.safety-panel {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: clamp(26px, 5vw, 60px);
  margin: 80px 0 110px;
  padding: clamp(34px, 6vw, 72px);
  border-radius: 38px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 117, 86, .25), transparent 29%),
    var(--self-ink);
}

.safety-panel__mark {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  color: #f79074;
  font-family: var(--font-display, Georgia, serif);
  font-size: 3.2rem;
}

.safety-panel h2 {
  max-width: 12ch;
  margin: 16px 0 23px;
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 4.8rem);
}

.safety-panel p:last-child {
  margin-bottom: 0;
  color: rgba(255, 255, 255, .72);
}

.source-list {
  display: grid;
  gap: 12px;
  margin: 50px 0 90px;
}

.source-list a {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(280px, 1fr) minmax(250px, .85fr);
  align-items: center;
  gap: 24px;
  padding: 23px 26px;
  border: 1px solid rgba(12, 65, 57, .14);
  border-radius: 20px;
  color: var(--self-ink);
  background: rgba(255, 255, 255, .54);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.source-list a:hover {
  border-color: rgba(226, 95, 66, .5);
  background: #fff;
  transform: translateY(-2px);
}

.source-list strong {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.22rem;
  line-height: 1.2;
}

.source-list small {
  color: #687a75;
  font-size: .82rem;
  line-height: 1.45;
}

.self-guide-cta {
  background:
    radial-gradient(circle at 88% 15%, rgba(242, 118, 86, .27), transparent 31%),
    linear-gradient(145deg, #0b3c35, #103f38);
}

.self-guide-cta > p:not(.eyebrow) {
  max-width: 650px;
  color: rgba(255, 255, 255, .72);
}

/* Featured guide teaser on home and Ratgeber */
.self-guide-teaser {
  padding: clamp(48px, 7vw, 92px) 0;
  background: #f7f1e7;
}

.self-guide-teaser__card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
  align-items: center;
  gap: clamp(40px, 7vw, 96px);
  padding: clamp(42px, 6vw, 82px);
  border-radius: clamp(34px, 5vw, 58px);
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(240, 109, 80, .25), transparent 29%),
    linear-gradient(145deg, #0a332e, #10483f);
  box-shadow: 0 35px 90px rgba(19, 56, 49, .18);
}

.self-guide-teaser__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.self-guide-teaser__copy .eyebrow {
  color: #f48b6f;
}

.self-guide-teaser__copy h2 {
  max-width: 11ch;
  margin: 20px 0 24px;
  color: #fff;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(3rem, 5.6vw, 6rem);
  line-height: .92;
  letter-spacing: -.045em;
}

.self-guide-teaser__copy > p:not(.eyebrow) {
  max-width: 650px;
  color: rgba(255, 255, 255, .68);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

.self-guide-teaser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.self-guide-teaser__visual {
  position: relative;
  min-height: 490px;
}

.self-guide-teaser__visual img {
  position: absolute;
  width: min(72%, 320px);
  border: 8px solid rgba(255, 255, 255, .76);
  border-radius: 24px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .26);
}

.self-guide-teaser__visual img:first-child {
  top: 0;
  left: 4%;
  transform: rotate(-5deg);
}

.self-guide-teaser__visual img:last-child {
  right: 2%;
  bottom: 0;
  transform: rotate(6deg);
}

.nav-guide-link {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 8px 12px !important;
  border: 1px solid rgba(239, 109, 80, .42);
  border-radius: 999px;
  color: #d8573a !important;
  background: rgba(239, 109, 80, .07);
  font-size: .68rem !important;
  font-weight: 850 !important;
  letter-spacing: .04em;
  white-space: nowrap;
}

.nav-guide-link::before {
  content: "10";
  display: grid;
  place-items: center;
  width: 21px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background: #ee6d4f;
  font-size: .58rem;
}

@media (max-width: 1120px) {
  .self-guide-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .58fr);
    gap: 46px;
  }

  .self-guide-hero__copy h1 {
    font-size: clamp(4rem, 8vw, 6.7rem);
  }

  .self-slider {
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .source-list a {
    grid-template-columns: .6fr 1fr;
  }

  .source-list small {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .self-guide-hero {
    min-height: 0;
    padding-top: 28px;
  }

  .self-guide-hero__grid,
  .self-section-head,
  .self-guide-teaser__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .self-guide-hero__copy {
    position: relative;
    z-index: 2;
  }

  .self-guide-hero__visual {
    position: absolute;
    z-index: 0;
    right: -80px;
    bottom: -150px;
    width: 430px;
    opacity: .13;
    pointer-events: none;
  }

  .self-guide-hero__card {
    display: none;
  }

  .self-slider {
    grid-template-columns: minmax(0, 1fr);
  }

  .self-slider__panel {
    min-height: 390px;
  }

  .self-slider__kicker {
    margin-top: 65px;
  }

  .self-guide-teaser__visual {
    min-height: 420px;
  }

  .nav-guide-link {
    border-radius: 18px;
  }
}

@media (max-width: 720px) {
  .self-guide-hero {
    padding: 20px 0 66px;
  }

  .self-guide-hero__copy .breadcrumbs {
    margin-bottom: 26px;
  }

  .self-guide-hero__copy h1 {
    max-width: 100%;
    margin-top: 18px;
    font-size: clamp(3.25rem, 15vw, 5.2rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .self-guide-hero__copy .lead {
    font-size: 1.08rem;
  }

  .self-guide-trust {
    gap: 7px;
  }

  .self-guide-trust span {
    padding-inline: 11px;
    font-size: .61rem;
  }

  .self-guide-hero__copy .button-row,
  .self-guide-hero__copy .button {
    width: 100%;
  }

  .self-guide-hero__copy .button {
    justify-content: center;
  }

  .self-section-head {
    margin-bottom: 40px;
  }

  .self-section-head h2 {
    font-size: clamp(2.8rem, 13vw, 4.2rem);
  }

  .self-slider-section {
    padding: 70px 0;
  }

  .self-slider {
    gap: 14px;
  }

  .self-slider__stage,
  .self-slider__panel {
    border-radius: 24px;
  }

  .self-slider__arrow {
    top: auto;
    bottom: 14px;
    width: 46px;
    height: 46px;
  }

  .self-slider__arrow--prev { left: 13px; }
  .self-slider__arrow--next { right: 13px; }

  .self-slider__panel {
    min-height: 0;
    padding: 29px 24px;
  }

  .self-slider__count span:first-child {
    font-size: 3.7rem;
  }

  .self-slider__kicker {
    margin: 42px 0 13px;
  }

  .self-slider__panel h3 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .self-slider__thumbs {
    grid-auto-columns: 72px;
  }

  .self-guide-article > h2 {
    max-width: 100%;
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .myth-reality,
  .zone-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .zone-grid section:last-child {
    grid-column: auto;
  }

  .routine-list li {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 15px;
  }

  .routine-list li > span {
    width: 44px;
    height: 44px;
  }

  .safety-panel {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: -6px;
    padding: 31px 24px;
    border-radius: 28px;
  }

  .safety-panel__mark {
    width: 58px;
    height: 58px;
    font-size: 2.4rem;
  }

  .source-list a {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .source-list small {
    grid-column: auto;
  }

  .self-guide-teaser {
    padding: 30px 0;
  }

  .self-guide-teaser__card {
    padding: 35px 24px 29px;
    border-radius: 30px;
  }

  .self-guide-teaser__copy h2 {
    max-width: 100%;
    font-size: clamp(2.7rem, 12.8vw, 4.3rem);
  }

  .self-guide-teaser__actions,
  .self-guide-teaser__actions .button {
    width: 100%;
  }

  .self-guide-teaser__actions .button {
    justify-content: center;
  }

  .self-guide-teaser__visual {
    min-height: 330px;
  }

  .self-guide-teaser__visual img {
    width: 58%;
    border-width: 5px;
    border-radius: 18px;
  }

  .nav-guide-link {
    justify-content: center;
    min-height: 52px;
    margin: 8px 0 4px;
    padding: 12px 18px !important;
    border: 0;
    border-radius: 999px;
    color: #fff !important;
    background: #0d493f;
    font-size: .82rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .self-slider__stage img,
  .self-slider__thumbs button,
  .source-list a {
    transition: none;
  }
}
/* Self-guide visual refinement and mobile-first slider order */
.self-guide-hero {
  min-height: 0 !important;
  padding-bottom: clamp(58px, 6vw, 82px);
}

.self-guide-hero__grid {
  align-items: center;
}

.self-guide-hero__visual {
  width: min(100%, 430px);
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  padding: 11px;
  border-radius: 34px;
  transform: none;
}

.self-guide-hero__visual img {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  object-fit: cover;
  object-position: center 17%;
}

.self-guide-hero__card {
  right: 22px;
  bottom: 22px;
  display: flex;
  width: auto;
  min-width: 150px;
  height: auto;
  aspect-ratio: auto;
  gap: 11px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 17px;
  font-size: 2rem;
  line-height: 1;
  transform: none;
  backdrop-filter: blur(12px);
}

.self-guide-hero__card small {
  max-width: 10ch;
  text-align: left;
}

.self-guide-hero__copy .button-outline {
  border-color: #ed6a4d;
  color: #fff;
  background: #ed6a4d;
  box-shadow: 0 16px 34px rgba(237, 106, 77, .18);
}

.self-guide-hero__copy .button-outline:hover {
  border-color: #d9573b;
  background: #d9573b;
}

.self-guide-teaser__card {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  min-height: 0;
}

.self-guide-teaser__visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 0;
}

.self-guide-teaser__visual img,
.self-guide-teaser__visual img:first-child,
.self-guide-teaser__visual img:last-child {
  position: static;
  display: block;
  width: 100%;
  height: 430px;
  border: 6px solid rgba(255, 255, 255, .82);
  border-radius: 22px;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .24);
}

.self-guide-teaser__visual img:first-child {
  transform: rotate(-2.3deg);
}

.self-guide-teaser__visual img:last-child {
  transform: translateY(16px) rotate(2.3deg);
}

.self-guide-teaser__actions .button-primary {
  border-color: #ef6d50;
  color: #fff;
  background: #ef6d50;
}

.self-guide-teaser__actions .button-primary:hover {
  border-color: #dc5b3f;
  background: #dc5b3f;
}

.self-guide-teaser__actions .button-light {
  border: 1px solid rgba(255, 255, 255, .48);
  color: #103f38;
  background: #fffaf2;
}

.nav-guide-link {
  gap: 8px;
  padding: 4px 7px !important;
  border: 0;
  border-radius: 0;
  color: #d95a3e !important;
  background: transparent;
  font-size: .66rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nav-guide-link::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef6d50;
  box-shadow: 0 0 0 4px rgba(239, 109, 80, .12);
}

.self-slider__thumbs {
  counter-reset: slide-thumb;
}

.self-slider__thumbs button {
  counter-increment: slide-thumb;
}

.self-slider__thumbs button::after {
  content: counter(slide-thumb);
}

.myth-reality > div:last-child h3,
.myth-reality > div:last-child p,
.myth-reality > div:last-child blockquote {
  color: #fff !important;
}

.myth-reality > div:last-child span {
  display: inline-flex;
  padding: 6px 9px;
  color: #fff;
  background: rgba(255, 255, 255, .13);
}

.source-list a[target="_blank"]::after {
  content: "↗";
  justify-self: end;
  color: #df6246;
  font-size: 1rem;
}

@media (max-width: 1180px) {
  .self-guide-teaser__card {
    grid-template-columns: minmax(0, 1fr) minmax(310px, .7fr);
  }

  .self-guide-teaser__visual img,
  .self-guide-teaser__visual img:first-child,
  .self-guide-teaser__visual img:last-child {
    height: 370px;
  }
}

@media (max-width: 900px) {
  .self-guide-hero {
    padding-bottom: 62px;
  }

  .self-guide-hero__visual {
    right: -48px;
    bottom: -68px;
    width: 350px;
    aspect-ratio: 1 / 1.08;
  }

  .self-guide-teaser__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .self-guide-teaser__visual {
    margin-top: 18px;
  }

  .self-guide-teaser__visual img,
  .self-guide-teaser__visual img:first-child,
  .self-guide-teaser__visual img:last-child {
    height: 390px;
  }

  .nav-guide-link {
    padding: 11px 16px !important;
    border-radius: 999px;
    color: #fff !important;
    background: #0d493f;
    font-size: .78rem !important;
    text-transform: none;
  }

  .nav-guide-link::before {
    width: 8px;
    height: 8px;
    background: #f6a168;
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  .self-guide-hero {
    padding-bottom: 48px;
  }

  .self-guide-hero__visual {
    right: -85px;
    bottom: -90px;
    width: 300px;
    opacity: .09;
  }

  .self-slider {
    display: flex;
    flex-direction: column;
  }

  .self-slider__panel {
    order: 1;
    min-height: 0;
    padding: 27px 23px 25px;
    border-color: rgba(255,255,255,.78);
    color: #103f38;
    background:
      radial-gradient(circle at 92% 8%, rgba(239,109,80,.16), transparent 31%),
      #fffaf2;
  }

  .self-slider__stage {
    order: 2;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-color: rgba(255,255,255,.28);
    background: #fffaf2;
  }

  .self-slider__thumbs {
    order: 3;
  }

  .self-slider__count {
    color: #74847f;
  }

  .self-slider__count span:first-child {
    color: #e45e42;
  }

  .self-slider__kicker {
    margin: 18px 0 10px;
    color: #d95b40;
  }

  .self-slider__panel h3 {
    color: #103f38 !important;
    font-size: clamp(2rem, 10vw, 2.85rem);
  }

  .self-slider__panel > p:not(.self-slider__kicker) {
    margin: 14px 0 0;
    color: #536862;
  }

  .self-slider__progress {
    margin: 23px 0 22px;
    background: rgba(16, 63, 56, .12);
  }

  .self-slider__panel .button {
    min-height: 50px;
    border-color: #ed6a4d;
    color: #fff;
    background: #ed6a4d;
  }

  .self-slider__stage img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  .self-slider__arrow {
    bottom: 13px;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    color: #fff;
    background: #e86548;
    box-shadow: 0 12px 28px rgba(28, 47, 42, .25);
    font-size: 1.4rem;
  }

  .self-slider__arrow--prev {
    left: calc(50% - 59px);
  }

  .self-slider__arrow--next {
    right: calc(50% - 59px);
  }

  .self-slider__thumbs {
    grid-auto-columns: 66px;
    padding-top: 2px;
    scroll-padding-inline: 12px;
  }

  .self-slider__thumbs button {
    border-radius: 13px;
  }

  .self-guide-teaser {
    padding-block: 22px;
  }

  .self-guide-teaser__card {
    gap: 25px;
    padding: 31px 21px 23px;
  }

  .self-guide-teaser__copy h2 {
    font-size: clamp(2.55rem, 12.2vw, 3.85rem);
  }

  .self-guide-teaser__copy > p:not(.eyebrow) {
    font-size: .98rem;
    line-height: 1.62;
  }

  .self-guide-teaser__visual {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin-top: 0;
  }

  .self-guide-teaser__visual img,
  .self-guide-teaser__visual img:first-child {
    width: 100%;
    height: 275px;
    border-width: 4px;
    transform: none;
    object-position: center 10%;
  }

  .self-guide-teaser__visual img:last-child {
    display: none;
  }

  .myth-reality > div {
    padding: 27px 24px;
  }

  .myth-reality > div:last-child h3 {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .source-list a[target="_blank"]::after {
    justify-self: start;
  }
}
/* Repaired guide paths, calmer active state and mobile action hierarchy */
.main-nav a[aria-current="page"] {
  position: relative;
  border-bottom: 0 !important;
  text-decoration: none !important;
}

.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px !important;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: #ef6d50;
}

.main-nav .nav-guide-link {
  position: relative;
  overflow: visible;
  color: #176d5a !important;
  font-size: .68rem !important;
  font-weight: 850 !important;
  letter-spacing: .045em;
  text-decoration: none !important;
}

.main-nav .nav-guide-link::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #1b9a70;
  box-shadow: 0 0 0 0 rgba(27, 154, 112, .42);
  animation: fusszeitGuidePulse 2.15s ease-out infinite;
}

.main-nav .nav-guide-link::after {
  content: none !important;
}

@keyframes fusszeitGuidePulse {
  0% { box-shadow: 0 0 0 0 rgba(27, 154, 112, .42); }
  58%, 100% { box-shadow: 0 0 0 8px rgba(27, 154, 112, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-guide-link::before {
    animation: none;
    box-shadow: 0 0 0 4px rgba(27, 154, 112, .13);
  }
}

@media (max-width: 900px) {
  .mobile-nav .nav-guide-link {
    position: relative;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 13px;
    width: 100%;
    min-height: 76px;
    margin: 14px 0 18px;
    padding: 13px 17px !important;
    border: 1px solid rgba(23, 109, 90, .2);
    border-radius: 22px;
    color: #103f38 !important;
    background:
      radial-gradient(circle at 92% 10%, rgba(33, 157, 115, .13), transparent 34%),
      #edf6ee;
    box-shadow: 0 12px 28px rgba(17, 69, 58, .08);
    font-family: var(--sans, sans-serif);
    font-size: .91rem !important;
    font-weight: 850 !important;
    letter-spacing: 0;
    text-transform: none;
  }

  .mobile-nav .nav-guide-link::before {
    content: "5";
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #fff;
    background: #16765e;
    box-shadow: 0 0 0 0 rgba(22, 118, 94, .35);
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.35rem;
    animation: fusszeitGuidePulse 2.15s ease-out infinite;
  }

  .mobile-nav .nav-guide-link::after {
    content: "Kostenlose Hilfe · 10 bebilderte Schritte";
    display: block !important;
    grid-column: 2;
    margin-top: 3px;
    color: #61746e;
    font-size: .64rem;
    font-weight: 720;
    letter-spacing: .02em;
    line-height: 1.3;
  }

  .mobile-nav .mobile-whatsapp,
  .mobile-nav .button.coral {
    position: relative;
    min-height: 56px;
    border-radius: 18px !important;
    box-shadow: 0 12px 26px rgba(18, 62, 52, .1);
  }

  .mobile-nav .mobile-whatsapp {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff !important;
    background: #159866 !important;
  }

  .mobile-nav .mobile-whatsapp::before {
    content: "WA";
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 50%;
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .02em;
  }

  .mobile-nav .button.coral {
    margin-top: 10px;
    border: 1px solid #ef6d50 !important;
    color: #fff !important;
    background: #ef6d50 !important;
  }

  .mobile-nav .button.coral::before {
    content: "Termin";
    display: inline-flex;
    margin-right: 9px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #c94e34;
    background: rgba(255,255,255,.88);
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
}
/* Premium action icons: local Tabler SVG set */
.main-nav .nav-guide-link {
  color: #16745f !important;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-inline: .15rem;
  text-decoration: none;
}
.main-nav .nav-guide-link::before {
  content: "" !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex: 0 0 1.25rem;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("icons/guide-book.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  filter: brightness(0) saturate(100%) invert(36%) sepia(29%) saturate(1040%) hue-rotate(113deg) brightness(92%) contrast(90%) drop-shadow(0 0 0 rgba(22,116,95,0));
  animation: premiumGuidePulse 2.7s ease-in-out infinite !important;
}
@keyframes premiumGuidePulse {
  0%, 100% { transform: scale(1); filter: brightness(0) saturate(100%) invert(36%) sepia(29%) saturate(1040%) hue-rotate(113deg) brightness(92%) contrast(90%) drop-shadow(0 0 0 rgba(22,116,95,0)); }
  50% { transform: scale(1.09); filter: brightness(0) saturate(100%) invert(36%) sepia(29%) saturate(1040%) hue-rotate(113deg) brightness(92%) contrast(90%) drop-shadow(0 0 7px rgba(22,116,95,.34)); }
}
.mobile-nav .nav-guide-link {
  display: grid !important;
  grid-template-columns: 3.45rem minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: .9rem !important;
  row-gap: .18rem !important;
  align-items: center !important;
  min-height: 5.35rem !important;
  padding: .8rem 1rem !important;
  margin: .7rem 0 1.25rem !important;
  border: 1px solid rgba(20,103,84,.24) !important;
  border-radius: 1.35rem !important;
  color: #0b4a3f !important;
  background: linear-gradient(135deg,rgba(235,250,245,.98),rgba(245,252,248,.91)) !important;
  box-shadow: 0 14px 32px rgba(9,64,54,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
}
.mobile-nav .nav-guide-link::before {
  content: "" !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 3.45rem !important;
  height: 3.45rem !important;
  border-radius: 1.05rem !important;
  background-color: #116b59 !important;
  background-image: url("icons/guide-book.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.65rem 1.65rem !important;
  box-shadow: 0 10px 22px rgba(15,98,81,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
  animation: premiumGuideTilePulse 3s ease-in-out infinite !important;
}
.mobile-nav .nav-guide-link::after {
  content: "Kostenlose Hilfe · 10 bebilderte Schritte" !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  color: #597169 !important;
  font-family: inherit !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .015em !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}
@keyframes premiumGuideTilePulse {
  0%,100% { transform: scale(1); box-shadow: 0 10px 22px rgba(15,98,81,.22),0 0 0 0 rgba(22,150,119,0); }
  50% { transform: scale(1.035); box-shadow: 0 12px 25px rgba(15,98,81,.25),0 0 0 7px rgba(22,150,119,.08); }
}
.mobile-whatsapp,
.mobile-nav .button.coral {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 2.75rem minmax(0,1fr) !important;
  align-items: center !important;
  gap: .7rem !important;
  min-height: 3.85rem !important;
  padding: .55rem 1.05rem .55rem .6rem !important;
  border-radius: 1.2rem !important;
  text-align: left !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 12px 26px rgba(7,52,45,.12) !important;
}
.mobile-whatsapp::before,
.mobile-nav .button.coral::before {
  content: "" !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: .9rem !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.45rem 1.45rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.mobile-whatsapp {
  background: linear-gradient(135deg,#0f9f69,#16885f) !important;
  border: 1px solid rgba(5,112,72,.28) !important;
  color: #fff !important;
}
.mobile-whatsapp::before {
  background-color: rgba(255,255,255,.14) !important;
  background-image: url("icons/whatsapp.svg") !important;
}
.mobile-nav .button.coral {
  background: linear-gradient(135deg,#f67859,#e95d45) !important;
  border: 1px solid rgba(210,71,48,.22) !important;
  color: #fff !important;
}
.mobile-nav .button.coral::before {
  background-color: rgba(120,28,14,.12) !important;
  background-image: url("icons/calendar.svg") !important;
}
.mobile-whatsapp:hover,
.mobile-nav .button.coral:hover,
.mobile-nav .nav-guide-link:hover {
  transform: translateY(-2px) !important;
}
@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-guide-link::before,
  .mobile-nav .nav-guide-link::before { animation: none !important; }
}

/* Mobile navigation containment and narrow-screen alignment */
.mobile-nav {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.mobile-nav > *,
.mobile-nav .nav-guide-link,
.mobile-nav .mobile-whatsapp,
.mobile-nav .button.coral {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.mobile-nav .nav-guide-link {
  grid-template-columns: 3.25rem minmax(0, 1fr) !important;
  column-gap: .78rem !important;
  padding: .72rem .82rem !important;
}
.mobile-nav .nav-guide-link::before {
  width: 3.25rem !important;
  height: 3.25rem !important;
}
.mobile-nav .nav-guide-link,
.mobile-nav .nav-guide-link::after,
.mobile-nav .mobile-whatsapp,
.mobile-nav .button.coral {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.mobile-nav .nav-guide-link::after {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  line-height: 1.25 !important;
}
.mobile-nav .mobile-whatsapp,
.mobile-nav .button.coral {
  grid-template-columns: 2.75rem minmax(0, 1fr) !important;
  line-height: 1.2 !important;
}
@media (max-width: 370px) {
  .mobile-nav .nav-guide-link {
    grid-template-columns: 2.85rem minmax(0, 1fr) !important;
    column-gap: .65rem !important;
    padding: .65rem .7rem !important;
  }
  .mobile-nav .nav-guide-link::before {
    width: 2.85rem !important;
    height: 2.85rem !important;
    border-radius: .85rem !important;
    background-size: 1.35rem 1.35rem !important;
  }
  .mobile-nav .nav-guide-link::after {
    content: "Kostenlose Hilfe · 10 Schritte" !important;
    font-size: .64rem !important;
  }
  .mobile-nav .mobile-whatsapp,
  .mobile-nav .button.coral {
    grid-template-columns: 2.5rem minmax(0, 1fr) !important;
    gap: .58rem !important;
    padding: .5rem .72rem .5rem .55rem !important;
    font-size: .78rem !important;
  }
  .mobile-nav .mobile-whatsapp::before,
  .mobile-nav .button.coral::before {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
}

/* Sticky mobile header and restrained premium icon sheen */
@media (max-width: 900px) {
  .site-header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 2200 !important;
    width: 100% !important;
    background: rgba(255, 250, 242, .96) !important;
    border-bottom: 1px solid rgba(12, 67, 57, .12) !important;
    box-shadow: 0 10px 28px rgba(24, 58, 50, .08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
  }
  body.menu-open .site-header,
  body.nav-open .site-header,
  body.mobile-menu-open .site-header {
    top: 0 !important;
    z-index: 5000 !important;
  }
}

.mobile-nav .nav-guide-link::before {
  border: 1px solid rgba(255,255,255,.28) !important;
  background-color: #0c6957 !important;
  background-image:
    url("icons/guide-book.svg"),
    linear-gradient(112deg, transparent 25%, rgba(255,255,255,.06) 39%, rgba(255,255,255,.62) 48%, rgba(255,255,255,.08) 57%, transparent 72%),
    linear-gradient(145deg, #167a65, #075044) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center, -190% 0, center !important;
  background-size: 1.55rem 1.55rem, 230% 100%, 100% 100% !important;
  animation: premiumGuideTileSheen 4.8s ease-in-out infinite !important;
}
.mobile-whatsapp::before {
  border: 1px solid rgba(255,255,255,.42) !important;
  background-color: rgba(255,255,255,.12) !important;
  background-image:
    url("icons/whatsapp.svg"),
    linear-gradient(112deg, transparent 26%, rgba(255,255,255,.04) 39%, rgba(255,255,255,.68) 48%, rgba(255,255,255,.06) 58%, transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05)) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center, -190% 0, center !important;
  background-size: 1.42rem 1.42rem, 230% 100%, 100% 100% !important;
  animation: premiumActionSheen 5.4s 1.1s ease-in-out infinite !important;
}
.mobile-nav .button.coral::before {
  border: 1px solid rgba(255,255,255,.25) !important;
  background-color: rgba(127,35,20,.13) !important;
  background-image:
    url("icons/calendar.svg"),
    linear-gradient(112deg, transparent 26%, rgba(255,255,255,.04) 39%, rgba(255,255,255,.64) 48%, rgba(255,255,255,.06) 58%, transparent 72%),
    linear-gradient(145deg, rgba(171,52,33,.18), rgba(255,255,255,.06)) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center, -190% 0, center !important;
  background-size: 1.38rem 1.38rem, 230% 100%, 100% 100% !important;
  animation: premiumActionSheen 5.4s 2.25s ease-in-out infinite !important;
}
@keyframes premiumGuideTileSheen {
  0%, 58%, 100% {
    transform: scale(1);
    background-position: center, -190% 0, center;
    box-shadow: 0 10px 22px rgba(15,98,81,.22), 0 0 0 0 rgba(22,150,119,0), inset 0 1px 0 rgba(255,255,255,.24);
  }
  68% {
    transform: scale(1.035);
    background-position: center, 190% 0, center;
    box-shadow: 0 13px 28px rgba(15,98,81,.28), 0 0 0 7px rgba(22,150,119,.07), inset 0 1px 0 rgba(255,255,255,.34);
  }
  76% {
    transform: scale(1);
    background-position: center, 190% 0, center;
  }
}
@keyframes premiumActionSheen {
  0%, 62%, 100% { background-position: center, -190% 0, center; }
  73%, 82% { background-position: center, 190% 0, center; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav .nav-guide-link::before,
  .mobile-whatsapp::before,
  .mobile-nav .button.coral::before {
    animation: none !important;
  }
}

/* One mobile header-to-content rhythm across pages and Ratgeber articles */
@media (max-width: 900px) {
  .site-header + main,
  .site-header ~ main,
  main.site-main,
  main.page-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  main > section:first-child:has(.breadcrumb),
  main > section:first-child:has(.breadcrumbs),
  main > article:first-child:has(.breadcrumb),
  main > article:first-child:has(.breadcrumbs),
  main > div:first-child:has(.breadcrumb),
  main > div:first-child:has(.breadcrumbs),
  main > .page-hero:first-child,
  main > .article-hero:first-child,
  main > .ratgeber-hero:first-child,
  main > .legal-hero:first-child,
  main > .inner-hero:first-child {
    margin-top: 0 !important;
    padding-top: 1.25rem !important;
    min-height: 0 !important;
  }

  main > .breadcrumb:first-child,
  main > .breadcrumbs:first-child {
    margin-top: 0 !important;
    padding-top: 1.25rem !important;
  }

  main section:first-child .breadcrumb,
  main section:first-child .breadcrumbs,
  main article:first-child .breadcrumb,
  main article:first-child .breadcrumbs,
  main [class*="hero"]:first-child .breadcrumb,
  main [class*="hero"]:first-child .breadcrumbs {
    margin-top: 0 !important;
    margin-bottom: 1.65rem !important;
    padding-top: 0 !important;
  }

  main [class*="hero"]:first-child > .shell,
  main [class*="hero"]:first-child > .container,
  main [class*="hero"]:first-child > .wrap,
  main [class*="hero"]:first-child > .inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 420px) {
  main > section:first-child:has(.breadcrumb),
  main > section:first-child:has(.breadcrumbs),
  main > article:first-child:has(.breadcrumb),
  main > article:first-child:has(.breadcrumbs),
  main > div:first-child:has(.breadcrumb),
  main > div:first-child:has(.breadcrumbs),
  main > .page-hero:first-child,
  main > .article-hero:first-child,
  main > .ratgeber-hero:first-child,
  main > .legal-hero:first-child,
  main > .inner-hero:first-child {
    padding-top: 1rem !important;
  }

  main section:first-child .breadcrumb,
  main section:first-child .breadcrumbs,
  main article:first-child .breadcrumb,
  main article:first-child .breadcrumbs {
    margin-bottom: 1.35rem !important;
  }
}

/* Refined mobile primary actions: fixed icon rail, protected label, local arrow icon */
.mobile-nav .mobile-whatsapp,
.mobile-nav .button.coral {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 4.35rem !important;
  margin-inline: 0 !important;
  padding: .7rem 3.25rem .7rem 4.85rem !important;
  box-sizing: border-box !important;
  border-radius: 1.35rem !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-family: var(--font-sans, "Segoe UI Variable Display", "Aptos Display", sans-serif) !important;
  font-size: clamp(.79rem, 3.45vw, .92rem) !important;
  font-weight: 760 !important;
  font-variation-settings: "wght" 760 !important;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
  text-align: left !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.08) !important;
  isolation: isolate !important;
}
.mobile-nav .mobile-whatsapp::before,
.mobile-nav .button.coral::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  left: .68rem !important;
  top: 50% !important;
  width: 3rem !important;
  height: 3rem !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  flex: none !important;
  border-radius: 1rem !important;
  box-sizing: border-box !important;
}
.mobile-nav .mobile-whatsapp::after,
.mobile-nav .button.coral::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  right: 1rem !important;
  top: 50% !important;
  width: 1.08rem !important;
  height: 1.08rem !important;
  transform: translateY(-50%) !important;
  background: url("icons/arrow-up-right.svg") center / contain no-repeat !important;
  opacity: .82 !important;
  transition: transform .22s ease, opacity .22s ease !important;
}
.mobile-nav .mobile-whatsapp:hover::after,
.mobile-nav .button.coral:hover::after {
  transform: translate(2px,-2px) !important;
  opacity: 1 !important;
}
.mobile-nav .mobile-whatsapp {
  background: linear-gradient(135deg,#139f6c 0%,#07865d 58%,#057351 100%) !important;
  border: 1px solid rgba(4,105,72,.28) !important;
  box-shadow: 0 15px 30px rgba(5,112,76,.18), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.mobile-nav .button.coral {
  background: linear-gradient(135deg,#fa765b 0%,#ed634b 58%,#dc4f39 100%) !important;
  border: 1px solid rgba(194,61,40,.25) !important;
  box-shadow: 0 15px 30px rgba(190,67,45,.18), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
@media (max-width: 370px) {
  .mobile-nav .mobile-whatsapp,
  .mobile-nav .button.coral {
    min-height: 4rem !important;
    padding: .62rem 2.65rem .62rem 4.25rem !important;
    font-size: .76rem !important;
    letter-spacing: -.03em !important;
  }
  .mobile-nav .mobile-whatsapp::before,
  .mobile-nav .button.coral::before {
    left: .58rem !important;
    width: 2.72rem !important;
    height: 2.72rem !important;
    border-radius: .9rem !important;
  }
  .mobile-nav .mobile-whatsapp::after,
  .mobile-nav .button.coral::after {
    right: .78rem !important;
    width: .92rem !important;
    height: .92rem !important;
  }
}