:root{
    --petrol:#15403f;
    --petrol-deep:#0e2e2d;
    --teal:#23615e;
    --blau:#5277a8;        /* Trachten-Janker Blau */
    --blau-licht:#7d9bc4;
    --sage:#9aae8c;
    --sage-tief:#6f8567;
    --creme:#f6f1e6;
    --creme-warm:#efe7d6;
    --weiss:#fbfaf6;
    --tinte:#1c2b2a;
    --serif:'Cormorant Garamond',Georgia,serif;
    --ui:'Jost',sans-serif;
    --script:'Pinyon Script',cursive;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--ui);
    color:var(--tinte);
    background:var(--creme);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15}
  .script{font-family:var(--script);font-weight:400}
  .eyebrow{
    font-family:var(--ui);font-weight:400;font-size:.74rem;
    letter-spacing:.42em;text-transform:uppercase;
  }
  section{position:relative}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px}

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px clamp(20px,4vw,46px);
    transition:.5s ease;
  }
  nav.solid{
    background:rgba(15,46,45,.92);
    backdrop-filter:blur(10px);
    padding:13px clamp(20px,4vw,46px);
    box-shadow:0 10px 40px rgba(0,0,0,.18);
  }
  .brand{
    font-family:var(--script);font-size:1.85rem;color:var(--weiss);
    line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.35);
  }
  .navlinks{display:flex;gap:26px;align-items:center}
  .navlinks a{
    font-family:var(--ui);font-weight:300;font-size:.82rem;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(255,255,255,.86);text-decoration:none;
    position:relative;transition:.3s;
  }
  .navlinks a::after{
    content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
    background:var(--sage);transition:.35s;
  }
  .navlinks a:hover{color:#fff}
  .navlinks a:hover::after{width:100%}

  /* ---------- DROPDOWN ---------- */
  .dropdown { position: relative; display: inline-block; }
  .dropbtn { cursor: pointer; }
  /* Brücke für den Hover-Effekt, damit das Menü nicht schließt */
  .dropdown::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 20px; display: block;
  }
  .dropdown-content {
    display: none; position: absolute; right: 0; top: calc(100% + 10px);
    background-color: var(--petrol-deep); min-width: 240px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3); z-index: 100;
    border-radius: 4px; padding: 10px 0;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
  }
  .dropdown-content a {
    color: rgba(255,255,255,0.85); padding: 12px 20px;
    text-decoration: none; display: block; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.1em; transition: 0.3s;
  }
  .dropdown-content a::after { display: none; }
  .dropdown-content a:hover { background-color: rgba(255,255,255,0.08); color: #fff; }
  .dropdown:hover .dropdown-content { display: block; }
  .dropdown-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 8px 0; }

  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0}
  .burger span{width:26px;height:2px;background:#fff;transition:.3s}

  /* ---------- HERO ---------- */
  .hero{
    min-height:100svh;display:flex;align-items:center;justify-content:center;
    text-align:center;color:var(--weiss);position:relative;overflow:hidden;
  }
  .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 32%;transform:scale(1.08);}
  .hero::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(ellipse at 50% 60%, rgba(14,46,45,.28), rgba(14,46,45,.72) 75%),
      linear-gradient(to bottom, rgba(14,46,45,.55), rgba(14,46,45,.2) 35%, rgba(14,46,45,.78));
  }
  .hero-inner{position:relative;z-index:2;padding:0 22px}
  .hero .eyebrow{opacity:0;animation:fadeUp 1s .2s forwards}
  .hero .names{
    font-family:var(--script);font-weight:400;
    font-size:clamp(4rem,15vw,10.5rem);line-height:.9;margin:.06em 0 .12em;
    text-shadow:0 4px 30px rgba(0,0,0,.4);opacity:0;animation:fadeUp 1.1s .45s forwards;
  }
  .hero .sub{
    font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.6vw,1.7rem);
    font-weight:400;opacity:0;animation:fadeUp 1.1s .7s forwards;color:#f3eede;
  }
  .hero .datum{
    display:inline-flex;align-items:center;gap:18px;margin-top:30px;
    font-family:var(--ui);letter-spacing:.3em;font-size:.95rem;text-transform:uppercase;
    opacity:0;animation:fadeUp 1.1s .95s forwards;
  }
  .hero .datum .line{width:46px;height:1px;background:rgba(255,255,255,.6)}
  .countdown{
    display:flex;gap:clamp(14px,4vw,40px);justify-content:center;margin-top:46px;
    opacity:0;animation:fadeUp 1.1s 1.2s forwards;
  }
  .cd-item{text-align:center;min-width:62px}
  .cd-num{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);font-weight:600;line-height:1}
  .cd-lab{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;opacity:.8;margin-top:6px}
  .scrollcue{
    position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
    color:rgba(255,255,255,.75);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
    opacity:0;animation:fadeUp 1s 1.6s forwards;
  }
  .scrollcue .arrow{display:block;margin:8px auto 0;width:1px;height:34px;background:rgba(255,255,255,.6);animation:bob 2s ease-in-out infinite}

  /* floating clouds (subtle, like invitation) */
  .cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,.07);filter:blur(8px);z-index:1}

  /* ---------- SECTION SHELL ---------- */
  .band{padding:clamp(72px,11vw,140px) 0}
  .band-petrol{background:var(--petrol);color:var(--creme)}
  .band-petrol h2,.band-petrol h3{color:var(--weiss)}
  .band-creme{background:var(--creme)}
  .band-sage{background:linear-gradient(160deg,#eef0e6,#e3e8d6)}
  .sec-head{text-align:center;margin-bottom:clamp(38px,6vw,70px)}
  .sec-head .eyebrow{color:var(--sage-tief);display:block;margin-bottom:16px}
  .band-petrol .sec-head .eyebrow{color:var(--sage)}
  .sec-head h2{font-size:clamp(2.1rem,5.2vw,3.4rem)}
  .sec-head .deco{
    display:block;width:54px;height:1px;margin:22px auto 0;background:currentColor;opacity:.4;position:relative;
  }
  .sec-head .deco::before,.sec-head .deco::after{content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translateY(-50%)}
  .sec-head .deco::before{left:-12px}.sec-head .deco::after{right:-12px}

  .reveal{opacity:0;transform:translateY(34px);transition:.9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* ---------- EINLADUNG ---------- */
  .einladung{display:grid;grid-template-columns:1fr .82fr;gap:clamp(34px,6vw,72px);align-items:center}
  .einladung .text p{font-family:var(--serif);font-size:clamp(1.15rem,2.3vw,1.45rem);margin-bottom:1.25em;color:#e9e2d2}
  .einladung .text p strong{font-weight:600;color:#fff;font-style:normal}
  .einladung .text .lead{font-style:italic}
  .portrait{position:relative}
  .portrait img{width:100%;border-radius:4px;display:block;box-shadow:0 30px 70px rgba(0,0,0,.4)}
  .portrait::before{
    content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.35);border-radius:4px;
    transform:translate(18px,18px);z-index:-1;
  }

  /* ---------- ABLAUF / TIMELINE ---------- */
  .timeline{max-width:720px;margin:0 auto;position:relative}
  .timeline::before{content:"";position:absolute;left:118px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--sage),rgba(154,174,140,.2))}
  .tl-item{display:grid;grid-template-columns:104px 1fr;gap:34px;padding:18px 0;position:relative}
  .tl-time{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--teal);text-align:right;padding-top:2px}
  .tl-dot{position:absolute;left:113px;top:30px;width:11px;height:11px;border-radius:50%;background:var(--weiss);border:2px solid var(--sage-tief);z-index:2}
  .tl-body h3{font-size:1.4rem;color:var(--petrol)}
  .tl-body p{font-size:.95rem;color:#5a635c;margin-top:2px}
  .hint{font-size:.78rem;color:var(--sage-tief);letter-spacing:.04em;font-style:italic;text-align:center;margin-top:34px}

  /* ---------- ANFAHRT ---------- */
  .anfahrt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:stretch}
  .map-card{border-radius:6px;overflow:hidden;box-shadow:0 24px 60px rgba(20,40,40,.18);min-height:330px;background:#dfe4d8;position:relative}
  .map-card iframe{width:100%;height:100%;border:0;display:block;min-height:330px}
  .info-card{background:var(--weiss);border-radius:6px;padding:clamp(28px,4vw,44px);box-shadow:0 18px 50px rgba(20,40,40,.1)}
  .info-card h3{font-size:1.7rem;color:var(--petrol);margin-bottom:6px}
  .info-card .ort{color:var(--sage-tief);letter-spacing:.04em;margin-bottom:24px}
  .info-row{display:flex;gap:16px;padding:15px 0;border-top:1px solid #e7e2d3}
  .info-row .ic{flex:0 0 26px;color:var(--blau);font-size:1.15rem;padding-top:2px}
  .info-row b{font-family:var(--serif);font-size:1.18rem;color:var(--petrol);font-weight:600}
  .info-row p{font-size:.92rem;color:#5d655d}

  /* ---------- HOTELS ---------- */
  .hotels{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .hotel{background:var(--weiss);border-radius:6px;overflow:hidden;box-shadow:0 16px 44px rgba(20,40,40,.1);transition:.45s;display:flex;flex-direction:column}
  .hotel:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(20,40,40,.18)}
  .hotel-top{height:7px;background:linear-gradient(90deg,var(--blau),var(--sage))}
  .hotel-body{padding:30px 28px 32px;flex:1;display:flex;flex-direction:column}
  .hotel .tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blau);margin-bottom:10px}
  .hotel h3{font-size:1.5rem;color:var(--petrol);margin-bottom:8px}
  .hotel p{font-size:.92rem;color:#5d655d;flex:1}
  .hotel .meta{margin-top:18px;font-family:var(--serif);font-size:1.05rem;color:var(--teal)}
  .hotel a{margin-top:16px;align-self:flex-start;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blau);text-decoration:none;border-bottom:1px solid var(--blau);padding-bottom:2px;transition:.3s}
  .hotel a:hover{color:var(--petrol);border-color:var(--petrol)}

  /* ---------- GALERIE ---------- */
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
  .gallery figure{overflow:hidden;border-radius:4px;position:relative;cursor:pointer;background:#cdd3c6}
  .gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:.7s ease}
  .gallery figure:hover img{transform:scale(1.07)}
  .gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(14,46,45,.4));opacity:0;transition:.4s}
  .gallery figure:hover::after{opacity:1}
  .g-tall{grid-row:span 2}.g-wide{grid-column:span 2}

  .uploadbox{
    margin-top:40px;border:1.5px dashed var(--sage-tief);border-radius:8px;
    padding:clamp(28px,5vw,48px);text-align:center;background:rgba(255,255,255,.55);
    transition:.3s;
  }
  .uploadbox.drag{background:rgba(154,174,140,.18);border-color:var(--teal)}
  .uploadbox h3{font-size:1.6rem;color:var(--petrol);margin-bottom:8px}
  .uploadbox p{font-size:.92rem;color:#5d655d;max-width:520px;margin:0 auto 22px}
  .btn{
    display:inline-block;cursor:pointer;font-family:var(--ui);font-weight:400;
    letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;
    padding:14px 34px;border-radius:40px;border:0;transition:.35s;text-decoration:none;
  }
  .btn-primary{background:var(--petrol);color:var(--creme)}
  .btn-primary:hover{background:var(--teal);transform:translateY(-2px)}
  .btn-ghost{background:transparent;border:1px solid var(--blau);color:var(--blau)}
  .btn-ghost:hover{background:var(--blau);color:#fff}
  #uploadGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:26px}
  #uploadGrid img{width:100%;height:120px;object-fit:cover;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
  .upload-note{font-size:.76rem;color:var(--sage-tief);font-style:italic;margin-top:18px}

  /* ---------- RSVP ---------- */
  .rsvp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,64px);align-items:center}
  .rsvp-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:clamp(30px,4vw,46px)}
  .rsvp-card label{display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin:18px 0 7px}
  .rsvp-card label:first-of-type{margin-top:0}
  .rsvp-card input,.rsvp-card select,.rsvp-card textarea{
    width:100%;padding:13px 16px;border-radius:5px;border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.07);color:#fff;font-family:var(--ui);font-size:.95rem;
  }
  .rsvp-card input::placeholder,.rsvp-card textarea::placeholder{color:rgba(255,255,255,.4)}
  .rsvp-card .btn-primary{margin-top:26px;width:100%;background:var(--sage);color:var(--petrol-deep);font-weight:500}
  .rsvp-card .btn-primary:hover{background:#aebf9f}
  .rsvp-side h2{font-size:clamp(2rem,4.6vw,3rem);color:#fff;margin-bottom:18px}
  .rsvp-side p{color:#dfe2d4;font-family:var(--serif);font-size:1.2rem;margin-bottom:16px}
  .dresscode{display:inline-flex;align-items:center;gap:12px;margin-top:8px;background:rgba(255,255,255,.08);padding:12px 22px;border-radius:40px;font-size:.9rem;color:#fff}

  /* ---------- FOOTER ---------- */
  footer{background:var(--petrol-deep);color:rgba(255,255,255,.7);text-align:center;padding:64px 24px 48px}
  footer .script{font-size:2.6rem;color:#fff;display:block;margin-bottom:6px}
  footer .fdate{letter-spacing:.34em;font-size:.8rem;text-transform:uppercase;margin-bottom:24px}
  footer .weiter{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--sage)}
  footer .copy{margin-top:30px;font-size:.72rem;letter-spacing:.1em;opacity:.6}

  /* ---------- LIGHTBOX ---------- */
  .lightbox{position:fixed;inset:0;background:rgba(10,26,25,.94);z-index:100;display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
  .lightbox.open{display:flex}
  .lightbox img{max-width:92vw;max-height:88vh;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.6)}

  /* ---------- MODAL (RSVP) ---------- */
  .custom-modal {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(14, 46, 45, 0.85); backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center; padding: 20px;
  }
  .custom-modal.open { display: flex; }
  .modal-content {
    background: var(--weiss); border-radius: 12px; max-width: 500px; width: 100%;
    padding: clamp(30px, 6vw, 50px); text-align: center; position: relative;
    box-shadow: 0 40px 100px rgba(0,0,0,0.3); transform: scale(0.9); transition: 0.4s cubic-bezier(.2,.7,.2,1);
  }
  .custom-modal.open .modal-content { transform: scale(1); }
  .modal-content h3 { font-size: 2.2rem; color: var(--petrol); margin-bottom: 16px; }
  .modal-content p { font-family: var(--serif); font-size: 1.25rem; color: var(--tinte); margin-bottom: 30px; line-height: 1.5; }
  .modal-content .script { font-size: 3rem; color: var(--sage-tief); margin-bottom: 10px; display: block; }
  .modal-close { position: absolute; top: 18px; right: 20px; cursor: pointer; font-size: 1.5rem; color: var(--sage-tief); }

  @keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:860px){
    .navlinks{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--petrol-deep);
      flex-direction:column;justify-content:center;gap:20px;transform:translateX(100%);transition:.45s;padding:40px;
      overflow-y:auto;
    }
    .navlinks.show{transform:none}
    .navlinks a{font-size:1rem}
    .burger{display:flex;z-index:60}
    .einladung,.anfahrt,.rsvp-grid{grid-template-columns:1fr}
    .portrait{max-width:420px;margin:0 auto}
    .hotels{grid-template-columns:1fr}
    .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
    .timeline::before{left:78px}.tl-item{grid-template-columns:66px 1fr;gap:20px}
    .tl-dot{left:73px}.tl-time{font-size:1.15rem}
    .rsvp-side{order:-1;text-align:center}

    /* Mobile Dropdown Fix */
    .dropdown { display: block; width: 100%; }
    .dropdown::after { display: none; }
    .dropdown-content {
      position: static; display: block; background: none; box-shadow: none;
      padding: 0 0 0 20px; border: 0; margin: 0;
    }
    .dropdown-content a { padding: 10px 0; font-size: 0.95rem; }
    .dropdown-divider { background: rgba(255,255,255,0.08); margin: 15px 0; }
    .dropbtn { 
      display: block; font-weight: 500; color: var(--sage); 
      margin-bottom: 5px; cursor: default; font-family: var(--ui);
      text-transform: uppercase; letter-spacing: 0.16em; font-size: 1rem;
    }
  }
  @media(max-width:480px){
    .gallery{grid-template-columns:1fr;grid-auto-rows:220px}
    .g-wide{grid-column:span 1}
  }