/* =========================================================
   Andrina & Alessio — Hochzeitswebsite
   Design tokens
   ========================================================= */
:root{
  --orange-900:#6f3410;
  --orange-700:#b6541c;
  --orange-600:#e57027;
  --orange-500:#e2812f;
  --orange-300:#efa868;
  --orange-200:#f6d9bd;
  --orange-100:#fbeeda;

  --blush-600:#d98686;
  --blush-400:#eeb3b0;
  --blush-300:#f5bec7;
  --blush-200:#f6d6d2;
  --blush-100:#fbe9e6;

  /* brand palette (assets/colors.png) — used for background fields, patterns
     and stripes, never for running text */
  --burgundy-700:#902633;
  --olive-600:#828a33;

  --paper:#f8f3e8;
  --paper-dim:#efe4cd;
  --ink:#241f1a;
  --ink-soft:#5b4d40;
  --line:rgba(36,31,26,.16);

  --font-display:'Kaushan Script','Segoe Script','Bradley Hand',cursive;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;

  --container:1080px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* scribble/paper texture — a single fixed, viewport-anchored overlay
   for the whole page. This used to be baked separately into each
   surface's own background (hero/band/footer/divider each tiling the
   image independently), but that meant every one of those tiles
   restarted at its own element's edge, so the grid pattern visibly
   broke at every section seam. One overlay, one continuous tile grid,
   no seams — it sits above every section's background (they're
   z-index:1, dividers z-index:2) but below the sticky nav (z-index:50). */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("../assets/img/scribble-bg.jpg");
  background-size:900px;
  background-repeat:repeat;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:3;
}

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

h1,h2,h3{
  font-family:var(--font-body);
  font-weight:700;
  line-height:1.05;
  margin:0;
  text-wrap:balance;
}

p{margin:0;}

a{color:inherit;}

.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
  position:relative;
  z-index:1;
}

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

section{position:relative;z-index:1;}

.eyebrow{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,2.1rem);
  color:var(--blush-300);
  display:block;
}

.section-title{
  font-size:clamp(2.4rem,6vw,3.6rem);
  color:var(--orange-700);
  margin-bottom:.2em;
}
.section-title.on-dark{color:var(--blush-200);}

.section-kicker{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange-600);
}
.section-kicker.on-dark{color:var(--blush-200);}

.section-lede{
  max-width:60ch;
  color:var(--ink-soft);
  font-size:1.05rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  padding:.85em 1.5em;
  border-radius:999px;
  border:none;
  background:var(--orange-600);
  color:var(--paper);
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 10px 22px -10px rgba(36,31,26,.55);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(36,31,26,.55);}
.btn:active{transform:translateY(0);box-shadow:0 6px 14px -8px rgba(36,31,26,.5);}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}

