/* Zweite lokale Gestaltung: Licht, Vereinsfarben und Typografie nach dem Flyer. */
:root {
  --paper: #fffefa;
  --green: #18722c;
  --green-deep: #145526;
  --green-bright: #2ca831;
  --orange: #f36b17;
  --ink: #243527;
  --muted: #5f7163;
  --line: #e1e9d9;
  --display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
}
body { background: var(--paper); }
.preview-bar { background: #f0f6e9; border-color: #dfead6; }
.page {
  background: radial-gradient(ellipse 700px 360px at 90% 12%, #fff2c64d, transparent 76%),
    radial-gradient(ellipse 500px 480px at 0% 28%, #e3f3d84a, transparent 72%), var(--paper);
}
.site-header { height: 136px; border-color: #e3ecda; }
.ems-brand { width: 212px; border-radius: 0; height: auto; }
.partnership-label { color: var(--green); font-size: 10px; letter-spacing: .02em; }
.partnership-label span { background: #b0ce9e; }
.hero { padding-top: 53px; padding-bottom: 64px; gap: 45px; min-height: 640px; }
.hero .eyebrow { font-size: 10px; letter-spacing: .10em; }
h1 {
  font-family: var(--display); font-size: clamp(45px, 4.4vw, 62px); font-weight: 800;
  font-style: italic; font-stretch: condensed; text-transform: uppercase;
  line-height: 1.01; letter-spacing: -.035em; color: var(--green-deep);
}
h1 span { display: inline-block; margin-top: 7px; color: var(--orange); }
.hero-lead { font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.3; color: var(--green); margin-top: 24px; }
.hero-description { font-size: 14px; line-height: 1.75; max-width: 420px; }
.primary-cta { border-radius: 30px; padding: 18px 23px; box-shadow: 0 7px 17px #e8671924; font-size: 13px; }
.cta-note { font-size: 10px; }
.contact-link { font-size: 11px; }
.hero-art { min-height: 490px; }
.hero-art::before {
  content: ""; position: absolute; width: 500px; height: 490px; left: 50%; top: 50%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse at 45% 25%, #fff2b27d, #e6f5d95c 55%, transparent 73%);
}
.orbital { border-color: #c9e2b6; opacity: .5; }
.voucher { width: 352px; transform: rotate(-4deg); border: 1px solid #e1e8d7; border-radius: 16px; box-shadow: 0 22px 48px #496f2c13, 0 4px 9px #496f2c09; }
.voucher-top { background: linear-gradient(110deg, #176522, #318f29); border-radius: 15px 15px 0 0; padding-block: 16px; }
.voucher-main { padding: 24px 28px 20px; }
.voucher-label { font-size: 9px; letter-spacing: .14em; }
.voucher-title { font: 400 79px/1.05 "SignPainter", "Brush Script MT", cursive; color: #f26718; margin: 10px 0 0; letter-spacing: -.025em; }
.voucher-subtitle { font: italic 700 22px/1.1 var(--display); color: var(--green-deep); margin: 0 0 23px; }
.value-amount { font-family: var(--display); font-style: italic; font-size: 72px; font-weight: 800; color: var(--green); }
.value-amount>span { font-weight: 700; }
.value-caption { font-size: 10px; }
.voucher-rule { margin-top: 19px; }
.zero { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 64px; }
.voucher-bottom strong { color: var(--green); }
.voucher-foot { background: #edf7e5; border-radius: 0 0 15px 15px; }
.club-seal { right: -27px; bottom: 5px; transform: rotate(5deg); }
.club-seal img { width: 87px; height: 87px; box-shadow: 0 4px 14px #385f1a16; }
.club-seal>span { font-size: 11px; }
.club-seal strong { font: italic 700 21px/1.2 var(--display); }
.art-caption { letter-spacing: .02em; }
.support-strip { background: linear-gradient(100deg, #edf8e3, #f7faee 55%, #fff6df); border-color: #deebd0; }
.support-mark { color: var(--orange); }
.support-club strong { font: italic 700 24px/1.2 var(--display); }
h2 { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 33px; }

/* Authentische, perspektivische Tischfläche mit weißer Markierung und Netz. */
.intro { isolation: isolate; }
.curtain { z-index: 0; background: #f6f9ef; }
.table-scene {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 30% 10%, #fffde8 0, #f7f9ef 37%, #edf3e6 100%);
  opacity: 1; transition: opacity .7s, transform .8s cubic-bezier(.22,1,.36,1);
}
.hall-light { position: absolute; inset: 0; background: linear-gradient(108deg, transparent 15%, #ffffff80 28%, transparent 38%, #ffffff70 67%, transparent 79%); }
.table-floor { position: absolute; width: 94%; height: 38%; left: 3%; top: 57%; background: radial-gradient(ellipse, #243d2b35, transparent 65%); filter: blur(18px); }
.table-perspective {
  width: min(1060px, 92vw); height: min(590px, 59vw);
  position: absolute; left: 50%; top: 64%;
  transform: translate(-50%, -50%) perspective(1400px) rotateX(52deg) rotateZ(-5deg);
  transform-style: preserve-3d;
}
.table-surface {
  position: absolute; inset: 0; background: linear-gradient(132deg, #287f53, #216d47 45%, #165437);
  border: 7px solid #f4faf1; border-radius: 3px; box-shadow: 0 11px 0 #143d2b, 0 22px 0 #193e2d, 0 42px 45px #213d2940;
  transform-style: preserve-3d;
}
.table-surface::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(20deg, #ffffff05 0 1px, transparent 1px 3px); opacity: .3; }
.court-center { position: absolute; top: 0; bottom: 0; left: calc(50% - 2px); width: 4px; background: #ecf5e8; }
.court-midline { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #f0f6eb99; }
.table-net {
  position: absolute; left: -2%; width: 104%; height: 74px; bottom: 50%;
  transform: rotateX(-75deg); transform-origin: bottom; transform-style: preserve-3d;
  border-top: 5px solid #fcfdf8; border-bottom: 2px solid #e4ece1;
  background-color: #172b2580;
  background-image: repeating-linear-gradient(90deg, #eef5eb99 0 1px, transparent 1px 7px), repeating-linear-gradient(0deg, #eef5eb99 0 1px, transparent 1px 7px);
}
.net-post { position: absolute; width: 7px; height: 106%; top: -3px; background: linear-gradient(90deg, #15392a, #73927d, #193e2e); border-radius: 2px; }
.net-post-left { left: -3px; }.net-post-right { right: -3px; }
.intro-heading { z-index: 3; top: 11%; font: italic 700 16px/1.2 var(--display); letter-spacing: .08em; color: var(--green-deep); }
.small-line { background: #8ca87a; }
.brand-ball { z-index: 5; top: 39%; width: 280px; }
.intro.is-sphere .brand-ball img { transform: perspective(380px) rotateY(-7deg) scale(.86); }
.sphere-shading { background: radial-gradient(circle at 33% 25%, transparent 21%, #49644004 43%, #34462b20 73%, #26351c5e 100%); box-shadow: inset -10px -10px 20px #2d432d0d, inset 5px 5px 11px white; }
.sphere-highlight { background: radial-gradient(ellipse at 32% 20%, #ffffffd9, #ffffff30 16%, transparent 35%); }
.ball-shadow { z-index: 4; filter: blur(3px); width: 150px; height: 17px; background: radial-gradient(ellipse, #051f125e, transparent 72%); }
.intro-caption { display: none; }
.intro-caption span { font-family: Arial,sans-serif; font-size: 10px; }
.skip { z-index: 6; color: var(--green-deep); background: #ffffffa6; border-radius: 20px; bottom: 28px; padding: 10px 16px; }
.intro.opening .table-scene { opacity: 0; transform: translateY(35px) scale(1.04); }
.intro.departing .intro-caption { opacity: .5; }
.intro.opening .intro-caption { opacity: 0; }

@media(min-width:1600px) { .hero { min-height: 690px; padding-block: 80px; } }
@media(max-width:1050px) {
  .hero { gap: 18px; }.hero h1 { font-size: 47px; }.hero-art { min-height: 480px; }
  .voucher { width: 310px; }.voucher-title { font-size: 71px; }.voucher-subtitle { font-size: 20px; }
  .club-seal { right: -10px; bottom: 0; }.club-seal img { width: 77px; height: 77px; }
}
@media(max-width:720px) {
  .site-header { height: 104px; }.ems-brand { width: 144px; }.club-brand img { width: 60px; height: 60px; }
  .club-brand-text { font-size: 10px; }.club-brand-text span { font-size: 8px; max-width: 92px; }
  .hero { padding-block: 32px 43px; gap: 31px; min-height: 0; }
  .hero h1 { font-size: clamp(25px, 8.1vw, 46px); letter-spacing: -.04em; line-height: 1.08; }
  .hero h1 span { white-space: nowrap; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .07em; margin-bottom: 17px; }
  .hero-lead { font-size: 21px; line-height: 1.18; margin-top: 21px; }
  .hero-description { font-size: 13px; margin-top: 13px; }.primary-cta { font-size: 12px; padding: 17px 19px; }
  .cta-note { font-size: 9px; }.contact-link { font-size: 10px; }
  .hero-art { min-height: 465px; padding-inline: 24px; max-width: 420px; }
  .voucher { width: min(310px,100%); }.voucher-main { padding-inline: 24px; }
  .voucher-title { font-size: 73px; }.voucher-subtitle { font-size: 20px; }
  .value-amount { font-size: 68px; }.club-seal { right: -4px; bottom: 3px; }
  .club-seal img { width: 73px; height: 73px; }.club-seal strong { font-size: 17px; }
  .art-caption { font-size: 8px; bottom: -15px; }
  .hero-art::before { width: 420px; }.support-inner>p { font-size: 11px; }
  .next-section h2 { font-size: 28px; }
  .brand-ball { width: 238px; top: 39%; }.intro-caption { top: 20%; font-size: 16px; }
  .intro-heading { top: 13%; font-size: 13px; letter-spacing: .04em; }
  .table-perspective { top: 67%; width: 126vw; height: 95vw; transform: translate(-50%,-50%) perspective(1100px) rotateX(48deg) rotateZ(-7deg); }
  .table-surface { border-width: 5px; }.table-net { height: 47px; border-top-width: 3px; }
  .skip { bottom: 20px; right: 16px; font-size: 10px; }
}
@media(max-width:370px) { .hero h1 { font-size: 8.1vw; }.ems-brand { width: 132px; } }