/* ============================================================================
   TYPOGRAFIE | RockSolid TAO 1.6.7 | Contao 5.x
   Ritz & Häfliger | Konsolidiert

   Einbindung: main.css -> bereinigte custom.css -> rh_typography.css
   Eine spätere header.css darf die Schriftgrössen nicht erneut definieren.
   Ablage: files/tao/css/rh_typography.css; Schriftdateien: files/tao/fonts/

   Ersetzt alte Typografie-Regeln in custom.css, nicht Layout-/Icon-Regeln.
   Bestehende Inline-Schriftgrössen aus dem Contao-RTE separat entfernen.
   Desktop- und Mobile-Basis steuern Grundtext, RH-H1–H6 und Sondertitel zentral.
   ============================================================================ */

/* 1. Lokal installierte Schriftdateien -------------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/montserrat-v25-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-v25-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-v25-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-v25-latin-600.woff2") format("woff2");
}

/* 2. Einzige zentrale Stelle für Schriftgrössen und -farben ----------------- */
:root {
  /* Schriftfamilien bewusst getrennt:
     Lesetext und Titel können unabhängig voneinander gesetzt werden. */
  --ty-font-body: "Montserrat", Arial, sans-serif;
  --ty-font-heading: "Montserrat", Arial, sans-serif;

  /* Kompatibilitätsalias für bestehende RH-Regeln ausserhalb dieser Datei.
     --ty-font folgt weiterhin der Leseschrift. */
  --ty-font: var(--ty-font-body);
  --ty-weight-light: 300;
  --ty-weight-regular: 400;
  --ty-weight-medium: 500;
  --ty-weight-semibold: 600;

  /* Redaktionelle Bold-Auszeichnung aus dem Contao-Texteditor */
  --ty-bold-weight: 500;

  /* Bold nur innerhalb von .big-titel */
  --ty-big-title-bold-weight: 600;

  /* =========================================================================
   * ZENTRALE BASISGRÖSSE
   *
   * NORMALERWEISE MUSS NUR DIESER WERT GEÄNDERT WERDEN.
   *
   * 18px = aktuelle RH-Basis
   * 22px = Beispiel für eine grössere Kundenschrift
   *
   * Die technische Browser-/rem-Basis bleibt unabhängig davon 16px.
   * ====================================================================== */

  --ty-base-size: 18px;

  /* Mobile bewusst unabhängig von der Desktop-Basis.
     Dadurch bleibt die Lesbarkeit auf kleinen Screens stabil,
     auch wenn ein Kunde z.B. 18px oder 22px Desktop-Basis wählt. */
  --ty-mobile-size: 16.5px;

  /* =========================================================================
   * FLUIDE TYPOGRAFIE – RH BASIS
   *
   * --ty-base-size ist der zentrale Desktop-Masterwert.
   * --ty-mobile-size bleibt bewusst unabhängig davon.
   *
   * Bei 18px Basis bleibt der bisherige Verlauf exakt erhalten:
   * 390px -> 16.5px
   * 1600px -> 18px
   *
   * Wird --ty-base-size z. B. auf 22px gesetzt, bleibt Mobile bei 16.5px
   * und der Grundtext wächst bis 1600px fliessend auf 22px.
   * ====================================================================== */

  /* Fallback für Browser ohne CSS Typed Arithmetic.
     Entspricht dem bisherigen Verlauf bei 18px Basis. */
  --ty-current-size: clamp(16.5px, calc(16.016529px + 0.123967vw), 18px);

  /* Kompatibilitätsvariable für bestehende Regeln */
  --ty-body: var(--ty-current-size);

  --ty-leading-body: 1.6;
  --ty-leading-head: 1.2;


  /* =========================================================================
   * STANDARD-ÜBERSCHRIFTEN H1–H6
   *
   * Bei 18px Basis gelten weiterhin die bisherigen Desktopwerte:
   * H1 32 / H2 24 / H3 21 / H4 17.5 / H5 16 / H6 16px
   *
   * H1-H5 skalieren proportional mit --ty-base-size.
   * Die mobilen Startwerte bleiben unabhängig und unverändert.
   * H6 bleibt bewusst 16px.
   * ====================================================================== */

  /* Fallback für Browser ohne CSS Typed Arithmetic. */
  --ty-h1: clamp(28.875px, calc(27.867769px + 0.258264vw), 32px);
  --ty-h2: clamp(21.6562px, calc(20.900826px + 0.193698vw), 24px);
  --ty-h3: clamp(18.5625px, calc(17.776860px + 0.201446vw), 21px);
  --ty-h4: clamp(15.9844px, calc(15.495868px + 0.125258vw), 17.5px);
  --ty-h5: clamp(14.4375px, calc(13.933884px + 0.129132vw), 16px);
  --ty-h6: 16px;

  --ty-h1-weight: 500;
  --ty-h2-weight: 500;
  --ty-h3-weight: 500;
  --ty-h4-weight: 400;
  --ty-h5-weight: 400;
  --ty-h6-weight: 300;


  /* =========================================================================
   * ABSTÄNDE DER NORMALEN REDAKTIONELLEN H1–H6
   *
   * Die Abstände leiten sich von der Basisgrösse ab, NICHT von der
   * jeweiligen Headline-Grösse. Dadurch bleiben die Proportionen kontrolliert.
   *
   * Bei 18px Basis:
   * H1/H2 16px oben, 8px unten
   * H3    14px oben, 6px unten
   * H4    12px oben, 6px unten
   * H5/H6 10px oben, 4px unten
   * ====================================================================== */

  --ty-h1-margin-top: calc(var(--ty-current-size) * 0.8889);
  --ty-h1-margin-bottom: calc(var(--ty-current-size) * 0.4444);

  --ty-h2-margin-top: calc(var(--ty-current-size) * 0.8889);
  --ty-h2-margin-bottom: calc(var(--ty-current-size) * 0.4444);

  --ty-h3-margin-top: calc(var(--ty-current-size) * 0.7778);
  --ty-h3-margin-bottom: calc(var(--ty-current-size) * 0.3333);

  --ty-h4-margin-top: calc(var(--ty-current-size) * 0.6667);
  --ty-h4-margin-bottom: calc(var(--ty-current-size) * 0.3333);

  --ty-h5-margin-top: calc(var(--ty-current-size) * 0.5556);
  --ty-h5-margin-bottom: calc(var(--ty-current-size) * 0.2222);

  --ty-h6-margin-top: calc(var(--ty-current-size) * 0.5556);
  --ty-h6-margin-bottom: calc(var(--ty-current-size) * 0.2222);


  /* =========================================================================
   * VISUELLE SONDERTITEL
   * ====================================================================== */

  --ty-seo-title: clamp(16.5px, calc(16.016529px + 0.123967vw), 18px);
  --ty-seo-title-weight: 300;

  --ty-big-title: clamp(37.125px, calc(28.462810px + 2.221074vw), 64px);
  --ty-big-title-weight: 300;

  /* TAO-Komponentengrössen bleiben grundsätzlich in main.css.
     Feature-Box-Überschriften werden unten bewusst an RH angebunden. */

  /* Kompatibilitäts-Alias für ältere Regeln */
  --ty-seo-kicker: var(--ty-seo-title);
  --ty-caption: calc(var(--ty-current-size) * 0.7778);

  /* =========================================================================
   * FARBEN
   *
   * Lesetext und H1–H6 lassen sich hier zentral und unabhängig einstellen.
   * --ty-color-text und --ty-color-heading bleiben als Kompatibilitätsalias
   * für bestehende RH-/TAO-Regeln erhalten.
   * ====================================================================== */

  /* Lesetext */
  --ty-color-body: #284258;
  --ty-color-text: var(--ty-color-body);

  /* Standardüberschriften */
  --ty-color-h1: #284258;
  --ty-color-h2: #284258;
  --ty-color-h3: #284258;
  --ty-color-h4: #284258;
  --ty-color-h5: #284258;
  --ty-color-h6: #284258;

  /* Visuelle Sondertitel */
  --ty-color-seo-title: #284258;
  --ty-color-big-title: #284258;

  /* Kompatibilitätsalias für bestehende allgemeine Überschriftenregeln */
  --ty-color-heading: var(--ty-color-h2);

  /* Komponenten */
  --ty-color-feature: var(--ty-color-heading);
  --ty-color-tagline-text: var(--ty-color-body);
  --ty-color-tagline-heading: var(--ty-color-heading);

  /* Invertierte Bereiche */
  --ty-color-inverted: #fff;
  --ty-color-inverted-secondary: #b2b9c4;
}