/* =========================================================
   Nav
   ========================================================= */
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  background-color:var(--paper);
  background-image:url("../assets/img/scribble-bg.jpg");
  background-size:900px;
  background-repeat:repeat;
  background-blend-mode:multiply;
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
  padding-block:1.2rem;
}
.site-nav .brand{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:-.01em;
  color:var(--orange-700);
  text-decoration:none;
  white-space:nowrap;
}
.site-nav ul{
  list-style:none;
  display:flex;
  gap:1.6rem;
  margin:0;
  padding:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.site-nav ul::-webkit-scrollbar{display:none;}
.site-nav a.nav-link{
  text-decoration:none;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
  padding-block:.2rem;
  border-bottom:2px solid transparent;
}
.site-nav a.nav-link:hover,
.site-nav a.nav-link.active{
  color:var(--orange-700);
  border-color:var(--orange-600);
}

/* hamburger toggle: hidden on desktop, shown on mobile below */
.nav-toggle{
  display:none;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:2.7rem;
  height:2.7rem;
  padding:0;
  border:none;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:1.5rem;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

@media (max-width:760px){
  .nav-toggle{display:flex;}
  .site-nav ul{
    position:absolute;
    top:100%;
    left:20px;
    right:20px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    border-radius:0 0 28px 28px;
    box-shadow:0 16px 32px -14px rgba(36,31,26,.35);
    max-height:0;
    overflow:hidden;
    padding-inline:1.2rem;
  }
  .site-nav ul.is-open{
    max-height:24rem;
    padding-block:.4rem;
  }
  .site-nav a.nav-link{
    display:block;
    padding-block:.85rem;
    border-bottom:1px solid var(--line);
  }
  .site-nav li:last-child a.nav-link{border-bottom:none;}
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  background:var(--orange-600);
  color:var(--paper);
  overflow:hidden;
  padding-block:3.6rem;
}
.hero .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.4rem;
}
.hero-arc{
  width:min(94vw,620px);
  height:auto;
  display:block;
  overflow:visible;
}
.hero-arc-top{margin-bottom:-.4rem;}
.hero-arc-bottom{margin-top:-.4rem;}
.hero-arc text{
  font-family:var(--font-display);
  font-weight:400;
  fill:var(--blush-300);
}
.hero-arc-top text{font-size:70px;}
.hero-arc-bottom text{font-size:42px;}

.hero-heads{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(1rem,5vw,3rem);
  margin-block:1rem;
}
@property --head-scale{
  syntax:'<number>';
  inherits:true;
  initial-value:1;
}
.hero-heads img{
  width:clamp(160px,40vw,360px);
  height:clamp(160px,40vw,360px);
  object-fit:contain;
  filter:drop-shadow(4px 10px 0 rgba(0,0,0,.18));
  transform-origin:bottom center;
  --head-scale:1;
  transition:--head-scale .25s ease;
  cursor:pointer;
}
.hero-heads img:hover{--head-scale:1.12;}
.hero-heads img.left{animation:wiggle-left 1.4s ease-in-out infinite;}
.hero-heads img.right{animation:wiggle-right 1.4s ease-in-out infinite;animation-delay:.1s;}
@keyframes wiggle-left{0%,100%{transform:rotate(-10deg) scale(var(--head-scale));}50%{transform:rotate(-2deg) scale(var(--head-scale));}}
@keyframes wiggle-right{0%,100%{transform:rotate(2deg) scale(var(--head-scale));}50%{transform:rotate(10deg) scale(var(--head-scale));}}

/* =========================================================
   Section shells — each band uses one field from the brand
   palette (assets/colors.png); text keeps the existing ink/
   orange system so contrast stays predictable.
   ========================================================= */
.band{
  padding-block:4.5rem;
}
.band.pink{background-color:var(--blush-300);}
.band.olive{background-color:var(--olive-600);}
.band.orange{background-color:var(--orange-600);color:var(--paper);}
.band.burgundy{background-color:var(--burgundy-700);color:var(--blush-100);}
.band.ink{background-color:var(--ink);color:var(--paper);}

.band-head{margin-bottom:2.4rem;max-width:60ch;}

/* organic wave divider between sections — the strip's own background
   matches the section above, the wave shape matches the section below,
   so the seam curves instead of cutting straight across */
.wave-divider{
  position:relative;
  z-index:2;
  height:64px;
  overflow:hidden;
  line-height:0;
}
.wave-divider svg{display:block;width:100%;height:100%;}
.wave-divider.orange-pink{background-color:var(--orange-600);}
.wave-divider.orange-pink path{fill:var(--blush-300);}
.wave-divider.pink-olive{background-color:var(--blush-300);}
.wave-divider.pink-olive path{fill:var(--olive-600);}
.wave-divider.olive-pink{background-color:var(--olive-600);}
.wave-divider.olive-pink path{fill:var(--blush-300);}
.wave-divider.olive-burgundy{background-color:var(--olive-600);}
.wave-divider.olive-burgundy path{fill:var(--burgundy-700);}
.wave-divider.pink-burgundy{background-color:var(--blush-300);}
.wave-divider.pink-burgundy path{fill:var(--burgundy-700);}
.wave-divider.burgundy-ink{background-color:var(--burgundy-700);}
.wave-divider.burgundy-ink path{fill:var(--ink);}

/* image + text side by side — used below Infos so the page opens up
   after the card grid. The image stretches to the full height of the
   row (i.e. the section), not a small fixed-height box. */
.media-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.2rem);
  align-items:stretch;
}
@media (max-width:760px){
  .media-row{grid-template-columns:minmax(0,1fr);gap:1.6rem;}
  .media-row .media-frame{order:-1;}
}

