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

:root{
/* Fonts */

--bs-font-sans-serif: var(--settings-font-sans-serif), 'Roboto', system-ui, -apple-system, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
--bs-font-serif: var(--settings-font-serif), "PT Serif", Georgia, Times, "Times New Roman", serif;;
--bs-font-monospace: var(--settings-font-monospace),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-font-size-extra-small: var(--settings-font-size-extra-small);
--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(--text-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);
  }
  
  @media (max-width: 479px) {html, body {font-size: calc(var(--bs-body-font-size) * 0.9375);} } /*  15px */ 
  @media (min-width: 480px) {html, body {font-size: calc(var(--bs-body-font-size) * 0.9375);} } /* 15px */
  @media (min-width: 768px) {html, body {font-size: calc(var(--bs-body-font-size) * 1)} } /* 16px */
  @media (min-width: 1024px) {html, body {font-size: calc(var(--bs-body-font-size) * 1)} } /* 16px */
  @media (min-width: 1280px) {html, body {font-size: calc(var(--bs-body-font-size) * 1.0625)} } /* 17px */
  @media (min-width: 1480px) {html, body {font-size: calc(var(--bs-body-font-size) * 1.125)} } /* 17px */
  
  @media (max-width: 479px) {:root{--bs-scale: 0.85;}}
  @media (min-width: 480px) {:root{--bs-scale: 0.95;}}
  @media (min-width: 768px) {:root{--bs-scale: 1;}}
  @media (min-width: 1024px) {:root{--bs-scale: 1;}}
  @media (min-width: 1280px) {:root{--bs-scale: 1.1;}}
  @media (min-width: 1480px) {:root{--bs-scale: 1.25;}}
  
  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);}
  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);}
  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);}
  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);}
  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);}
  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);}
  
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    text-wrap: balance;
  }  

  h1 {font-size: max(1rem, calc(var(--settings-h1-font-size) * var(--bs-scale))); line-height: 1.1; margin-bottom: .3em;}  /* base 36px */
  h2 {font-size: max(1rem, calc(var(--settings-h2-font-size) * var(--bs-scale))); line-height: 1.1; margin-bottom: .4em;} /* base 26px */
  h3 {font-size: max(1rem, calc(var(--settings-h3-font-size) * var(--bs-scale))); line-height: 1.1; margin-bottom: .4em;} /* base 22px */
  h4 {font-size: max(1rem, calc(var(--settings-h4-font-size) * var(--bs-scale))); line-height: 1.1; margin-bottom: .4em;} /* 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: inherit;}
  .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: 1.5;}
  .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, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: var(--bs-font-weight-bold);
    line-height: 1.2;
  }

.display-1 {font-size: 245%;}
.display-2 {font-size: 220%;}
.display-3 {font-size: 195%;}
.display-4 {font-size: 170%;}
.display-5 {font-size: 145%;}
.display-6 {font-size: 120%;}
  
  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: 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);
    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);
  }
  
  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;
  }
  
  
  footer address,
  section-footer address{
    font-size: var(--bs-font-size-small);
  }

  footer address a,
  section-footer address a{
    color: inherit;
    text-decoration: none;
  }
  footer address a:hover,
  section-footer address a:hover  {
    text-decoration: none;
  }
  
  ol,
  ul {
    padding-left: 2rem;
  }
  
  ol,
  ul,
  dl {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  
  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);
    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);
    font-weight: var(--bs-font-weight-bold);
    margin-top: -.8rem;
    margin-bottom: .8rem;
  }
  summary:hover, summary:active, summary:focus {
    color: var(--bs-primary);
    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;
  }
   */