/* =========================================================
   Stilvolle Hochzeitswebsite – style.css
   Farbwelt: Beige, Elfenbein, Taupe, zartes Gold
   Typo: Elegante Hochzeits-Schriftarten
   ========================================================= */
/* Font einbinden */
@font-face {
  font-family: "Malibu Ring";
  src: url("fonts/malibu-ring.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


/* -------------------------
   Root-Variablen
------------------------- */
:root{
  /* Farben */
  --beige-900:#394b47;   /* dunkle Akzente */
  --beige-700:#394b47;   /* mittlere Akzente */
  --beige-500:#f4eee7;   /* Hauptakzent */
  --beige-200:#f4eee7;   /* helles Beige */
  --beige-100:#f4eee7;   /* sehr helles Beige */
  --cream:#ffffff;        /* Hintergrund weiß */
  --paper:#ffffff;        /* Karten/Flächen */
  --ivory:#ffffff;        /* Elfenbein ersetzt */
  --taupe:#f4eee7;        /* Taupe ersetzt */
  --ink:#394b47;          /* Primärtext (dunkle Akzente) */
  --muted:#8b7d6b;        /* Sekundärtext bleibt */
  --gold:#394b47;         /* Gold bleibt */
  --shadow:0 10px 25px rgba(57,75,71,.08);

  /* Typografie */
  --font-display: "Malibu Ring", "Playfair Display", serif; /* dekorative Überschriften */
  --font-script: "Malibu Ring", cursive;                     /* Schreibschrift */
  --font-serif: "Lora", "Montserrat", "Crimson Text", Georgia, serif;
  --font-sans: "Lora", "Montserrat", "Quicksand", "Segoe UI", system-ui, -apple-system, Georgia, sans-serif;

  /* Rhythmus & Radius */
  --space-1: .4rem;
  --space-2: .8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --radius-xl: 1.4rem;
  --radius-lg: 1rem;
  --radius-sm: .5rem;
}

/* -------------------------
   Basis
------------------------- */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background-image: url("images/Hintergrund.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: scroll; /* default */
}




.couple-names h2 {
    font-family: 'Malibu Ring', cursive;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--beige-700);text-decoration:none}
a:hover{opacity:.8;color:var(--beige-900)}
hr{
  border:0;height:1px;
  background:linear-gradient(to right, transparent, rgba(166,139,91,.25), transparent);
  margin:var(--space-6) auto;
}

/* -------------------------
   Layout-Helfer
------------------------- */
.container{
  width:min(1120px, 92%);
  margin-inline:auto;
}
.section{
  padding: var(--space-7) 0;
}
.grid{
  display:grid;
  gap: var(--space-5);
}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 900px){
  .grid--2,.grid--3{grid-template-columns:1fr}
}

