/* Farben und Schriften aus dem Design (modernist + ingush + wedding) */
:root{
  --color-bg:#fbf7f0;--color-surface:#f5ede3;--color-text:#2b2622;
  --color-divider:color-mix(in srgb,#2b2622 22%,transparent);
  --color-accent:#c0392b;--color-accent-100:#f9e7e2;--color-accent-200:#f1cfc6;--color-accent-600:#a3301f;--color-accent-700:#86281a;--color-accent-800:#5e1c12;
  --color-green:#8aa58c;--color-green-100:#f3ece6;--color-green-700:#4f6b55;--color-green-900:#3a4a3c;
  --color-neutral-200:#efe6dc;--color-neutral-700:#6a5f57;--color-neutral-800:#4a413b;
  --serif:'Cormorant Garamond',Georgia,serif;
  --pad:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:"Archivo",system-ui,sans-serif;font-size:15px;line-height:1.55;min-height:100vh}
p{margin:0 0 12px}
a{color:#ae1800;text-underline-offset:3px}a:hover{color:#ec3013}
button,input,textarea{font-family:inherit}
:focus{outline:none}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){.star{animation:none!important;opacity:.6}}
.star{position:absolute;pointer-events:none;animation:twinkle 3.2s ease-in-out infinite}
.wrap{max-width:1120px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.bar{height:10px;background:var(--color-green)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{display:flex;flex-direction:column}
.muted{color:var(--color-neutral-700)}
.small{font-size:13px;color:var(--color-neutral-700)}
.b{font-size:15px;font-weight:800}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-green-700);font-weight:600}
.amp{color:var(--color-accent);font-style:italic}

/* Kopfzeile */
.top{border-bottom:2px solid var(--color-green)}
.topin{padding-top:14px;padding-bottom:14px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-weight:800;font-size:18px;margin-right:auto;display:flex;align-items:center;gap:10px}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.navbtn{background:none;border:0;padding:4px 0;font-size:14px;color:var(--color-text);cursor:pointer}
.navbtn:hover{color:var(--color-accent)}
.langs{display:flex;border:1px solid var(--color-divider)}
.langbtn{border:0;padding:6px 10px;font-size:13px;font-weight:800;cursor:pointer;background:transparent;color:var(--color-text)}
.langbtn+.langbtn{border-left:1px solid var(--color-divider)}
.langbtn.on{background:var(--color-text);color:var(--color-bg)}

/* Knöpfe */
.btn-accent{display:inline-block;background:var(--color-accent);color:var(--color-bg);border:0;padding:14px 18px;font-size:16px;font-weight:800;text-align:left;cursor:pointer;text-decoration:none}
.btn-accent:hover{background:var(--color-accent-600);color:var(--color-bg)}
.btn-accent:disabled{opacity:.6;cursor:wait}
.btn-accent.wide{align-self:flex-start;min-width:220px}
.btn-ghost{background:transparent;border:1px solid var(--color-divider);padding:12px 16px;font-size:15px;font-weight:800;cursor:pointer;color:var(--color-text);text-decoration:none;text-align:left}
.btn-ghost.big{padding:14px 18px;font-size:16px}
.btn-ghost:hover{background:var(--color-neutral-200);color:var(--color-text)}
.btn-link{background:none;border:0;padding:12px 4px;font-size:15px;font-weight:800;cursor:pointer;color:var(--color-accent-700)}
.btn-link.small{padding:2px 0;font-size:13px}
.btn-link:hover{color:var(--color-accent)}

/* Code-Eingabe */
.gate{padding-top:clamp(40px,8vw,96px);padding-bottom:clamp(40px,8vw,96px);display:flex;flex-wrap:wrap;gap:48px;position:relative;overflow:hidden}
.gate-l{flex:2 1 420px;display:flex;flex-direction:column;gap:12px;position:relative}
.gate-names{font-size:clamp(56px,9vw,124px);font-family:var(--serif);font-weight:500;line-height:.92;margin:0}
.gate-date{font-size:22px;font-family:var(--serif);font-weight:600}
.gate-form{position:relative;background:var(--color-bg);flex:1 1 300px;display:flex;flex-direction:column;gap:10px;align-self:flex-end;border-top:2px solid var(--color-green);padding-top:16px}
.lbl{font-size:13px;font-weight:600}
.codein{font-size:22px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:12px;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:0;color:var(--color-text);width:100%}
.err{font-size:14px;color:var(--color-accent-700)}
.hint{font-size:13px;color:var(--color-neutral-700)}

/* Startbereich */
.hero{padding:clamp(40px,7vw,88px) 0 40px;display:flex;flex-wrap:wrap-reverse;gap:40px;align-items:flex-end;position:relative}
.hero-l{flex:3 1 520px;display:flex;flex-direction:column;gap:24px;min-width:0}
.hello{font-size:clamp(26px,3.4vw,36px);font-family:var(--serif);font-style:italic;font-weight:500}
.names{font-size:clamp(50px,8.6vw,118px);font-family:var(--serif);font-weight:500;line-height:.94;letter-spacing:-.01em;margin:0}
.lead{font-size:clamp(17px,2vw,21px);line-height:1.45;max-width:640px;margin:0;text-wrap:pretty}
.hero-r{flex:1 1 220px;display:flex;justify-content:center;align-items:center;max-width:380px;position:relative;padding:40px;margin:0 auto}
@media (max-width:600px){.hero-r{max-width:200px;padding:20px;margin-bottom:28px}.hero{gap:16px}}
.medal{position:relative;width:62%;background:var(--color-bg);border-radius:50%;padding:12%;box-shadow:0 0 0 2px #c9a96a}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border-top:2px solid var(--color-green);border-bottom:2px solid var(--color-green);background:var(--color-green-100)}
.facts>div{padding:16px}
.fl{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.fv{font-size:22px;font-weight:800}

/* Abschnitte */
.sec{display:flex;flex-wrap:wrap;gap:32px;padding:56px 0;border-bottom:2px solid color-mix(in srgb,var(--color-green) 50%,transparent)}
.sec.last{border-bottom:0}
.sec-l{flex:1 1 260px}
.sec-r{flex:2 1 480px;min-width:0}
.secnum{font-size:12px;font-weight:600;letter-spacing:.2em;color:#a8874c}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4vw,44px);line-height:1.12;margin:4px 0 8px;text-wrap:pretty}
.h4{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.12;margin:0 0 4px}
.schedrow{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--color-divider)}
.st{font-size:20px;font-weight:800;color:var(--color-accent)}
.sh{font-size:18px;font-weight:800}
.sd{font-size:15px;color:var(--color-neutral-800)}
.grid220{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 24px}
.grid240{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 24px}
.grid260{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 24px}
.dress{border-top:2px solid var(--color-green);padding:12px 0}
.dk{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.dv{font-size:17px;font-weight:600}
.etiq{border-top:1px solid var(--color-divider);padding:14px 0}
.ek{font-size:16px;font-weight:800;margin-bottom:4px}
.ev{font-size:15px;color:var(--color-neutral-800);text-wrap:pretty}
.food{background:var(--color-green-100);border-top:2px solid var(--color-green);padding:20px}
.map{width:100%;height:360px;border:2px solid var(--color-text);filter:grayscale(1) contrast(1.05);display:block}
.way{padding:14px 0;display:flex;flex-direction:column;gap:8px}
.way.green{border-top:2px solid var(--color-green)}
.way.red{border-top:2px solid var(--color-accent)}
.tr{display:flex;gap:10px;align-items:baseline}
.line{background:var(--color-green-700);color:var(--color-bg);font-size:12px;font-weight:800;padding:2px 6px;white-space:nowrap}
.tag{background:var(--color-accent-100);color:var(--color-accent-800);font-size:12px;font-weight:800;padding:2px 8px}
.lnk{font-weight:800;font-size:15px;margin-top:4px}

/* Zusage */
.rsvp{display:flex;flex-direction:column;gap:20px}
.yn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));border:2px solid var(--color-text)}
.ynb{border:0;padding:16px;font-size:17px;font-weight:800;text-align:left;cursor:pointer;background:transparent;color:var(--color-text)}
.ynb+.ynb{border-left:2px solid var(--color-text)}
.ynb.yes{background:var(--color-accent);color:var(--color-bg)}
.ynb.no{background:var(--color-text);color:var(--color-bg)}
.plusrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.stepper{display:flex;align-items:center;border:1px solid var(--color-divider)}
.stepper button{width:44px;height:44px;border:0;background:transparent;font-size:20px;font-weight:800;cursor:pointer;color:var(--color-text)}
.stepper button:hover{background:var(--color-neutral-200)}
.stepper .val{width:44px;text-align:center;font-size:20px;font-weight:800}
.field{display:flex;flex-direction:column;gap:6px}
textarea{padding:12px;font-size:15px;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:0;color:var(--color-text);resize:vertical;width:100%}
.sent{border-top:2px solid var(--color-accent);padding-top:16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.thanks{font-size:clamp(32px,4.4vw,46px);font-family:var(--serif);font-weight:600;line-height:1.05}

/* Upload */
.drop{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:28px 24px;border:2px dashed var(--color-green-700);background:var(--color-surface);cursor:pointer}
.drop:hover,.drop.over{background:var(--color-green-100)}
.drop:focus-within{outline:2px solid var(--color-accent);outline-offset:2px}
.btn-accent.fake{margin-top:6px;min-width:200px;padding:12px 16px}
.uplist{display:flex;flex-direction:column;border-top:2px solid var(--color-green);margin-bottom:16px}
.uprow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--color-divider)}
.upname{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upstat{font-size:14px;font-weight:800;white-space:nowrap;text-align:right}
.upbar{grid-column:1 / -1;height:4px;background:var(--color-neutral-200)}
.upbar>div{height:4px;background:var(--color-green-700);transition:width .3s}

/* Kontakt + Fuß */
.big-serif{font-size:clamp(28px,3.8vw,40px);font-family:var(--serif);font-weight:600;line-height:1.1}
.foot{background:var(--color-green-900);color:var(--color-bg);position:relative;overflow:hidden}
.footin{position:relative;padding-top:56px;padding-bottom:56px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.footbig{font-size:clamp(38px,6vw,76px);font-family:var(--serif);font-style:italic;font-weight:500;line-height:.95}
.logout{background:none;border:0;color:var(--color-bg);font-size:14px;font-weight:800;cursor:pointer;padding:4px 0;text-decoration:underline}