/* Schriften (selbst gehostet, Lizenz: SIL Open Font License – siehe /fonts) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'Parisienne';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/parisienne-latin-400-normal.woff2) format('woff2')}

:root{
  --bg:#fbf8f2;
  --ink:#4a5320;      /* único acento: verde oliva */
  --ink-soft:#6b7340;
  --wine:#5c0b1d;     /* Akzent: Burgunder */
  --wine-deep:#42030e;
  --gold:#c9a96e;
  --cream:#f3e9d8;
  --line:rgba(74,83,32,.35);
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script:'Parisienne', 'Snell Roundhand', cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:640px;margin:0 auto;padding:0 24px}
section{padding:72px 0;text-align:center}
.eyebrow{
  font-size:.82rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  text-wrap:balance;
}
.rule{width:min(260px,60%);height:1px;background:var(--line);margin:28px auto}
.section-title{
  font-weight:500;
  display:flex;align-items:center;gap:20px;justify-content:center;
  font-size:1.05rem;letter-spacing:.4em;text-transform:uppercase;margin-bottom:12px;
}
.section-title::before,.section-title::after{content:"";flex:1;max-width:90px;height:1px;background:var(--line)}
em,.it{font-style:italic}

/* Hero */
.hero{}
.names{
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.6rem,12.5vw,6.6rem);
  white-space:nowrap;
  line-height:1.05;
  margin:8px 0 28px;
}
.lead{font-style:italic;max-width:30em;margin:0 auto;letter-spacing:.04em}

/* Fecha */
.date{
  display:flex;align-items:center;justify-content:center;gap:0;margin:8px auto 36px;
}
.date > div{padding:0 22px}
.date .side{
  font-size:.95rem;letter-spacing:.28em;text-transform:uppercase;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:6px 14px;min-width:116px;
}
.date .center{
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  padding:2px 30px;line-height:1.1;
}
.date .month{font-size:.9rem;letter-spacing:.34em;text-transform:uppercase;display:block}
.date .day{font-size:3.6rem;font-weight:500;display:block}
.date .year{font-size:.9rem;letter-spacing:.34em;display:block}
.venue-name{font-size:1.5rem;letter-spacing:.32em;text-transform:uppercase}
.venue-city{font-style:italic;font-size:1.2rem;letter-spacing:.08em}

/* Cuenta regresiva */
.countdown{display:flex;justify-content:center;gap:28px;margin-top:40px}
.countdown div{min-width:56px}
.countdown b{display:block;font-size:2rem;font-weight:500;line-height:1.1}
.countdown span{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase}


/* Foto */
.photo{margin:34px auto 0;max-width:520px}
.photo img{
  display:block;width:100%;height:auto;object-fit:contain;
}
.photo img{max-height:36vh;max-height:36svh}
@media (max-width:520px){ .photo{margin:30px 10px 0} }
@media (max-height:830px){
  .screen{padding:44px 0 22px}
  .photo img{max-height:32vh;max-height:32svh}
}
@media (max-height:720px){
  .screen{padding:30px 0 16px}
  .photo{margin-top:20px}
  .photo img{max-height:28vh;max-height:28svh}
  .countdown{margin-top:20px}
  .date{margin-bottom:20px}
  .next{margin-top:18px;width:42px;height:42px}
}
@media (max-height:660px){
  .photo img{max-height:24vh;max-height:24svh}
  .date .day{font-size:2.8rem}
  .venue-name{font-size:1.3rem}
  .countdown b{font-size:1.6rem}
  .countdown{margin-top:14px}
}

/* Dress code */
.dress h3{font-style:italic;font-weight:400;font-size:1.7rem;letter-spacing:.06em;margin-bottom:12px}
.dress p.weather{max-width:30em;margin:26px auto 0;font-style:italic;font-size:.95rem;color:var(--ink-soft);letter-spacing:.03em;line-height:1.5}
.dress p.intro{max-width:28em;margin:0 auto 36px;font-style:italic;font-size:1rem;letter-spacing:.03em}
.cols{display:grid;grid-template-columns:1fr 1px 1fr;gap:28px;text-align:left;align-items:start}
.cols .vr{background:var(--line);align-self:stretch}
.cols h4{font-weight:400;font-size:.95rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px}
.cols p{font-style:italic;font-size:1rem;line-height:1.5}
@media (max-width:520px){
  .eyebrow{letter-spacing:.24em}
  .cols{grid-template-columns:1fr;gap:28px;text-align:center}
  .cols .vr{display:none}
  .date .side{min-width:0;padding:6px 8px;font-size:.8rem;letter-spacing:.2em}
  .date > div{padding:0 10px}
  .date .center{padding:2px 18px}
}

