/* Both landing pages retain their existing type, imagery and accent. */
.page-lp .lp-hero .lp-sub {
  max-width: 38ch;
  font: 400 clamp(16px, 1.18vw, 19px)/1.45 var(--f-body);
  letter-spacing: 0;
  text-wrap: pretty;
}
.page-home .hero-s1 .hero-sub { max-width: 35ch; text-wrap: pretty; }
.page-home .hero-s1 .hero-action { margin-top: 18px; }
.page-home .hero-s1 .hero-btn, .lp-hero .lp-action .hero-btn {
  background: #eee8fb; color: #261938; border-color: #eee8fb; text-shadow: none;
}
.page-home .hero-s1 .hero-btn:is(:hover,:focus-visible),
.lp-hero .lp-action .hero-btn:is(:hover,:focus-visible) { background: #fff; color: #261938; }
.page-home .hero-s1 .hero-btn::before, .lp-hero .lp-action .hero-btn::before { background: none; }
@media (max-width: 767px) {
  .page-home .hero-s1 .hero-copy { padding-right: 4px; }
  .page-home .hero-s1 .hero-eyebrow span { letter-spacing:.22em; }
  .page-home .hero-s1 .hero-sub { max-width: 32ch; }
  .page-lp .lp-hero .lp-sub { max-width: 33ch; font-size: 16px; }
}
/* All three slides reserve the same strip for navigation. The tallest copy
   sets the minimum height, so wrapping cannot push the CTA into the controls. */
#dh-hero {
  --control-height: 44px;
  --action-gap: 12px;
  --footer-room: clamp(84px, 10svh, 128px);
  --copy-left: max(63px, calc(env(safe-area-inset-left, 0px) + 16px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: max(560px, 100svh);
}
#dh-hero .hero-slide {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 90px var(--copy-left) calc(var(--footer-room) + var(--control-height) + var(--action-gap));
}
#dh-hero .hero-copy {
  position: relative;
  inset: auto;
  align-self: flex-start;
  justify-content: flex-end;
  max-width: min(820px, 100%);
  padding: 0;
  translate: none;
}
#dh-hero .hero-sub { max-width: 37ch; }
#dh-hero .hero-s1 .hero-sub { max-width: 35ch; }
#dh-hero .hero-action { display: flex; }
#dh-hero .hero-inds {
  top: auto;
  bottom: var(--footer-room);
  left: var(--copy-left);
  height: var(--control-height);
  translate: none;
  gap: 10px;
}
#dh-hero .hero-ind {
  height: var(--control-height);
  width: 44px;
  flex: none;
  background: transparent;
}
#dh-hero .hero-ind.is-on { width: 60px; }
#dh-hero .hero-ind::before,
#dh-hero .hero-ind-fill {
  top: calc(50% - 1px);
  left: 0;
  right: 0;
  bottom: auto;
  height: 2px;
}
#dh-hero .hero-ind::before { background: #c7c7c2; }
#dh-hero .hero-ind:focus-visible { outline: 2px solid white; outline-offset: 2px; }
@media (max-width: 900px) {
  #dh-hero {
    --footer-room: clamp(162px, 24svh, 248px);
    --copy-left: max(27px, calc(env(safe-area-inset-left, 0px) + 16px));
  }
}
@media (min-aspect-ratio: 1155/2048) and (max-aspect-ratio: 3/2) and (max-width: 1279px) {
  /* The tablet wedding photograph has three faces across its upper half. */
  #dh-hero .hero-s2 { padding-top: max(90px, calc(var(--mc-chin, 0px) + 12px)); }
}
@media (max-width:767px) and (max-aspect-ratio:1154/2048) {
  /* The portrait photo is contained, top aligned. Its faces occupy the first
     35% of the 1154 × 2048 frame. Keep the copy below that part of the image. */
  #dh-hero .hero-s2 { padding-top:calc(62.2vw + 8px); }
}
@media (max-width:480px) and (max-height:700px) {
  #dh-hero { --footer-room:97px; }
  #dh-hero .hero-s2 .hero-title { font-size:clamp(38px,12vw,48px); }
  #dh-hero :is(.hero-s1, .hero-s2) .hero-sub { font-size:16px; line-height:1.4; }
  #dh-hero .hst { padding-block:9px; }
  #dh-hero :is(.hero-ctr,.dn-ki-badge) { bottom:calc(var(--footer-room) - 17px); }
}


