@charset "UTF-8";
/* Globale Variablen */
:root {
  /* @link https://utopia.fyi/grid/calculator?c=314,14,1.125,1054,17,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,xl-2xl|s-l|3xs-m&g=s,l,xl,12 */
  --grid-max-width: 65.88rem;
  --grid-gutter: var(--space-s-l, clamp(0.875rem, 0.3446rem + 2.7027vw, 2.125rem));
  --grid-columns: 12;
  /* @link https://utopia.fyi/space/calculator?c=314,14,1.125,1054,17,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,xl-2xl|s-l|3xs-m&g=s,l,xl,12 */
  --space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
  --space-2xs: clamp(0.4375rem, 0.3845rem + 0.2703vw, 0.5625rem);
  --space-xs: clamp(0.6875rem, 0.6345rem + 0.2703vw, 0.8125rem);
  --space-s: clamp(0.875rem, 0.7954rem + 0.4054vw, 1.0625rem);
  --space-m: clamp(1.3125rem, 1.1799rem + 0.6757vw, 1.625rem);
  --space-l: clamp(1.75rem, 1.5909rem + 0.8108vw, 2.125rem);
  --space-xl: clamp(2.625rem, 2.3863rem + 1.2162vw, 3.1875rem);
  --space-2xl: clamp(3.5rem, 3.1818rem + 1.6216vw, 4.25rem);
  --space-3xl: clamp(5.25rem, 4.7726rem + 2.4324vw, 6.375rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1174rem + 0.6757vw, 0.5625rem);
  --space-2xs-xs: clamp(0.4375rem, 0.2784rem + 0.8108vw, 0.8125rem);
  --space-xs-s: clamp(0.6875rem, 0.5284rem + 0.8108vw, 1.0625rem);
  --space-s-m: clamp(0.875rem, 0.5568rem + 1.6216vw, 1.625rem);
  --space-m-l: clamp(1.3125rem, 0.9677rem + 1.7568vw, 2.125rem);
  --space-l-xl: clamp(1.75rem, 1.14rem + 3.1081vw, 3.1875rem);
  --space-xl-2xl: clamp(2.625rem, 1.9355rem + 3.5135vw, 4.25rem);
  --space-2xl-3xl: clamp(3.5rem, 2.2801rem + 6.2162vw, 6.375rem);
  /* Custom pairs */
  --space-s-l: clamp(0.875rem, 0.3446rem + 2.7027vw, 2.125rem);
  --space-3xs-m: clamp(0.25rem, -0.3334rem + 2.973vw, 1.625rem);
  /* @link https://utopia.fyi/type/calculator?c=314,14,1.125,1054,17,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,xl-2xl|s-l|3xs-m&g=s,l,xl,12 */
  --step--2: clamp(0.68rem, 0.6962rem + -0.0246vw, 0.6914rem);
  --step--1: clamp(0.7778rem, 0.7471rem + 0.1562vw, 0.85rem);
  --step-0: clamp(0.875rem, 0.7954rem + 0.4054vw, 1.0625rem);
  --step-1: clamp(0.9844rem, 0.8385rem + 0.7432vw, 1.3281rem);
  --step-2: clamp(1.1074rem, 0.8729rem + 1.1951vw, 1.6602rem);
  --step-3: clamp(1.2458rem, 0.8939rem + 1.7932vw, 2.0752rem);
  --step-4: clamp(1.4016rem, 0.8956rem + 2.5782vw, 2.594rem);
  --step-5: clamp(1.5768rem, 0.87rem + 3.6015vw, 3.2425rem);
  /* colors */
  --color-text:#0E2141;
  --color-text-invers:#ffffff;
  --color-primary: #0E2D3E;
  --color-secondary: #ECAC8E;
  --color-link: #C3443F;
  --color-link-hover: #ff7860;
  --color-accent: #C3443F;
  --color-accent-hover: #ff7860;
  --color-cta: #FEB847;
  --color-canvas: #ffffff;
  --color-neutral-000: #ffffff;
  --color-neutral-010:hsl(218, 10%, 95%);
  --color-neutral-020:hsl(218, 10%, 85%);
  --color-neutral-030:hsl(218, 15%, 75%);
  --color-neutral-040:hsl(218, 20%, 65%);
  --color-neutral-050:hsl(218, 25%, 55%);
  --color-neutral-060:hsl(218, 25%, 45%);
  --color-neutral-070:hsl(218, 35%, 35%);
  --color-neutral-080:hsl(218, 45%, 25%);
  --color-neutral-090:hsl(218, 55%, 15%);
  --color-neutral-100:hsl(218, 65%, 05%);
  --color-background-accent0:#e4eef4;
  --color-background-accent1:#D7E6EE;
  --color-background-accent2: #FBECE3;
  --font-accent: Petrona, serif;
  --font-default: "Inter", system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", sans-serif;
}

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

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

