/* ============================================================================
   Sommerfest 2026 – Einladungskarte auf /sommerfest/
   Das Poster ist ein festes 1080×1350-Motiv (Original-Einladungskarte). Es bleibt
   intern pixelgenau und wird als Ganzes proportional skaliert (Container-Query-
   Einheiten), damit die Komposition + die per JS gezeichnete Botanik erhalten
   bleiben. ALLE Poster-Regeln sind unter .sf-scope ge-prefixt, weil die Karte
   globale Selektoren (*, html/body, h1, .card …) mitbringt, die sonst die ganze
   Website überschreiben würden.
   ========================================================================== */

/* ---- Seiten-Intro ---- */
.sf-intro { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.sf-intro p { color: #4a5f49; line-height: 1.6; }

/* ---- Responsive Bühne: Poster skaliert proportional zur Container-Breite ---- */
.sf-stage {
  width: min(100%, 800px); margin: 0 auto;
  /* Schatten hier (nicht auf .sf-frame): dort würde overflow:hidden ihn wegclippen. */
  border-radius: 12px; box-shadow: 0 18px 50px rgba(8, 37, 26, .28);
}
.sf-frame {
  position: relative; width: 100%; aspect-ratio: 1080 / 1350;
  background: #08251a; border-radius: 12px; overflow: hidden;
}

/* ---- Poster-interne Styles (Original der Einladungskarte, ge-scoped) ---- */
.sf-scope {
  --green: #103d2d; --greenDk: #0b2f22; --ink: #123c2d;
  --paper: #f6efe0; --paper2: #efe6d0; --gold: #b98f39; --sage: #5f7d63;
}
.sf-scope * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

.sf-scope #poster {
  position: absolute; top: 0; left: 0;
  width: 1080px; height: 1350px; overflow: hidden;
  /* Den Skalierungsfaktor setzt JS (poster.style.transform = scale(breite/1080)) –
     zuverlässiger als eine reine CSS-Container-Query-Division, die nicht in allen
     Browsern (u.a. Firefox) unterstützt wird. */
  transform-origin: top left;
  background: radial-gradient(140% 100% at 50% -10%, #16543c 0%, #103d2d 46%, #0b2f22 100%);
  font-family: "Avenir Next", "Avenir", sans-serif; color: #123c2d;
  /* Original-Zeilenhöhe wiederherstellen: die Website setzt body.home{line-height:1.65}
     (home.css), dessen berechneter Wert sonst ins Poster vererbt und den Kartensatz
     verschiebt (Fußzeile stößt an den Goldrahmen). 'normal' = Standalone-Karte. */
  line-height: normal;
}
.sf-scope .grain {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.sf-scope .bg { position: absolute; inset: 0; z-index: 1; opacity: .5; }
.sf-scope .bg path { fill: none; stroke: #cba955; stroke-width: 1; }

.sf-scope .card {
  position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, #f8f2e4, #efe6d0);
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 92px 90px 80px;
}
.sf-scope .card::after {
  content: ""; position: absolute; inset: 34px; border: 1.5px solid rgba(185, 143, 57, .55); pointer-events: none;
}

.sf-scope .kick { font-family: "Copperplate", "Avenir Next"; letter-spacing: .36em; font-size: 22px; color: var(--gold); text-transform: uppercase; }
.sf-scope .verein { margin-top: 12px; font-family: "Avenir Next"; font-weight: 500; letter-spacing: .09em; font-size: 19.8px; color: var(--sage); text-transform: uppercase; }

.sf-scope .orn { margin: 18px 0 4px; display: flex; align-items: center; gap: 14px; color: var(--gold); }
.sf-scope .orn .ln { width: 64px; height: 1px; background: var(--gold); opacity: .7; }
.sf-scope .orn .di { font-family: "Didot", serif; font-size: 25.1px; }

.sf-scope .jubi { font-family: "Didot", "Hoefler Text", serif; font-size: 118px; line-height: .86; color: var(--green); }
.sf-scope .jubi small { display: block; font-family: "Copperplate"; letter-spacing: .3em; font-size: 20.5px; color: var(--gold); margin-top: 2px; text-transform: uppercase; }

.sf-scope h1 { font-family: "Didot", "Hoefler Text", serif; font-weight: 400; font-size: 96px; line-height: .98; margin-top: 16px; color: var(--green); }
.sf-scope h1 em { font-style: italic; color: var(--gold); }
.sf-scope .year { font-family: "Didot", serif; font-weight: 600; font-size: 35.3px; color: var(--sage); letter-spacing: .48em; margin: 10px 0 0 .5em; }

.sf-scope .when { margin-top: 22px; }
.sf-scope .when .day { font-family: "Avenir Next"; font-weight: 700; font-size: 31.4px; color: var(--green); letter-spacing: .02em; }
.sf-scope .when .sub { font-size: 24.2px; color: var(--sage); margin-top: 6px; font-weight: 600; }

.sf-scope .prog { margin-top: 24px; width: 100%; display: flex; flex-direction: column; }
.sf-scope .p { display: grid; grid-template-columns: 104px 1fr; align-items: baseline; gap: 20px; padding: 12px 2px; text-align: left; border-top: 1px solid rgba(185, 143, 57, .32); }
.sf-scope .p:last-child { border-bottom: 1px solid rgba(185, 143, 57, .32); }
.sf-scope .p .h { font-family: "Didot", serif; font-size: 35.3px; color: var(--gold); text-align: right; }
.sf-scope .p .b b { font-family: "Avenir Next"; font-weight: 700; font-size: 24.4px; color: var(--green); display: block; }
.sf-scope .p .b span { font-size: 22px; color: var(--sage); font-weight: 600; }

.sf-scope .foot { margin-top: auto; padding-top: 20px; width: 100%; text-align: center; }
.sf-scope .foot .help { font-family: "Avenir Next"; font-weight: 500; font-size: 22px; color: #4a5f49; line-height: 1.7; max-width: none; margin: 0 auto; }
.sf-scope .foot .help b { color: var(--green); font-weight: 700; }
.sf-scope .foot .contact { margin-top: 12px; font-family: "Avenir Next"; font-weight: 700; font-size: 23.4px; color: var(--green); }
.sf-scope .foot .contact .g { color: var(--gold); }
.sf-scope .foot .org { margin-top: 14px; font-family: "Copperplate"; letter-spacing: .26em; font-size: 17.6px; color: var(--sage); text-transform: uppercase; }