.rsvp-form {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: saturate(140%);
    box-sizing: border-box;
    min-height: 640px; /* konstante Kartenhöhe bei Ja/Nein */
  }

.formular-title {
    margin: 0 0 8px 0;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
  }

  /* In Seiten-Sektionen wird der Formular-Titel durch die Sektion-Überschrift ersetzt */
  .section .rsvp-form .formular-title { display: none; }
  
.button-group {
    display: inline-flex;
    align-self: center;
    gap: 0;
    background: #f2f4f7;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
  }
  
.button-group label {
    display: inline-block;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    text-align: center;
    user-select: none;
    color: #111827;
  }
  
  .button-group input[type="radio"] {
    display: none;
  }



  .button-group label:hover { background-color: #eceef1; }
  
  input, select, textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #fafafa;
    transition: border-color 0.2s;
  }

  /* Feld mit Icon links */
  .field { position: relative; }
  .field input,
  .field select,
  .field textarea { padding-left: 44px; }
  .field .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
  }
  .field textarea + .icon { align-self: flex-start; }

  /* SVG-Icons als Data-URI */
  .icon-user { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b35f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
  .icon-mail { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b35f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2' ry='2'/><path d='M3 7l9 6 9-6'/></svg>"); }
  .icon-phone { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b35f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.89.31 1.76.57 2.6a2 2 0 0 1-.45 2.11L8 9a16 16 0 0 0 7 7l.57-1.23a2 2 0 0 1 2.11-.45c.84.26 1.71.45 2.6.57A2 2 0 0 1 22 16.92z'/></svg>"); }
  .icon-people { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b35f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4'/><path d='M7 21v-2a4 4 0 0 1 4-4'/><circle cx='12' cy='7' r='4'/></svg>"); }
  .icon-note { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b35f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h13l3 3v13H4z'/><path d='M14 4v4h4'/></svg>"); }
  .icon-location { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b35f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-7 9 7'/><path d='M5 10v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10'/><path d='M9 22V12h6v10'/></svg>"); }
  .icon-companion { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b35f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7' r='3'/><path d='M2 21v-2a5 5 0 0 1 5-5h4'/><circle cx='17' cy='7' r='3'/><path d='M22 21v-2a5 5 0 0 0-5-5h-1'/><path d='M19 14v-3'/><path d='M17.5 12.5h3'/></svg>"); }
  
  input:focus, select:focus, textarea:focus {
    border-color: var(--apple-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 199, 190, 0.2);
    background-color: #fff;
  }

  /* Deutliche Hervorhebung bei ungültigen Eingaben */
  .rsvp-form input:invalid,
  .rsvp-form select:invalid,
  .rsvp-form textarea:invalid {
    border-color: #d93025;
    background-color: #fff5f5;
  }
  .rsvp-form input:invalid:focus,
  .rsvp-form select:invalid:focus,
  .rsvp-form textarea:invalid:focus {
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.2);
  }
  
  textarea {
    min-height: 100px;
    resize: vertical;
  }
  
  .checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
  }
  
  .submit-button {
    background-color: var(--apple-accent);
    color: white;
    border: none;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.05s;
    width: 100%;
  }
  
  .submit-button:hover {
    background-color: #00d1c6;
  }
  .submit-button:active { transform: translateY(1px); }
  
  label {
    font-weight: 600;
    margin-top: 8px;
    color: #111827;
  }

  /* Gruppe aus Label + Antwortfeld mit kleinerem Innenabstand */
  .form-row { display: block; }
  .form-row > .field,
  .form-row > select,
  .form-row > input,
  .form-row > textarea { margin-top: 6px; }
  .form-row > label { margin-top: 0; }

  /* Mehr Abstand zwischen Personen-Auswahl und dem Hinweis-Label */
  #personenanzahl {
    margin-bottom: 8px; /* kompakter, da Begleitpersonen folgen */
  }

  /* Abstand rund um die Begleitpersonen-Namen */
  #begleitNamen {
    margin-top: 8px;
    margin-bottom: 12px;
  }

  /* Mehr Luft vor dem Hinweis-Label */
  #zusageExtras label[for="message"] {
    margin-top: 12px;
  }

  /* Mobile: etwas mehr Luft zwischen den Bereichen */
  @media (max-width: 600px) {
    #personenanzahl { margin-bottom: 14px; }
    #begleitNamen { margin-top: 12px; margin-bottom: 18px; }
    #zusageExtras label[for="message"] { margin-top: 18px; }
    .form-row > select { margin-top: 10px; }
  }

/* Abstände durch gap geregelt */

  html, body {
    height: auto;
    overflow: visible;
  }
  .button-group input[type="radio"]:checked + label {
    background-color: var(--apple-accent);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 199, 190, 0.35);
  }

  /* Kleinere Geräte: mehr Luft am Rand */
  @media (max-width: 480px) {
    .rsvp-form { padding: 20px; border-radius: 14px; }
    .button-group label { padding: 10px 14px; }
  }