/* on the stronger olive-600 green, the existing ink/orange text colours
   lose contrast — a paper panel keeps the text on the light surface it
   was tuned for, while the green shows around/behind it */
.text-panel{
  background:var(--paper);
  border-radius:32px;
  padding:clamp(1.6rem,4vw,3rem);
  align-self:center;
}

.media-frame{
  position:relative;
  min-height:420px;
  border-radius:32px;
  overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(36,31,26,.07) 0 16px, transparent 16px 32px),
    var(--paper-dim);
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:760px){.media-frame{min-height:88vw;}}
.media-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame span{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--paper);
  padding:.5em 1.1em;
  border-radius:999px;
  box-shadow:0 8px 18px -10px rgba(36,31,26,.4);
}

/* image slider inside a .media-frame — same footprint as a single
   photo, but multiple .slider-slide images can be added and are
   swiped/clicked through. Nav + dots auto-hide via JS when there's
   only one slide. */
.media-slider .slider-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .45s ease;
  touch-action:pan-y;
}
.media-slider .slider-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
}
.media-slider .slider-slide img{
  position:static;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.slider-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  border:none;
  background:rgba(36,31,26,.55);
  color:var(--paper);
  font-size:1.4rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  transition:background .2s ease;
}
.slider-nav:hover{background:rgba(36,31,26,.8);}
.slider-nav.prev{left:.8rem;}
.slider-nav.next{right:.8rem;}
.slider-dots{
  position:absolute;
  left:50%;
  bottom:1rem;
  transform:translateX(-50%);
  display:flex;
  gap:.5rem;
  z-index:2;
}
.slider-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  border:none;
  padding:0;
  background:rgba(248,243,232,.55);
  cursor:pointer;
}
.slider-dot.active{background:var(--paper);}

/* a small standalone gallery of a few photos, no text — a breather
   between sections. Auto-fit so it works for 3, 4, or any other count. */
.photo-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.4rem;
}
.photo-row .media-frame{min-height:280px;}
@media (max-width:760px){
  .photo-row{grid-template-columns:minmax(0,1fr);gap:1.2rem;}
  .photo-row .media-frame{min-height:80vw;}
}

/* =========================================================
   Infos
   ========================================================= */
.infos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.4rem;
  margin-bottom:2.8rem;
}
.info-card{
  background:var(--paper);
  border-radius:26px;
  padding:1.5rem 1.5rem 1.7rem;
}
.info-card .tag{
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-700);
}
.info-card h3{
  font-family:var(--font-body);
  font-weight:800;
  font-size:1.15rem;
  margin-top:.35rem;
}
.info-card p{color:var(--ink-soft);margin-top:.4rem;font-size:.95rem;}
.info-card address{font-style:normal;color:var(--ink-soft);font-size:.95rem;margin-top:.15rem;}

.rsvp{
  background:var(--paper);
  border-radius:32px;
  padding:clamp(1.5rem,4vw,2.6rem);
  display:grid;
  gap:1.8rem;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);
  align-items:start;
}
@media (max-width:760px){
  .rsvp{grid-template-columns:minmax(0,1fr);}
}

.rsvp-intro h3{font-size:2rem;color:var(--orange-700);}
.rsvp-intro p{color:var(--ink-soft);margin-top:.7rem;}

.form-grid{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr);min-width:0;}
.form-row{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
@media (max-width:520px){.form-row{grid-template-columns:minmax(0,1fr);}}

.field{display:flex;flex-direction:column;gap:.35rem;min-width:0;}
.field label{font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.field input,.field select,.field textarea{
  width:100%;
  min-width:0;
  max-width:100%;
  font-family:var(--font-body);
  font-size:.95rem;
  padding:.6em .2em;
  border:none;
  border-bottom:2px solid var(--ink-soft);
  border-radius:0;
  background:transparent;
  color:var(--ink);
}
.field textarea{resize:vertical;min-height:5.5em;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--orange-600);
  box-shadow:0 2px 0 0 var(--orange-600);
}

.form-note{font-size:.82rem;color:var(--ink-soft);}
.form-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}

