@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/poppins-200.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
}

:root{
  --green:#0F3319;
  --green-deep:#0a2411;
  --pearl:#C6B89A;
  --white:#FFFFFF;
  --gold:#C9A96E;
  --gold-bright:#d8bd86;
  --black:#1A1A1A;
  --gold-grad:linear-gradient(135deg,#d8bd86 0%,#C9A96E 45%,#b4914f 100%);
  --font:"Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
html{ background:var(--green-deep); }
body{
  font-family:var(--font); font-weight:300;
  color:var(--white);
  background:var(--green-deep);
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center;
  position:relative; overflow-x:hidden;
}
::selection{ background:var(--gold); color:var(--green); }

/* ---- Hintergrund: Grün + tropische Blätter (multiply) ---- */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--green); }
.bg__leaves{
  position:absolute; inset:0;
  background-image:url("assets/tropische-blaetter.jpg");
  background-size:34rem;
  background-position:center;
  background-repeat:repeat;
  mix-blend-mode:multiply;
  opacity:.55;
}
/* Vignette für Tiefe & Lesbarkeit */
.bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 50% 38%, rgba(10,36,17,0) 30%, rgba(8,28,15,.72) 100%),
    linear-gradient(180deg, rgba(8,28,15,.4), rgba(8,28,15,0) 22%, rgba(8,28,15,0) 72%, rgba(8,28,15,.55));
}

/* ---- Karte ---- */
.card{
  position:relative; z-index:2;
  width:100%; max-width:960px;
  text-align:center;
  padding:18px 20px;
  opacity:1;
  margin-top:auto;
}
@media (prefers-reduced-motion:no-preference){
  .card{ animation:rise 1s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes rise{ from{ transform:translateY(20px); } to{ transform:none; } }

/* feiner Goldrahmen */
.frame{
  position:relative;
  border:1px solid rgba(201,169,110,.42);
  border-radius:4px;
  padding:clamp(34px,6vw,64px) clamp(24px,5vw,60px);
  background:linear-gradient(180deg, rgba(15,51,25,.42), rgba(10,36,17,.34));
  backdrop-filter:blur(2px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}
.frame::before{
  content:""; position:absolute; inset:9px;
  border:1px solid rgba(201,169,110,.18); border-radius:2px; pointer-events:none;
}

.logo{ width:clamp(280px,46vw,400px); height:auto; margin:0 auto 30px; display:block; }

.eyebrow{
  display:inline-flex; align-items:center; gap:13px;
  font-size:12.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:22px;
}
.eyebrow::before,.eyebrow::after{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; }

h1{
  font-weight:200; line-height:1.12; letter-spacing:-.01em;
  font-size:clamp(2rem,5vw,3.1rem); margin:0;
  text-wrap:balance;
}
h1 em{ font-style:normal; color:var(--gold-bright); }

.lead{
  font-weight:300; line-height:1.7;
  color:rgba(255,255,255,.84);
  font-size:clamp(1rem,1.7vw,1.16rem);
  max-width:90%; margin:22px auto 0;
  text-wrap:pretty;
}

/* ---- Eröffnungs-Plakette ---- */
.opening{
  display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  margin:34px auto 6px;
  padding:18px 34px;
  border-radius:3px;
  background:var(--gold-grad);
  color:var(--green);
  box-shadow:0 22px 50px -26px rgba(201,169,110,.8);
}
.opening .label{ font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; opacity:.8; }
.opening .date{ font-size:clamp(1.2rem,2.6vw,1.55rem); font-weight:600; letter-spacing:.01em; }

.divider{ width:60px; height:2px; background:var(--gold-grad); border:0; margin:34px auto 0; opacity:.8; }

/* ---- Einladungs-Text ---- */
.invite{
  font-weight:300; line-height:1.7;
  color:rgba(255,255,255,.84);
  font-size:clamp(.98rem,1.5vw,1.08rem);
  max-width:90%; margin:26px auto 0;
  text-wrap:pretty;
}
.invite a{ color:var(--gold-bright); text-decoration:none; font-weight:500; border-bottom:1px solid rgba(201,169,110,.45); transition:border-color .25s ease; }
.invite a:hover{ border-color:var(--gold-bright); }

/* ---- Kontakt-Fußzeile ---- */
.meta{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; margin-top:26px;
  font-size:14px; font-weight:300; color:rgba(255,255,255,.78);
}
.meta > *{ justify-content:center; }
.meta .sep{ display:none; }
.meta__address{
  font-size:16px; font-weight:400; color:#fff; letter-spacing:.01em;
}
.meta__address svg{ color:var(--gold-bright); }
.meta a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:9px; transition:color .25s ease; }
.meta a:hover{ color:var(--gold-bright); }
.meta svg{ width:16px; height:16px; color:var(--gold-bright); flex:0 0 auto; }

/* ---- Praxis-Signatur unten ---- */
.signature{
  position:relative; z-index:2;
  margin-top:24px; margin-bottom:auto;
  text-align:center; font-size:12px; letter-spacing:.05em;
  color:rgba(255,255,255,.5);
}
.signature a{ color:rgba(255,255,255,.7); text-decoration:none; transition:color .25s ease; }
.signature a:hover{ color:var(--gold-bright); }