/* =========================================================================
 * DYNAMISCHE MASTER-SKALIERUNG
 *
 * Moderne Browser können gleiche CSS-Einheiten gegeneinander dividieren.
 * Dadurch lässt sich der Verlauf 390px -> 1600px als Zahl von 0 bis 1
 * berechnen. So kann --ty-base-size wirklich als einzelner Masterwert dienen.
 *
 * Bei --ty-base-size: 18px bleibt die bisherige Darstellung unverändert.
 * ====================================================================== */

@supports (font-size: calc(100px / 1px * 1px)) {
  :root {
    /* 390px = 0, 1600px = 1 */
    --ty-fluid-progress:
      clamp(0, calc((100vw - 390px) / 1210px), 1);

    /* Grundtext: Mobile fest, Desktop über --ty-base-size steuerbar */
    --ty-current-size:
      calc(
        var(--ty-mobile-size)
        + (var(--ty-base-size) - var(--ty-mobile-size))
        * var(--ty-fluid-progress)
      );

    --ty-body: var(--ty-current-size);

    /* Desktop-Zielgrössen proportional zur zentralen Basis.
       Bei 18px ergeben sich exakt 32 / 24 / 21 / 17.5 / 16px. */
    --ty-h1-desktop: calc(var(--ty-base-size) * 1.777777778);
    --ty-h2-desktop: calc(var(--ty-base-size) * 1.333333333);
    --ty-h3-desktop: calc(var(--ty-base-size) * 1.166666667);
    --ty-h4-desktop: calc(var(--ty-base-size) * 0.972222222);
    --ty-h5-desktop: calc(var(--ty-base-size) * 0.888888889);

    /* Mobile-Werte bleiben unabhängig von --ty-base-size. */
    --ty-h1:
      calc(
        28.875px
        + (var(--ty-h1-desktop) - 28.875px)
        * var(--ty-fluid-progress)
      );

    --ty-h2:
      calc(
        21.6562px
        + (var(--ty-h2-desktop) - 21.6562px)
        * var(--ty-fluid-progress)
      );

    --ty-h3:
      calc(
        18.5625px
        + (var(--ty-h3-desktop) - 18.5625px)
        * var(--ty-fluid-progress)
      );

    --ty-h4:
      calc(
        15.9844px
        + (var(--ty-h4-desktop) - 15.9844px)
        * var(--ty-fluid-progress)
      );

    --ty-h5:
      calc(
        14.4375px
        + (var(--ty-h5-desktop) - 14.4375px)
        * var(--ty-fluid-progress)
      );
  }
}

