/* =========================================
   NOVA TYPOGRAPHY SYSTEM
   
   Struktur:
   1. CSS Custom Properties (Typografiewerte)
   2. Basis
   3. Headlines (h1–h6 + Elementor-Overrides gebündelt)
   4. Body Text
   5. Utility-Klassen (.txt-*)
   6. Spezial-Komponenten
   7. Mobile
   8. Legal
========================================= */


/* =========================================
   1. CSS CUSTOM PROPERTIES
   Alle Größen- und Linienwerte zentral –
   einmal ändern, überall wirksam.
========================================= */

:root {
  /* Headline-Größen (Desktop) */
  --h1-size:        clamp(52px, 7vw, 96px);
  --h1-line:        clamp(52px, 7vw, 96px);
  --h1-spacing:     1.2px;

  --h2-size:        clamp(44px, 6vw, 80px);
  --h2-line:        1;
  --h2-spacing:     1.2px;

  --h3-size:        clamp(30px, 4vw, 50px);
  --h3-line:        1.1;

  --h4-size:        clamp(24px, 3vw, 35px);
  --h4-line:        1.15;

  --h5-size:        clamp(22px, 2.5vw, 30px);
  --h5-line:        1.2;

  --h6-size:        clamp(18px, 2vw, 24px);
  --h6-line:        1.25;

  /* Headline-Größen (Mobile ≤ 767px) */
  --h1-size-m:      clamp(40px, 11vw, 56px);
  --h1-line-m:      0.95;
  --h1-spacing-m:   0.5px;

  --h2-size-m:      clamp(34px, 9vw, 48px);
  --h2-line-m:      1;
  --h2-spacing-m:   0.5px;

  --h3-size-m:      clamp(28px, 7vw, 36px);
  --h4-size-m:      clamp(24px, 6vw, 30px);
  --h5-size-m:      clamp(20px, 5vw, 26px);
  --h6-size-m:      clamp(18px, 4.5vw, 22px);

  /* Body */
  --body-size:      16px;
  --body-line:      1.6;
}


/* =========================================
   2. BASIS
========================================= */

body {
  font-family: var(--font-body);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
li {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-style: normal;
  font-weight: 400;
}


/* =========================================
   3. HEADLINES
   h1–h6 und .elementor-widget-heading in
   einem Block, ohne Wiederholung.
   Elementor übernimmt die nativen Werte via
   CSS Custom Properties automatisch.
========================================= */

h1,
.elementor-widget-heading h1.elementor-heading-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-spacing);
}

h2,
.elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-spacing);
}

h3,
.elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
}

h4,
.elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
}

h5,
.elementor-widget-heading h5.elementor-heading-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}

h6,
.elementor-widget-heading h6.elementor-heading-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  font-size: var(--h6-size);
  line-height: var(--h6-line);
}


/* =========================================
   4. UTILITY-KLASSEN (.txt-*)
   Passen font-size auf Kind-Elemente an,
   ohne font-family oder style zu überschreiben.
========================================= */

.txt-small,
.txt-small p,
.txt-small li,
.txt-small .elementor-heading-title {
  font-size: clamp(18px, 2vw, 22px);
}

.txt-medium,
.txt-medium p,
.txt-medium li,
.txt-medium .elementor-heading-title {
  font-size: clamp(20px, 2vw, 30px);
}

.txt-big,
.txt-big p,
.txt-big li,
.txt-big .elementor-heading-title {
  font-size: clamp(22px, 2vw, 40px);
}

.txt-zitat,
.txt-zitat p,
.txt-zitat .elementor-heading-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.1;
}


/* =========================================
   5. SPEZIAL-KOMPONENTEN
========================================= */

/* ----- Contact Text ----- */
.contact-text,
.contact-text p {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 50px);
  line-height: clamp(34px, 4vw, 60px);
  letter-spacing: 0;
}

/* ----- Quotes (Großformat) ----- */
.quote,
.quote p,
.quote .elementor-heading-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(70px, 7vw, 100px);
  line-height: clamp(70px, 7vw, 100px);
  letter-spacing: 0;
  margin: 0;
}

