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

:root {

  --font-head: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  --lh-tight: 1.1;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-xxl: 1.6rem;


  --bg-nav: #3a3a38;

  /* Hintergrund */
  --bg-body: #F2F5F0;

  --bg3: #E6EDE2;

  --text: #1A211C;
  --text-dim: #a09888;
  --text-soft: #4a5e6e;



  /* ------ green -------------------------------- */
  --green: #2D6A4F;
  --green-light: #E8F5EE;
  --green-mid: #40916C;
  --sage: #95B08D;

  /* sanftes, warmes Grün */
  --accent: #7aaa50;
  /* --accent: #7f9a7b; */

  /* ganz helles Grün für Hover/Background */
  /* Text hell */
  --accent-light: #e5ede3;

  --accent-dim: rgba(122, 170, 80, 0.15);

  --drop-hover: rgba(122, 170, 80, 0.1);

  --muted: #6B7A6E;

  /* Sekundär-Akzent Weiches, freundliches Grün */
  --soft-green: #8FA98B;

  /* Tiefer Akzent Seriös, stabil, sehr hochwertig */
  --deep-accent: #4E5E45;

  /* Petrol Tiefer, eleganter Farbakzent */
  --petrol-accent: #3E6B63;

  /* Primärgrün Edles, gedämpftes Grün */
  --primary-green: #6A7F5F;

  /* ----- green  END-------------------------------- */



  /* Dunkelgrau für Text */
  --greyish: #3A3F3C;

  /* Warmes Beige Sehr harmonisch zu deinen hellen Grüntönen */
  --beige-warm: #C8C2B5;

  /* Warmes Beige Bringt Wärme ohne Gelbstich */
  --warm-beige: #D9D4C7;

  /* Dunkles Taupe Für Text, Icons oder Rahmen */
  --dark-grape: #7A7266;

  /* Premium, aber nicht protzig */
  /* Gold-Akzent */
  --copper--gold-accent: #C9B27C;

  /* Kupfer Akzent Warm, modern, hochwertig */
  --copper-accent: #B08A6B;

  --lime: #C8E440;

  /* Anthrazit / tiefes Blaugrau */
  --primary-dark: #2c3e4f;

  /* helles Grau mit Hauch Blau */
  --primary-light: #f0f3f5;

  --white: #ffffff;

  --gray-border: #dee4e8;

  --drop-bg: #2e2e2c;

  --drop-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);

  --max: 1280px;

  --bg-linear-grad: linear-gradient(135deg, #e2e8e7 0%, #d4e2dd 100%);
  --bg-linear-grad2: linear-gradient(135deg, #f0f3f5 0%, #d4e2dd 100%);
  --bg-linear-grad3: linear-gradient(135deg, #d7dfdd 0%, #c9d8d3 100%);
  --bg-linear-grad4: linear-gradient(135deg, #d0d7d6 0%, #c3d1cd 100%);


  /* -- ?? ------------------------------------------ */
  --nav-border: rgba(255, 255, 255, 0.07);


  /* -- Red ------------------------------------------ */
  --border-red: red;
  --nav-item: #c7d1cf;
  --nav-hover: #8fa5a1;


  /* -- Login & Registrieren ------------------------------------------ */
  --ink: #2D6A4F;
  --ink-dark: #1f4e39;
  --paper: #F2F5F0;
  --green: #7aaa50;
  --muted: #5a7a65;
  --border: #c4d9c8;
  --input-bg: #f8fbf7;

}

html {
  scroll-behavior: smooth;
}



body {

  margin: 0;
  padding: 0;

  /* font-family: 'Bebas Neue', sans-serif; */
  font-family: 'DM Sans', sans-serif;  

  /* font-family: "Outfit", sans-serif; */
  /* font-family: "Inter", sans-serif;  */

  /* font-family: 'Montserrat', sans-serif; */
  /* font-family: 'DM Sans', sans-serif; */

  /* font-family: 'Playfair Display', sans-serif; */
  /* font-family: 'DM Sans', sans-serif; */

  /* font-family: 'Sora', sans-serif; */
  /* font-family: 'Manrope', sans-serif; */

  /* font-family: 'Poppins', sans-serif; */
  /* font-family: 'Sans Pro', sans-serif; */

  background: var(--bg-body);
  min-height: 100vh;
  font-family: 'DM Sans', sans-serif;
  /* font-size: 1.1rem; */
  font-weight: 400;
  /* color: var(--text); */
  /* overflow-x: hidden; */
}



/*---------------------------------------------------- */
/* ----------------- LOGO Common --------------------- */
/*---------------------------------------------------- */
.logo-c {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: 0;
  flex-shrink: 0;
  /* background: #c5c5bf; */
}

.logo-icon-c {
  width: 36px;
  height: 36px;
  /* background: #c5c5bf; */
  /* border: 1.5px solid rgba(255, 255, 255, 0.15); */
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon-c svg {
  width: 40px;
  height: 40px;
  /* fill: var(--text); */
  fill: rgb(255, 255, 255);
  opacity: 0.85;
}

.logo-text-c {
  display: flex;
  flex-direction: column;
  /* line-height: 1.1; */
}

.logo-name-c {
  /* font-size: 0.82rem; */
  font-weight: 600;
  /* color: var(--text); */
  color: #c7d1cf;
  /* letter-spacing: 0.06em; */
  /* text-transform: uppercase; */
}

.logo-sub-c {
  font-size: 0.9rem;
  color: var(--text-dim);
  /* letter-spacing: 0.04em; */
  /* text-transform: uppercase; */
}