/* 3. Grundschrift: rem-Basis immer 16px, auch auf Mobilgeräten --------------- */
html {
  font-family: var(--ty-font-body);
  font-size: 100%; /* überschreibt TAOs mobile 14px-Regel, siehe unten */
  line-height: var(--ty-leading-body);
  color: var(--ty-color-body);
}
body { font-family: var(--ty-font-body); font-size: var(--ty-current-size); }
/* TAO weist .tagline-inner fest #98a0ab zu. Diese Farbe hier überschreiben. */
.main-content, .tagline-inner { color: var(--ty-color-body); }
.tagline-inner { color: var(--ty-color-tagline-text); }
/* Keine globale h1-Regel: Im Header wird das Logo teilweise als h1 ausgegeben. */
/* Titel-Schriftfamilie:
   Nur im Inhalts- und Tagline-Bereich. Schriftgrössen, Gewichte und Abstände
   bleiben bei den bestehenden RH-/TAO-Regeln. Der Header bleibt unberührt. */
.main-content :is(h1,h2,h3,h4,h5,h6),
.tagline-inner :is(h1,h2,h3,h4,h5,h6) {
  font-family: var(--ty-font-heading);
}

.tagline-inner .content-text :is(h1,h2,h3,h4,h5,h6),
.tagline-inner .headline-box :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ty-color-tagline-heading);
}
button, input, select, textarea { font-family: inherit; }
strong, b { font-weight: var(--ty-bold-weight); }
/* Das nicht standardmässige HTML-Tag <bold> wird bewusst nicht berücksichtigt. */

/* 4. RH-STANDARDÜBERSCHRIFTEN H1–H6 -------------------------------------------
 *
 * Jede normale H1–H6 wird typografisch nur einmal definiert.
 * Die zulässigen Contao-/TAO-Kontexte werden pro Überschriftenebene gesammelt.
 *
 * Erfasst:
 * - normale Contao-Überschriften und Text-Elemente
 * - direkte Artikelüberschriften
 * - sichere direkte Modulüberschriften
 * - News-/Event-Reader-Titel
 * - News layout_short / layout_full H2
 * - FAQ-Kategorieüberschrift
 *
 * Bewusst nicht erfasst:
 * - interne Karten-/Item-Titel
 * - FAQ-Fragen (section > h3)
 * - Feature-Boxen und Headline-Boxen mit eigener Titelmechanik
 * - .seo-titel und .big-titel
 * -------------------------------------------------------------------------- */

/* H1 ------------------------------------------------------------------- */
.main-content :where(
  h1.content-headline,
  .content-text h1,
  .mod_article > h1,
  .mod_newsreader .layout_full > h1,
  .mod_eventreader .event.layout_full > h1,
  :is(
    .icon-boxes,
    .rotating-boxes,
    .teaser-boxes,
    .team-boxes,
    .pricing-table,
    .icon-buttons,
    .content-gallery,
    .content-image,
    .content-player,
    .content-vimeo,
    .content-youtube,
    .ce_form,
    .ce_comments,
    .mod_search,
    .mod_newslist,
    .mod_newsarchive,
    .mod_newsmenu,
    .mod_newsreader,
    .mod_eventlist,
    .mod_eventmenu,
    .mod_eventreader,
    .mod_faqlist,
    .mod_faqpage,
    .mod_faqreader,
    .mod_calendar,
    .mod_newsletterlist,
    .mod_newsletterreader,
    .mod_subscribe,
    .mod_unsubscribe,
    .mod_sitemap
  ) > h1
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h1.content-headline,
  .content-text h1,
  .mod_article > h1
):not(.seo-titel):not(.big-titel) {
  font-family: var(--ty-font-heading);
  font-size: var(--ty-h1);
  font-weight: var(--ty-h1-weight);
  line-height: var(--ty-leading-head);
  color: var(--ty-color-h1);
}

/* H2 ------------------------------------------------------------------- */
.main-content :where(
  h2.content-headline,
  .content-text h2,
  .mod_article > h2,
  .content-table h2,
  .mod_newslist .layout_short > h2,
  .mod_newsreader .layout_full > h2,
  .mod_faqpage > article > h2,
  :is(
    .icon-boxes,
    .rotating-boxes,
    .teaser-boxes,
    .team-boxes,
    .pricing-table,
    .icon-buttons,
    .content-gallery,
    .content-image,
    .content-player,
    .content-vimeo,
    .content-youtube,
    .ce_form,
    .ce_comments,
    .mod_search,
    .mod_newslist,
    .mod_newsarchive,
    .mod_newsmenu,
    .mod_newsreader,
    .mod_eventlist,
    .mod_eventmenu,
    .mod_eventreader,
    .mod_faqlist,
    .mod_faqpage,
    .mod_faqreader,
    .mod_calendar,
    .mod_newsletterlist,
    .mod_newsletterreader,
    .mod_subscribe,
    .mod_unsubscribe,
    .mod_sitemap
  ) > h2
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h2.content-headline,
  .content-text h2,
  .mod_article > h2
):not(.seo-titel):not(.big-titel) {
  font-family: var(--ty-font-heading);
  font-size: var(--ty-h2);
  font-weight: var(--ty-h2-weight);
  line-height: 1.25;
  color: var(--ty-color-h2);
}