/* ----- About Us (Akzentfarbe + Überformat) ----- */
.about-us .elementor-widget-heading h1.elementor-heading-title,
.about-us h1.elementor-heading-title,
.about-us .elementor-heading-title {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  color: #FF6024;
  font-size: clamp(60px, 8vw, 120px);
  line-height: clamp(60px, 8vw, 120px);
  letter-spacing: 0;
  margin: 0;
}

/* ----- Numbers / Elementor Counter ----- */
.numbers .elementor-counter .elementor-counter-number {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(60px, 8vw, 120px);
  line-height: clamp(60px, 8vw, 120px);
  letter-spacing: 0;
}

.numbers .elementor-counter .elementor-counter-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px); /* entspricht .txt-medium */
  line-height: 1.4;
}

/* ----- Footer ----- */
.footer-claim,
.footer-claim p {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 80px);
  line-height: clamp(36px, 4.5vw, 80px);
  letter-spacing: 0;
}

.footer-adress,
.footer-adress p {
  font-size: clamp(20px, 5vw, 24px);
  line-height: clamp(24px, 5vw, 28px);
}

.footer-location,
.footer-location p {
  font-weight: 600;
  font-size: clamp(24px, 6vw, 30px);
}

/* ----- Inline Bullets (Pill-Tags) ----- */
.inline-bullets li {
  border: 1px solid #FF6024;
  border-radius: 20px;
  padding: 5px 10px !important;
  margin: 5px !important;
}

/* ----- BRAND (Marke unter Logo) ----- */

.brand,
.brand p,
.brand .elementor-heading-title {
  font-family: var(--font-headline); 
  font-weight: 400;
  font-style: italic;	
  font-size: clamp(20px, 5vw, 22px);
  text-transform: none;
  letter-spacing: 0px;;
}

/*    SERVICES ACCORDION TYPOGRAPHY */

.elementor-widget-n-accordion .e-n-accordion-item-title-text {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;

  margin: 0;

  font-size: clamp(30px, 4vw, 50px) !important; 

  line-height: var(--h2-line);
  letter-spacing: var(--h2-spacing);
}


/* =========================================
   6. MOBILE (≤ 767px)
   Nur Overrides – alles andere erbt Desktop.
========================================= */

@media (max-width: 767px) {

  /* Headlines */
  h1,
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: var(--h1-size-m);
    line-height: var(--h1-line-m);
    letter-spacing: var(--h1-spacing-m);
  }

  h2,
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: var(--h2-size-m);
    line-height: var(--h2-line-m);
    letter-spacing: var(--h2-spacing-m);
  }

  h3,
  .elementor-widget-heading h3.elementor-heading-title {
    font-size: var(--h3-size-m);
  }

  h4,
  .elementor-widget-heading h4.elementor-heading-title {
    font-size: var(--h4-size-m);
  }

  h5,
  .elementor-widget-heading h5.elementor-heading-title {
    font-size: var(--h5-size-m);
  }

  h6,
  .elementor-widget-heading h6.elementor-heading-title {
    font-size: var(--h6-size-m);
  }

  /* Utility */
  .txt-small,
  .txt-small p,
  .txt-small li,
  .txt-small .elementor-heading-title {
    font-size: clamp(18px, 4.5vw, 20px);
  }

  .txt-medium,
  .txt-medium p,
  .txt-medium li,
  .txt-medium .elementor-heading-title {
    font-size: clamp(20px, 5vw, 24px);
  }

  .txt-big,
  .txt-big p,
  .txt-big li,
  .txt-big .elementor-heading-title {
    font-size: clamp(22px, 6vw, 30px);
  }

  .txt-zitat,
  .txt-zitat p,
  .txt-zitat .elementor-heading-title {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.5;
  }
}


/* =========================================
   7. LEGAL
   Überschreibt Headline-Größen innerhalb
   von .legal-Seiten auf lesbare Werte.
   !important nötig, da Elementor inline
   styles setzt.
========================================= */

/* --- Headings --- */
.legal h1,
.legal .elementor-heading-title.elementor-size-default,
.legal .elementor-widget-heading h1.elementor-heading-title,
.legal .elementor-widget-text-editor h1,
.legal .elementor-text-editor h1 {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.08 !important;
   font-style: italic;
  letter-spacing: 0.4px !important;
  margin: 0 0 0.6em !important;
}

