/* =========================================================
   WCFY – Typografie (Open Sans, clamp-first)
   Voraussetzung: Open Sans @font-face ist geladen
========================================================= */

:root{
  /* Schriftfamilie */
  --wcfy-font-sans: "Open Sans", Arial, sans-serif!important;

  /* Gewichte (Open Sans) */
  --wcfy-fw-light: 300;
  --wcfy-fw-regular: 400;
  --wcfy-fw-semibold: 600;
  --wcfy-fw-bold: 700;
  --wcfy-fw-extrabold: 800;

  /* Lesbarkeit */
  --wcfy-lh-body: 1.72;
  --wcfy-lh-tight: 1.18;
  --wcfy-lh-title: 1.12;

  /* Buchstabenabstände: minimal, ruhig */
  --wcfy-ls-body: 0.005em;
  --wcfy-ls-title: -0.010em;
  --wcfy-ls-overline: 0.08em;

  /* Fluid Größen (Basis → Display) */
  --wcfy-fs-0: clamp(0.875rem, 0.845rem + 0.16vw, 0.95rem);   /* klein */
  --wcfy-fs-1: clamp(1.00rem, 0.955rem + 0.22vw, 1.10rem);    /* Basis */
  --wcfy-fs-2: clamp(1.125rem, 1.05rem + 0.38vw, 1.30rem);    /* lead small */
  --wcfy-fs-3: clamp(1.25rem, 1.12rem + 0.62vw, 1.65rem);     /* h3 */
  --wcfy-fs-4: clamp(1.55rem, 1.28rem + 1.05vw, 2.20rem);     /* h2 */
  --wcfy-fs-5: clamp(1.95rem, 1.55rem + 1.60vw, 2,75rem);     /* h1 */
  --wcfy-fs-6: clamp(2.30rem, 1.70rem + 2.20vw, 3.60rem);     /* display */

  /* Abstände (vertikale Rhythmik) */
  --wcfy-flow-1: clamp(0.55rem, 0.50rem + 0.25vw, 0.75rem);
  --wcfy-flow-2: clamp(0.85rem, 0.75rem + 0.45vw, 1.15rem);
  --wcfy-flow-3: clamp(1.10rem, 0.95rem + 0.70vw, 1.60rem);
}

/* =========================================================
   Basis
========================================================= */

