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

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

  .erbe .weg {
    background-color: var(--white);
    border: none;
    border-radius: var(--radius-panel);
    box-shadow: none;
    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-panel);
    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: var(--fuge); }
  /* Drei gleich breite Karten. minmax(0, 1fr) ist der entscheidende Teil:
     Ein blosses 1fr hat die Mindestbreite auto — die Mailadresse als ein
     unteilbares Wort von rund 288px sprengte damit ihre Spalte und quetschte
     die beiden anderen, bis die Telefonnummer vierzeilig umbrach.
     Mit minmax(0, …) sind alle drei Spalten gleich breit; wo die Adresse
     trotzdem nicht passt, bricht sie am <wbr> im Markup. */
  /* Keine Spaltenaufteilung: Der Block sitzt in einer Kachel eines
     Zweispalters und ist dort rund 540px breit — unabhaengig davon, wie
     breit das Fenster ist. Drei Spalten ergaeben 167px je Karte, in denen
     weder die Mailadresse noch die Telefonnummer einzeilig stehen.
     Untereinander hat jede Karte die volle Breite. */
  .erbe .draht a {
    display: block; text-decoration: none; color: inherit;
    background-color: var(--white);
    border: none;
    border-radius: var(--radius-panel);
    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. */
  /* Gilt jetzt auf allen Breiten: Die Adresse darf am <wbr> brechen, die
     Karte darf schmaler werden als ihr laengstes Wort. */
  .erbe .draht a { min-width: 0; }
  .erbe .draht .wert { overflow-wrap: anywhere; }