/* Itinerario */
.timeline{list-style:none;max-width:480px;margin:36px auto 0;text-align:left;position:relative}
.timeline::before{content:"";position:absolute;left:15px;top:20px;bottom:20px;width:1px;background:var(--line)}
.timeline::before{transform:scaleY(0);transform-origin:top;transition:transform 2.2s cubic-bezier(.45,.05,.25,1) .1s}
.timeline.in::before{transform:none}
.timeline li{
  display:grid;grid-template-columns:94px 1fr;gap:0 16px;
  padding:11px 0 11px 48px;position:relative;
}
.timeline .ico{
  position:absolute;left:0;top:6px;width:31px;height:31px;display:grid;place-items:center;
  background:var(--bg);color:var(--ink);
}
.timeline .ico svg{width:28px;height:28px;display:block}
.timeline time{letter-spacing:.14em;font-size:.95rem;padding-top:2px}
.timeline .what{border-left:1px solid var(--line);padding-left:16px}
.timeline .what small{display:block;font-style:italic;font-size:.9rem;color:var(--ink-soft)}

/* Cierre */
.closing{padding-bottom:110px}
.heart{width:34px;height:34px;margin:0 auto 18px;display:block}
.closing p{font-style:italic;font-size:1.15rem;letter-spacing:.08em;max-width:22em;margin:0 auto}
.closing .sign{font-family:var(--script);font-style:normal;font-size:2.4rem;letter-spacing:0;margin-top:26px}

.closing .us{margin:0 auto 22px;width:min(100%,380px);padding:0 10px;box-sizing:border-box;touch-action:pan-x pan-y}
.closing .us img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;max-height:26svh;border-radius:2px;-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
@media (max-height:760px){.closing .us{margin-bottom:14px;width:min(100%,300px)}.closing .us img{max-height:18svh}.closing .sign{margin-top:16px}.heart{margin-bottom:12px}}

/* RSVP */
.rsvp-intro{max-width:26em;margin:0 auto 34px;font-style:italic;font-size:1rem;letter-spacing:.03em}
.rsvp-intro .one{display:block;margin-top:8px}
.rsvp-form{max-width:440px;margin:0 auto;text-align:left}
.field{margin-bottom:26px}
.field > label,.field > .legend{
  display:block;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:6px;
}
.rsvp-form input[type=text],.rsvp-form input[type=email],.rsvp-form select,.rsvp-form textarea{
  width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);border-radius:0;padding:6px 0;outline:none;
  transition:border-color .2s;
}
.rsvp-form textarea{resize:vertical;min-height:64px}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{border-bottom-color:var(--ink)}
.rsvp-form select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.choices{display:flex;gap:12px;flex-wrap:wrap}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices label{
  cursor:pointer;padding:9px 18px;border:1px solid var(--line);font-size:1rem;
  transition:background .2s,color .2s,border-color .2s;
}
.choices input:checked + label{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.choices input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{
  display:block;margin:34px auto 0;font:inherit;font-size:.9rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--ink);padding:14px 34px;cursor:pointer;
  transition:background .2s,color .2s;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--bg)}
