:root {
  --red: #a6003b;
  --paper: #e9e8e8;
  --ink: #2a2a2a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--red);
  font-family: "Gochi Hand", cursive;
  overflow-x: hidden;
}
a { color: var(--red); }

/* Hero */
.hero { position: relative; max-width: 900px; margin: 0 auto; padding: 8vw 16px 2vw; }
.sketch { position: absolute; background: var(--red); border-radius: 2px; opacity: .85; }
.sketch-h { top: 4vw; left: 3%; width: 45%; height: 2px; transform: rotate(.4deg); }
.sketch-v { top: 1vw; left: 6%; width: 2px; height: 70%; transform: rotate(.6deg); }
h1 { margin: 0; text-align: center; font-weight: normal; line-height: .9; transform: rotate(-4deg); }
.wir { font-family: "Caveat Brush", cursive; font-size: clamp(5rem, 18vw, 11rem); }
.heiraten { font-family: "Caveat Brush", cursive; font-size: clamp(2.6rem, 9vw, 5.5rem); position: relative; top: .5em; }

/* Film strip */
.strip-wrap { margin: 6vw -10vw 4vw; }
.strip {
  display: flex; gap: 2%;
  background: #111; padding: 2.6% 4%;
  transform: rotate(-8.7deg);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.frame { position: relative; overflow: hidden; flex: 1; background: #222; }
.frame img { position: absolute; height: auto; max-width: none; }
.label {
  position: absolute; top: -1.6em; left: 10%; z-index: 1;
  font: 600 clamp(.5rem, 1.2vw, .8rem)/1 Arial, sans-serif; color: #d9a35c; letter-spacing: .08em;
}
.frame { overflow: visible; }
.frame::after { content: ""; position: absolute; inset: 0; }
.frame-familie, .frame-paar { overflow: hidden; }
.frame-familie { aspect-ratio: 560 / 420; }
.frame-familie img { width: 221.4%; left: -5.36%; top: -139.3%; transform-origin: 25% 45.3%; transform: rotate(8.7deg); }
.frame-paar { aspect-ratio: 620 / 430; }
.frame-paar img { width: 200%; left: -101.6%; top: -112.8%; transform-origin: 75.8% 39.9%; transform: rotate(8.7deg); }

/* Details */
main { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.details { text-align: center; padding: 4vw 0 2rem; }
.details p { margin: .4em 0; }
.ort { text-transform: uppercase; letter-spacing: .12em; font-size: clamp(1.4rem, 4vw, 2.2rem); }
.datum { font-family: "Caveat Brush", cursive; font-size: clamp(2rem, 7vw, 3.8rem); transform: rotate(-3deg); }
.zeit { font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: .1em; }
.namen { font-family: "Mrs Saint Delafield", cursive; font-size: clamp(3.5rem, 12vw, 6.5rem); margin-top: .2em !important; }
.underline { display: block; width: 50%; height: 3px; margin: -1rem auto 0; background: var(--red); border-radius: 3px; transform: rotate(-1.5deg); }

.card {
  background: #f6f5f4; color: var(--ink);
  margin: 2rem 0; padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--red);
  font-size: 1.35rem; line-height: 1.4;
}
.card:nth-of-type(odd) { transform: rotate(.6deg); }
.card:nth-of-type(even) { transform: rotate(-.6deg); }
.card h2 { margin: 0 0 .5rem; font-family: "Caveat Brush", cursive; font-weight: normal; color: var(--red); font-size: 2rem; }
.ablauf { list-style: none; padding: 0; margin: 0; }
.ablauf li { padding: .3rem 0; }
.ablauf strong { display: inline-block; min-width: 6.5rem; color: var(--red); }
.button { display: inline-block; padding: .5rem 1.2rem; background: var(--red); color: #fff; text-decoration: none; border-radius: 4px; }
.button:hover { filter: brightness(1.15); }

footer { text-align: center; padding: 2rem 16px 3rem; font-size: 1.2rem; }