/* H3 ------------------------------------------------------------------- */
.main-content :where(
  h3.content-headline,
  .content-text h3,
  .mod_article > h3,
  :is(
    .icon-boxes,
    .rotating-boxes,
    .teaser-boxes,
    .team-boxes,
    .pricing-table,
    .icon-buttons,
    .content-gallery,
    .content-image,
    .content-player,
    .content-vimeo,
    .content-youtube,
    .ce_form,
    .ce_comments,
    .mod_search,
    .mod_newslist,
    .mod_newsarchive,
    .mod_newsmenu,
    .mod_newsreader,
    .mod_eventlist,
    .mod_eventmenu,
    .mod_eventreader,
    .mod_faqlist,
    .mod_faqpage,
    .mod_faqreader,
    .mod_calendar,
    .mod_newsletterlist,
    .mod_newsletterreader,
    .mod_subscribe,
    .mod_unsubscribe,
    .mod_sitemap
  ) > h3
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h3.content-headline,
  .content-text h3,
  .mod_article > h3
):not(.seo-titel):not(.big-titel) {
  font-family: var(--ty-font-heading);
  font-size: var(--ty-h3);
  font-weight: var(--ty-h3-weight);
  line-height: 1.35;
  color: var(--ty-color-h3);
}

/* H4 ------------------------------------------------------------------- */
.main-content :where(
  h4.content-headline,
  .content-text h4,
  .mod_article > h4,
  :is(
    .icon-boxes,
    .rotating-boxes,
    .teaser-boxes,
    .team-boxes,
    .pricing-table,
    .icon-buttons,
    .content-gallery,
    .content-image,
    .content-player,
    .content-vimeo,
    .content-youtube,
    .ce_form,
    .ce_comments,
    .mod_search,
    .mod_newslist,
    .mod_newsarchive,
    .mod_newsmenu,
    .mod_newsreader,
    .mod_eventlist,
    .mod_eventmenu,
    .mod_eventreader,
    .mod_faqlist,
    .mod_faqpage,
    .mod_faqreader,
    .mod_calendar,
    .mod_newsletterlist,
    .mod_newsletterreader,
    .mod_subscribe,
    .mod_unsubscribe,
    .mod_sitemap
  ) > h4
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h4.content-headline,
  .content-text h4,
  .mod_article > h4
):not(.seo-titel):not(.big-titel) {
  font-family: var(--ty-font-heading);
  font-size: var(--ty-h4);
  font-weight: var(--ty-h4-weight);
  line-height: 1.4;
  color: var(--ty-color-h4);
}

/* H5 ------------------------------------------------------------------- */
.main-content :where(
  h5.content-headline,
  .content-text h5,
  .mod_article > h5,
  :is(
    .icon-boxes,
    .rotating-boxes,
    .teaser-boxes,
    .team-boxes,
    .pricing-table,
    .icon-buttons,
    .content-gallery,
    .content-image,
    .content-player,
    .content-vimeo,
    .content-youtube,
    .ce_form,
    .ce_comments,
    .mod_search,
    .mod_newslist,
    .mod_newsarchive,
    .mod_newsmenu,
    .mod_newsreader,
    .mod_eventlist,
    .mod_eventmenu,
    .mod_eventreader,
    .mod_faqlist,
    .mod_faqpage,
    .mod_faqreader,
    .mod_calendar,
    .mod_newsletterlist,
    .mod_newsletterreader,
    .mod_subscribe,
    .mod_unsubscribe,
    .mod_sitemap
  ) > h5
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h5.content-headline,
  .content-text h5,
  .mod_article > h5
):not(.seo-titel):not(.big-titel) {
  font-family: var(--ty-font-heading);
  font-size: var(--ty-h5);
  font-weight: var(--ty-h5-weight);
  line-height: 1.45;
  color: var(--ty-color-h5);
}

/* H6 ------------------------------------------------------------------- */
.main-content :where(
  h6.content-headline,
  .content-text h6,
  .mod_article > h6,
  :is(
    .icon-boxes,
    .rotating-boxes,
    .teaser-boxes,
    .team-boxes,
    .pricing-table,
    .icon-buttons,
    .content-gallery,
    .content-image,
    .content-player,
    .content-vimeo,
    .content-youtube,
    .ce_form,
    .ce_comments,
    .mod_search,
    .mod_newslist,
    .mod_newsarchive,
    .mod_newsmenu,
    .mod_newsreader,
    .mod_eventlist,
    .mod_eventmenu,
    .mod_eventreader,
    .mod_faqlist,
    .mod_faqpage,
    .mod_faqreader,
    .mod_calendar,
    .mod_newsletterlist,
    .mod_newsletterreader,
    .mod_subscribe,
    .mod_unsubscribe,
    .mod_sitemap
  ) > h6
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h6.content-headline,
  .content-text h6,
  .mod_article > h6
):not(.seo-titel):not(.big-titel) {
  font-family: var(--ty-font-heading);
  font-size: var(--ty-h6);
  font-weight: var(--ty-h6-weight);
  line-height: 1.5;
  color: var(--ty-color-h6);
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}

/* Abstände ---------------------------------------------------------------
 *
 * Nur redaktionelle Überschriften und die Reader-H1 erhalten die zentralen
 * RH-Abstände. Modulüberschriften, FAQ-Kategorien und News-Zwischenüberschriften
 * behalten ihre bisherigen komponentenspezifischen Abstände.
 * -------------------------------------------------------------------------- */

.main-content :where(
  h1.content-headline,
  .content-text h1,
  .mod_article > h1,
  .mod_newsreader .layout_full > h1,
  .mod_eventreader .event.layout_full > h1
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h1.content-headline,
  .content-text h1,
  .mod_article > h1
):not(.seo-titel):not(.big-titel) {
  margin-top: var(--ty-h1-margin-top);
  margin-bottom: var(--ty-h1-margin-bottom);
}