/* -------------------------
   Navigation
------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(244,238,231,.85);
  border-bottom:1px solid rgba(166,139,91,.12);
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4); padding: .9rem 0;
}
.brand{
  font-family:var(--font-display);
  font-size:1.35rem; letter-spacing:.02em; color:var(--beige-700);
}
.nav__links{display:flex;gap:var(--space-4);align-items:center}
.nav__links a{font-weight:500;color:var(--ink)}
.nav__links a.is-cta{
  padding:.6rem 1rem;border-radius:999px;border:1px solid rgba(166,139,91,.25);
  background:linear-gradient(180deg,#fff, var(--beige-100));
}
.nav__links a.is-cta:hover{box-shadow:var(--shadow)}

/* -------------------------
   Hero
------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(196,167,125,.1), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(201,169,97,.08), transparent 60%),
    var(--cream);
}
.hero__inner{padding: clamp(5rem, 8vw, 9rem) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6ch;
  font-size:.9rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;
}
.eyebrow::before,.eyebrow::after{
  content:"";display:inline-block;width:28px;height:1px;background:rgba(166,139,91,.25);
}
.hero__title{
  font-family:var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height:1.15; margin:.6rem 0 1rem;
  color:var(--beige-900);
}
.hero__subtitle{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color:var(--muted); max-width:58ch;
}
.hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}

/* -------------------------
   Buttons
------------------------- */
.btn{
  appearance:none; border:0; cursor:pointer;
  padding:.9rem 1.3rem; border-radius:999px; font-weight:600;
  transition:.2s transform ease, .2s box-shadow ease, .2s background ease, .2s opacity ease;
  display:inline-flex; align-items:center; gap:.6rem;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{
  color:#fff; background:var(--beige-700);
  box-shadow: 0 8px 20px rgba(166,139,91,.25);
}
.btn--outline{
  color:var(--beige-700); background:transparent;
  border:1px solid rgba(166,139,91,.35)
}
.btn--ghost{
  background:transparent; color:var(--ink); opacity:.8
}
.badge{
  display:inline-block;padding:.25rem .6rem;border-radius:999px;
  font-size:.82rem;background:var(--beige-200);color:var(--beige-700)
}

/* -------------------------
   Karten & Flächen
------------------------- */
.card{
  background:var(--paper); border-radius:var(--radius-xl);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 3vw, 2rem);
  border:1px solid rgba(166,139,91,.12);
}
.card--soft{
  background:linear-gradient(180deg,#fff, var(--beige-100));
}

/* -------------------------
   Typografie
------------------------- */
.h1,.h2,.h3{font-family:var(--font-display); color:var(--beige-900)}
.h1{font-size:clamp(2rem, 5vw, 3rem); line-height:1.15}
.h2{font-size:clamp(1.6rem, 3.6vw, 2.2rem)}
.h3{font-size:clamp(1.25rem, 2.2vw, 1.5rem)}
.lead{font-size:1.15rem;color:var(--muted);max-width:70ch}
.small{font-size:.92rem;color:var(--muted)}

/* Zitat/Verse (z. B. Trauspruch) */
.quote{
  font-family:var(--font-script);
  font-size:clamp(1.2rem,2.8vw,1.6rem);
  color:var(--beige-700);
  border-left:4px solid rgba(166,139,91,.25);
  padding-left:var(--space-4);
  margin: var(--space-6) 0;
}

/* -------------------------
   Ornament-Trenner (zartes Gold)
------------------------- */
.divider{
  display:grid; place-items:center; margin: var(--space-6) 0;
}


/* -------------------------
   Zeitplan / Timeline
------------------------- */
.timeline{position:relative;margin-left:1.4rem}
.timeline::before{
  content:""; position:absolute; left:0; top:.2rem; bottom:.2rem; width:2px;
  background:var(--beige-200);
  border-radius:2px;
}
.timeline__item{position:relative; padding-left:1.6rem; margin:1.2rem 0}
.timeline__item::before{
  content:""; position:absolute; left:-.45rem; top:.35rem; width:.8rem; height:.8rem;
  background:var(--paper); border:2px solid var(--beige-700); border-radius:999px;
}
.time{font-weight:700; color:var(--beige-700)}
.where{color:var(--muted)}

/* -------------------------
   Galerie
------------------------- */
.gallery{
  display:grid; gap: .8rem;
  grid-template-columns: repeat(12, 1fr);
}
.gallery img{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.gallery .w-6{grid-column: span 6}
.gallery .w-4{grid-column: span 4}
.gallery .w-8{grid-column: span 8}
@media (max-width: 900px){
  .gallery{grid-template-columns: repeat(6, 1fr)}
  .gallery .w-6,.gallery .w-4,.gallery .w-8{grid-column: span 6}
}

/* -------------------------
   RSVP / Formular
------------------------- */
.form{
  display:grid; gap: var(--space-4);
}
label{font-weight:600; color:var(--ink)}
.input, .select, .textarea{
  width:100%;
  padding: .9rem 1rem;
  border-radius: var(--radius-sm);
  border:1px solid rgba(166,139,91,.25);
  background:#fff;
  outline: none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--beige-700);
  box-shadow: 0 0 0 4px rgba(166,139,91,.12);
}
.help{font-size:.9rem;color:var(--muted)}
.form-row{
  display:grid; gap: var(--space-4);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width: 700px){.form-row{grid-template-columns:1fr}}
.radio-group, .checkbox-group{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
}
.radio, .checkbox{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
}
.radio input, .checkbox input{accent-color: var(--beige-700)}

/* Erfolgs-/Fehlermeldungen */
.alert{
  padding:.9rem 1rem;border-radius:var(--radius-sm);font-weight:600
}
.alert--ok{background: var(--beige-100); color:var(--beige-900); border:1px solid rgba(166,139,91,.25)}
.alert--err{background: #fdecec; color:#7a2b2b; border:1px solid rgba(122,43,43,.15)}

/* -------------------------
   Tabellen (z. B. Geschenkeliste)
------------------------- */
.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid rgba(166,139,91,.12); border-radius:var(--radius-lg);
  background:var(--paper); box-shadow:var(--shadow)
}
.table th, .table td{padding: .9rem 1rem; text-align:left}
.table thead th{
  background:linear-gradient(180deg, var(--beige-100), var(--beige-200));
  color:var(--beige-900); font-weight:700
}
.table tbody tr + tr td{border-top:1px solid rgba(166,139,91,.12)}
.table tbody tr:hover{background:var(--beige-100)}

/* -------------------------
   Footer
------------------------- */
.footer{
  background: linear-gradient(180deg, rgba(166,139,91,.06), rgba(166,139,91,.12));
  border-top:1px solid rgba(166,139,91,.15);
  padding: var(--space-6) 0;
  color: var(--ink);
}
.footer a{color:var(--ink); text-decoration:underline; text-decoration-color:rgba(166,139,91,.35)}
.footer__brand{
  font-family:var(--font-display);
  color:var(--beige-700);
  font-size:1.2rem;
}

/* -------------------------
   Dekor: Monogramm / Initialen
------------------------- */
.monogram{
  width:110px; height:110px; border-radius:999px;
  display:grid; place-items:center;
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(180deg, var(--beige-700), var(--beige-500));
  color:#fff;
  font-family:var(--font-display);
  letter-spacing:.08em; font-size:1.4rem; font-weight:700;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.35);
}

