/* =============================================================================
   Einen Betrieb empfehlen  (/restaurant-empfehlen)
   =============================================================================
   NUR das, was diese Seite zusaetzlich braucht. Karte, Felder, Knopf, Honigtopf
   und Erfolgsmeldung kommen aus css/pages/contact.css — beides sind oeffentliche
   Formulare mit derselben Kopf- und Fusszeile, und zwei Formularoptiken auf
   derselben Seite waeren fuer niemanden ein Gewinn.

   Eingebunden NACH contact.css, damit die wenigen Regeln hier gewinnen.
   ============================================================================= */

/* Eine Spalte statt der zweispaltigen Kontaktseite: Hier steht nur das
   Formular, und ein 960 px breites Eingabefeld liest sich schlecht. */
.empfehlung-spalte {
    max-width: 620px;
    margin: 0 auto;
}

.empfehlung-einleitung {
    margin: 0 0 var(--spacing-lg, 16px);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-gray-700, #343a40);
}

/* Die Seite fragt zwei verschiedene Dinge ab — den Betrieb und den Absender.
   Ohne sichtbare Trennung liest sich "Name" zweimal hintereinander wie eine
   Wiederholung, und der Kunde traegt den Betriebsnamen ein zweites Mal ein. */
.empfehlung-abschnitt {
    margin: var(--spacing-lg, 16px) 0 var(--spacing-sm, 8px);
    padding-top: var(--spacing-md, 12px);
    border-top: 1px solid var(--color-gray-200, #dee2e6);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-gray-800, #212529);
}

/* Der erste Abschnitt steht direkt unter der Kartenueberschrift und braucht
   weder Linie noch Abstand darueber. */
.empfehlung-abschnitt:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Hinweise unter einem Feld. #595959 auf Weiss ergibt 7,0:1 — ein Hinweis, der
   erklaert, wofuer eine Angabe verwendet wird, ist keine Fussnote zum Wegdimmen. */
.empfehlung-hinweis {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #595959;
}

.empfehlung-datenschutz {
    margin: var(--spacing-md, 12px) 0 var(--spacing-lg, 16px);
    font-size: 0.8rem;
    line-height: 1.5;
    color: #595959;
}

.empfehlung-datenschutz a {
    color: var(--color-primary, #e8541e);
    text-decoration: underline;
}

.empfehlung-weiter {
    margin: var(--spacing-md, 12px) 0 0;
}

/* 44 px Mindesthoehe: Der Rueckweg nach dem Absenden ist auf dem Handy der
   einzige Knopf auf der Seite und muss mit dem Daumen zu treffen sein. */
.empfehlung-weiter a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--color-primary, #e8541e);
    text-decoration: underline;
}

.empfehlung-weiter a:hover,
.empfehlung-weiter a:focus-visible {
    color: var(--color-primary-dark, #c53f10);
}

@media (max-width: 575.98px) {
    .empfehlung-spalte {
        max-width: none;
    }
}