/* =====================================================================
   WIENINGER · Weinclub-Einladung — wgn-club.css (C3-Design)
   Vollflaechiger dunkler Block: Siegel + Icon-Vorteile + Mitglieds-Karte.
   ===================================================================== */

.wgn-club{
	position:relative; isolation:isolate; overflow:hidden;
	color:var(--wgn-paper);
	background:var(--wgn-dark);
	padding-block:clamp(5rem,10vw,9rem);
}
.wgn-club--bordeaux{ background:var(--wgn-bordeaux); }
.wgn-club--olive{ background:var(--wgn-ink); }

/* optionales Hintergrundbild + Overlay */
.wgn-club__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.wgn-club--has-bg::after{
	content:""; position:absolute; inset:0; z-index:-1;
	background:linear-gradient(120deg, rgba(58,24,18,.96), rgba(58,24,18,.84));
}

.wgn-club__wrap{
	width:100%; max-width:var(--wgn-shell); margin-inline:auto; padding-inline:var(--wgn-pad-x);
	display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,6rem); align-items:center;
}

/* ---- Body ---- */
.wgn-club__seal{ width:84px; height:84px; color:var(--wgn-gold); margin-bottom:1.4rem; }
.wgn-club__kicker{
	font-family:var(--wgn-sans); font-size:.72rem; font-weight:600;
	letter-spacing:.22em; text-transform:uppercase; color:var(--wgn-gold); margin:0 0 .5rem;
}
.wgn-club__title{
	font-family:var(--wgn-serif); font-weight:500; color:#fff;
	font-size:clamp(2.4rem,5.5vw,4.2rem); line-height:1; margin:0;
}
.wgn-club__intro{
	color:rgba(240,236,232,.84); margin:1.3rem 0 2rem; max-width:46ch; font-size:1.08rem;
}

.wgn-club__benefits{ list-style:none; margin:0 0 2.2rem; padding:0; display:grid; gap:0; }
.wgn-club__benefits li{
	display:flex; gap:1.1rem; align-items:flex-start;
	padding:1.15rem 0; border-top:1px solid rgba(240,236,232,.18);
}
.wgn-club__benefits li:last-child{ border-bottom:1px solid rgba(240,236,232,.18); }
.wgn-club__ic{
	flex:0 0 auto; width:38px; height:38px; border:1px solid rgba(169,152,99,.55);
	border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--wgn-gold);
}
.wgn-club__ic svg{ width:19px; height:19px; }
.wgn-club__benefits h3{ color:#fff; font-family:var(--wgn-sans); font-size:1.08rem; font-weight:600; margin:0; }
.wgn-club__benefits p{ color:rgba(240,236,232,.7); font-size:.92rem; margin:.15rem 0 0; }

.wgn-club__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---- Mitglieds-Karte ---- */
.wgn-club__cardwrap{ display:flex; justify-content:center; }
.wgn-club__card{
	position:relative; width:100%; max-width:440px; aspect-ratio:1.585; border-radius:14px;
	padding:1.8rem; color:#fff; overflow:hidden;
	background:linear-gradient(135deg,#6a3228,#3a1814);
	border:1px solid rgba(169,152,99,.5); box-shadow:0 30px 70px rgba(0,0,0,.45);
	display:flex; flex-direction:column; justify-content:space-between;
	transform:rotate(-3deg); transition:transform .5s var(--wgn-ease);
}
.wgn-club__card:hover{ transform:rotate(-1deg) translateY(-6px); }
.wgn-club__card::before{
	content:""; position:absolute; right:-30%; top:-40%; width:80%; height:160%;
	background:radial-gradient(circle, rgba(169,152,99,.22), transparent 70%);
}
.wgn-club__card-top{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; }
/* doppelte Klasse: Elementor-Kit `img{height:auto;max-width:100%}` wuerde das
   Logo sonst auf volle Groesse aufblasen (Karte laeuft ueber, Name abgeschnitten) */
.wgn-club__card .wgn-club__card-logo{ height:42px !important; width:auto !important; max-width:60%; }
.wgn-club__card-brand{ font-family:var(--wgn-serif); font-size:1.5rem; font-weight:600; }
.wgn-club__card-label{ position:relative; font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--wgn-gold); }
.wgn-club__card-name{ position:relative; font-family:var(--wgn-serif); font-size:1.7rem; }
.wgn-club__card-row{ position:relative; display:flex; justify-content:space-between; font-size:.78rem; letter-spacing:.05em; color:rgba(240,236,232,.82); font-variant-numeric:tabular-nums; }

/* ---- Responsive ---- */
@media (max-width:900px){
	.wgn-club__wrap{ grid-template-columns:1fr; }
	.wgn-club__card{ max-width:430px; margin-inline:auto; }
}
@media (prefers-reduced-motion:reduce){
	.wgn-club__card{ transition:none; }
}