/* -------------------------
   CTA-Band
------------------------- */
.cta{
  background:
    linear-gradient(180deg, rgba(166,139,91,.08), rgba(166,139,91,.16)),
    url('') center/cover no-repeat; /* optionales Hintergrundbild */
  border:1px solid rgba(166,139,91,.15);
  border-radius: var(--radius-xl);
  padding: clamp(1.6rem, 4vw, 3rem);
}

/* -------------------------
   Dunkelgrüne Sektion (invertiert)
------------------------- */
.section--beige{
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(201,169,97,.15), transparent 60%),
    linear-gradient(180deg, var(--beige-700), var(--beige-500));
  color:#fff;
}
.section--beige .h1,.section--beige .h2,.section--beige .h3{color:#fff}
.section--beige .card{background:rgba(244,238,231,.06); border-color:rgba(255,255,255,.18)}
.section--beige .btn--outline{
  color:#fff; border-color:rgba(255,255,255,.35)
}

/* -------------------------
   Kleinere Details
------------------------- */
.kicker{letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700}
.list{
  margin:0; padding-left:1.2rem;
}
.list li{margin:.4rem 0}

/* -------------------------
   Animations (sanft)
------------------------- */
.fade-in{
  opacity:0; transform:translateY(6px);
  animation:fade-in .7s ease forwards;
}
@keyframes fade-in{
  to{opacity:1; transform:none}
}

/* -------------------------
   Responsives Finetuning
------------------------- */
@media (max-width: 700px){
  .nav__links{gap:var(--space-2)}
  .hero__actions{gap:var(--space-2)}
  .section{padding: var(--space-6) 0}
}

/* -------------------------
   Kompatibilität mit bestehenden Templates
   (Mapping der alten Klassennamen auf neues Design)
------------------------- */

/* Navigation */
.navbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(244,238,231,.85);
  border-bottom:1px solid rgba(166,139,91,.08);
  padding:var(--space-2) 0;
}
.nav-container{
  width:min(1120px, 92%);
  margin-inline:auto;
  padding:0 var(--space-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.nav-brand h1{
  font-family:var(--font-display);
  font-size:1.35rem;
  letter-spacing:.02em;
  color:var(--beige-700);
  margin:0;
  font-weight:normal;
}
.nav-menu{
  display:flex;
  list-style:none;
  gap:var(--space-4);
  align-items:center;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.nav-menu a{
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  padding:.6rem 1rem;
  border-radius:999px;
  transition:.2s all ease;
}
.nav-menu a:hover{
  background:rgba(166,139,91,.08);
  color:var(--beige-700);
}
.nav-menu a.active{
  color:var(--beige-700);
  border-bottom:2px solid var(--beige-700);
  border-radius:0;
  padding-bottom:.4rem;
}

/* Main Content */
.main-content{
  flex:1;
  padding:var(--space-5) 0;
  min-height:60vh;
}
.page-container{
  width:min(1120px, 92%);
  margin-inline:auto;
  padding:0 var(--space-4);
}

/* Flash Messages */
.flash-messages{
  width:min(1120px, 92%);
  margin:var(--space-4) auto;
  padding:0 var(--space-4);
}
.flash-message{
  padding:.9rem 1rem;
  border-radius:var(--radius-sm);
  font-weight:600;
  margin-bottom:var(--space-2);
}
.flash-success{
  background:var(--beige-100);
  color:var(--beige-900);
  border:1px solid rgba(166,139,91,.25);
}
.flash-error{
  background:#fdecec;
  color:#7a2b2b;
  border:1px solid rgba(122,43,43,.15);
}

/* Willkommensseite */
.welcome-section{
  background:var(--paper);
  padding:clamp(2rem, 4vw, 3rem);
  border:1px solid rgba(166,139,91,.08);
  margin-top:var(--space-5);
}
.welcome-header{
  text-align:center;
  margin-bottom:var(--space-6);
  padding-bottom:var(--space-4);
  border-bottom:2px solid rgba(166,139,91,.15);
  position:relative;
}

.main-title{
  font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 3rem);
  line-height:1.15;
  color:var(--beige-900);
  margin-bottom:var(--space-3);
  font-weight:normal;
}
.couple-names h2{
  font-family:var(--font-script);
  font-size:clamp(1.6rem, 3.5vw, 2.2rem);
  color:var(--beige-700);
  font-weight:normal;
  font-style:normal;
  margin:0;
}
.invitation-text{
  font-size:1.05rem;
  line-height:1.8;
  color:var(--ink);
  margin-bottom:var(--space-6);
}
.invitation-text p{
  margin-bottom:var(--space-3);
}
.invitation-intro{
  font-size:1.2rem;
  color:var(--beige-900);
  font-weight:600;
  margin-bottom:var(--space-2);
}
.invitation-signature{
  margin-top:var(--space-5);
  text-align:right;
  font-style:italic;
  color:var(--muted);
}

/* Photo Gallery */
.photo-gallery{
  margin-top:var(--space-6);
  padding-top:var(--space-6);
  border-top:1px solid rgba(166,139,91,.12);
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 3.6vw, 2.2rem);
  color:var(--beige-900);
  margin-bottom:var(--space-5);
  text-align:center;
  font-weight:normal;
}
.photo-grid{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  margin-top:var(--space-4);
}
.photo-placeholder{
  background:var(--beige-200);
  border:2px rgba(166,139,91,.25);
  padding:var(--space-5) var(--space-4);
  text-align:center;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.photo-placeholder:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.photo-icon{
  font-size:3rem;
  margin-bottom:var(--space-3);
  margin-bottom: 12px;
  opacity:.6;
}
.photo-placeholder p{
  font-weight:600;
  color:var(--beige-900);
  margin-bottom:var(--space-1);
}
.photo-placeholder small{
  color:var(--muted);
  font-size:1rem;
}
.photo-placeholder img {
  display: block;
  margin-bottom: 12px; /* adjust as desired */
}


/* Ablaufplan */
.schedule-section{
  margin-top:var(--space-5);
}
.page-title{
  font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 2.8rem);
  line-height:1.15;
  color:var(--beige-900);
  text-align:center;
  margin-bottom:var(--space-4);
  font-weight:normal;
  letter-spacing:.01em;
  position:relative;
}

.page-title::before{
  left:-2rem;
}
.page-title::after{
  right:-2rem;
}
@media (max-width:768px){
  .page-title::before,
  .page-title::after{
    display:none;
  }
}

.schedule-intro{
  text-align:center;
  font-size:1.05rem;
  color:var(--muted);
  margin-bottom:var(--space-6);
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}

/* Timeline (angepasst für bestehende Struktur) */
.timeline-item {
  display: flex;
  margin-bottom: var(--space-6);
  position: relative;
  padding-left: 0;
  flex-direction: row; /* apply the "odd" style to all */
}


.timeline-time {
  flex: 0 0 auto;           /* Keep it only as wide as text */
  text-align: center;
  padding: 0;               /* Remove the box padding */
  background: none;         /* Remove the gradient background */
  color: var(--beige-700);  /* Set text color */
  border-radius: 0;         /* Remove rounded corners */
  font-size: 1.7rem;
  font-weight: 700;
  box-shadow: none;         /* Remove shadow */
  margin: 0 var(--space-4);
  position: relative;
}

.timeline-content{
  flex:1;
  background:var(--paper);
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  border-left:4px solid var(--beige-700);
}
.timeline-content h3{
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 2.2vw, 1.5rem);
  color:var(--beige-900);
  margin-bottom:var(--space-2);
  font-weight:normal;
}
.timeline-content p{
  color:var(--ink);
  line-height:1.7;
}
.schedule-note{
  margin-top:var(--space-6);
  padding:var(--space-4);
  background:var(--beige-200);
  border-radius:var(--radius-lg);
  border-left:4px solid var(--beige-700);
}