.btn[disabled]{opacity:.5;cursor:default}
.privacy{font-size:.82rem;font-style:italic;color:var(--ink-soft);text-align:center;margin-top:20px}
.form-msg{text-align:center;margin-top:22px;font-style:italic;min-height:1.4em}
.form-msg.err{color:#8a3b2a}
.thanks,.closed{display:none;max-width:26em;margin:0 auto}
.thanks .t,.closed .t{font-family:var(--script);font-size:2.6rem;line-height:1.2;margin-bottom:10px}
.thanks p,.closed p{font-style:italic}
.is-done .rsvp-form,.is-done .rsvp-intro,.is-closed .rsvp-form,.is-closed .rsvp-intro{display:none}
.is-done .thanks,.is-closed .closed{display:block}
.closed a{color:inherit;text-underline-offset:3px}
.thanks .save-date{margin-top:36px}
.save-date[hidden]{display:none}
[hidden]{display:none!important}

/* Bildschirm-für-Bildschirm */
.screen{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:56px 0 28px;
}
.hero.screen{padding-top:72px}
.closing.screen{padding-bottom:90px}
.next{
  align-self:center;margin-top:34px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  color:var(--ink);background:transparent;border:1px solid var(--line);
  transition:background .25s,color .25s,border-color .25s;
  animation:nudge 2.4s ease-in-out infinite;
}
.next:hover,.next:focus-visible{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.next{animation:none}}

/* Eleganter Übergang */
html{scroll-snap-type:y mandatory}
.screen{scroll-snap-align:start;scroll-snap-stop:always}
html.is-scrolling{scroll-behavior:auto!important;scroll-snap-type:none!important}
.screen{will-change:opacity}
.reveal{transition-delay:calc(var(--i,0) * 110ms)}

/* Animación suave */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}


/* Zeitplan: Linie zeichnet sich, Symbole „poppen“ sanft auf, Text gleitet nach */
.timeline li.reveal{transform:none;transition:opacity .6s ease;transition-delay:calc(var(--n,0) * 260ms + 150ms)}
.timeline li:nth-child(2){--n:1}.timeline li:nth-child(3){--n:2}.timeline li:nth-child(4){--n:3}
.timeline li:nth-child(5){--n:4}.timeline li:nth-child(6){--n:5}.timeline li:nth-child(7){--n:6}
.timeline .ico{transform:scale(.55);opacity:0;transition:transform .8s cubic-bezier(.34,1.45,.5,1),opacity .5s ease;transition-delay:inherit}
.timeline time{opacity:0;transform:translateX(-8px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--n,0) * 260ms + 300ms)}
.timeline .what{opacity:0;transform:translateX(10px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--n,0) * 260ms + 380ms)}
.timeline li.in .ico{transform:none;opacity:1}
.timeline li.in time,.timeline li.in .what{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .timeline::before{transform:none;transition:none}
  .timeline .ico,.timeline time,.timeline .what{opacity:1;transform:none;transition:none}
}


/* Portada: Die Namen werden von links nach rechts „geschrieben“ */
.names{padding:.12em .18em .2em;margin-left:-.18em;margin-right:-.18em}
.names{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 42%,transparent 58%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 42%,transparent 58%,transparent 100%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;
}
.names.reveal{transform:none;transition:opacity .4s ease,-webkit-mask-position 2.8s cubic-bezier(.45,.1,.3,1) .7s,mask-position 2.8s cubic-bezier(.45,.1,.3,1) .7s}
.names.in{-webkit-mask-position:0 0;mask-position:0 0}
.hero .lead.reveal{transition-delay:2.6s}
.hero .next{animation-delay:3.4s}
@media (prefers-reduced-motion:reduce){
  .names,.names.reveal{-webkit-mask-image:none;mask-image:none;transition:none}
  .hero .lead.reveal{transition-delay:0s}
}

/* Kalender-Buttons */
.save-date{margin-top:48px}
.save-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.btn-ghost{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);padding:11px 18px;transition:background .2s,color .2s,border-color .2s;
}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Symbole */
.i{display:block}
.cols .person{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:start;text-align:left}
.cols .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.cols .head h4{margin-bottom:0}
.swatches{display:flex;gap:5px}
.swatches span{width:13px;height:13px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(74,83,32,.12)}
.cols .fig{width:64px;height:84px;object-fit:contain;object-position:center top;display:block}

/* Rahmen um die ganze Seite */
:root{--frame:10px}
@media (min-width:600px){:root{--frame:16px}}
@media (min-width:900px){:root{--frame:24px}}
body::before{
  content:"";position:fixed;inset:var(--frame);border:1px solid var(--line);
  pointer-events:none;z-index:40;
}
/* Bereich außerhalb des Rahmens: verdeckt Inhalt, der unter der Rahmenlinie hinausscrollt */
body::after{
  content:"";position:fixed;inset:0;border:var(--frame) solid var(--bg);
  pointer-events:none;z-index:39;
}

