/* ==========================================================================
   Antrophy – Startseite
   base.css · Design-Tokens, Schriften, Reset und Basis-Typografie
   (Desktop-Version – responsive Anpassungen folgen separat)
   ========================================================================== */

/* --- Schriften ----------------------------------------------------------- */
@font-face {
  font-family: "Inter CST";
  src: url("../fonts/Inter-VariableFont_opszwght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sourceserif CSTM";
  src: url("../fonts/SourceSerif4-VariableFont_opszwght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sourceserif CSTM";
  src: url("../fonts/SourceSerif4-Italic-VariableFont_opszwght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* --- Design-Tokens ------------------------------------------------------- */
:root {
  /* Schriften */
  --font-primary: "Inter CST", Arial, sans-serif;
  --font-secondary: "Sourceserif CSTM", Georgia, serif;

  /* Schriftgrößen – Überschriften */
  --h1-l: 72px;
  --h1-m: 60px;
  --h1-s: 36px;
  --h2-l: 46px;
  --h2-m: 60px;
  --h2-s: 30px;
  --h3-xl: 44px;
  --h3-l: 40px;
  --h3-m: 30px;
  --h3-s: 26px;

  /* Schriftgrößen – Fließtext */
  --text-xl: 22px;
  --text-l: 20px;
  --text-m: 16px;
  --text-s: 14px;
  --text-xs: 12px;
  --text-xxs: 10px;

  /* Zeilenhöhen */
  --lh-l: 170%;
  --lh-m: 130%;
  --lh-s: 120%;
  --lh-100: 100%;

  /* Schriftstärken */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* Button-Text */
  --button-text: var(--text-m);
  --button-text-weight: var(--fw-500);

  /* Farben – Marke */
  --brand-primary: #000;
  --brand-gold: #ffe2c2;
  --brand-grey-blue: #9fafcd;
  --brand-dark-blue: #1d2025;

  /* Farben – Hintergrund */
  --bg-secondary: #f7f7f7;
  --bg-alt: #1b1b1b;
  --bg-third: #6e9bff;
  --bg-primary: #000;
  --bg-grey: #959595;

  /* Farben – Text */
  --text-primary: #2f2f2f;
  --text-secondary: #3a3a3a;
  --text-grey: #b4b4b4;
  --text-grey-bright: #d2d2d2;
  --text-light-blue: #9fafcd;
  --link: #280dc3;
  --text-error: #c00;
  --text-success: #467803;
  --text-warning: #b03800;

  /* Farben – Neutral */
  --white: #fff;
  --black: #000;
  --neutral: #666;
  --neutral-dark: #444;
  --neutral-darker: #222;
  --neutral-darkest: #111;
  --neutral-light: #aaa;
  --neutral-lighter: #ccc;
  --neutral-lightest: #eee;

  /* Radien */
  --radius-button: 12px;
  --radius-l: 30px;
  --radius-m: 20px;
  --radius-s: 15px;
  --radius-full: 150px;

  /* Abstände (Gaps) */
  --gap-xs: 0.5rem;
  --gap-s: 1rem;
  --gap-m: 1.5rem;
  --gap-l: 2rem;
  --gap-xl: 4rem;
  --gap-xxl: 6rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg-secondary);
  font-family: var(--font-primary);
  color: var(--brand-primary);
  font-size: var(--text-m);
  line-height: var(--lh-l);
  font-weight: var(--fw-400);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  display: inline-block;
}

/* --- Basis-Typografie ---------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-secondary);
  font-weight: var(--fw-600);
  margin: 0;
}

h1 {
  color: var(--text-secondary);
  font-size: var(--h1-m);
  line-height: var(--lh-s);
  letter-spacing: -2px;
}

h2 {
  color: var(--text-secondary);
  font-size: var(--h2-m);
  line-height: var(--lh-s);
  letter-spacing: -1.5px;
}

h3 {
  color: var(--brand-primary);
  font-size: var(--h3-m);
  line-height: var(--lh-m);
  letter-spacing: -0.75px;
}

p {
  color: var(--text-secondary);
  font-size: var(--text-m);
  line-height: var(--lh-l);
  font-weight: var(--fw-400);
  margin: 0;
}

a {
  font-family: var(--font-primary);
  color: #333;
  text-decoration: none;
}

strong {
  font-weight: var(--fw-600);
}

/* --- Layout-Helfer (ersetzen die Webflow-Flex-Utilities) ----------------- */
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* LinkedIn-Icon (im Webflow-Export ohne eigene Regel) */
.linkedin-block {
  display: inline-block;
}

.linkedin {
  width: 28px;
  height: 28px;
}