/*!
* Foundation26 - Typography 
* Copyright 2011-2025 by Atelier 26 AG
*/

:root {
/* Fonts */

--bs-font-sans-serif: var(--settings-font-sans-serif, 'Roboto'), 'Roboto', system-ui, -apple-system, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
--bs-font-serif: var(--settings-font-serif, "PT Serif"), "PT Serif", Georgia, Times, "Times New Roman", serif;;
--bs-font-monospace: var(--settings-font-monospace, SFMono-Regular), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-font-feature-settings: "cv01", "cv09", "cv02", "cv03", "cv04", "cv05", "cv11";

/* Body & Typography */
--bs-body-font-size: var(--settings-body-font-size);
--bs-font-size-large: var(--settings-font-size-large);
--bs-font-size-medium: var(--settings-font-size-medium);
--bs-font-size-normal: var(--settings-font-size-normal);
--bs-font-size-small: var(--settings-font-size-small);
--bs-line-height-small: 1.45;
--bs-font-size-extra-small: var(--settings-font-size-extra-small);
--bs-line-height-extra-small: 1.45;
--bs-body-line-height: 1.65em;
--bs-font-weight-bold: var(--settings-font-weight-bold);
--bs-font-weight-light: var(--settings-font-weight-light);
--bs-btn-weight: var(--bs-font-weight-bold);

}

/*** Extended Typography ***/

.font-family-sans-serif {font-family: var(--bs-font-sans-serif);}
.font-family-serif {font-family: var(--bs-font-serif);}
.font-family-monospace {font-family: var(--bs-font-monospace);}