/* Basics - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body {
  background-color: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-default);
  font-size: var(--step-0);
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 65.88rem) {
  body {
    margin: var(--space-s);
  }
}

h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, blockquote, figure, pre, hr, fieldset, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0;
  font-family: var(--font-accent);
  font-weight: 400;
  line-height: 1.2;
  font-size: var(--step-0);
  width: 100%;
}

.heading {
  font-size: var(--step-3);
  margin-block-end: var(--space-xs);
  font-family: var(--font-accent);
}
.heading__title {
  font-size: var(--step-5);
}
.heading__subheading {
  font-size: var(--step-2);
}
.heading__subsubheading {
  font-size: var(--step-1);
  font-family: var(--font-default);
  font-weight: 600;
  color: var(--color-accent);
}
.heading__intext {
  font-size: var(--step-0);
  font-family: var(--font-default);
  font-weight: 600;
}
.heading em {
  font-family: var(--font-default);
  font-size: var(--step-0);
  font-weight: 600;
  display: inline-block;
  border: 1px solid var(--color-accent);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--space-xl);
  margin-inline-start: var(--space-2xs);
}

p {
  font-size: var(--step-0);
  line-height: 1.35;
  display: block;
  margin-block-end: var(--space-xs);
}

p.introtext {
  font-size: var(--step-1);
  line-height: 1.55;
  display: block;
  margin-block-end: var(--space-m);
}

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
a.morelink {
  position: relative;
  width: auto;
  padding-inline-end: calc(var(--space-2xs) + var(--space-3xs));
}
a.morelink::after {
  content: "›";
  position: absolute;
  right: 0;
}

.highlight {
  font-style: italic;
  font-weight: 600;
}

.btn {
  font-size: var(--step-0);
  color: var(--color-text-invers);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--space-xl);
  background: var(--color-accent);
  font-weight: 600;
  display: inline-block;
}
.btn:hover {
  text-decoration: none;
  background: var(--color-accent-hover);
  color: var(--color-text-invers);
}
.btn__cta {
  color: var(--color-text);
  background-color: var(--color-cta);
}

.inverted {
  background-color: var(--color-primary);
  color: var(--color-text-invers);
}

.inverted a {
  color: var(--color-text-invers);
}

.pill {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--step--1);
  display: inline-block;
  border-radius: var(--space-xl);
  padding: var(--space-3xs) var(--space-2xs);
  margin: 0 var(--space-xs) var(--space-m) 0;
}
.pill__invers {
  border-color: var(--color-neutral-000);
  color: var(--color-text-invers);
}
.pill__medium {
  border-color: var(--color-neutral-050);
  color: var(--color-neutral-040);
}

ul.iconlist {
  list-style-type: none;
  margin-block-end: var(--space-m);
}
ul.iconlist a.morelink {
  padding-block-start: var(--space-2xs);
  padding-block-end: var(--space-xs);
}
ul.iconlist li {
  position: relative;
  vertical-align: top;
  padding-inline-start: var(--space-m);
  margin-block-end: var(--space-2xs);
  line-height: 1.35;
}
ul.iconlist li:before {
  content: url("../images/chevron-circle-right.svg");
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  height: var(--space-s);
  width: var(--space-s);
}
ul.iconlist li.listfile:before {
  content: url("../images/file.svg");
}
ul.iconlist li.listpdf:before {
  content: url("../images/file-pdf.svg");
}
ul.iconlist li.listzip:before {
  content: url("../images/file-archive.svg");
}
ul.iconlist li.listtxt:before {
  content: url("../images/file-alt.svg");
}
ul.iconlist li.listfacebook:before {
  content: url("../images/file-alt.svg");
}
ul.iconlist li.listlinkedin:before {
  content: url("../images/file-alt.svg");
}
ul.iconlist li.listinstagram:before {
  content: url("../images/file-alt.svg");
}
ul.iconlist li.listcheck:before {
  content: url("../images/check-circle.svg");
}
ul.iconlist li p::last-of-type {
  margin-block-end: 0;
}
ul.iconlist li strong {
  color: var(--color-text);
  font-size: var(--step-0);
  display: block;
}

/** Navigation - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - **/
.headernav {
  padding-block: var(--space-m) var(--space-s);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.headernav .logo {
  height: var(--space-m);
  width: auto;
  margin-inline-end: var(--space-m);
  margin-block: -4px var(--space-xs);
}
.headernav .logo:hover {
  transform: scale(1.03);
}
.headernav a:not(.btn) {
  color: var(--color-text);
  font-size: var(--step-0);
}
.home .headernav a:not(.btn) {
  color: var(--color-text-invers);
}
.headernav a:not(.btn):hover {
  color: var(--color-accent-hover);
  text-decoration: none;
}
.headernav nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-1);
  padding: 0;
  margin: 0;
  align-items: baseline;
}
.headernav nav ul li {
  padding: 0;
}

