:root{

--font-family-base: "Open Sans", sans-serif;   /* <-- Font default */
--font-family-heading: "Pompiere", sans-serif;   /* <-- Font Headings */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
--font-weight-base: var(--font-weight-normal);
--line-height-base: 1.5;
--line-height-heading: 1.1;
--line-margin-top: 0.1;
--line-margin-bottom: 0.1;

--color-text: #07525f;   /* <-- Text basis */
--color-text-light: #fff;
--color-heading: #07525f;   /* <-- Headlines */
--color-background: #ffd591;  /* <-- Hintergrund */

--color-link: #962832;   /* <-- Links */
--color-link-hover: #f78e11;    /* <-- Hover */
--color-link-active: #f78e11;    /* <-- Active */
--color-link-disabled: #f78e11;

--color-button: #e9722b;   /* <-- Button */
--color-button-hover: #f78e11;   /* <-- Hover */
--color-button-link-hover: #FFF; 
--border-color: #d67c13;
--border-hover-color: #f78e11;
--border-radius: 0.25rem;

--color-text-muted: #6c757d;
--color-text-muted-light: #adb5bd;
--color-text-muted-lighter: #e9ecef;
--color-text-muted-lightest: #f8f9fa;
--color-background-muted: #f8f9fa;
--color-background-muted-light: #e9ecef;
--color-background-muted-lighter: #dee2e6;

}


/*
<!-- Utopia:
1. Fluid Space
2. Fluid Type Sizes
3. Flexible images
4. Media Queries

Viewport Size from 		320px	to	1500px
Base Body/Font Size		17px	to	20px
Type scale multiplyer	1.2		to 	1.333

https://utopia.fyi
Es wurden die nachfolgenden Links generiert.

-->
*/



/* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1500,16,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.5628rem, 0.6198rem + -0.0608vi, 0.6076rem);
  --step--1: clamp(0.7292rem, 0.7235rem + 0.0285vi, 0.7502rem);
  --step-0: clamp(0.875rem, 0.8411rem + 0.1695vi, 1rem);
  --step-1: clamp(1.05rem, 0.9733rem + 0.3837vi, 1.14rem);
  --step-2: clamp(1.26rem, 1.1198rem + 0.7009vi, 1.333rem);
  --step-3: clamp(1.512rem, 1.5797rem + 1.1615vi, 1.7769rem);
  --step-4: clamp(1.8144rem, 1.8502rem + 1.8209vi, 2.1573rem);
  --step-5: clamp(2.1773rem, 1.9264rem + 2.7545vi, 2.2087rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,14,1.2,1500,16,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.25rem, 0.25rem + 0vi, 0.25rem);
  --space-2xs: clamp(0.4375rem, 0.4206rem + 0.0847vi, 0.5rem);
  --space-xs: clamp(0.6875rem, 0.6706rem + 0.0847vi, 0.75rem);
  --space-s: clamp(0.875rem, 0.8411rem + 0.1695vi, 1rem);
  --space-m: clamp(1.3125rem, 1.2617rem + 0.2542vi, 1.5rem);
  --space-l: clamp(1.75rem, 1.6822rem + 0.339vi, 2rem);
  --space-xl: clamp(2.625rem, 2.5233rem + 0.5085vi, 3rem);
  --space-2xl: clamp(3.5rem, 3.3644rem + 0.678vi, 4rem);
  --space-3xl: clamp(5.25rem, 5.0466rem + 1.0169vi, 6rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1822rem + 0.339vi, 0.5rem);
  --space-2xs-xs: clamp(0.4375rem, 0.3528rem + 0.4237vi, 0.75rem);
  --space-xs-s: clamp(0.6875rem, 0.6028rem + 0.4237vi, 1rem);
  --space-s-m: clamp(0.875rem, 0.7055rem + 0.8475vi, 1.5rem);
  --space-m-l: clamp(1.3125rem, 1.1261rem + 0.9322vi, 2rem);
  --space-l-xl: clamp(1.75rem, 1.411rem + 1.6949vi, 3rem);
  --space-xl-2xl: clamp(2.625rem, 2.2521rem + 1.8644vi, 4rem);
  --space-2xl-3xl: clamp(3.5rem, 2.822rem + 3.3898vi, 6rem);

  /* Custom pairs */
  --space-s-l: clamp(0.875rem, 0.5699rem + 1.5254vi, 2rem);
}

/* @link https://utopia.fyi/grid/calculator?c=320,14,1.2,1500,16,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --grid-max-width: 62.00rem;
  --grid-gutter: var(--space-s-l, clamp(0.875rem, 0.3393rem + 2.6786vw, 2rem));
  --grid-columns: 12;
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}

/*
// setup typography
// Path: css\style.less
*/

body {
  font-family: var(--font-family-base);
  font-size: var(--step-0);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-base);
  color: var(--color-text);
  background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  margin-block: var(--space-m) var(--space-3xs);
  padding-block: var(--space-3xs);
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-3);
}

h5 {
  font-size: var(--step-2);
}

h6 {
  font-size: var(--step-1);
}

.accordion .card-header a.button {
font-family: var(--font-family-heading);
  font-size: var(--step-3);
}

p {
  margin-block: 0 var(--space-2xs);
  padding-block: var(--space-3xs);
}

a, a:hover, a:focus, a:active, a:visited {
  color: var(--color-link);
  text-decoration: none;
}

a:hover, a:visited:hover {
color: var(--color-link-hover);
}

a:focus {
  outline: none;
}

a:active {
  color: var(--color-link-active);
}

blockquote {
  margin-block: var(--space-m);
  padding-inline: var(--space-m);
  border-inline-start: 0.25rem solid var(--color-border);
}

blockquote p:last-child {
  margin-block: 0;
}

blockquote cite {
  display: block;
  margin-block: var(--space-xs);
  font-size: var(--step-0);
  font-style: normal;
  color: var(--color-text);
}

/*
// setup forms
// Path: css\style.less
*/
.form-group { margin:0.5rem 0; }
input,
textarea,
select {
  font-family: var(--font-family-base);
  font-size: var(--step-0);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-base);
  color: var(--color-text);
  border: 1px solid var(--border-color);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--color-background);
  padding-block: var(--space-xs);
  padding-inline: var(--space-s);
  transition: border-color 0.2s ease-in-out;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.checkbox label { margin-top:4px; }
input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 0.5rem;
  margin-top:-2px;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: none;
}

.btn {
  color: var(--color-button-link-hover);
  background-color: var(--color-button);
  border-color: var(--border-color);
  float:right;
  margin:1rem 0;
}

.btn:hover {
  color: var(--color-button-link-hover);
  background-color: var(--color-button-hover);
  border-color: var(--border-hover-color);
}