/* Wiederkehrende Bausteine: Schaltflaechen, Karten, Marken, Sterne, Felder. */

/* --- Schaltflaechen ---------------------------------------------------
   Am Original gemessen: 218x61px, Beschriftung 16px halbfett, Ecken leicht
   gerundet - kein Halbrund. Der Neubau hatte eine Pillenform mit flacher
   Fuellfarbe; beides gehoert nicht zur alten Seite. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-1);
  padding: var(--ab-2) var(--ab-4);
  border: 1px solid transparent;
  border-radius: var(--radius-knopf);
  font-family: var(--schrift-titel);
  font-size: var(--gr-text);
  font-weight: var(--fett-krftg);
  line-height: var(--zeile-text);
  text-align: center;
  text-decoration: none;
  transition: transform var(--dauer-kurz) var(--kurve),
              box-shadow var(--dauer-kurz) var(--kurve),
              filter var(--dauer-kurz) var(--kurve),
              background-color var(--dauer-kurz) var(--kurve);
}

/* Ohne Groesse rendert ein eingebettetes SVG viel zu gross und draengt die
   Beschriftung in die naechste Zeile. */
.knopf svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Die Schrift ist dunkel, nicht weiss: Weiss auf #FF6816 kommt auf 2,9:1.
   Auf dem Verlauf traegt die Tinte durchgehend - 7,0:1 in der Mitte,
   4,83:1 am dunkelsten Ende. */
.knopf--haupt {
  background: var(--verlauf-marke);
  color: var(--farbe-auf-marke);
  box-shadow: var(--schatten-marke);
}
.knopf--haupt:hover {
  color: var(--farbe-auf-marke);
  filter: brightness(1.06);
  transform: translateY(-2px);
}
.knopf--haupt:active { transform: translateY(0); }

.knopf--rand {
  background: transparent;
  border-color: var(--farbe-linie);
  color: var(--farbe-text);
}
.knopf--rand:hover {
  border-color: var(--farbe-text);
  color: var(--farbe-text);
  transform: translateY(-2px);
}

/* auf dunklem Grund */
.knopf--hell {
  background: var(--farbe-karte);
  color: var(--farbe-text);
}
.knopf--hell:hover {
  background: var(--farbe-karte);
  color: var(--farbe-text);
  transform: translateY(-2px);
}

/* Kleine Ausfuehrung, z.B. "Lebenslauf" auf den Teamkarten: 134x52 im
   Original. */
.knopf--klein {
  padding: 0.75rem var(--ab-3);
  font-size: var(--gr-klein);
}

.knopf--breit { width: 100%; }

/* Die Unterzeile im Probestunden-Band ("unverbindlich") steht im Original
   IM Knopf, kleiner und unter der Beschriftung. */
.knopf--zweizeilig { flex-direction: column; gap: 0; }
.knopf__unter {
  font-size: var(--gr-klein);
  font-weight: var(--fett-normal);
  line-height: 1.2;
}

/* --- Karten -----------------------------------------------------------
   Im Original hat KEINE Karte einen Rahmen. Sie stehen mit einem weichen,
   weit gestreuten Schatten auf der Flaeche - der 1px-Rahmen des Neubaus
   liess sie technisch wirken. Gemessen: Radius rund 12px. */
.karte {
  padding: var(--ab-3);
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  background: var(--farbe-karte);
  box-shadow: var(--schatten-ruhe);
}

/* Die graue Ausfuehrung: so liegen die Preiskarten auf dem Creme. */
.karte--ruhig {
  background: var(--farbe-ruhig);
}

.karte--hebt {
  transition: transform var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}
.karte--hebt:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-hoch);
}

/* --- Marke (kleines Etikett ueber Titeln) ------------------------------ */
.marke {
  display: inline-block;
  font-family: var(--schrift-titel);
  font-size: var(--gr-klein);
  font-weight: var(--fett-krftg);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--farbe-marke-tief);
}
.marke--hell { color: var(--farbe-marke); }

/* --- Symbolflaeche ---------------------------------------------------- */
.symbol {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--farbe-marke-hauch);
  color: var(--farbe-marke-tief);
  flex: none;
}
.symbol svg { width: 24px; height: 24px; }

/* --- Sterne (Farbe bewusst markenunabhaengig) ------------------------- */
.sterne {
  display: inline-flex;
  gap: 2px;
  color: var(--farbe-stern);
}
.sterne svg { width: 18px; height: 18px; }

.bewertung {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-1);
  flex-wrap: wrap;
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}
.bewertung strong {
  font-family: var(--schrift-titel);
  font-weight: var(--fett-krftg);
  color: var(--farbe-text);
}

/* --- Hakenliste ------------------------------------------------------- */
.haken {
  display: grid;
  gap: var(--ab-1);
}
.haken li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--ab-1);
  align-items: start;
  font-size: var(--gr-klein);
  line-height: 1.5;
}
/* Der Haken ist im Original korallfarben (gemessen 240,145,112), nicht
   gruen und nicht orange. */
.haken svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--farbe-koralle);
}

/* Die NICHT enthaltenen Punkte stehen im Original blassgrau da (159,159,170
   auf der Karte = 2,2:1). Der Ton hier ist derselbe Gedanke - zurueckgenommen,
   aber lesbar. Das Kreuz allein traegt die Aussage ohnehin nicht; sie haengt
   auch an der Schriftfarbe. */
.kreuze li { color: var(--farbe-text-leise); }
.kreuze li svg { color: var(--farbe-text-leise); }

/* --- Formularfelder (fuer spaeteren Ausbau vorbereitet) --------------- */
.feld {
  display: grid;
  gap: var(--ab-1);
}
.feld label {
  font-size: var(--gr-klein);
  font-weight: var(--fett-halb);
}
.feld input,
.feld textarea {
  padding: var(--ab-2);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-karte);
  transition: border-color var(--dauer-kurz) var(--kurve);
}
.feld input:focus,
.feld textarea:focus { border-color: var(--farbe-marke-tief); }

/* --- Trennlinie ------------------------------------------------------- */
.linie {
  height: 1px;
  border: 0;
  background: var(--farbe-linie);
}

/* --- Kleine Hilfsklassen ----------------------------------------------
   Ersetzen style="..."-Attribute im Markup. Die Inhaltsregel in _headers
   erlaubt keine Inline-Stile (style-src 'self'), sonst braeche das Layout
   erst nach dem Hochladen - lokal faellt so etwas nie auf. */
.mittig      { justify-content: center; }
.luft-oben   { margin-block-start: var(--ab-2); }
.luft-oben-3 { margin-block-start: var(--ab-3); }
.enger-kopf  { margin-block-end: var(--ab-3); }
.abschnitt-wechsel { margin-block: var(--ab-6) var(--ab-5); }
.stapel-eng  { margin-block: var(--ab-3) var(--ab-2); }
.kurzsatz    { max-width: 30rem; }
.fehler__text { max-width: 44rem; }

/* Fliesstext-Kolumne, z.B. "Ueber mich" auf den Profilseiten */
.lesetext {
  display: grid;
  gap: var(--ab-2);
  max-width: var(--breite-text);
  color: var(--farbe-text-leise);
}
.zitatsatz {
  margin-block-start: var(--ab-2);
  font-size: var(--gr-lead);
}

/* Pflichtangabe zu Bewertungen - klein, aber muss auffindbar sein. */
.hinweis {
  margin-block-start: var(--ab-2);
  max-width: var(--breite-text);
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}
.bewertung__quelle {
  font-size: var(--gr-klein);
  color: var(--farbe-marke-tief);
}