.main-content :where(
  h2.content-headline,
  .content-text h2,
  .content-table h2,
  .mod_article > h2
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h2.content-headline,
  .content-text h2,
  .mod_article > h2
):not(.seo-titel):not(.big-titel) {
  margin-top: var(--ty-h2-margin-top);
  margin-bottom: var(--ty-h2-margin-bottom);
}

.main-content :where(
  h3.content-headline,
  .content-text h3,
  .mod_article > h3
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h3.content-headline,
  .content-text h3,
  .mod_article > h3
):not(.seo-titel):not(.big-titel) {
  margin-top: var(--ty-h3-margin-top);
  margin-bottom: var(--ty-h3-margin-bottom);
}

.main-content :where(
  h4.content-headline,
  .content-text h4,
  .mod_article > h4
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h4.content-headline,
  .content-text h4,
  .mod_article > h4
):not(.seo-titel):not(.big-titel) {
  margin-top: var(--ty-h4-margin-top);
  margin-bottom: var(--ty-h4-margin-bottom);
}

.main-content :where(
  h5.content-headline,
  .content-text h5,
  .mod_article > h5
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h5.content-headline,
  .content-text h5,
  .mod_article > h5
):not(.seo-titel):not(.big-titel) {
  margin-top: var(--ty-h5-margin-top);
  margin-bottom: var(--ty-h5-margin-bottom);
}

.main-content :where(
  h6.content-headline,
  .content-text h6,
  .mod_article > h6
):not(.seo-titel):not(.big-titel),
.tagline-inner :where(
  h6.content-headline,
  .content-text h6,
  .mod_article > h6
):not(.seo-titel):not(.big-titel) {
  margin-top: var(--ty-h6-margin-top);
  margin-bottom: var(--ty-h6-margin-bottom);
}

/* News-Titel-Links übernehmen die Überschriftenfarbe. */
.main-content :where(
  .mod_newslist .layout_short > h2,
  .mod_newsreader .layout_full > h2
) > a {
  color: inherit;
}

/* Kontrastfarbe für redaktionelle Überschriften und Reader. */
.main-content .-color-inverted .content-text :is(h1,h2,h3,h4,h5,h6),
.main-content .-color-inverted :is(h1,h2,h3,h4,h5,h6).content-headline,
.-color-inverted .main-content .content-text :is(h1,h2,h3,h4,h5,h6),
.-color-inverted .main-content :is(h1,h2,h3,h4,h5,h6).content-headline,
.main-content .-color-inverted .content-table h2,
.main-content .-color-inverted .mod_newslist .layout_short > h2,
.main-content .-color-inverted .mod_newsreader .layout_full > :is(h1,h2),
.main-content .-color-inverted .mod_eventreader .event.layout_full > h1,
.main-content .-color-inverted .mod_faqpage > article > h2 {
  color: var(--ty-color-inverted);
}

/* Direkte Modulüberschriften in invertierten Bereichen. */
.main-content .-color-inverted :is(
    .icon-boxes,
    .rotating-boxes,
    .teaser-boxes,
    .team-boxes,
    .pricing-table,
    .icon-buttons,
    .content-gallery,
    .content-image,
    .content-player,
    .content-vimeo,
    .content-youtube,
    .ce_form,
    .ce_comments,
    .mod_search,
    .mod_newslist,
    .mod_newsarchive,
    .mod_newsmenu,
    .mod_newsreader,
    .mod_eventlist,
    .mod_eventmenu,
    .mod_eventreader,
    .mod_faqlist,
    .mod_faqpage,
    .mod_faqreader,
    .mod_calendar,
    .mod_newsletterlist,
    .mod_newsletterreader,
    .mod_subscribe,
    .mod_unsubscribe,
    .mod_sitemap
) > :is(h1,h2,h3,h4,h5,h6),
.main-content :is(
    .icon-boxes,
    .rotating-boxes,
    .teaser-boxes,
    .team-boxes,
    .pricing-table,
    .icon-buttons,
    .content-gallery,
    .content-image,
    .content-player,
    .content-vimeo,
    .content-youtube,
    .ce_form,
    .ce_comments,
    .mod_search,
    .mod_newslist,
    .mod_newsarchive,
    .mod_newsmenu,
    .mod_newsreader,
    .mod_eventlist,
    .mod_eventmenu,
    .mod_eventreader,
    .mod_faqlist,
    .mod_faqpage,
    .mod_faqreader,
    .mod_calendar,
    .mod_newsletterlist,
    .mod_newsletterreader,
    .mod_subscribe,
    .mod_unsubscribe,
    .mod_sitemap
).-color-inverted > :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ty-color-inverted);
}

/* Auf dunklen TAO-Hintergründen bleibt die Kontrastfarbe erhalten. */
.main-content .-color-inverted,
.tagline-inner .-color-inverted {
  color: var(--ty-color-inverted);
}

.tagline-inner .-color-inverted .content-text :is(h1,h2,h3,h4,h5,h6),
.tagline-inner .-color-inverted .headline-box :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ty-color-inverted);
}

/* 4A. Hilfsklasse: Überschriften zentrieren ---------------------------------
 *
 * .center-titel kann direkt auf H1–H6 oder auf einem umschliessenden
 * Contao-/TAO-Element gesetzt werden. Zentriert werden nur Überschriften.
 * Andere Inhalte des Moduls bleiben unverändert.
 *
 * !important ist hier bewusst gesetzt, damit die explizite RH-Hilfsklasse
 * auch komponenteneigene TAO-Ausrichtungen zuverlässig übersteuert.
 * -------------------------------------------------------------------------- */