/* Put all three booking routes together before biography or sound sample. */
.seo2-anlaesse { padding-block: clamp(42px,6vw,84px); background: #f5f1fa; }
.seo2-rows { margin: 0; }
.seo2-rows > li { position: relative; padding-block: 16px; border-color: #c9bfd4; }
.seo2-rows > li a { display: inline-flex; gap: .65em; align-items: baseline; font-weight: 650; color: #49346c; }
.seo2-rows > li a::after { content:""; width:.42em; height:.42em; border-top:2px solid; border-right:2px solid; transform:translateY(-.13em) rotate(45deg); }
.seo2-rows > li a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
@media (min-width: 900px) {
  .seo2-rows { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px); }
  .seo2-rows > li { display:block; border-bottom:0; border-top:1px solid #9789a4; padding:18px 0 12px; }
  .seo2-rows > li a { min-height:40px; font-size:clamp(20px,1.55vw,26px); }
  .seo2-rows p { margin-top:8px; max-width:35ch; }
}

#dn-stack2 {
  margin:0; padding:clamp(44px,6vw,84px) var(--gutter) clamp(26px,3vw,44px);
  background:#f5f1fa; --body:#e4e0e8; --veil:#141317; --veil1:.18; --veil2:.1;
  --s2-top:calc(var(--menu-top, 20px) + var(--menu-size, 50px) + 12px);
  --s2-step:10px;
}
#dn-stack2::before { content:none; }
#dn-stack2 .s2-stage { max-width:var(--lp-content); overflow:visible; }
#dn-stack2 .s2-track { overflow:visible; }
#dn-stack2 .s2-intro { text-align:left; padding:0; margin:0 0 24px; }
#dn-stack2 .s2-hl { font-size:clamp(39px,5.2vw,80px); line-height:1; letter-spacing:.005em; }
#dn-stack2 .s2-hl em { color:#624687; }
#dn-stack2 .s2-card {
  position:relative; top:auto; height:auto; min-height:0;
  container-type:inline-size; display:block; scroll-margin-top:calc(var(--s2-top) + 8px);
}
#dn-stack2 .s2-card + .s2-card { margin-top:20px; }
#dn-stack2 .s2-look {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"copy photo"; height:auto; min-height:clamp(320px,36vw,470px);
  align-items:stretch; border:1px solid #38323e; border-radius:12px; box-shadow:none;
}
#dn-stack2 .s2-media { grid-area:photo; position:relative; inset:auto; height:auto; min-height:0; mask:none; -webkit-mask:none; }
#dn-stack2 .s2-media picture { position:absolute; inset:0; }
#dn-stack2 .s2-media img { object-position:50% 37%; filter:grayscale(1); }
#dn-stack2 .s2-card:nth-child(2) img { object-position:50% 35%; }
#dn-stack2 .s2-content { grid-area:copy; align-self:center; margin:0; padding:clamp(24px,3.7vw,48px); width:auto; max-width:none; }
#dn-stack2 .s2-eyebrow2 { margin-bottom:16px; }
#dn-stack2 .s2-eyebrow2 span { font-size:11px; letter-spacing:.15em; }
#dn-stack2 .s2-titlerow { margin-bottom:18px; gap:12px; }
#dn-stack2 .s2-title { font-size:clamp(30px,3.8vw,54px); }
#dn-stack2 .s2-body { font-size:16px; line-height:1.5; }
#dn-stack2 .s2-body p { margin:0 0 .64em; }
#dn-stack2 .s2-body p:last-child { margin:0; }
@media (max-width:650px) {
  #dn-stack2 .s2-look { grid-template-columns:minmax(0,1fr); grid-template-areas:"photo" "copy"; min-height:0; }
  #dn-stack2 .s2-content { padding:22px; }
  #dn-stack2 .s2-media { height:auto; min-height:0; aspect-ratio:1.9; }
  #dn-stack2 .s2-card:nth-child(2) img { object-position:50% 29%; }
}

/* Let the next card cover the previous one naturally. The old view timelines
   started shrinking the reader’s card while the next one was still far below. */
#dn-stack2 :is(.s2-card,.s2-t1,.s2-t2,.s2-dim,.s2-dim2,.s2-media img) { animation:none; transform:none; }
#dn-stack2 :is(.s2-dim,.s2-dim2) { opacity:0; }
@media (min-width:22em) and (min-height:45em) and (prefers-reduced-motion:no-preference) {
  #dn-stack2 .s2-track { padding-bottom:calc(2 * var(--s2-step) + 12px); }
  #dn-stack2 .s2-card { position:sticky; top:var(--s2-top); }
  #dn-stack2 .s2-card:nth-child(2) { top:calc(var(--s2-top) + var(--s2-step)); }
  #dn-stack2 .s2-card:nth-child(3) { top:calc(var(--s2-top) + 2 * var(--s2-step)); }
  #dn-stack2 .s2-card + .s2-card { margin-top:clamp(18px,3svh,32px); }
}
.seo2-leistungen .seo2-note { max-width:56ch; }
@media (min-width:980px) {
  .seo2-leistungen .lp-wrap { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    grid-template-areas:"label list" "title list" "note list" "cta list"; gap:12px clamp(40px,6vw,88px); align-items:start; }
  .seo2-leistungen .lp-wrap > .eyebrow { grid-area:label; margin:0; }
  .seo2-leistungen .lp-wrap > .lp-h2 { grid-area:title; margin:0; }
  .seo2-leistungen .lp-wrap > .seo2-list { grid-area:list; margin:0; }
  .seo2-leistungen .lp-wrap > .seo2-note { grid-area:note; margin:0; }
  .seo2-leistungen .lp-wrap > .seo2-cta { grid-area:cta; margin:8px 0 0; }
}


/* Keep the first headline within the content column on narrow phones. */
@media (max-width: 359px) {
  #dh-hero .hero-s1 .hero-title { font-size: 16vw; }
}