@media (max-width:768px) {

  /* Force clean mobile layout */
  .timeline {
    padding: 0;
  }

  .timeline-item {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: var(--space-4);
    padding: 0;
    width: 100%;
  }

  /* Time: much smaller, left-aligned */
  .timeline-time {
    font-size: 0.95rem;          /* significantly smaller */
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
    padding: .15rem .5rem;
    align-self: flex-start;
    background: var(--beige-200);
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Content box: guaranteed inside screen */
  .timeline-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: var(--space-3);
    border-left: none;
    border-top: 3px solid var(--beige-700);
    box-shadow: 0 3px 8px rgba(0,0,0,.07);
  }

  /* Slightly smaller text */
  .timeline-content h3 {
    font-size: 1.1rem;
  }

  .timeline-content p {
    font-size: 0.9rem;
    line-height: 1.55;
  }
}


/* Location */
.location-section{
  background:var(--paper);
  padding:clamp(2rem, 4vw, 3rem);
  border:1px solid rgba(166,139,91,.12);
  margin-top:var(--space-5);
}
.venue-info{
  margin-bottom:var(--space-7);
}
.venue-card{
  background:var(--beige-100);
  padding:var(--space-5);
  margin-bottom:var(--space-5);
  border:1px solid rgba(166,139,91,.08);
}
.venue-card h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 3.6vw, 2rem);
  color:var(--beige-900);
  margin-bottom:var(--space-4);
  font-weight:normal;
}
.venue-details h3{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 2.8vw, 1.8rem);
  color:var(--beige-700);
  margin-bottom:var(--space-3);
  font-weight:normal;
}
.venue-address{
  font-size:1.05rem;
  color:var(--ink);
  margin-bottom:var(--space-4);
  line-height:1.8;
}
.venue-description{
  color:var(--ink);
  line-height:1.8;
}
.venue-description p{
  margin-bottom:var(--space-2);
}
.map-placeholder{
  background:var(--beige-200);
  border:1px solid rgba(166,139,91,.08);
  padding:var(--space-7) var(--space-4);
  text-align:center;
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items:center;
}
.map-icon{
  font-size:3rem;
  margin-bottom:var(--space-3);
  opacity:.6;
}