/* =========================================================
   Ablauf timeline
   ========================================================= */
.timeline{
  position:relative;
  margin-top:1rem;
  padding-left:clamp(1.6rem,5vw,2.6rem);
  border-left:3px dashed var(--orange-500);
}
.timeline-item{
  position:relative;
  padding-bottom:2.4rem;
}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(1.6rem,5vw,2.6rem) - 9px);
  top:.25rem;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--blush-300);
  box-shadow:0 4px 10px -3px rgba(36,31,26,.45);
}
.timeline-time{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--orange-700);
  display:block;
}
.timeline-item h3{
  font-family:var(--font-body);
  font-weight:800;
  font-size:1.15rem;
  margin-top:.15rem;
}
.timeline-item p{color:var(--ink-soft);margin-top:.35rem;max-width:52ch;}

/* =========================================================
   Dresscode
   ========================================================= */
.dresscode-text{max-width:60ch;}
.dresscode-text p{color:var(--ink-soft);margin-top:1rem;}
.dresscode-text p:first-of-type{margin-top:0;}
.dresscode-text strong{color:var(--orange-700);}

.swatch-inspo{margin-top:1.6rem;max-width:60ch;}
.swatch-inspo .tag{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-700);}
.swatch-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.9rem;}
.swatch{
  width:52px;height:52px;border-radius:50%;
  box-shadow:0 6px 14px -6px rgba(36,31,26,.4);
}
.avoid{
  margin-top:1.1rem;
  font-size:.85rem;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.avoid .no-swatch{
  width:26px;height:26px;border-radius:50%;
  background:#fff;box-shadow:0 4px 10px -4px rgba(36,31,26,.4);position:relative;flex:none;
}
.avoid .no-swatch::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top right, transparent 46%, var(--orange-700) 48%, var(--orange-700) 52%, transparent 54%);
}

/* =========================================================
   Mitbringtavolata
   ========================================================= */
.tavolata-live{
  margin-bottom:1.4rem;
}
.tavolata-live h3{font-size:1.9rem;color:var(--orange-700);margin-bottom:1rem;}
.tavolata-empty{color:var(--ink-soft);font-size:.92rem;}
.tavolata-category{margin-bottom:1.1rem;}
.tavolata-category:last-child{margin-bottom:0;}
.tavolata-category h4{
  font-family:var(--font-body);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--ink);
  margin-bottom:.5rem;
}
.tavolata-entry-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;}
.tavolata-entry{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  font-size:.92rem;
  color:var(--ink-soft);
  background:var(--paper-dim);
  border-radius:10px;
  padding:.5rem .8rem;
}
.tavolata-status{font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem;}

/* =========================================================
   Playlist / Musikwünsche
   ========================================================= */
.playlist-live{margin-bottom:1.4rem;}
.playlist-live h3{font-size:1.9rem;color:var(--orange-700);margin-bottom:1rem;}
.playlist-empty{color:var(--ink-soft);font-size:.92rem;}
.playlist-entry-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;}
.playlist-entry{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.4rem .6rem;
  font-size:.92rem;
  color:var(--ink-soft);
  background:var(--paper-dim);
  border-radius:10px;
  padding:.5rem .8rem;
}
.playlist-entry .song-title{font-weight:800;color:var(--ink);}
.playlist-entry .song-artist{color:var(--ink-soft);}
.playlist-entry .song-by{font-size:.82rem;color:var(--ink-soft);opacity:.75;margin-left:auto;}

/* honeypot: unsichtbar für Menschen, nicht für Bots verwendbar */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.signup{
  padding-top:1.6rem;
  border-top:2px dashed var(--line);
}
.signup h3{font-size:1.9rem;color:var(--orange-700);margin-bottom:1rem;}

