/* forms.css — Kontakt als Postkarte */
/* 🔑 overflow-x:clip: Beim Absenden fliegt die Karte nach rechts aus dem Bild; das ließ kurz einen waagerechten Scrollbalken aufblitzen.
   Die Spaltenbreite steckt im Innenabstand, damit die Kante des Ausschnitts am Fensterrand liegt und nicht den Kartenschatten abschneidet. */
.contact{padding:150px max(16px,calc((100% - 1080px) / 2)) 40px;overflow-x:clip}
.contact-head{text-align:center;margin-bottom:40px}
.contact-head .lede{margin:18px auto 0}

.postcard{color-scheme:light;position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border-radius:24px;overflow:hidden;background:#fbf7ef;color:#1b1030;box-shadow:0 40px 90px rgba(0,0,0,.45);transform:rotate(-.8deg)}
.postcard :focus-visible{outline-color:#8a6b2b}
.postcard-left{position:relative;display:grid;align-content:space-between;min-height:540px;padding:36px;color:var(--ink);background:radial-gradient(120% 80% at 80% 110%,rgba(255,180,90,.35),transparent 60%),linear-gradient(160deg,#1f2a5e,#0c1230)}
.postcard-greeting{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:clamp(34px,4vw,54px);line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.coco-post{width:min(230px,80%);justify-self:center}
.postcard-right{position:relative;padding:40px 40px 32px;background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(27,16,48,.07) 37px 38px)}
.postcard-right::before{content:"";position:absolute;left:0;top:32px;bottom:32px;border-left:2px dashed rgba(27,16,48,.18)}
.stamp{position:absolute;right:26px;top:22px;display:grid;place-content:center;justify-items:center;width:76px;height:90px;background:var(--gold-grad);color:#1B1406;font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1;outline:4px dotted #fbf7ef;outline-offset:-4px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.stamp span{font-size:28px}
.stamp small{font-size:15px;font-style:italic}
.postmark{position:absolute;right:62px;top:60px;z-index:2;display:grid;place-items:center;width:124px;height:124px;border:3px double #b3261e;border-radius:50%;color:#b3261e;font-size:10.5px;font-weight:800;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;text-align:center;opacity:0;transform:rotate(-12deg);pointer-events:none}

.legal-form{margin-top:70px}
.legal-form .field{margin-bottom:18px}
.legal-form label{display:block;margin-bottom:7px;font-size:14px;font-weight:700;color:#1b1030}
.legal-form input[type=text],.legal-form input[type=email],.legal-form textarea{width:100%;padding:12px 14px;border:1px solid #857a6a;border-radius:12px;background:#fff;color:#1b1030;font:inherit;font-size:15px}
.legal-form input:focus-visible,.legal-form textarea:focus-visible{outline:2px solid #8a6b2b;outline-offset:1px;border-color:transparent}
.legal-form textarea{min-height:150px;resize:vertical}
.legal-form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.6;color:#4a3a5c}
.legal-form .consent input{flex:none;width:18px;height:18px;margin-top:3px;accent-color:#8a6b2b}
.legal-form .consent label{color:#4a3a5c}
.legal-form .consent a{color:#7a5c1f}
.legal-form .form-hinweis{font-size:13.5px;line-height:1.6;color:#4a3a5c;margin:0 0 16px}
.legal-form .form-hinweis a{color:#7a5c1f}
.legal-form button{margin-top:10px}

.form-fallback{max-width:760px;margin:40px auto 0;text-align:center;font-size:13.5px;color:var(--ink-mute)}
.form-fallback a{color:var(--gold)}

@media (max-width:860px){
  .postcard{grid-template-columns:minmax(0,1fr);transform:none}
  .postcard-left{min-height:auto;grid-template-columns:1fr auto;align-items:end;gap:10px}
  .coco-post{width:110px}
  .postcard-right{padding:28px 20px}
  .postcard-right::before{display:none}
  .stamp{width:62px;height:74px}
  .postmark{right:30px;top:40px;width:100px;height:100px}
  .legal-form{margin-top:90px}
}