.wcfy-site{
  font-family: var(--wcfy-font-sans);
  letter-spacing: var(--wcfy-ls-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wcfy-site p{
  font-size: var(--wcfy-fs-1);
  line-height: var(--wcfy-lh-body);
  margin: 0 0 var(--wcfy-flow-2) 0;
  font-weight: var(--wcfy-fw-regular);
}

/* Wenn Porto an manchen Stellen "default-font" erzwingt */
.wcfy-site .default-font{
  font-family: var(--wcfy-font-sans) !important;
}

/* Links (zurückhaltend, nicht schreiend) */
.wcfy-site a{
  text-decoration-thickness: 0.10em;
  text-underline-offset: 0.18em;
}

/* =========================================================
   Überschriften
   Ziel: ruhig, vertrauensvoll, nicht „laut“
========================================================= */

.wcfy-site h1,
.wcfy-site h2,
.wcfy-site h3,
.wcfy-site h4,
.wcfy-site h5,
.wcfy-site h6{
  font-family: var(--wcfy-font-sans);
  margin: 0 0 var(--wcfy-flow-2) 0;
  letter-spacing: var(--wcfy-ls-title);
}

.wcfy-site h1{
  font-size: var(--wcfy-fs-5);
  line-height: var(--wcfy-lh-title);
  font-weight: var(--wcfy-fw-regular);
}

.wcfy-site h2{
  font-size: var(--wcfy-fs-4);
  line-height: var(--wcfy-lh-title);
  font-weight: var(--wcfy-fw-regular);
}

.wcfy-site h3{
  font-size: var(--wcfy-fs-3);
  line-height: var(--wcfy-lh-tight);
  font-weight: var(--wcfy-fw-regular);
}

.wcfy-site h4{
  font-size: clamp(1.10rem, 1.03rem + 0.30vw, 1.25rem);
  line-height: var(--wcfy-lh-tight);
  font-weight: var(--wcfy-fw-regular);
}

.wcfy-site h5{
  font-size: clamp(1.00rem, 0.97rem + 0.18vw, 1.10rem);
  line-height: var(--wcfy-lh-tight);
  font-weight: var(--wcfy-fw-regular);
}

.wcfy-site h6{
  font-size: var(--wcfy-fs-0);
  line-height: var(--wcfy-lh-tight);
  font-weight: var(--wcfy-fw-semibold);
}

/* =========================================================
   Lead-Text / Einleitung
========================================================= */

.wcfy-site .wcfy-lead{
  font-size: var(--wcfy-fs-2);
  line-height: 1.62;
  font-weight: var(--wcfy-fw-regular);
  margin: 0 0 var(--wcfy-flow-3) 0;
}

/* Für sehr kurze, prägnante Intro-Zeilen */
.wcfy-site .wcfy-lead--compact{
  font-size: clamp(1.05rem, 1.00rem + 0.30vw, 1.20rem);
  line-height: 1.55;
}

/* =========================================================
   Mikrotypografie
========================================================= */

.wcfy-site strong{
  font-weight: var(--wcfy-fw-bold);
}

.wcfy-site em{
  font-style: italic;
}

/* kleine Randnotizen, Hilfetexte */
.wcfy-site small,
.wcfy-site .wcfy-small{
  font-size: var(--wcfy-fs-0);
  line-height: 1.55;
  font-weight: var(--wcfy-fw-regular);
}

/* Overline / Eyebrow (z. B. „Kinder- und Jugendhilfe“) */
.wcfy-site .wcfy-overline{
  font-size: var(--wcfy-fs-0);
  letter-spacing: var(--wcfy-ls-overline);
  text-transform: uppercase;
  font-weight: var(--wcfy-fw-semibold);
  margin: 0 0 var(--wcfy-flow-1) 0;
}

/* =========================================================
   Zitate – passend zum Ton („Geteilte Sorgen…“)
========================================================= */

.wcfy-site blockquote{
  margin: var(--wcfy-flow-3) 0;
  padding: var(--wcfy-flow-2) var(--wcfy-flow-3);
  font-size: clamp(1.05rem, 1.00rem + 0.35vw, 1.30rem);
  line-height: 1.60;
  font-weight: var(--wcfy-fw-regular);
  font-style: italic;
}

.wcfy-site blockquote cite{
  display: block;
  margin-top: var(--wcfy-flow-1);
  font-style: normal;
  font-weight: var(--wcfy-fw-semibold);
  font-size: var(--wcfy-fs-0);
  letter-spacing: var(--wcfy-ls-body);
}

/* =========================================================
   Listen – gut lesbar, ruhiger Rhythmus
========================================================= */

.wcfy-site ul,
.wcfy-site ol{
  margin: 0 0 var(--wcfy-flow-2) 1.15em;
  padding: 0;
  line-height: var(--wcfy-lh-body);
}

.wcfy-site li{
  margin-bottom: clamp(0.35rem, 0.30rem + 0.15vw, 0.50rem);
}

/* =========================================================
   Buttons/Badges (Typo), falls Porto stark abweicht
========================================================= */

.wcfy-site .btn{
  font-family: var(--wcfy-font-sans);
  font-weight: var(--wcfy-fw-semibold);
  letter-spacing: 0.01em;
}

.wcfy-site .badge{
  font-family: var(--wcfy-font-sans);
  font-weight: var(--wcfy-fw-semibold);
  letter-spacing: 0.02em;
}

/* =========================================================
   Formulare: Labels & Hilfetexte
========================================================= */

.wcfy-site label,
.wcfy-site .form-label{
  font-family: var(--wcfy-font-sans);
  font-weight: var(--wcfy-fw-semibold);
  letter-spacing: 0.01em;
}

.wcfy-site .form-text{
  font-size: var(--wcfy-fs-0);
  line-height: 1.55;
}