.hotel-section{
  margin-top:var(--space-7);
}

.hotel-intro{
  text-align:center;
  font-size:1.05rem;
  color:var(--muted);
  margin-bottom:var(--space-5);
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}

.hotel-grid{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  margin-top:var(--space-4);
  align-items:stretch; /* ensure grid items stretch to equal height */
}

/* Card container: column flex so header/top and bottom areas behave */
.hotel-card{
  background:var(--beige-100);
  padding:var(--space-4);
  border-top:4px solid var(--beige-700);
  transition:transform .3s ease;
  border:1px solid rgba(166,139,91,.08);

  display:flex;
  flex-direction:column;
  height:100%;
}

.hotel-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(166,139,91,.12);
}

.hotel-card h3{
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 2.2vw, 1.5rem);
  color:var(--beige-900);
  margin-bottom:var(--space-3);
  font-weight:normal;
}

.hotel-link{
  display:block;
  height:100%;
  text-decoration:none;
  color:inherit;
}

/* hotel-info uses grid: top part is flexible (1fr), the rest are auto rows */
/* grid-template-rows: [top] 1fr [addr] auto [contact] auto [note] auto; */
.hotel-info{
  flex:1; /* take up remaining space in card */
  display:grid;
  grid-template-rows: auto auto auto auto;
  row-gap: var(--space-3);
}

