/* Kennenlern-Seite. Eigene Datei, damit erbe.css schlank bleibt. */

  /* ---------- Zwei Wege nebeneinander ---------- */
  .erbe .wege { display: grid; gap: 24px; }
  @media (min-width: 900px) {
    .erbe .wege { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 32px; }
  }

  .erbe .weg {
    background-color: var(--white);
    border: 1px solid var(--beige-dark);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: clamp(24px, 3.4vw, 40px);
  }
  .erbe .weg h2 { font-size: var(--fs-h3); margin-bottom: 10px; }
  .erbe .weg > p { color: var(--gray-dark); font-size: var(--fs-klein); line-height: 1.6; max-width: none; }
  .erbe .weg > p + * { margin-top: 24px; }

  /* ---------- Kalender: erst nach Zustimmung nachladen ---------- */
  .erbe .kalender-tor {
    background-color: var(--beige-light);
    border-radius: var(--radius-card);
    padding: clamp(24px, 3vw, 36px);
  }
  .erbe .kalender-tor p {
    font-size: var(--fs-klein); line-height: 1.6; color: var(--gray-dark); max-width: none;
  }
  .erbe .kalender-tor p + p { margin-top: 10px; }
  /* Nur die Verweise im Fliesstext — sonst faerbt die Regel auch den Knopf
     gold auf gold, und die Beschriftung verschwindet. */
  /* Gold auf Beige kommt nur auf 2,95:1. Schwarze Schrift mit goldener
     Unterlaengung ist lesbar und bleibt trotzdem als Verweis erkennbar. */
  .erbe .kalender-tor p a { color: var(--black); text-decoration-color: var(--gold); }
  .erbe .kalender-tor p a:hover { text-decoration-color: var(--gold-dark); }
  .erbe .kalender-tor .pfeilknopf { margin-top: 20px; }
  .erbe .kalender-halter { min-height: 720px; }
  .erbe .calendly-inline-widget { min-width: 0 !important; }

  /* ---------- Kontaktformular ---------- */
  .erbe .kontaktformular { display: flex; flex-direction: column; gap: 16px; }
  .erbe .feld { display: flex; flex-direction: column; gap: 6px; }
  .erbe .feld label {
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--gray-mid);
  }
  .erbe .feld-paar { display: grid; gap: 16px; }
  @media (min-width: 560px) { .erbe .feld-paar { grid-template-columns: 1fr 1fr; } }

  /* 16px sind Absicht: darunter zoomt iOS beim Antippen die ganze Seite.
     flex:0 0 auto hebt die globale Regel fuer input[type=email] auf — deren
     flex-basis von 260px wuerde in der Spalte als Hoehe gelesen. */
  /* Ohne Breitenangabe bestimmen die Formularfelder die Mindestbreite der
     ganzen Seite: ein <input> ist von Haus aus rund 20 Zeichen breit, und ein
     <select> so breit wie seine laengste Option ("Ein groesserer Betrag liegt
     da und ich weiss nicht wohin damit"). Gemessen hat das die Seite auf dem
     Handy auf 602px statt 375px aufgezogen. Gilt auf allen Breiten: am Desktop
     zog das Auswahlfeld sonst die rechte Spur auf, sodass die deklarierten
     1,15fr/1fr nicht eingehalten wurden (481 statt 573px links). */
  .erbe .weg,
  .erbe .feld { min-width: 0; }
  .erbe .kontaktformular input,
  .erbe .kontaktformular select,
  .erbe .kontaktformular textarea { width: 100%; min-width: 0; }

  .erbe .kontaktformular input,
  .erbe .kontaktformular select,
  .erbe .kontaktformular textarea {
    font-family: inherit; font-size: var(--fs-text); line-height: 1.5;
    color: var(--black); background-color: var(--cream);
    border: 1px solid var(--beige-dark); border-radius: 4px;
    padding: 14px 16px;
    flex: 0 0 auto;
    transition: border-color var(--transition-base), background-color var(--transition-base);
  }
  .erbe .kontaktformular input::placeholder,
  .erbe .kontaktformular textarea::placeholder { color: var(--gray-light); }
  .erbe .kontaktformular input:focus,
  .erbe .kontaktformular select:focus,
  .erbe .kontaktformular textarea:focus {
    outline: none; border-color: var(--gold); background-color: var(--white);
  }
  .erbe .kontaktformular textarea { min-height: 130px; resize: vertical; }
  .erbe .kontaktformular select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23808080' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
  }
  .erbe .kontaktformular button[type="submit"] {
    margin-top: 4px; align-self: flex-start;
    font-family: inherit; font-size: var(--fs-text); font-weight: 600;
    color: var(--white); background-color: var(--black);
    border: none; border-radius: 4px; padding: 16px 28px; cursor: pointer;
    transition: background-color var(--transition-base);
  }
  .erbe .kontaktformular button[type="submit"]:hover { background-color: var(--gold-dark); }
  .erbe .kontaktformular button[type="submit"]:disabled { opacity: .6; cursor: default; }
  .erbe .formhinweis-hell {
    font-size: var(--fs-micro); line-height: 1.5; color: var(--gray-mid); max-width: none;
  }
  .erbe .formhinweis-hell a { color: var(--gold-dark); }
  .erbe .weg .formmeldung { margin-top: 12px; font-size: var(--fs-klein); }
  .erbe .weg .formmeldung.gut { color: var(--salbei); }
  .erbe .weg .formmeldung.schlecht { color: #A33; }

  /* ---------- Direkter Draht ---------- */
  .erbe .draht { display: grid; gap: 16px; }
  /* Drei Karten nebeneinander erst, wenn die Mailadresse in eine Karte passt:
     sie ist ein einziges, unteilbares Wort von 288px, dazu 52px Polster.
     Bei 700px waere die Karte 149px breit — die Adresse ragte heraus oder
     muesste mitten im Wort brechen. */
  @media (min-width: 1240px) { .erbe .draht { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
  .erbe .draht a {
    display: block; text-decoration: none; color: inherit;
    background-color: var(--white);
    border: 1px solid var(--beige-dark);
    border-radius: var(--radius-card);
    padding: 24px 26px;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
  }
  .erbe .draht a:hover { border-color: var(--gold); box-shadow: var(--shadow-card); }
  .erbe .draht .was {
    display: block; font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--gray-mid);
    margin-bottom: 8px;
  }
  .erbe .draht .wert {
    font-size: var(--fs-h3); line-height: 1.25; color: var(--black);
  }
  /* Notnagel fuer sehr schmale Schirme: ohne das schoebe die Adresse als ein
     Wort die ganze Seite auf. Das <wbr> im Markup bestimmt, wo getrennt wird. */
  @media (max-width: 1239px) {
    .erbe .draht a { min-width: 0; }
    .erbe .draht .wert { overflow-wrap: anywhere; text-wrap: balance; }
  }

  /* ---------- Was im Gespräch passiert ---------- */
  .erbe .ablauf { display: grid; gap: 20px; margin-top: 8px; }
  @media (min-width: 800px) { .erbe .ablauf { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
  .erbe .ablauf > div { border-top: 1px solid var(--beige-dark); padding-top: 18px; }
  .erbe .ablauf h3 { font-size: var(--fs-lead); margin-bottom: 8px; }
  .erbe .ablauf p { font-size: var(--fs-klein); line-height: 1.6; color: var(--gray-dark); max-width: none; }