/* ==========================================================================
   marke.css – gemeinsame Marken-Grundlage für alle Seiten unter /websites
   Hischam El-Sobhi · Zentrum für Gesundheitsmedizin
   Eingebunden von: coaching-neu/*.html und erstgespraech/index.html
   Beschreibung der Regeln: ../marke.md
   ========================================================================== */

/* ---------- Schrift: Inter, selbst gehostet (keine Google-Server) -------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Kernfarben ---------- */
  --marke-dunkel:          #132019;  /* Hauptfarbe: Header, Footer, dunkle Sektionen, Fließtext */
  --marke-dunkel-2:        #1B2E24;  /* Verlauf-Partner für dunkle Flächen */
  --marke-gruen:           #178048;  /* Markenfarbe: Überschriften, Häkchen, Icons */
  --marke-gruen-hell:      #22A35F;  /* Hover, Details, Akzente (nicht für Fließtext auf Weiß) */
  --marke-gruen-auf-dunkel:#4FBE80;  /* Grün für Text auf --marke-dunkel (7,2 : 1) */
  --marke-akzent:          #D05A3D;  /* Terrakotta: alle primären Buttons / CTAs */
  --marke-akzent-hover:    #B44A30;  /* Terrakotta dunkler für Hover / Active */
  --marke-akzent-auf-dunkel:#E07A60; /* Terrakotta für Text auf --marke-dunkel (5,7 : 1) */

  /* ---------- Flächen ---------- */
  --marke-weiss:           #FFFFFF;
  --marke-mint:            #F4F8F6;  /* heller Sektions-Hintergrund */
  --marke-trenner:         #E7F5EC;  /* Sektionstrenner, Linien, Icon-Hintergründe */

  /* ---------- Text ---------- */
  --marke-text:            #132019;
  --marke-text-2:          #63736C;  /* Sekundärtext (5,0 : 1 auf Weiß, 4,7 : 1 auf Mint) */

  /* ---------- Form ---------- */
  --marke-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --marke-radius-btn: 13px;          /* Buttons 12–14 px */
  --marke-radius-karte: 16px;
  --marke-schatten: 0 10px 26px rgba(19, 32, 25, .10);
  --marke-fokus: 0 0 0 3px rgba(34, 163, 95, .45);

  /* ---------- Farbskalen als RGB-Kanäle (für Tailwind, siehe marke-tailwind.js) ----------
     Grün-Skala (ersetzt Tailwind blue/sky/cyan/teal/emerald/green/indigo) */
  --mk-gruen-50: 238 248 242;  --mk-gruen-100: 231 245 236; --mk-gruen-200: 200 234 213;
  --mk-gruen-300: 149 214 175; --mk-gruen-400: 79 190 128;  --mk-gruen-500: 34 163 95;
  --mk-gruen-600: 23 128 72;   --mk-gruen-700: 18 103 58;   --mk-gruen-800: 15 79 46;
  --mk-gruen-900: 12 58 34;    --mk-gruen-950: 8 38 26;
  /* Tannen-Skala, dunkles Grün (ersetzt purple/violet/fuchsia) */
  --mk-tanne-50: 237 243 240;  --mk-tanne-100: 220 232 225; --mk-tanne-200: 181 207 192;
  --mk-tanne-300: 134 176 154; --mk-tanne-400: 79 138 107;  --mk-tanne-500: 43 106 74;
  --mk-tanne-600: 31 81 57;    --mk-tanne-700: 24 63 45;    --mk-tanne-800: 20 47 35;
  --mk-tanne-900: 19 32 25;    --mk-tanne-950: 11 20 15;
  /* Terrakotta-Skala (ersetzt yellow/amber/orange) */
  --mk-terra-50: 252 241 238;  --mk-terra-100: 249 224 217; --mk-terra-200: 242 191 177;
  --mk-terra-300: 234 156 136; --mk-terra-400: 224 122 96;  --mk-terra-500: 208 90 61;
  --mk-terra-600: 180 74 48;   --mk-terra-700: 150 60 39;   --mk-terra-800: 122 50 33;
  --mk-terra-900: 100 41 28;   --mk-terra-950: 60 24 16;
  /* Neutral-Skala, leicht grün getönt (ersetzt gray/slate/zinc/neutral/stone) */
  --mk-neutral-50: 244 248 246;  --mk-neutral-100: 231 240 235; --mk-neutral-200: 213 226 218;
  --mk-neutral-300: 183 198 190; --mk-neutral-400: 141 157 149; --mk-neutral-500: 99 115 108;
  --mk-neutral-600: 78 93 86;    --mk-neutral-700: 52 67 60;    --mk-neutral-800: 31 46 39;
  --mk-neutral-900: 19 32 25;    --mk-neutral-950: 11 20 15;
}

/* ---------- Grundlage ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--marke-font);
  color: var(--marke-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Buttons ----------
   .marke-btn        vollständiger Button (Erstgespräch-Seite, neue Seiten)
   .marke-btn-farbe  nur Farbe/Radius/Hover – zum Nachrüsten bestehender
                     Tailwind-Buttons, deren Abstände erhalten bleiben sollen */
.marke-btn,
.marke-btn-farbe {
  background: var(--marke-akzent);
  color: #fff;
  font-weight: 700;
  border-radius: var(--marke-radius-btn);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.marke-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .9em 1.6em;
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.2;
  box-shadow: 0 10px 22px rgba(208, 90, 61, .28);
}
.marke-btn:hover,
.marke-btn-farbe:hover {
  background: var(--marke-akzent-hover);
  color: #fff;
}
.marke-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(180, 74, 48, .34); }
.marke-btn:active,
.marke-btn-farbe:active { transform: translateY(0); background: var(--marke-akzent-hover); }
.marke-btn:focus-visible,
.marke-btn-farbe:focus-visible { outline: none; box-shadow: var(--marke-fokus); }

/* Sekundär: Umriss auf dunklem Grund (z. B. "Workshop" im Header) */
.marke-btn--umriss {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .75);
  box-shadow: none;
}
.marke-btn--umriss:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* Sekundär: Umriss auf hellem Grund */
.marke-btn--umriss-hell {
  background: transparent;
  color: var(--marke-gruen);
  border-color: var(--marke-gruen);
  box-shadow: none;
}
.marke-btn--umriss-hell:hover { background: var(--marke-trenner); color: var(--marke-gruen); }

/* Klein: Header / Navigation */
.marke-btn--klein {
  padding: .55em 1em;
  font-size: .875rem;
  box-shadow: none;
}

/* ---------- Kleine Helfer ---------- */
.marke-haken { color: var(--marke-gruen); }
.marke-bg-mint { background: var(--marke-mint); }
.marke-bg-dunkel { background: var(--marke-dunkel); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .marke-btn, .marke-btn-farbe { transition: none; }
  .marke-btn:hover { transform: none; }
}