/* group the three top paragraphs */
.hotel-details{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  min-height:0;
}

/* keep paragraph spacing consistent */
.hotel-info p{
  margin:0;            /* remove default margins to control spacing via gap */
  line-height:1.6;
}

/* address / contact / note rows are auto-sized and will appear aligned across cards */
.hotel-address{
  padding-top:var(--space-3);
  border-top:1px solid rgba(166,139,91,.12);
  font-weight:600;
}

.hotel-contact{
  font-size:.95rem;
  color:var(--muted);
}

.hotel-note{
  padding-top:var(--space-3);
  border-top:1px solid rgba(166,139,91,.12);
  font-size:.9rem;
  color:var(--muted);
  font-style:italic;
}


.transport-note{
  margin-top:var(--space-6);
  padding:var(--space-5);
  background:var(--beige-200);
  border-left:4px solid var(--beige-700);
}
.transport-note h3{
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 2.2vw, 1.5rem);
  color:var(--beige-900);
  margin-bottom:var(--space-3);
  font-weight:normal;
}
.transport-note p{
  margin-bottom:var(--space-2);
  line-height:1.8;
}

/* Sonstiges */
.sonstiges-info{
  margin-bottom:var(--space-2);
}

.sonstiges-card{
  background:var(--beige-100);
  padding:var(--space-2);
  margin-bottom:var(--space-2);
  border:1px solid rgba(166,139,91,.08);
}

