/* ===========================================================================
   Onda – Textknopf                                 components/buttons/textknopf.css
   Regeln: R14.5.1 (Farbe folgt der Rolle), R14.3.3 (in der Kind-App nur Symbol)
   Stand 2026-09-28 – im Kit auf Jan-Philips Freigabe. Entstanden auf der Website
   (site.css .knopf-text, 17.09.2026: „flacher als der Knopf-Radius des Kits“),
   am 28.09.2026 für Elternbereich und Code-Eingabe übernommen.

   Nur auf Flächen für Erwachsene: Website, Elternbereich, Code-Eingabe.
   Die Kind-App trägt Symbolknöpfe (knoepfe.css), dort steht nie ein Wort auf
   einem Knopf (R14.3.3). Rechteck mit 8 px Rundung, keine Pille.

   Drei Rollen, wie bei den Symbolknöpfen:
     .knopf-text                Pink, die eine Hauptaktion je Seite; bei mehreren
                                eigenständigen Formularen eine je Formular (R14.5.1)
     .knopf-text--neben         Petrol-Hauch, jede weitere Aktion
     :disabled                  Petrol-Tint mit Petrol-Schrift – nie Pink

   .knopf-text--breit           volle Breite (Formulare); unter 720 px ist jeder
                                Textknopf ohnehin volle Breite

   <a class="knopf-text" href="#so">Lerne Onda kennen</a>
   <button class="knopf-text knopf-text--breit" type="submit">Konto anlegen</button>
   =========================================================================== */

.knopf-text {
  display: inline-block;
  box-sizing: border-box;
  min-height: 48px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--onda-radius-textknopf);
  background: var(--action-primary);
  color: var(--onda-white);
  font: var(--onda-w-semibold) 16px/1 var(--onda-font-body);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--onda-shadow-pink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, opacity .2s ease;
}
.knopf-text:not(:disabled):hover { transform: translateY(-1px); }
.knopf-text:not(:disabled):active { transform: scale(.97); }

.knopf-text--neben {
  background: var(--onda-petrol-wash);
  color: var(--onda-petrol-deep);
  box-shadow: none;
}

.knopf-text:disabled {
  background: var(--onda-petrol-tint);
  color: var(--onda-petrol);
  box-shadow: none;
  cursor: default;
}

.knopf-text--breit { display: block; width: 100%; }

@media (max-width: 720px) {
  .knopf-text { display: block; width: 100%; }
}