/* Punkte-Navigation (sitzt auf der Rahmenlinie) */
.dots{
  position:fixed;top:50%;right:calc(var(--frame) - 10px);transform:translateY(-50%);
  z-index:45;display:flex;flex-direction:column;gap:2px;
}
.dot{width:20px;height:20px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.dot::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid var(--ink);
  transition:background .25s,transform .25s;
}
.dot:hover::before{transform:scale(1.35)}
.dot[aria-current="true"]::before{background:var(--ink)}
.dot:focus-visible{outline:1px solid var(--ink);outline-offset:-2px;border-radius:50%}
@media (max-height:420px){.dots{display:none}}

/* Countdown: Endzustände */
.countdown.cd-msg{display:block;font-style:italic;font-size:1.35rem;letter-spacing:.05em}

/* Variante B: Ablaufplan auf zwei Ansichten verteilt */
.part{font-style:italic;letter-spacing:.12em;color:var(--ink-soft);margin-top:-2px}
@media (max-height:720px){
  .part{margin:-6px 0 0;font-size:.95rem}
  .timeline{margin-top:20px}
  .timeline li{padding-top:8px;padding-bottom:8px}
}

/* Zeitplan, erste Ansicht: geschwungener Pfeil am Ende der Linie deutet an, dass es weitergeht */
.timeline.more{margin-bottom:34px}
.timeline.more::before{bottom:0}
.more-arrow{
  position:absolute;left:12.3px;top:calc(100% + 9px);width:19px;height:36px;overflow:visible;
  fill:none;stroke:var(--ink-soft);stroke-opacity:.7;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.more-arrow .tail{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.25,1) 2.3s}
.more-arrow .head{opacity:0;transition:opacity .5s ease 3.7s}
.timeline.more.in .more-arrow .tail{stroke-dashoffset:0}
.timeline.more.in .more-arrow .head{opacity:1}
@media (prefers-reduced-motion:reduce){
  .more-arrow .tail{stroke-dashoffset:0;transition:none}
  .more-arrow .head{opacity:1;transition:none}
}

/* Und-Zeichen: gleiche Schrift wie die Namen */
.amp{font-family:var(--script);font-weight:400;display:inline-block;margin:0 .1em}

/* Mobil: Farbkreise nicht direkt neben der Punkt-Navigation am rechten Rand */
@media (max-width:600px){ .cols .head{padding-right:16px} }

/* RSVP kompakter auf niedrigen Bildschirmen (Platz für den Hinweis „eine Person“) */
@media (max-height:900px){ .rsvp-intro{margin-bottom:22px} .rsvp-intro .one{margin-top:6px} .rsvp-form .field{margin-bottom:20px} }
@media (max-height:720px){
  .rsvp-intro{margin-bottom:16px;font-size:.95rem}
  .rsvp-form .field{margin-bottom:14px}
  .rsvp-form textarea{min-height:48px}
}
@media (max-height:830px){ .rsvp-intro{margin-bottom:18px} .rsvp-form .field{margin-bottom:16px} }

/* Antwort ändern / optionale Felder */
.opt{font-size:.85em;opacity:.65;text-transform:none;letter-spacing:.04em;font-style:italic}
.thanks .change{background:none;border:0;border-bottom:1px solid currentColor;color:inherit;font:inherit;font-style:italic;font-size:.95rem;letter-spacing:.04em;margin-top:14px;padding:0 0 1px;cursor:pointer;opacity:.85}
.thanks .change:hover,.thanks .change:focus-visible{opacity:1}

.sprite{position:absolute}
.w5{font-weight:500}

.field[hidden]{display:none}

/* ===== Burgunder-Akzente (Variante B) ===== */
.amp{color:var(--wine)}
.sign .amp{color:inherit}
.date .day,.countdown b{color:var(--wine)}
.section-title,.venue-name,.dress h3{color:var(--wine)}
.section-title::before,.section-title::after{background:var(--wine);opacity:.7}
.rule{background:var(--wine);opacity:.55}
.timeline time,.timeline .ico{color:var(--wine)}
.heart{stroke:var(--wine)}
.thanks .t,.closed .t{color:var(--wine)}
.btn{background:var(--wine);border-color:var(--wine);color:var(--bg)}
.btn:hover,.btn:focus-visible{background:var(--wine-deep);border-color:var(--wine-deep);color:var(--bg)}
.choices label{border-color:rgba(110,31,51,.45)}
.choices input:checked + label{background:var(--wine);border-color:var(--wine);color:var(--bg)}
.choices input:focus-visible + label{outline-color:var(--wine)}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{border-bottom-color:var(--wine)}

