/* Coaching-Karte (Foto, Name, Angebote, zwei Knoepfe) - EINE Quelle fuer alle Seiten.
   Genutzt von: index.html (Startseite) und peptid-rechner/index.html (P-81b, Davids Wahl A,
   29.09.2026: "dieselbe Karte wie auf der Startseite, unten vor dem Footer").
   Das Markup steht auf beiden Seiten gleich (Zwilling) - wer es an einer Stelle aendert,
   aendert die andere mit. Die Farb-Tokens (--text, --text-dim, --text-faint, --gold)
   bringt jede Seite selbst mit.
   Bis 29.09.2026 stand dieser Block inline in index.html; umgezogen statt kopiert, damit
   die Karte nicht auf zwei Seiten auseinanderlaeuft (so wie der Footer bis 23.08.). */

/* Wer-ist-David-Karte (B2): RUNDES Foto (Linktree-Stil) + roter Coaching-Button */
.coach-card{display:flex;align-items:center;gap:16px;background:#161513;border:1px solid #3a352f;border-radius:14px;padding:16px 18px;margin-top:22px;}
.cc-foto{flex:0 0 auto;width:112px;height:112px;border-radius:50%;object-fit:cover;border:1px solid #3a352f;}
.cc-name{font-size:16px;font-weight:700;color:var(--text);}
.cc-role{font-size:13px;color:var(--text-dim);margin-top:2px;}
.cc-offers{font-size:12px;color:var(--text-faint);margin-top:5px;}
.cc-offers span{white-space:nowrap;}
/* Zwei getrennte Ziele statt eines Sammel-Buttons (David 13.08.2026): 1:1 Coaching
   fuehrt auf /coaching, Beratungsgespraeche auf /beratung. Desktop nebeneinander,
   Mobil untereinander - das macht der flex-wrap zusammen mit der 100-%-Breite unten. */
.cc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;}
/* N-095: derselbe Coaching-Knopf wie auf allen Unterseiten - Vollton #C62828, Gewicht 800,
   Polsterung 10/16. Auf den Unterseiten sah er seit jeher so aus, nur hier war er ein
   Verlauf mit Gewicht 600. Die Texte bleiben je Seite unveraendert. */
/* N-057: Die zwei Coaching-Knoepfe hatten keine Mindesthoehe - mit 10 px Polsterung
   kamen sie auf rund 38 px und lagen damit unter dem Mass, das der Support-Knopf
   daneben (44) laengst einhaelt. */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:800;padding:10px 16px;min-height:44px;border-radius:8px;text-decoration:none;border:1px solid transparent;}
.cc-btn .arr{font-size:14px;line-height:1;}
/* Primaer = Coaching (das grosse Angebot), sekundaer = Beratung. Gleich gross,
   unterschiedlich laut - zwei gleich knallige Buttons wuerden sich gegenseitig schlagen. */
.cc-btn.primary{background:#C62828;color:#fff;}
.cc-btn.secondary{background:transparent;color:#F5564E;border-color:#C62828;}
.cc-btn:active{transform:scale(.98);}
@media (hover:hover){
  .cc-btn.primary:hover{filter:brightness(1.08);}
  .cc-btn.secondary:hover{background:rgba(229,57,53,.10);}
}
.cc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* Am Handy die ganze Karte stapeln (13.08.2026). Grund gemessen, nicht geschätzt: neben
   dem 112-px-Foto blieben bei 375 px nur 181 px Textspalte - die Angebots-Zeile brach
   dreizeilig um und die Buttons waren schmal. Gestapelt sind es 289 px, die Zeile fällt
   auf zwei, und beide Buttons bekommen volle Tippbreite. Ein kleineres Foto (84 px)
   brachte nur 8 px mehr und hätte nichts gelöst. */
@media (max-width:560px){
  .coach-card{flex-direction:column;align-items:flex-start;gap:12px;}
  .cc-btns{flex-direction:column;}
  .cc-btn{justify-content:center;}
}