body {
    font-family: var(--settings-body-font-family);
    font-weight: var(--bs-font-weight-light);
    line-height: var(--bs-body-line-height);
    font-feature-settings: var(--bs-font-feature-settings); 
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
  }
  
  /* .site typography scaling — mobile-first, via @container viewport (html als Referenz) */
  :root, .site {
    --bs-scale: 0.80;                     /* mobile-first — :root für Utilities, .site als Override */
  }
  .site {
    font-size: var(--bs-body-font-size);  /* 16px — NUR auf .site (sonst ändert sich 1rem global) */
  }
  @container viewport (min-width: 480px)  { .site > * { --bs-scale: 0.89; } }
  @container viewport (min-width: 768px)  { .site > * { --bs-scale: 1.00; } }
  @container viewport (min-width: 1280px) { .site > * { --bs-scale: 1.17; } }
  @container viewport (min-width: 1480px) { .site > * { --bs-scale: 1.33; } }

  /* Mobile (< 768px): font-size × 0.9375 */
  @container viewport (max-width: 767px) {
    .site > * {
      font-size:                   calc(var(--bs-body-font-size)               * 0.9375); /* 15px */
      --bs-font-size-large:        calc(var(--settings-font-size-large)        * 0.9375); /* 18.75px */
      --bs-font-size-medium:       calc(var(--settings-font-size-medium)       * 0.9375); /* 16.88px */
      --bs-font-size-normal:       calc(var(--settings-font-size-normal)       * 0.9375); /* 15px */
      --bs-font-size-small:        calc(var(--settings-font-size-small)        * 0.9375); /* 13.13px */
      --bs-font-size-extra-small:  calc(var(--settings-font-size-extra-small)  * 0.9375); /* 11.25px */
    }
  }

  /* XL (≥ 1280px): font-size × 1.0625 */
  @container viewport (min-width: 1280px) {
    .site > * {
      font-size:                   calc(var(--bs-body-font-size)               * 1.0625); /* 17px */
      --bs-font-size-large:        calc(var(--settings-font-size-large)        * 1.0625); /* 21.25px */
      --bs-font-size-medium:       calc(var(--settings-font-size-medium)       * 1.0625); /* 19.13px */
      --bs-font-size-normal:       calc(var(--settings-font-size-normal)       * 1.0625); /* 17px */
      --bs-font-size-small:        calc(var(--settings-font-size-small)        * 1.0625); /* 14.88px */
      --bs-font-size-extra-small:  calc(var(--settings-font-size-extra-small)  * 1.0625); /* 12.75px */
    }
  }
  
  h1 {font-family: var(--settings-h1-font-family); font-weight: var(--settings-h1-font-weight); text-transform: var(--settings-h1-text-transform); color: var(--settings-h1-color, currentColor);}
  h2 {font-family: var(--settings-h2-font-family); font-weight: var(--settings-h2-font-weight); text-transform: var(--settings-h2-text-transform); color: var(--settings-h2-color, currentColor);}
  h3 {font-family: var(--settings-h3-font-family); font-weight: var(--settings-h3-font-weight); text-transform: var(--settings-h3-text-transform); color: var(--settings-h3-color, currentColor);}
  h4 {font-family: var(--settings-h4-font-family); font-weight: var(--settings-h4-font-weight); text-transform: var(--settings-h4-text-transform); color: var(--settings-h4-color, currentColor);}
  h5 {font-family: var(--settings-h5-font-family); font-weight: var(--settings-h5-font-weight); text-transform: var(--settings-h5-text-transform); color: var(--settings-h5-color, currentColor);}
  h6 {font-family: var(--settings-h6-font-family); font-weight: var(--settings-h6-font-weight); text-transform: var(--settings-h6-text-transform); color: var(--settings-h6-color, currentColor);}
  
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    text-wrap: balance;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphenate-limit-chars: 3 6;
    -webkit-hyphenate-limit-chars: 3 6;
    hyphenate-limit-lines: 1;
    -webkit-hyphenate-limit-lines: 1;
    overflow-wrap: break-word;
  }  

  h1 {font-size: max(1rem, calc(var(--settings-h1-font-size) * var(--bs-scale))); line-height: 1.15; margin-bottom: .5em;}  /* base 36px */
  h2 {font-size: max(1rem, calc(var(--settings-h2-font-size) * var(--bs-scale))); line-height: 1.15; margin-bottom: .5em;} /* base 26px */
  h3 {font-size: max(1rem, calc(var(--settings-h3-font-size) * var(--bs-scale))); line-height: 1.15; margin-bottom: .5em;} /* base 22px */
  h4 {font-size: max(1rem, calc(var(--settings-h4-font-size) * var(--bs-scale))); line-height: 1.15; margin-bottom: .5em;} /* base 18px */
  h5 {font-size: var(--settings-h5-font-size); line-height: 1.25; margin-bottom: .25em;}
  h6 {font-size: var(--settings-h6-font-size); line-height: 1.25; margin-bottom: .25em;}
  .lead, .large {font-size: var(--bs-font-size-large); line-height: 1.6;}
  .medium {font-size: var(--bs-font-size-medium); line-height: 1.6;}
  .normal {font-size: var(--bs-font-size-normal); line-height: 1.6;}
  .small, small {font-size: var(--bs-font-size-small); line-height: var(--bs-line-height-small);}
  .extra-small {font-size: var(--bs-font-size-extra-small); line-height: 1.5;}
  figcaption, .image-caption {font-size: var(--bs-font-size-small); margin-top: .25rem;}
  details {font-size: var(--bs-font-size-small); margin-bottom: 1.5rem;}
  
  /* WENN DAS BERECHTETB WIRD, KANN DIE GRÖSSE AUS DEN SETTING KOMMEN @TODO
  @media (min-width: 1280px) {
    h1, .h1 {font-size: 3.25rem;}
    h2, .h2 {font-size: 2.25rem;}
    h3, .h3 {font-size: 1.75rem;}
    h4, .h4 {font-size: 1.25rem;}
    h5, .h5 {font-size: 0.875rem;}
    h6, .h6 {font-size: 0.875rem;}
  }

    */

