/* ===========================================================================
 * brand.css  —  Marke „Praxis am Campus / Dr. Kappek Physio Leverkusen"
 * Farben + Font gezogen von physiotherapie-in-leverkusen.de (gerendert).
 * Geteilt von index.html + danke.html. 0 externe Requests (Roboto self-hosted).
 * =========================================================================== */

@font-face { font-family:'Roboto'; src:url('fonts/roboto-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/roboto-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/roboto-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --brand:        #16345A;   /* Navy — CTA / stark (Seiten-Buttons)     */
  --brand-strong: #0f2540;   /* dunkleres Navy (Gradient-Tiefe)         */
  --accent:       #89BAC2;   /* Petrol — Signaturfarbe der Praxis       */
  --accent-deep:  #5f97a1;   /* satteres Petrol (Text-Kontrast/Hover)   */
  --accent-050:   #eef4f5;   /* heller Petrol-Tint (Flächen)            */
  --accent-100:   #dfeaec;   /* Petrol-Tint (Linien/Chips)              */
  --ink:          #191919;   /* Fließtext                               */
  --muted:        #5a5a5a;   /* Sekundärtext                            */
  --line:         #d7e5e8;   /* Rahmen / Trennlinien                    */
  --page:         #ffffff;
  --page-alt:     #f4f7f8;   /* helle Section-Fläche                    */
  --radius:       18px;
  --radius-lg:    24px;
  --radius-pill:  999px;
  --shadow:       0 18px 50px rgba(22,52,90,.10);
  --shadow-soft:  0 6px 20px rgba(22,52,90,.06);
  --ease:         cubic-bezier(.22,.61,.36,1);
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--page);
  line-height: 1.6;
  font-synthesis: none;          /* kein Faux-Bold */
  -webkit-font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }