/* Seite «Deine Referenz» (/kundenstimme/; bis 21.10.2026 «Kundenstimme») – eigene, schlichte Seite für den Link, den
   Lia Kundinnen schickt; seit 18.10.2026 sendet sie direkt ins eigene Programm (js/kundenstimme.js).
   Nutzt die Grundlagen aus stil.css (Farben, Schriften, .feld, .wahl-pille, .knopf-gold, .knopf-dunkel, .falle, .textlink). */

.seite-stimme { background: var(--grund); color: var(--text); }

.stimme-seite { max-width: 720px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) var(--rand) 24px; }

.stimme-kopf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stimme-logo { display: block; width: 200px; height: 200px; border-radius: 50%; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.stimme-logo picture, .stimme-logo img { display: block; width: 100%; height: 100%; }
.stimme-kopf h1 { margin: 24px 0 0; font: 300 clamp(34px, 6vw, 52px)/1.1 var(--serif); letter-spacing: -.01em; }
.stimme-einleitung { max-width: 34em; margin: 16px 0 0; color: var(--gedaempft); font: 400 16px/1.7 var(--sans); }
.stimme-einleitung + .stimme-einleitung { margin-top: 10px; }
/* die Frage über der Einleitung (Lia 21.10.2026: nur Kundinnen und Kunden, die gebucht haben) */
.stimme-frage { max-width: 34em; margin: 18px 0 0; color: var(--text); font: 400 clamp(19px, 2.6vw, 22px)/1.4 var(--serif); }

.stimme-karte { margin-top: 28px; padding: clamp(24px, 4vw, 36px); border-radius: var(--radius); background: var(--creme); color: var(--tinte); }
.stimme-formular .pflicht-hinweis { margin: 0 0 8px; color: var(--tinte-leise); font-size: 13px; }
.stimme-formular .feld { margin-top: 20px; }
.feld-wahl { margin: 20px 0 0; padding: 0; border: 0; }
.wahl-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
/* «Welcher Anlass?» direkt unter den Pillen (nur bei «Anderer Anlass», js/kundenstimme.js); Feld und Tippfläche aus stil.css .feld */
.stimme-formular .stimme-anlass-frei { margin-top: 16px; }
/* Der Platzhalter (Lias Wortlaut) ist auf dem Handy länger als das Feld: endet mit «…» statt hart abgeschnitten */
.stimme-anlass-frei input { text-overflow: ellipsis; }
.feld-hilfe { margin: 8px 0 0; color: var(--tinte-leise); font-size: 13px; line-height: 1.5; }
.feld-fehler { margin: 8px 0 0; color: var(--fehler); font-size: 13px; font-weight: 600; }

.stimme-erlaubnis { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: 15px; line-height: 1.55; cursor: pointer; }
.stimme-erlaubnis input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--gold-dunkel); }

.stimme-erlaubnis + .feld-fehler { margin-left: 34px; }
.stimme-erlaubnis input[aria-invalid="true"] { outline: 2px solid var(--fehler); outline-offset: 2px; }

.stimme-senden { margin-top: 22px; min-height: 52px; }
.stimme-meldung { min-height: 1em; margin: 14px 0 0; font-size: 15px; line-height: 1.55; }
.stimme-meldung:empty { display: none; }
.stimme-meldung:focus { outline: none; box-shadow: none; } /* Ziel des Skripts nach dem Senden, kein Bedienelement */
.stimme-meldung.ist-fehler { padding: 12px 16px; border-left: 3px solid var(--fehler); border-radius: 0 12px 12px 0; background: var(--fehler-flaeche); }
.stimme-meldung.ist-erfolg { margin-top: 0; padding: 14px 18px; border-left: 3px solid var(--erfolg); border-radius: 0 12px 12px 0; background: #e3f1e5; font-size: 17px; }
.stimme-meldung a { color: var(--gold-dunkel); font-weight: 600; text-underline-offset: .2em; }

/* Seit 18.10.2026 (Lia 3a) sendet das Formular direkt; klappt es nicht, öffnet «Als E-Mail senden» die fertige E-Mail */
.stimme-rueckfall { margin-top: 14px; }
.stimme-rueckfall-status { margin: 10px 0 0; color: var(--tinte-leise); font-size: 14px; line-height: 1.55; }
.stimme-rueckfall-status:empty { display: none; }
.stimme-hinweis, .stimme-ohne-js { margin: 18px 0 0; color: var(--tinte-leise); font-size: 13px; line-height: 1.6; }
html.js .stimme-ohne-js { display: none; }
.stimme-datenschutz strong { color: var(--tinte); font-weight: 600; }

.stimme-fuss { max-width: 720px; margin: 0 auto; padding: 8px var(--rand) calc(28px + env(safe-area-inset-bottom)); text-align: center;
  color: var(--leise); font: 400 13px/1.8 var(--sans); }
.stimme-fuss p { margin: 4px 0; }
.stimme-fuss a { color: var(--gedaempft); text-decoration: underline; text-decoration-color: var(--linie-gold); text-underline-offset: 3px; }
.stimme-fuss a:hover { color: var(--gold); }
.stimme-leitsatz { color: var(--text); font: italic 300 18px/1.4 var(--serif); }

@media (max-width: 599px) {
  .stimme-logo { width: 160px; height: 160px; }
  .stimme-karte { margin-inline: calc(var(--rand) * -.5); }
}

/* Handy: Lesetext mindestens 14 px (Hinweise 15 px); im Fuss Telefon und E-Mail als Tippflächen ≥ 44 px nebeneinander
   unter dem Namen, ohne Trennpunkte. Am Computer bleibt alles gleich. */
@media (max-width: 899px) {
  .stimme-hinweis, .stimme-ohne-js { font-size: 15px; line-height: 1.6; }
  .feld-hilfe { font-size: 14px; }
  .stimme-formular .pflicht-hinweis { font-size: 14px; }
  .stimme-fuss { font-size: 14px; }
  .stimme-kontakt { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; }
  .stimme-trenner { display: none; }
  .stimme-kontakt a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* quer und niedrig (Handy quer): kleineres Logo, damit Titel und Einleitung im ersten Bild stehen */
@media (orientation: landscape) and (max-height: 520px) {
  .stimme-seite { padding-top: calc(20px + env(safe-area-inset-top)); }
  .stimme-logo { width: 112px; height: 112px; }
  .stimme-kopf h1 { margin-top: 16px; }
}

/* Helle Karte: Formularelemente hell darstellen und Links in Tinte (wie .hell auf den anderen Seiten) */
.stimme-karte { color-scheme: light; }
.stimme-karte .textlink { color: var(--tinte); text-decoration-color: var(--gold-dunkel); }
.stimme-karte .textlink:hover { color: var(--gold-dunkel); }