/**
 * Theme Name: Dach Schutzbekleidung
 * Template:   generatepress
 */
:root {
  --base-primary: #E4013A;
  --base-secondary: #2C4053;
  --grey-lightest: #EAECEE;
  --grey-light: #CACFD4;
  --grey-neutral: #656565;
  --grey-dark: #1E2B37;
  --text-white: #FFFFFF;
  --text-black: #000000;
  --padding-s: 2rem;
  --padding-m: 4rem;
  --padding-l: 6rem;
  --margin-s: 4rem;
  --margin-m: 6rem;
  --margin-l: 8rem;
  --fs-smallest: clamp(0.6076rem, 0.5686rem + 0.1954vw, 0.72rem);
  --fs-tag: clamp(0.7292rem, 0.6697rem + 0.2971vw, 0.9rem);
  --fs-p: clamp(0.875rem, 0.788rem + 0.4348vw, 1.125rem);
  --fs-h5: clamp(1.05rem, 0.9261rem + 0.6196vw, 1.4063rem);
  --fs-h4: clamp(1.26rem, 1.0868rem + 0.8658vw, 1.7578rem);
  --fs-h3: clamp(1.512rem, 1.2736rem + 1.1918vw, 2.1973rem);
  --fs-h2: clamp(1.8144rem, 1.4902rem + 1.6212vw, 2.7466rem);
  --fs-h1: clamp(2.1773rem, 1.7404rem + 2.1843vw, 3.4332rem);
  --fs-m: 1rem;
}

* {
  box-sizing: border-box;
  margin: 0;
}

h1 {
  font-size: var(--fs-h1);
  margin-bottom: var(--fs-m);
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--fs-m);
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--fs-m);
  text-wrap: balance;
}

h4 {
  font-size: var(--fs-h4);
  margin-bottom: var(--fs-m);
  text-wrap: balance;
}
h4[class=subtitle] {
  text-transform: uppercase;
}
h4[class=subtitle]::before {
  content: "";
  display: block;
  margin-bottom: var(--fs-m);
  height: 6px;
  width: 52px;
  background-color: var(--base-primary);
}

h5 {
  font-size: var(--fs-h5);
  margin-bottom: var(--fs-m);
  text-wrap: balance;
}

p, a {
  font-size: var(--fs-p);
  margin-bottom: var(--fs-m);
  text-wrap: pretty;
}

body {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "footer";
}
body > header {
  grid-area: header;
}
body > .grid-container {
  grid-area: main;
  max-width: 100vw;
}
body > .grid-container .inside-article {
  padding: 0;
  margin: 0;
}
body > .site-footer {
  grid-area: footer;
}

.site-main, .entry-content {
  margin-top: 0 !important;
}

.site-header {
  position: fixed;
  top: 32px;
  left: 0;
  height: 120px;
  width: 100%;
  z-index: 1000;
  background-color: var(--text-white);
  border-bottom: 1px solid var(--base-primary);
}

.entry-content {
  --_padding-inline: 2rem;
  --_column-count: 6;
  --_content-max-width: 120ch;
  --_breakout-max-width: 132ch;
  --_breakout-size: calc((var(--_breakout-max-width) - var(--_content-max-width)) / 2);
  display: grid;
  grid-template-columns: [fullwidth-start] minmax(var(--_padding-inline), 1fr) [breakout-start] minmax(0, var(--_breakout-size)) [content-start] repeat(var(--_column-count), min(100% - var(--_padding-inline) * 2, var(--_content-max-width) / var(--_column-count))) [content-end] minmax(0, var(--_breakout-size)) [breakout-end] minmax(var(--_padding-inline), 1fr) [fullwidth-end];
}
.entry-content > * {
  grid-column: content;
}

.breakout {
  grid-column: breakout;
}

.fullwidth {
  grid-column: fullwidth;
}

.even-col > * {
  grid-column: span var(--_col-width);
}
.even-col > *:first-child {
  grid-column: var(--_col-start, content-start)/span var(--_col-width);
}
.even-col > *:last-child {
  grid-column: span var(--_col-width)/var(--_col-end, content-end);
}
.even-col:has(.breakout) {
  grid-column: breakout;
}
.even-col:has(.breakout) .breakout {
  grid-column: breakout-start/breakout-end;
}

.one-col {
  --_col-width: var(--_column-count);
}

.two-col {
  --_col-width: calc(var(--_column-count) / 2);
}

.three-col {
  --_col-width: calc(var(--_column-count) / 3);
}

.edited {
  --_col-start: 2;
  --_col-end: -2;
}

section {
  margin-bottom: var(--margin-m);
  margin-top: var(--margin-m);
  display: grid;
  gap: var(--padding-s);
  grid-template-columns: subgrid;
}

.focus {
  padding: var(--padding-m) 0;
}
.focus > p {
  font-size: calc(var(--fs-p) + 0.5rem);
}

.hero__full {
  min-height: 100vh;
  align-content: center;
  background-image: url(../../uploads/2025/07/wp_hero_bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 0;
  animation: parallax-hero linear;
  animation-timeline: scroll();
}
.hero__half {
  min-height: 50vh;
  align-content: center;
  background-image: url(../../uploads/2025/07/wp_hero_bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 120px;
  position: relative;
  animation: parallax-hero linear;
  animation-timeline: scroll();
}
.hero__half img {
  position: absolute;
  bottom: 0;
}

@keyframes parallax-hero {
  from {
    background-position: center 50%;
  }
  to {
    background-position: center 100%;
  }
}
.focus {
  text-align: center;
  background-color: var(--grey-dark);
  color: var(--text-white);
}

.scroll-through {
  --_range-start: 15vh;
  --_range-end: 30vh;
  --_range-dif: calc(var(--fs-h2) + var(--fs-m));
}
.scroll-through > * {
  color: rgba(255, 255, 255, 0.6);
  background-image: linear-gradient(90deg, white, white);
  background-clip: text;
  background-size: 0%;
  background-repeat: no-repeat;
  animation: scroll-through linear forwards;
  animation-timeline: view();
}
.scroll-through:is(h2) > * {
  animation-range-start: contain var(--_range-start);
  animation-range-end: contain var(--_range-end);
}
.scroll-through:is(p) > * {
  animation-range-start: contain calc(var(--_range-end) - var(--_range-dif));
  animation-range-end: contain calc(var(--_range-end) * 2);
}

@keyframes scroll-through {
  to {
    background-size: 100%;
  }
}/*# sourceMappingURL=style.css.map */