/* ==========================================================
   Ergotherapie con Amor
   base.css

   Enthält:
   - Globale Design-Variablen
   - CSS-Reset
   - Grundtypografie
   - Globale HTML-Elemente

   Noch NICHT enthalten:
   - Layout
   - Komponenten
   - Header
   - Hero
   - Cards
   - Formulare
   - Footer
   - Responsive Breakpoints
   ========================================================== */


/* ==========================================================
   1. Farben und globale Variablen
   ========================================================== */

:root {

  /* --------------------------------------------------------
     Hauptfarben
     -------------------------------------------------------- */

  --color-primary: #9b1f63;
  --color-primary-dark: #721545;
  --color-primary-soft: #f7e4ee;


  /* --------------------------------------------------------
     Rosa-Töne
     -------------------------------------------------------- */

  --color-pink: #e79abb;
  --color-pink-light: #fceff5;


  /* --------------------------------------------------------
     Türkis-Töne
     -------------------------------------------------------- */

  --color-teal: #148f79;
  --color-teal-dark: #0c6d5c;
  --color-teal-soft: #e3f5f1;


  /* --------------------------------------------------------
     Akzentfarben
     -------------------------------------------------------- */

  --color-violet: #4f2248;
  --color-orange: #eb7b27;


  /* --------------------------------------------------------
     Textfarben
     -------------------------------------------------------- */

  --color-text: #342d33;
  --color-text-light: #6d626a;


  /* --------------------------------------------------------
     Flächen und Hintergründe
     -------------------------------------------------------- */

  --color-white: #ffffff;
  --color-background: #fffafd;
  --color-surface: #ffffff;
  --color-border: #ead8e2;


  /* --------------------------------------------------------
     Statusfarben
     -------------------------------------------------------- */

  --color-success: #187c65;
  --color-error: #b42318;


  /* --------------------------------------------------------
     Schatten
     -------------------------------------------------------- */

  --shadow-small:
    0 4px 18px rgba(79, 34, 72, 0.08);

  --shadow-medium:
    0 12px 35px rgba(79, 34, 72, 0.14);


  /* --------------------------------------------------------
     Rundungen
     -------------------------------------------------------- */

  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 28px;


  /* --------------------------------------------------------
     Maximale Inhaltsbreite

     Diese Variable wird später von layout.css verwendet.
     -------------------------------------------------------- */

  --content-width: 1180px;
}


/* ==========================================================
   2. CSS-Reset
   ========================================================== */

/*
  Sorgt dafür, dass padding und border in die definierte
  Breite beziehungsweise Höhe eines Elements eingerechnet
  werden.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ==========================================================
   3. HTML-Grundeinstellungen
   ========================================================== */

html {
  scroll-behavior: smooth;
}


/* ==========================================================
   4. Body
   ========================================================== */

body {
  margin: 0;

  color: var(--color-text);
  background: var(--color-background);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 16px;
  line-height: 1.65;
}


/*
  Wird aktuell vom mobilen Navigationsmenü verwendet.

  Auch wenn das Menü später einen eigenen Controller bekommt,
  bleibt diese globale Zustandsklasse zunächst hier erhalten.
*/

body.menu-open {
  overflow: hidden;
}


/* ==========================================================
   5. Bilder
   ========================================================== */

img {
  display: block;

  max-width: 100%;
  height: auto;
}


/* ==========================================================
   6. Links
   ========================================================== */

a {
  color: var(--color-primary);
}


/*
  Entfernt auf mobilen WebKit-Browsern die graue
  Tap-Markierung bei Links und Buttons.
*/

button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   7. Formularelemente
   ========================================================== */

/*
  Formularfelder übernehmen die Schriftart der Website,
  statt Browser-Standardfonts zu verwenden.
*/

button,
input,
select,
textarea {
  font: inherit;
}


/* ==========================================================
   8. Adresse
   ========================================================== */

/*
  Browser stellen <address> standardmäßig häufig kursiv dar.
  Für die Praxisadresse soll die normale Schrift verwendet
  werden.
*/

address {
  font-style: normal;
}


/* ==========================================================
   9. Überschriften
   ========================================================== */

h1,
h2,
h3 {
  color: var(--color-violet);
  line-height: 1.2;
}


/*
  clamp() sorgt für eine fließend responsive Schriftgröße.
  Diese Werte stammen aus dem bisherigen Design.
*/

h1 {
  font-size: clamp(
    2.65rem,
    5.3vw,
    4.2rem
  );
}


h2 {
  margin-top: 0;

  font-size: clamp(
    1.8rem,
    4vw,
    2.8rem
  );
}


h3 {
  font-size: 1.25rem;
}


/* ==========================================================
   10. Absätze
   ========================================================== */

p {
  margin-top: 0;
}


/* ==========================================================
   11. Sections
   ========================================================== */

/*
  Verhindert später bei Sprungmarken, dass eine Section
  vollständig hinter dem Sticky Header verschwindet.

  Das ist eine globale Grundeinstellung und deshalb hier
  sinnvoll aufgehoben.
*/

section {
  scroll-margin-top: 95px;
}