/** Utilities - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - **/
.relative {
  position: relative;
}

.hidden {
  display: none;
}

* {
  transition: all 0.15s ease-in-out;
}

section {
  margin-block-end: var(--space-l-xl);
}

/* Sections - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
section {
  margin-inline: auto;
  margin-block-end: var(--space-l-xl);
  max-width: var(--grid-max-width);
}
section.alt1 {
  background-color: var(--color-background-accent1);
  padding-block: var(--space-l);
}
section.alt2 {
  background-color: var(--color-background-accent0);
  padding-block: var(--space-l);
}
section#trusties {
  margin-inline: auto;
}

/* Hero - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.home #hero-intro .u-container {
  padding-block-end: var(--space-l);
  height: 80vh;
  background: var(--color-primary) url("../images/eric-fensterbank.webp") no-repeat right bottom;
  background-size: 80%;
  background-position: right bottom;
  mask-image: url("../images/hero-mask.svg");
  mask-size: auto 100%;
  mask-repeat: no-repeat;
  mask-position: bottom center;
}
@media (min-width: 340px) {
  .home #hero-intro .u-container {
    background-size: 70%;
    min-height: 380px;
    mask-size: 100% auto; /* Breite = 100%, Höhe automatisch */
    mask-repeat: no-repeat;
    mask-position: bottom center; /* Maske nur unten ausrichten */
  }
}
@media (min-width: 440px) {
  .home #hero-intro .u-container {
    background-size: contain;
    max-height: 500px;
  }
}
@media (min-width: 65.88rem) {
  .home #hero-intro .u-container {
    border-top-left-radius: var(--space-s);
    border-top-right-radius: var(--space-s);
  }
}

.default #hero-intro .u-container,
.prinzip #hero-intro .u-container {
  padding-block-end: var(--space-l);
  background: var(--color-neutral-020);
  mask-image: url("../images/hero-mask.svg");
  mask-size: auto 100%;
  mask-repeat: no-repeat;
  mask-position: bottom center;
}
@media (min-width: 340px) {
  .default #hero-intro .u-container,
  .prinzip #hero-intro .u-container {
    mask-size: 100% auto; /* Breite = 100%, Höhe automatisch */
    mask-repeat: no-repeat;
    mask-position: bottom center; /* Maske nur unten ausrichten */
  }
}
@media (min-width: 65.88rem) {
  .default #hero-intro .u-container,
  .prinzip #hero-intro .u-container {
    border-top-left-radius: var(--space-s);
    border-top-right-radius: var(--space-s);
  }
}

.hero-text {
  text-align: left;
  padding-block: var(--space-s);
}
.home .hero-text {
  color: white;
}
@media (min-width: 270px) {
  .hero-text {
    margin-inline: 5%;
    width: 70%;
  }
}
@media (min-width: 650px) {
  .hero-text {
    margin-inline: 10%;
  }
}
@media (min-width: 750px) {
  .hero-text {
    margin-inline: 15%;
    width: 50%;
  }
}
.hero-text p {
  font-size: var(--step-1);
  font-weight: 300;
}
.hero-text .morelink {
  color: var(--color-accent-hover);
}
.hero-text .morelink:hover {
  color: var(--color-text-invers);
}