/* Rückmeldungsformular */
.feedback-section{
  background:var(--paper);
  box-shadow:var(--shadow);
  padding:clamp(2rem, 4vw, 3rem);
  max-width:800px;
  margin:var(--space-5) auto;
  border:1px solid rgba(166,139,91,.08);
}
.feedback-intro{
  text-align:center;
  font-size:1.05rem;
  color:var(--ink);
  margin-bottom:var(--space-3);
  line-height:1.8;
}
.feedback-deadline{
  text-align:center;
  font-size:1.05rem;
  color:var(--beige-700);
  margin-bottom:var(--space-5);
  padding:var(--space-3);
  background:var(--beige-200);
  font-weight:600;
}
.feedback-form{
  margin-top:var(--space-5);
}
.form-group{
  margin-bottom:var(--space-5);
}
.form-group label{
  display:block;
  margin-bottom:var(--space-2);
  color:var(--beige-900);
  font-weight:600;
  font-size:1.05rem;
}
.form-input,
.form-textarea{
  width:100%;
  padding:.9rem 1rem;
  border:1px solid rgba(166,139,91,.25);
  background:#fff;
  font-size:1rem;
  font-family:var(--font-sans);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-input:focus,
.form-textarea:focus{
  border-color:var(--beige-700);
  box-shadow:0 0 0 4px rgba(166,139,91,.12);
}
.form-textarea{
  resize:vertical;
  min-height:120px;
}
.form-help{
  display:block;
  margin-top:var(--space-1);
  font-size:.9rem;
  color:var(--muted);
}
.checkbox-label{
  display:flex;
  align-items:flex-start;
  cursor:pointer;
  font-weight:normal;
  gap:.6rem;
}
.checkbox-label input[type="checkbox"]{
  margin-top:.2rem;
  cursor:pointer;
  accent-color:var(--beige-700);
}
.checkbox-label span{
  flex:1;
}
.radio-label{
  display:flex;
  align-items:center;
  cursor:pointer;
  font-weight:normal;
  padding:.5rem;
  transition:background-color .2s ease;
  gap:.6rem;
}
.radio-label:hover{
  background:rgba(166,139,91,.04);
}
.radio-label input[type="radio"]{
  cursor:pointer;
  accent-color:var(--beige-700);
}
.radio-label span{
  flex:1;
}
.food-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-top: var(--space-2);
}

.food-item label {
    font-weight: 600;
    margin-bottom: 0.3rem;
    display: block;
}
.form-actions{
  display:flex;
  gap:var(--space-3);
  margin-top:var(--space-5);
  flex-wrap:wrap;
}
.btn-submit{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:.9rem 1.3rem;
  font-weight:600;
  color:#fff;
  background:var(--beige-700);
  box-shadow:0 8px 20px rgba(166,139,91,.25);
  transition:.2s transform ease, .2s box-shadow ease;
  flex:1;
  min-width:150px;
  font-family:var(--font-sans);
}
.btn-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(166,139,91,.3);
}
.btn-reset{
  appearance:none;
  border:1px solid rgba(166,139,91,.35);
  cursor:pointer;
  padding:.9rem 1.3rem;
  font-weight:600;
  color:var(--beige-700);
  background:transparent;
  transition:.2s transform ease, .2s background ease;
  flex:1;
  min-width:150px;
  font-family:var(--font-sans);
}
.btn-reset:hover{
  background:rgba(166,139,91,.04);
  transform:translateY(-1px);
}
.feedback-note{
  margin-top:var(--space-5);
  padding:var(--space-4);
  background:var(--beige-200);
  border-left:4px solid var(--beige-700);
  font-size:.95rem;
  color:var(--ink);
}

/* Footer */
.footer{
  background:linear-gradient(180deg, rgba(166,139,91,.06), rgba(166,139,91,.12));
  border-top:1px solid rgba(166,139,91,.12);
  padding:var(--space-6) 0;
  color:var(--ink);
  text-align:center;
  margin-top:var(--space-7);
}
.footer p{
  margin:0;
  font-size:.95rem;
}

/* Responsive Anpassungen */
@media (max-width:768px){
  .nav-container{
    flex-direction:column;
    gap:var(--space-2);
  }
  .nav-menu{
    gap:var(--space-2);
    justify-content:center;
  }
  .main-title{
    font-size:clamp(1.8rem, 4vw, 2.2rem);
  }
  .couple-names h2{
    font-size:clamp(1.2rem, 3vw, 1.5rem);
  }
  .welcome-section,
  .location-section,
  .feedback-section{
    padding:var(--space-4) var(--space-3);
  }
  .photo-grid,
  .hotel-grid{
    grid-template-columns:1fr;
  }
  .form-actions{
    flex-direction:column;
  }
  .btn-submit,
  .btn-reset{
    width:100%;
  }
}

/* -------------------------
   Druckfreundlich (Einladung exportieren)
------------------------- */
@media print{
  .nav, .navbar, .btn, .btn-submit, .btn-reset, .cta{display:none!important}
  body{background:#fff}
  .card, .table, .welcome-section, .location-section, .feedback-section{box-shadow:none; border-color:#ddd}
}