:is(h1,h2,h3,h4,h5,h6).center-titel,
.center-titel :is(h1,h2,h3,h4,h5,h6) {
  text-align: center !important;
}

/* 5. RockSolid Feature-Boxen --------------------------------------------------
 *
 * Normale H1–H6 folgen der zentralen RH-Typografie.
 * .seo-titel und .big-titel bleiben bewusste Sonderrollen und werden
 * im folgenden Abschnitt separat gesteuert.
 * Die TAO-Grössenvarianten -small, -medium, -large und -super-size
 * bleiben für H1–H3 vollständig erhalten.
 * Die Komponentenabstände bleiben mit margin: 0 unverändert.
 * -------------------------------------------------------------------------- */
.feature-box .feature-box-text :is(h1,h2,h3,h4,h5,h6) {
  margin: 0;
  font-family: var(--ty-font-heading);
  color: var(--ty-color-feature);
  overflow-wrap: break-word;
}

.feature-box .feature-box-text h1:not(.seo-titel):not(.big-titel):not(.-small):not(.-medium):not(.-large):not(.-super-size) {
  font-size: var(--ty-h1);
  font-weight: var(--ty-h1-weight);
  line-height: var(--ty-leading-head);
}

.feature-box .feature-box-text h2:not(.seo-titel):not(.big-titel):not(.-small):not(.-medium):not(.-large):not(.-super-size) {
  font-size: var(--ty-h2);
  font-weight: var(--ty-h2-weight);
  line-height: 1.25;
}

.feature-box .feature-box-text h3:not(.seo-titel):not(.big-titel):not(.-small):not(.-medium):not(.-large):not(.-super-size) {
  font-size: var(--ty-h3);
  font-weight: var(--ty-h3-weight);
  line-height: 1.35;
}

.feature-box .feature-box-text h4:not(.seo-titel):not(.big-titel) {
  font-size: var(--ty-h4);
  font-weight: var(--ty-h4-weight);
  line-height: 1.4;
}

.feature-box .feature-box-text h5:not(.seo-titel):not(.big-titel) {
  font-size: var(--ty-h5);
  font-weight: var(--ty-h5-weight);
  line-height: 1.45;
}

.feature-box .feature-box-text h6:not(.seo-titel):not(.big-titel) {
  font-size: var(--ty-h6);
  font-weight: var(--ty-h6-weight);
  line-height: 1.5;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}

.feature-box .feature-box-text p {
  font-size: var(--ty-current-size);
  line-height: var(--ty-leading-body);
}

.-color-inverted .feature-box .feature-box-text,
.feature-box.-color-inverted .feature-box-text {
  color: var(--ty-color-inverted);
}

.-color-inverted .feature-box .feature-box-text :is(h1,h2,h3,h4,h5,h6),
.feature-box.-color-inverted .feature-box-text :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ty-color-inverted);
}

/* 6. VISUELLE TITELROLLEN: .seo-titel UND .big-titel -------------------------
 *
 * Diese Klassen sind bewusst unabhängig vom HTML-Tag.
 *
 * Sie funktionieren:
 * 1. direkt auf einer Überschrift:
 *      <h1 class="seo-titel">...</h1>
 *      <h2 class="big-titel">...</h2>
 *
 * 2. als CSS-Klasse auf einem TAO-/Contao-Element:
 *      <section class="feature-box seo-titel">...</section>
 *
 * Bei einer Wrapper-Klasse wird nur die erste Überschrift innerhalb des
 * jeweiligen inneren Containers als Titelrolle behandelt. So bleibt z.B.
 * bei einer Feature-Box mit H1 + H2 nur die erste Überschrift "seo-titel".
 *
 * !important ist hier bewusst nur für die visuelle Titelrolle eingesetzt:
 * Die explizite Klasse soll TAO-Grössenvarianten zuverlässig überschreiben.
 * Grösse, Gewicht und Farbe der Sondertitel werden zentral über RH-Variablen
 * gesteuert. In invertierten Bereichen bleibt --ty-color-inverted vorrangig.
 * -------------------------------------------------------------------------- */