.legal h2,
.legal .elementor-widget-heading h2.elementor-heading-title,
.legal .elementor-widget-text-editor h2,
.legal .elementor-text-editor h2 {
  font-family: var(--font-headline);
  font-size: clamp(26px, 3vw, 36px) !important;
  line-height: 1.15 !important;
   font-style: italic;
  letter-spacing: 0.3px !important;
  margin: 0 0 0.65em !important;
}

.legal h3,
.legal .elementor-widget-heading h3.elementor-heading-title,
.legal .elementor-widget-text-editor h3,
.legal .elementor-text-editor h3 {
  font-family: var(--font-headline);
  font-size: clamp(22px, 2.3vw, 28px) !important;
  line-height: 1.2 !important;
   font-style: italic;
  letter-spacing: 0.2px !important;
  margin: 0 0 0.7em !important;
}

.legal h4,
.legal .elementor-widget-heading h4.elementor-heading-title,
.legal .elementor-widget-text-editor h4,
.legal .elementor-text-editor h4 {
  font-family: var(--font-headline);
  font-size: clamp(20px, 2vw, 24px) !important;
  line-height: 1.25 !important;
   font-style: italic;
  margin: 0 0 0.75em !important;
}

.legal h5,
.legal .elementor-widget-heading h5.elementor-heading-title,
.legal .elementor-widget-text-editor h5,
.legal .elementor-text-editor h5 {
  font-family: var(--font-headline);
  font-size: clamp(18px, 1.8vw, 20px) !important;
  line-height: 1.3 !important;
   font-style: italic;
  margin: 0 0 0.8em !important;
}

.legal h6,
.legal .elementor-widget-heading h6.elementor-heading-title,
.legal .elementor-widget-text-editor h6,
.legal .elementor-text-editor h6 {
  font-family: var(--font-headline);
  font-size: 16px !important;
  line-height: 1.35 !important;
   font-style: italic;
  margin: 0 0 0.85em !important;
}

/* --- Fließtext --- */
.legal p,
.legal li,
.legal .elementor-widget-text-editor p,
.legal .elementor-widget-text-editor li,
.legal .elementor-text-editor p,
.legal .elementor-text-editor li {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* --- Listen-Abstände --- */
.legal p,
.legal ul,
.legal ol,
.legal .elementor-widget-text-editor ul,
.legal .elementor-widget-text-editor ol,
.legal .elementor-text-editor ul,
.legal .elementor-text-editor ol {
  margin-bottom: 1em !important;
}

.legal li + li {
  margin-top: 0.25em;
}

/* --- Links --- */
.legal a,
.legal .elementor-widget-text-editor a,
.legal .elementor-text-editor a {
  word-break: break-word;
}

/* --- Legal Mobile --- */
@media (max-width: 767px) {

  .legal h1,
  .legal .elementor-heading-title.elementor-size-default,
  .legal .elementor-widget-heading h1.elementor-heading-title,
  .legal .elementor-widget-text-editor h1,
  .legal .elementor-text-editor h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.2px !important;
  }

  .legal h2,
  .legal .elementor-widget-heading h2.elementor-heading-title,
  .legal .elementor-widget-text-editor h2,
  .legal .elementor-text-editor h2 {
    font-size: clamp(24px, 6.5vw, 30px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.2px !important;
  }

  .legal h3,
  .legal .elementor-widget-heading h3.elementor-heading-title,
  .legal .elementor-widget-text-editor h3,
  .legal .elementor-text-editor h3 {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.2 !important;
  }

  .legal h4,
  .legal .elementor-widget-heading h4.elementor-heading-title,
  .legal .elementor-widget-text-editor h4,
  .legal .elementor-text-editor h4 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.25 !important;
  }

  .legal h5,
  .legal .elementor-widget-heading h5.elementor-heading-title,
  .legal .elementor-widget-text-editor h5,
  .legal .elementor-text-editor h5 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .legal h6,
  .legal .elementor-widget-heading h6.elementor-heading-title,
  .legal .elementor-widget-text-editor h6,
  .legal .elementor-text-editor h6 {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* p und li bleiben bei 16px – kein Override nötig */
}