/* ===== Startbildschirm: geprägter Burgunder-Rahmen auf hellem Papier =====
   Der Rahmen ist ein 9-Slice (Höhe flexibel, Breite fest). Seine Breite --w richtet sich
   nach Bildschirmbreite UND -höhe, und ALLE Größen darin (Schrift, Siegel, Abstände)
   hängen an --u = --w/100. So skaliert der Inhalt exakt mit dem Rahmen und passt immer. */
.hero.screen{
  position:relative;isolation:isolate;color:var(--cream);
  --gap:calc(var(--frame) + 8px);
  --w:min(calc(100vw - 2 * var(--frame) - 8px),calc((100svh - 2 * var(--gap)) * .6475));
  --u:calc(var(--w) / 100);
  --line:rgba(201,169,110,.5);
  margin-inline:calc(50% - 50vw);
  padding:calc(var(--gap) + var(--u) * 13) calc(50vw - var(--w) / 2 + var(--u) * 11.3);
}
.hero.screen::before{content:'';position:absolute;z-index:-1;pointer-events:none;box-sizing:border-box;
  /* ganze Pixel, sonst blitzen an den 9-Slice-Nähten feine Linien durch */
  left:50%;top:var(--gap);bottom:var(--gap);width:round(var(--w),2px);margin-left:calc(round(var(--w),2px) / -2);
  /* 9-Slice: Ecken/Bögen bleiben unverändert, nur die Mitte wird mit der Höhe gestreckt */
  border:solid transparent;border-width:round(calc(var(--u) * 36.67),1px) round(calc(var(--u) * 37.78),1px);
  border-image:url(/img/rahmen.webp) 330 340 fill / round(calc(var(--u) * 36.67),1px) round(calc(var(--u) * 37.78),1px) stretch;
  filter:drop-shadow(0 calc(var(--u) * 2.4) calc(var(--u) * 3.4) rgba(50,8,20,.4))}
/* Abstandhalter: wachsen auf hohen Bildschirmen, damit die Texte weiter auseinander stehen */
.hero .sp{flex:1 1 0;min-height:0;max-height:calc(var(--u) * 12)}
.hero .seal{position:static;display:block;width:calc(var(--u) * 19.5);height:auto;margin:0 auto calc(var(--u) * 2.4);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.hero .seal.reveal{transform:translateY(14px)}
.hero .seal.reveal.in{transform:none}
.hero .eyebrow,.hero .lead{color:var(--cream);text-shadow:0 -1px 0 rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.1)}
.hero .eyebrow{font-size:calc(var(--u) * 3.2);margin-bottom:calc(var(--u) * .5)}
.hero .lead{font-size:calc(var(--u) * 3.6);line-height:1.42}
/* Namen: groß, hell, versetzt */
.hero .names{display:flex;flex-direction:column;align-items:center;white-space:normal;
  margin:calc(var(--u) * 1.5) 0 calc(var(--u) * 3.4);font-size:calc(var(--u) * 14.6);line-height:.92;
  background:none;color:#fbf3e4;-webkit-text-fill-color:#fbf3e4;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.hero .names .n1{align-self:flex-start;margin-left:4%}
.hero .names .n2{align-self:flex-end;margin-right:4%}
.hero .names .amp{font-size:.62em;line-height:.8;margin:.02em 0 .04em;background:none;
  color:inherit;-webkit-text-fill-color:inherit}
.hero .rule{display:none}
.hero .next{margin-top:calc(var(--u) * 2);width:calc(var(--u) * 9.4);height:calc(var(--u) * 9.4);color:var(--gold);border-color:rgba(201,169,110,.6)}
.hero .next svg{width:55%;height:55%}
.hero .next:hover,.hero .next:focus-visible{background:var(--gold);color:var(--wine-deep);border-color:var(--gold)}