/* ════════════════════════════════════════
   cococrema – form.css
   Eigenständig: bringt eigene Design-Tokens mit (wie jede Page-CSS).
   Lädt zusammen mit main.css (Buttons, Nav, Footer, Typo erben von dort).
   Enthält NUR formular-spezifische Styles.
   ════════════════════════════════════════ */

/* ── IMAGE PATHS — CMD+F → IMAGE PATHS ── */
:root {
  /* 🖼 Formular Desktop → .form-bg */
  --img-form-bg:        url('img/cococrema-formular-img.jpg');
  /* 🖼 Formular Mobile → .form-bg (mobil) */
  --img-form-bg-mobile: url('img/cococrema-formular-img-mobile.jpg');
}

/* ── DESIGN TOKENS (identisch zu home.css) ── */
:root {
  --font-display:           'Cormorant Garamond', Georgia, serif;
  --font-body:              'DM Sans', Helvetica, sans-serif;
  --size-hero:              clamp(2.4rem, 4vw, 4.2rem);
  --size-headline:          clamp(1.9rem, 3vw, 3rem);
  --size-subline:           clamp(1.2rem, 2vw, 1.7rem);
  --size-quote:             clamp(1.1rem, 1.8vw, 1.4rem);
  --size-body:              1.3rem;
  --size-small:             1.1rem;
  --size-eyebrow:           1.0rem;
  --size-label:             0.88rem;
  --size-nav-logo:          1.5rem;
  --size-nav-link:          0.95rem;
  --size-nav-meta:          0.8rem;
  --size-footer:            0.72rem;
  --weight-light:           300;
  --weight-regular:         400;
  --leading-tight:          1.08;
  --leading-normal:         1.78;
  --leading-loose:          1.92;
  --tracking-wide:          0.22em;
  --tracking-mid:           0.15em;
  --tracking-narrow:        0.08em;

  --space-section:          7rem;
  --space-section-mobile:   4rem;
  --space-h:                4rem;
  --space-h-mobile:         1.5rem;
  --max-width:              1100px;
  --border-line:            0.5px solid rgba(28,26,22,0.1);
  --border-line-mid:        0.5px solid rgba(28,26,22,0.08);

  /* Formular-eigene Tokens */
  --form-card-bg:           #FBF8F2;
  --form-field-bg:          #FFFDF9;
  --color-banner-bg:        #2A2620;   /* dunkelgrau, = ink-dark */
  --color-banner-ink:       #EDE7D8;   /* hell-creme, = cream-soft */
  --color-error:            #A8442E;
}

/* ════════════════════════════════════════
   BANNER  (temporär – toggle via display)
   Deaktivieren: .form-banner { display:none; }  oder <div> löschen.
   ════════════════════════════════════════ */
.form-banner {
  display: block;
  background: var(--color-banner-bg);
  color: var(--color-banner-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
  padding: 0.9rem var(--space-h-mobile);
}
.form-banner p {
  margin: 0 auto;
  max-width: 760px;
}

/* ════════════════════════════════════════
   LAYOUT — Bild-Hintergrund + Karte darin
   (kein position:absolute; Karte sitzt im Flow im Bild-div)
   ════════════════════════════════════════ */
.form-bg {
  width: 100%;
  background-color: var(--color-cream-mid);
  background-image: var(--img-form-bg);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  /* Padding = sichtbarer Bildrand; verhindert auch das Kollabieren des div */
  padding: 4.5rem 0;
}

.form-card {
  background: var(--form-card-bg);
  border: var(--border-line);
  padding: 3.4rem 3.2rem 3rem;
  /* Desktop: links versetzt, Breite begrenzt → Foto rechts bleibt sichtbar */
  max-width: 750px;
  margin-left: 8%;
}

/* ════════════════════════════════════════
   KOPFTEXT
   ════════════════════════════════════════ */
.form-title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--size-hero);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 1.6rem;
}

.form-intro {
  margin-bottom: 2.4rem;
}
.form-intro p {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--color-ink-muted);
  margin-bottom: 1.1rem;
  max-width: 92%;
}
.form-intro p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════
   FELDER
   ════════════════════════════════════════ */
.form-field { margin-bottom: 1.5rem; }

/* Vorname + Nachname nebeneinander (Desktop) */
.form-row {
  display: flex;
  gap: 1.2rem;
}
.form-row .form-field { flex: 1; }

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}
.form-label .optional {
  color: var(--color-ink-faint);
  font-weight: var(--weight-light);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--form-field-bg);
  border: 0.5px solid var(--color-cream-deep);
  border-radius: 0;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(196,168,130,0.16);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-ink-faint); }

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B9186' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}

/* Mikro-Hinweis unter der Website */
.form-hint {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-ink-faint);
  margin-top: 0.4rem;
}

/* Fehlertexte */
.form-field-error {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-error);
  margin-top: 0.4rem;
}
.form-error-summary {
  background: #F7ECE7;
  border: 0.5px solid #E3C3B6;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.8rem;
}
.form-error-summary p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-error);
}

/* Honeypot – unsichtbar */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Button: erbt von .button-primary (main.css), nur Abstand hier ── */
.form-submit { margin-top: 0.6rem; }

.form-note {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--color-ink-faint);
  margin-top: 0.9rem;
}

/* ════════════════════════════════════════
   MOBIL
   ════════════════════════════════════════ */
@media (max-width: 1100px) {
  .form-bg {
    background-image: var(--img-form-bg-mobile);
    background-position: center top;
    padding: 2.5rem 0;
  }
  .form-card {
    width: 86%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 2.2rem 1.5rem 2rem;
  }
  /* Vorname + Nachname untereinander */
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 480px) {
  .form-card { padding: 1.8rem 1.2rem 1.6rem; }
}