.display-1 {font-size: 245%; line-height: 1.25;}
.display-2 {font-size: 220%; line-height: 1.25;}
.display-3 {font-size: 195%; line-height: 1.25;}
.display-4 {font-size: 170%; line-height: 1.25;}
.display-5 {font-size: 145%; line-height: 1.25;}
.display-6 {font-size: 120%; line-height: 1.25;}
  
  p, td, th, li {
    text-wrap: pretty;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-chars: auto 3;
    -webkit-hyphenate-limit-lines: 2;
    -moz-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 2;
  }
  

  p {
    margin-top: 0;
    margin-bottom: 1em;
  }
  p:last-of-type:last-child {
    margin-bottom: 0;
  }

  [style*="text-transform"]:has(*) {
    letter-spacing: .04rem;
  }  

  .text-lowercase {
    text-transform: lowercase;
  }
  .text-uppercase {
    text-transform: uppercase;
  }
  .oldstyle-nums {
    font-variant-numeric: oldstyle-nums; /* Mediävalziffer Median value number */
  }
  .slashed-zero {
    font-variant-numeric: slashed-zero;
  }
  .diagonal-fractions {
    font-variant-numeric: diagonal-fractions; /* Brüche fractions */ 
  }
  .small-caps {
    font-variant-caps: all-small-caps;
  }
  
  article {
    margin-bottom: 4rem;
    }
  
  a {
    color: var(--bs-link-color);
    text-decoration: var(--bs-link-decoration);
  }
  
  a:hover {
    color: var(--bs-link-hover-color);
    text-decoration: var(--bs-link-decoration-hover);
  }
  
  a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
  }
     
  span[style^="background-color"] {
    padding: 0.125rem 0.25rem 0.125rem 0.25rem;
  }
  
  mark, .mark {
    padding: 0.125rem 0.25rem 0.125rem 0.25rem;
    color: var(--bs-mark-color);
    background-color: var(--bs-mark-bg);
  }
  
  .text-muted, .muted {
    color: var(--bs-muted);
  }

  s {
    text-decoration: line-through;
  }

  del {
    text-decoration: line-through;
    padding: 0.125rem 0.25rem 0.125rem 0.25rem;
    background-color: var(--bs-danger-50);
  }
  
  ins {
    padding: 0.125rem 0.25rem 0.125rem 0.25rem;
    background-color: var(--bs-success-500-subtle);
  }
  hr {
    margin-top: var(--bs-gutter-y, 10px);
    margin-bottom: var(--bs-gutter-y, 10px);
    border: none;
    border-top: 1px solid var(--bs-border-hr);
    height: 0;
    opacity: 1;
  }
  
  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-skip-ink: none;
  }
  
  address {
    font-style: normal;
    line-height: inherit;
  }
  
  

  
  ol,
  ul {
    padding-left: 1.25em;
  }
  
  ol,
  ul,
  dl {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  ul {
    list-style-type: "– ";
  }

  ol ol,
  ul ul,
  ol ul,
  ul ol {
    margin-bottom: 0;
  }
  
  dt {
    font-weight: 700;
  }
  
  dd {
    margin-bottom: 0.5rem;
    margin-left: 0;
  }
  
  blockquote {
    font-style: italic; 
    font-size: var(--bs-font-size-large); 
    border-left: 3px solid var(--bs-primary-muted); 
    padding-left: 1rem;}
  
  cite {
    font-style: italic;
  }
  cite::before {
    content: "— ";
  }
  
  
  b,
  strong {
    font-weight: var(--bs-font-weight-bold);
  }
  
  sub,
  sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  pre,
  code,
  kbd,
  samp {
    font-family: var(--bs-font-monospace);
    font-size: 1em;
  }
  
  pre {
    display: block;
    padding: calc(var(--bs-gutter-x) * .75 );
    overflow: auto;
    font-size: 0.875em;
    border: var(--bs-border-width) solid hsl(from var(--bs-text) h s l / 0.1);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
    max-width: 100%;
  }
  pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
    padding: 0;
    margin: 0;
  }
  
  code {
    font-size: 0.875em;
    color: var(--bs-code-color);
    background-color: hsl(from var(--bs-overlay) h s l / 0.05);
    border-radius: .125em;
    padding: 0 0.25em;
    word-wrap: break-word;
  }
  a > code {
    color: inherit;
  }
  
  kbd {
    padding: 0.1875rem 0.375rem;
    font-size: 0.875em;
    color: var(--bs-body-bg);
    background-color: var(--bs-body-color);
    border-radius: 0.25rem;
  }
  kbd kbd {
    padding: 0;
    font-size: 1em;
  }
  
  /* summary & details
  
  summary {
    color: var(--bs-primary-base);
    font-weight: var(--bs-font-weight-bold);
    margin-top: -.8rem;
    margin-bottom: .8rem;
  }
  summary:hover, summary:active, summary:focus {
    color: var(--bs-primary-base);
    text-decoration: underline;
  }
  li summary {
    font-weight: var(--bs-font-weight-bold);
    margin-top: 0rem;
  }
  details p {
    background-color: var(--bs-light);
    font-size: var(--bs-font-size-small);
    padding: 1rem;
    border-radius: var(--bs-border-radius);
  }
  summary, slot[name="internal-main-summary"]::slotted(summary) {
    list-style: disclosure-closed inside;
  }
  :host([open]) summary, :host([open]) slot[name="internal-main-summary"]::slotted(summary) {
    list-style-type: disclosure-open;
  }
   */