/* Reset */
*, *::before, *::after 				{ -webkit-box-sizing: border-box; box-sizing: border-box; }
html 								{ -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; background-color: white; } 
html,body,li,h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote { margin: 0; padding: 0; }
b, strong 							{ font-weight: 500; } 
sub, sup 							{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 
sub 								{ bottom: -0.25em; } 
sup 								{ top: -0.5em; }
img 								{ border-style: none; max-width: 100%; height: auto; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input 						{ overflow: visible; }
h1,h2,h3,h4,h5,h6,p,li,td           { font-size: 16px; font-weight: 400; line-height: 1; }
abbr[title]                         { text-decoration: none; }
body.waiting *                      { cursor: wait; }
.shadow                             { box-shadow: var(--shadow); }
.relative                           { position: relative; }

/* Visibility */
.only-country                       { opacity: 0; content-visibility: hidden; }

/* Variablen */
:root {
	interpolate-size: allow-keywords;
    --color-black: #09090a;
    --color-orange: #FF6400;
}

/* Schriftbild */
body						        { -webkit-font-smoothing: antialiased; font-family: Roboto, 'Roboto', Arial, sans-serif; font-weight: 400; color: var(--color-black); background-color: #faf6ea; }
a 								    { color: var(--color-orange); }
ul,ol   							{ padding-left: 1em; }
/* ul li::marker                       { content: none; } */
.color-orange                        { color: var(--color-orange); }

/* Schriftgrößen */
p, .p, li, dt  						{ line-height: 1.4; text-wrap: pretty; font-size: 18px; }
.hl                                 { position: relative; font-weight: 700; text-wrap: balance; /*text-box: trim-both cap alphabetic;*/ }
.hl a,
a .hl                               { text-decoration: none; color: var(--color-black); }
.hl a:hover                         { text-decoration: none; text-underline-offset: .2em; text-decoration-thickness: 3px; }
.h1                                 { font-size: 55px; line-height: 1.1; }
.h2                                 { font-size: 34px; line-height: 1.1; }
.h3                                 { font-size: 30px; line-height: 1.1; }
.h4                                 { font-size: 28px; line-height: 1.2; }
.h5                                 { font-size: 24px; line-height: 1.2; }
.h6                                 { font-size: 22px; line-height: 1.2; }

/* MARK: Abstände */
.hl + ul,
ul + p,
p + ul,
p + p,
.hl + .hl,
.hl + p:not(.hl)                    { margin-top: 0.5em; }

/* Buttons */
.btn                                { display: inline-flex; padding: 1em 1.5em; border-radius: 4px; background-color: var(--color-orange); color: white; font-weight: 700; font-size: 18px; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.3s ease-in-out; }
.btn.btn-primary                    { background-color: var(--color-orange); color: white; }
.btn.btn-primary:hover              { color: black; }
.btn.btn-secondary                  { background-color: transparent; color: var(--color-black); border: 1px solid var(--color-black); }
.btn.btn-secondary:hover            { background-color: var(--color-black); color: white; }

/* Forms */
.teilnehmer                         { margin-top: 1rem; padding: 1rem; border: 1px solid #ccc; border-radius: 4px; background-color: #f9f9f9; }
.form-item                          { margin-bottom: 1.5em; }
.form-item.error input,
.form-item.error select,
.form-item.error textarea           { border-width: 2px; border-color: var(--color-orange); }
input,select,textarea               { font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--color-black); background-color: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 0.5em; width: 100%; box-sizing: border-box; }
.form-part + .form-part             { margin-top: 1.5em; }
.pflicht                            { color: var(--color-orange); }
.show-thank-you-message .form-buttons,
.show-only-when-thank-you,
.show-only-when-has-sponsor         { display: none; }
.show-thank-you-message .show-only-when-thank-you { display: block; }
.show-only-when-thank-you           { background-color: white; padding: 1rem; border-radius: 10px; }

/* MARK: Sektionen & Hintergrundfarben */
.s                                  { padding: 60px 0; }
.bg.grey                            { background-color: #f5f5f5; }
.bg.white                           { background-color: #fff; }
.r + .r                             { margin-top: 30px; }

/* Preview */
.preview                            { background: var(--color-orange); display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; color: white; font-weight: 700; font-size: 18px; text-align: center; text-wrap: balance; border-radius: 4px; }

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v48-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v48-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-v48-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v48-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-v48-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}