/* =========================================================
   Geschenke / Vespa
   ========================================================= */
.vespa-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:2rem;
  align-items:start;
  margin-top:2rem;
}
@media (max-width:820px){.vespa-layout{grid-template-columns:minmax(0,1fr);}}

.vespa-figure{
  background:var(--paper);
  border-radius:32px;
  padding:1rem;
  position:sticky;
  top:5.5rem;
}
@media (max-width:820px){.vespa-figure{position:relative;top:auto;}}
.vespa-figure svg{width:100%;height:auto;display:block;}
.vespa-figure figcaption{
  text-align:center;
  font-size:.82rem;
  color:var(--ink-soft);
  margin-top:.6rem;
}
.hotspot{cursor:pointer;transition:transform .15s ease;transform-box:fill-box;transform-origin:center;}
.hotspot:hover,.hotspot:focus-visible{transform:scale(1.18);}
.hotspot circle.pin{fill:var(--blush-300);stroke:var(--ink);}
.hotspot.claimed circle.pin{fill:var(--orange-500);}
.hotspot:focus-visible{outline:none;}

.parts-list{display:grid;gap:.8rem;}
.part-card{
  background:var(--paper);
  border-radius:20px;
  padding:.9rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  box-shadow:0 6px 16px -10px rgba(36,31,26,.4);
  transition:background .3s ease, box-shadow .2s ease;
}
.part-card .num{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--orange-600);
  width:1.6em;
  flex:none;
}
.part-card .info{flex:1;}
.part-card h4{font-family:var(--font-body);font-weight:800;font-size:.98rem;margin:0;color:var(--orange-700);}
.part-card .price{font-size:.85rem;color:var(--ink-soft);}
.part-card.pulse{
  background:var(--blush-100);
  box-shadow:0 8px 22px -8px var(--orange-600);
}

/* geschenke sits on the dark burgundy band — lighten the text that
   isn't already inside a paper card */
#geschenke .section-lede{color:var(--blush-100);}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background:var(--ink);
  color:var(--paper);
  padding-block:3.5rem 2.5rem;
  text-align:center;
}
.footer h2{
  font-size:clamp(2.2rem,7vw,3.4rem);
  color:var(--blush-200);
}
.footer p{color:rgba(248,243,232,.75);margin-top:.8rem;}
.footer .signature{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--paper);
  margin-top:1.4rem;
}
.footer-contact{
  margin-top:1.6rem;
  font-size:.95rem;
}
.footer-contact a{text-decoration:underline;text-underline-offset:3px;}

.easter-egg{
  margin-top:2.6rem;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
}
.easter-egg:focus-visible{outline:2px solid var(--blush-300);outline-offset:6px;border-radius:14px;}
.easter-egg img{
  width:110px;
  border-radius:14px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
  transform:rotate(-3deg);
}
.easter-egg span{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(248,243,232,.6);text-decoration:underline;text-underline-offset:4px;}

.trauzeugen{margin-top:1.6rem;font-size:.95rem;}
.trauzeugen-title{font-weight:700;color:var(--paper);}

.egg-overlay{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:1rem;
  background:rgba(36,31,26,.82);
}
.egg-overlay[hidden]{display:none;}
.egg-dialog{
  position:relative;
  width:min(92vw,480px);
  padding:1.6rem 1.2rem 1.2rem;
  border-radius:18px;
  background:var(--paper);
  color:var(--ink);
  text-align:center;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.egg-title{
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--burgundy-700);
  margin-bottom:1rem;
}
.egg-close{
  position:absolute;
  top:.4rem;
  right:.6rem;
  background:none;
  border:none;
  font-size:2rem;
  line-height:1;
  color:var(--ink);
  cursor:pointer;
  padding:.2rem .4rem;
}
.egg-slider{
  position:relative;
  width:100%;
  height:min(70vh,520px);
  overflow:hidden;
  border-radius:12px;
  background:var(--ink);
}
.egg-slider .slider-slide img{object-fit:contain;}

/* status text for forms */
.status-msg{font-size:.85rem;font-weight:700;color:var(--orange-700);min-height:1.2em;}