/* Direkt auf der Überschrift */
:is(h1,h2,h3,h4,h5,h6).seo-titel {
  font-size: var(--ty-seo-title) !important;
  font-weight: var(--ty-seo-title-weight) !important;
  color: var(--ty-color-seo-title) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

:is(h1,h2,h3,h4,h5,h6).big-titel {
  font-size: var(--ty-big-title) !important;
  font-weight: var(--ty-big-title-weight) !important;
  color: var(--ty-color-big-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* CSS-Klasse auf einem TAO-/Contao-Element
 *
 * EINE Klasse:
 * - .seo-titel  -> erste Überschrift
 * - .big-titel  -> erste Überschrift
 *
 * BEIDE Klassen auf demselben Element:
 * - erste Überschrift  -> .seo-titel
 * - zweite Überschrift -> .big-titel
 *
 * Das entspricht z.B. der TAO Feature-Box:
 *   <section class="feature-box seo-titel big-titel">
 *     <div class="feature-box-text">
 *       <h1>SEO-Titel</h1>
 *       <h2>Big-Titel</h2>
 *     </div>
 *   </section>
 */

/* Nur .seo-titel */
.seo-titel:not(.big-titel)
:is(h1,h2,h3,h4,h5,h6):nth-child(1 of h1,h2,h3,h4,h5,h6) {
  font-size: var(--ty-seo-title) !important;
  font-weight: var(--ty-seo-title-weight) !important;
  color: var(--ty-color-seo-title) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Nur .big-titel */
.big-titel:not(.seo-titel)
:is(h1,h2,h3,h4,h5,h6):nth-child(1 of h1,h2,h3,h4,h5,h6) {
  font-size: var(--ty-big-title) !important;
  font-weight: var(--ty-big-title-weight) !important;
  color: var(--ty-color-big-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* .seo-titel + .big-titel gemeinsam:
   erste Überschrift = SEO-Titel */
.seo-titel.big-titel
:is(h1,h2,h3,h4,h5,h6):nth-child(1 of h1,h2,h3,h4,h5,h6) {
  font-size: var(--ty-seo-title) !important;
  font-weight: var(--ty-seo-title-weight) !important;
  color: var(--ty-color-seo-title) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* .seo-titel + .big-titel gemeinsam:
   zweite Überschrift = Big-Titel */
.seo-titel.big-titel
:is(h1,h2,h3,h4,h5,h6):nth-child(2 of h1,h2,h3,h4,h5,h6) {
  font-size: var(--ty-big-title) !important;
  font-weight: var(--ty-big-title-weight) !important;
  color: var(--ty-color-big-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}


/* Bold innerhalb von .big-titel
 *
 * Der Grundschnitt des Big-Titels bleibt unveraendert.
 * Nur <strong> und <b> innerhalb eines Big-Titels werden mit 600 gesetzt.
 */
.big-titel :is(h1,h2,h3,h4,h5,h6) :is(strong,b),
:is(h1,h2,h3,h4,h5,h6).big-titel :is(strong,b) {
  font-weight: var(--ty-big-title-bold-weight);
}


/* Bold innerhalb von SEO-Titeln
 *
 * Nur .seo-titel bleibt gegen <strong> und <b> aus dem Contao-Texteditor
 * abgesichert. Dadurch behaelt der SEO-Titel seine eigene Gewichtung.
 *
 * .big-titel ist bewusst NICHT ausgenommen:
 * Fett markierte Woerter innerhalb eines Big-Titels verwenden
 * --ty-bold-weight und erscheinen damit mit font-weight: 500.
 */

/* Klasse direkt auf der Ueberschrift */
:is(h1,h2,h3,h4,h5,h6).seo-titel :is(strong,b),

/* Nur .seo-titel: erste Ueberschrift */
.seo-titel:not(.big-titel)
:is(h1,h2,h3,h4,h5,h6):nth-child(1 of h1,h2,h3,h4,h5,h6)
:is(strong,b),

/* .seo-titel + .big-titel:
   Nur die erste Ueberschrift ist der SEO-Titel und bleibt geschuetzt. */
.seo-titel.big-titel
:is(h1,h2,h3,h4,h5,h6):nth-child(1 of h1,h2,h3,h4,h5,h6)
:is(strong,b) {
  font-weight: inherit !important;
}


/* TAO FEATURE-BOX – explizite Absicherung
 *
 * In der Feature-Box stehen die Element-Überschrift und die Überschrift
 * aus dem Texteditor als Geschwister in .feature-box-text.
 */
.feature-box.seo-titel:not(.big-titel)
.feature-box-text > :is(h1,h2,h3):nth-child(1 of h1,h2,h3),
.feature-box.seo-titel.big-titel
.feature-box-text > :is(h1,h2,h3):nth-child(1 of h1,h2,h3) {
  font-size: var(--ty-seo-title) !important;
  font-weight: var(--ty-seo-title-weight) !important;
  color: var(--ty-color-seo-title) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.feature-box.big-titel:not(.seo-titel)
.feature-box-text > :is(h1,h2,h3):nth-child(1 of h1,h2,h3),
.feature-box.seo-titel.big-titel
.feature-box-text > :is(h1,h2,h3):nth-child(2 of h1,h2,h3) {
  font-size: var(--ty-big-title) !important;
  font-weight: var(--ty-big-title-weight) !important;
  color: var(--ty-color-big-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}



/* Sondertitel in invertierten Bereichen -------------------------------------
 *
 * Die expliziten Sondertitel-Farben verwenden !important, damit sie auch
 * innerhalb von TAO-Komponenten zuverlässig greifen. Darum wird die
 * Kontrastfarbe für invertierte Bereiche hier ebenfalls explizit abgesichert.
 * -------------------------------------------------------------------------- */

.-color-inverted :is(h1,h2,h3,h4,h5,h6).seo-titel,
.-color-inverted :is(h1,h2,h3,h4,h5,h6).big-titel,
.seo-titel.-color-inverted :is(h1,h2,h3,h4,h5,h6),
.big-titel.-color-inverted :is(h1,h2,h3,h4,h5,h6),
.-color-inverted .seo-titel :is(h1,h2,h3,h4,h5,h6),
.-color-inverted .big-titel :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ty-color-inverted) !important;
}


/* 7. RockSolid Headline-Box ---------------------------------------------------
 *
 * Auch hier bleiben die Schriftgrössen und deren Mobile-Abstufungen in
 * TAO main.css. Wir steuern nur Schriftfamilie, Gewicht und Farben.
 * -------------------------------------------------------------------------- */
.headline-box h2 {
  font-family: var(--ty-font-heading);
  font-weight: var(--ty-weight-regular);
  line-height: 1.25;
  margin: 0;
  color: inherit;
}

.headline-box h2.-bold {
  font-weight: var(--ty-weight-semibold);
}

.headline-box h3 {
  font-family: var(--ty-font-heading);
  font-weight: var(--ty-weight-regular);
  line-height: 1.4;
  color: inherit;
}

.-color-inverted .headline-box :is(h2,h3) {
  color: var(--ty-color-inverted);
}

/* 8. Ergänzende RSCE-Textrollen --------------------------------------------- */

/* =========================================================================
 * TAO-MODULFARBEN
 *
 * TAO setzt in mehreren Modulen feste Theme-Farben wie #717c8e,
 * #242424 oder #8570a6.
 *
 * Für normale Text- und Titelinhalte verwenden wir stattdessen "inherit".
 * Dadurch gilt standardmässig --ty-color-text bzw. die Farbe des umgebenden
 * Bereichs.
 *
 * WICHTIG:
 * Keine !important-Regeln. Explizite Farben aus TAO-Farbfeldern oder
 * Inline-Styles können dadurch weiterhin gewinnen.
 *
 * Nicht normalisiert werden:
 * Links/Hover, Icons, dekorative Akzentfarben, Buttons, Preise und Zähler.
 * ====================================================================== */

/* Modul-Grundfarben */
.feature-box-text,
.highlight-box,
.ce_accordion,
.icon-boxes-item,
.news-list-boxed-item {
  color: inherit;
}

/* Rotating Box:
   Die Kartenrückseite ist weiss und darf deshalb NICHT die weisse
   Textfarbe eines übergeordneten -color-inverted-Bereichs erben. */
.rotating-boxes-item-content {
  color: var(--ty-color-text);
}

/* Boxed Teaser/Team: TAO setzt dort sonst #717c8e */
.-boxed > .teaser-boxes-item,
.-boxed > .team-boxes-item {
  color: inherit;
}

/* Invertierte Teaser/Team-Boxen sollen die Bereichsfarbe erben. */
.-color-inverted .teaser-boxes-item,
.-color-inverted .team-boxes-item {
  color: inherit;
}

/* Normale Modultitel */
.icon-boxes-item h3,
.rotating-boxes-item-content h3,
.teaser-boxes-item h3,
.team-boxes-item h3,
.teaser-boxes-item h4,
.team-boxes-item h4,
.info-map-boxes-item h3,
.news-list-boxed-item h3,
.counter-boxes > h3 {
  color: inherit;
}

/* Normaler News-/Info-Text */
.news-image-teaser p,
.news-image-teaser .news-image-teaser-info,
.news-image-teaser-meta b,
.news-image-teaser-meta .comment-count,
.news-boxes-item-info {
  color: inherit;
}

/* Pricing-Table: Begleittexte folgen der Modulfarbe.
   Preiszahl selbst bleibt TAO-spezifisch. */
.pricing-table-plan p b,
.pricing-table-plan p i,
.pricing-table-plan ul {
  color: inherit;
}


/* =========================================================================
 * TAO-MODUL-FLIESSTEXT
 *
 * Einige TAO-Module verändern die gesamte Modulbasis mit 0.875em bzw.
 * 1.125em. Dadurch würde normaler Fliesstext trotz zentraler RH-Basis
 * kleiner oder grösser erscheinen.
 *
 * Nur der eigentliche Fliesstext wird deshalb wieder auf
 * --ty-current-size gesetzt.
 *
 * Bewusst NICHT verändert:
 * Überschriften, Metadaten, Icons, Buttons, Preise, Zähler, Grosszitate.
 * ====================================================================== */

/* Highlight-Box: TAO-Wrapper = 1.125em */
.highlight-box .highlight-box-inner p,
.highlight-box .highlight-box-inner ul,
.highlight-box .highlight-box-inner ol {
  font-size: var(--ty-current-size);
}

/* Icon-Box: TAO-Wrapper = 0.875em */
.icon-boxes-item p {
  font-size: var(--ty-current-size);
}

/* Rotating-Box: Inhalt = 0.875em */
.rotating-boxes-item-content p {
  font-size: var(--ty-current-size);
}

/* Teaser-/Team-Boxen: Wrapper = 0.875em */
.teaser-boxes-item p,
.team-boxes-item p {
  font-size: var(--ty-current-size);
}

/* Info-Map-Box: Wrapper = 0.875em */
.info-map-boxes-item p {
  font-size: var(--ty-current-size);
}

/* Boxed News: Wrapper = 0.875em */
.news-list-boxed-item p {
  font-size: var(--ty-current-size);
}


/* Icon-Boxes:
   Keine eigene font-size setzen.
   TAO verwendet für .icon-boxes-item bewusst 0.875em und baut die
   internen Grössen relativ darauf auf. Diese Hierarchie bleibt erhalten. */

/* Icon-Fonts und data-icon-Pseudoelemente bewusst nicht überschreiben. */

/* 9. HEADER / NAVIGATION -------------------------------------------------------
 *
 * Keine Font-Size-Overrides in rh_typography.css.
 * Header-Bar, Desktop-Navigation, Mobile-Navigation und Mega-Menü
 * werden vollständig in rh_header.css gesteuert.
 * -------------------------------------------------------------------------- */

/* 10. Freie, wiederverwendbare Textrollen für Contao ------------------------ */
.text-lead { font-size: calc(var(--ty-current-size) * 1.2222); line-height: 1.5; }
.text-small, figcaption, .content-image figcaption { font-size: var(--ty-caption); line-height: 1.5; }

/* 11. MOBILE BIS 599PX --------------------------------------------------------
 *
 * Keine eigenen RH-Grössensprünge mehr.
 * Grundtext und RH-Titel skalieren bereits kontinuierlich über clamp().
 * TAO-eigene Komponenten behalten ihre eigenen Responsive-Regeln.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 599px) {
  html { font-size: 100%; }
}