/* Buffet - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#buffet .u-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}
#buffet .u-container .heading {
  text-align: center;
}

.module__list--dates .date .location p.full {
  font-weight: 400;
  color: var(--color-neutral-040);
  background-color: var(--color-neutral-010);
  border: solid 2px var(--color-neutral-040);
  border-radius: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  min-width: var(--space-3xl);
  display: inline;
}

.module {
  flex-basis: 180px;
  flex-grow: 1;
  background-color: var(--color-background-accent0);
  padding: var(--space-s);
  border-radius: var(--space-2xs);
}

.module__list--dates .date {
  display: flex;
  margin-block-end: var(--space-s);
  align-items: flex-start;
}
.module__list--dates .date:not(:last-of-type) {
  padding-block-end: var(--space-s);
  border-block-end: solid 1px var(--color-neutral-030);
}
.module__list--dates .date .calendar {
  width: var(--space-xl);
  border: solid 1px var(--color-primary);
  text-align: center;
  margin: 0 var(--space-s) 0 0;
  display: inline-block;
  border-bottom-left-radius: var(--space-3xs);
  border-bottom-right-radius: var(--space-3xs);
}
.module__list--dates .date .calendar span.day {
  border-block-start: solid var(--space-2xs) var(--color-accent);
  font-size: var(--step-3);
  font-weight: 600;
  display: block;
}
.module__list--dates .date .calendar span.month {
  font-size: var(--step--1);
  display: block;
  padding: 0 var(--space-2xs) var(--space-3xs);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.module__list--dates .date .location p {
  font-weight: 600;
  margin-block-end: var(--space-3xs);
}
.module__list--dates .date .location a.morelink {
  font-weight: 400;
  font-size: var(--step-0);
  display: inline-block;
  margin-inline-end: var(--space-xs);
}

.module__community dl#community {
  text-align: center;
  margin-block-end: var(--space-m);
}
.module__community dl#community dt {
  font-size: var(--step--1);
}
.module__community dl#community dd {
  font-size: var(--step-5);
  font-weight: 900;
}

/* Trusties - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#trusties .u-container {
  background-color: var(--color-background-accent2);
  padding: var(--space-l);
  text-align: center;
}
#trusties .u-container .logoband img {
  height: auto;
  margin: var(--space-s);
  vertical-align: middle;
  mix-blend-mode: multiply;
}
#trusties .u-container .logoband img.trust_combank {
  width: calc(1.5 * var(--space-3xl));
}
#trusties .u-container .logoband img.trust_dbahn {
  width: calc(0.35 * var(--space-3xl));
}
#trusties .u-container .logoband img.trust_edis {
  width: calc(0.55 * var(--space-3xl));
}
#trusties .u-container .logoband img.trust_eon {
  width: calc(0.55 * var(--space-3xl));
}
#trusties .u-container .logoband img.trust_geb {
  width: calc(0.45 * var(--space-3xl));
}
#trusties .u-container .logoband img.trust_ {
  width: calc(0.5 * var(--space-3xl));
}
#trusties .u-container .logoband img.trust_ {
  width: calc(0.5 * var(--space-3xl));
}

/* Content - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.content {
  margin-inline: auto;
  max-width: 40em;
}

.photo {
  max-width: 45vw;
  height: auto;
  float: left;
  margin: 0 var(--space-m) var(--space-m) 0;
}
.photo__right {
  float: right;
  margin: 0 0 var(--space-m) var(--space-m);
}

/* Footer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
footer.inverted {
  margin-inline: auto;
  max-width: var(--grid-max-width);
}
@media (min-width: 65.88rem) {
  footer.inverted {
    border-bottom-left-radius: var(--space-s);
    border-bottom-right-radius: var(--space-s);
  }
}
footer.inverted .u-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
}
footer.inverted .module {
  background-color: transparent;
  flex: 1;
  flex-basis: 180px;
}
footer.inverted nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer.inverted nav ul li {
  margin-block-end: var(--space-2xs);
}
footer.inverted nav ul li a {
  font-weight: 300;
  color: var(--color-neutral-030);
}

/* Home spacific - - - - - -- - - - --  --  -- -  -- - - -  - */
.logoinvers {
  display: none;
}

body.home .logodefault {
  display: none;
}
body.home .logoinvers {
  display: block;
}

/*# sourceMappingURL=style.css.map */