/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Variablen
███████████████████████████████████████████████████████████████████████████████████████████████
*/
:root {
  /* Fonts */
  --font_serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font_sans_serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --fontawesome: 'Font Awesome 6 Free';
  --fontawesome_brands: 'Font Awesome 6 Brands';

  --font_size_html: 20px;

  --font_size_h1: 2.8em;
  --font_size_h2: 1.9em;
  --font_size_h3: 1.5em;
  --font_size_h4: 1.2em;

  --font_weight_light: 300;
  --font_weight_normal: 400;
  --font_weight_medium: 500;
  --font_weight_bold: 700;
  --font_weight_black: 800;
  --font_weight_extra_bold: 900;

  /* Layout */
  --scroll_offset: 7rem;
  --text_line_height: 1.7em;
  --text_block_spacer: 1.5rem;
  --header_init_height: 275px;

  /* Colors */
  --color_document_bg: hsl(0, 0%, 100%);

  --color_primary: hsl(247, 54%, 33%);
  --color_primary_bright: hsl(247, 54%, 52%);
  --color_primary_dark: hsl(247, 53%, 20%);

  --color_secondary: hsl(356, 95%, 46%);
  --color_secondary_bright: hsl(355, 96%, 51%);
  --color_secondary_dark: hsl(357, 95%, 34%);

  --color_key: hsl(0, 0%, 11%);

  --color_emphasis: hsl(146, 99%, 30%);

  --color_text: hsl(0, 0%, 5%);
  --color_heading: hsl(0, 0%, 11%);

  --color_text_link: hsl(206, 81%, 29%);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Defaults / Normalize
███████████████████████████████████████████████████████████████████████████████████████████████
*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
* {
  background-repeat: no-repeat;
}
html, body {
  min-height: 100%;
}
html {
  font-size: var(--font_size_html);
  scroll-padding-top: var(--scroll_offset);
  scroll-behavior: smooth;
  min-height: 100vh;
  position: relative;
  background-color: var(--color_document_bg);
}
body {
  --font_size_default: clamp(.87rem, 1.125vw, 1.05rem);
  font-size: var(--font_size_default);
  position: relative;
}
body,
body * {
  font-family: var(--font_sans_serif);
  color: var(--color_text);
  line-height: var(--text_line_height);
  font-weight: var(--font_weight_normal);
}
::selection {
  background-color: var(--color_emphasis);
  color: #fff;
  text-shadow: 0 0 .2ch rgba(0, 0, 0, .2);
}
header, footer, main, section, article {
  container-type: inline-size;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}
p,
section .button_con {
  margin-bottom: var(--text_block_spacer);
}
strong {
  font-weight: var(--font_weight_bold);
}
i,
em {
  font-style: italic;
}
ol li {
  list-style: decimal;
}
ul[class],
ul[id] {
  list-style: none;
  margin: 0;
  padding: 0;
}
img, picture, svg, video {
  display: block;
  max-width: 100%;
}
figure:has(figcaption) {
  display: table;
}
figure img {
  border-radius: .15rem;
  box-shadow:
    0px 0px 1px rgba(0, 0, 0, 0.01),
    0px 1px 4px rgba(0, 0, 0, 0.02),
    0px 3px 8px rgba(0, 0, 0, 0.02),
    0px 4px 15px rgba(0, 0, 0, 0.03),
    0px 7px 23px rgba(0, 0, 0, 0.04);
}
figure figcaption {
  display: table-caption;
  caption-side: bottom;
  font-size: .87em;
  font-style: italic;
  padding-inline: 2px;
  line-height: 1.3em;
  text-shadow: -1px -1px 2px rgba(255,255,255,.5);
}
main a:not([class]),
main a.telephone,
main a.email {
  color: var(--color_text_link);
  text-decoration: underline;
}
a:hover {
  text-decoration-color: inherit;
}
.center {
  text-align: center !important;
  max-width: unset;
}
.center > * {
  text-align: inherit;
}
.clear {
  clear: both;
  float: none;
  display: block;
}
mark {
  background-image: linear-gradient(45deg, #ffff17 25%, #fff824 25%, #fff824 50%, #ffff17 50%, #ffff17 75%, #fff824 75%, #fff824 100%);
  background-size: 36.77px 36.77px;
  background-repeat: repeat;
  color: #333 !important;
  border-radius: 2px;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Überschriften
███████████████████████████████████████████████████████████████████████████████████████████████
*/
h1, h2, h3, h4, h5, h6 {
  display: block;
  text-align: left;
  text-box-trim: both;
  line-height: calc( var(--text_line_height) * .7 );
  color: var(--color_heading);
  font-weight: var(--font_weight_medium);
  margin-top: 0;
  margin-bottom: 1.3ch;
}
h1 {
  margin-bottom: 3ch;
}
* > h2:not(:first-child),
* > h3:not(:first-child),
* > h4:not(:first-child),
* > h5:not(:first-child),
* > h6:not(:first-child) {
  margin-top: calc( var(--font_size_default) * .8);
}
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
  line-height: inherit;
  font-weight: inherit;
}
h1 {
  font-size: calc( var(--font_size_default) * 2.5);
}
h2 {
  font-size: calc( var(--font_size_default) * 2.2);
}
h3 {
  font-size: calc( var(--font_size_default) * 1.9);
}
h3 {
  font-size: calc( var(--font_size_default) * 1.6);
}
h4 {
  font-size: calc( var(--font_size_default) * 1.3);
}
h5, h6 {
  font-size: var(--font_size_default);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Header
███████████████████████████████████████████████████████████████████████████████████████████████
*/
header.site_header {
  --animation_duration: 400ms;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  transition: all var(--animation_duration) ease-in-out;
  padding-block: 0;
  background-color: #fff;
}
header.site_header::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, var(--color_primary) 20%, var(--color_secondary_dark) 80%);
  background-size: 400% 100%;
  animation: gradient 20s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
header.site_header.shrink {
  background-color: rgba(255, 255, 255, .9);
  backdrop-filter: blur(4px);
  box-shadow:
    0 0 1.7px rgba(0, 0, 0, 0.031),
    0 0 4px rgba(0, 0, 0, 0.044),
    0 0 7.5px rgba(0, 0, 0, 0.055),
    0 0 13.4px rgba(0, 0, 0, 0.066),
    0 0 25.1px rgba(0, 0, 0, 0.079),
    0 0 60px rgba(0, 0, 0, 0.11)
  ;
}
header.site_header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*
Top-Line
-----------------------------------------------------------------------------------------------
*/
header.site_header .top_line {
  background: linear-gradient(to right, var(--color_primary_dark) 0%, var(--color_primary) 50%, var(--color_primary_dark) 100%);
  color: #fff;
  padding-block: .5rem;
  font-size: .9em;
  border-bottom: 1px solid var(--color_primary_bright);
  transition: padding-block var(--animation_duration) ease-in-out;
}
header.site_header.shrink .top_line {
  padding-block: .15rem;
}
header.site_header .top_line * {
  color: inherit;
}
header.site_header .top_line > * {
  display: flex;
  justify-content: space-between;
}
header.site_header .top_line a {
  text-decoration: none;
}
header.site_header .top_line a:hover {
  text-decoration: underline;
}
header.site_header .top_line address {
  font-style: normal;
  display: flex;
  gap: 3ch;
}
header.site_header .top_line address a::before {
  font-family: var(--fontawesome);
  font-size: .9em;
  display: inline-block;
  width: auto;
  text-align: center;
  margin-right: .4em;
  text-decoration: none;
}
header.site_header .top_line address a.telephone::before {
  content: '\f095' / 'Telefon:';
}
header.site_header .top_line address a.email::before {
  content: '\f0e0' / 'E-Mail:';
}
header.site_header .top_line .social_media_icon_list li {
  line-height: 0;
  display: flex;
  align-items: center;
}
header.site_header .top_line .social_media_icon_list i.fa-brands {
  font-size: 1.4em;
  line-height: 0;
}
header.site_header .top_line ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  gap: 3ch;
}
header.site_header .top_line ul li {
  list-style: none;
  margin: 0;
}
/*
Main-Line
-----------------------------------------------------------------------------------------------
*/
header.site_header .main_line {
  --terminator_position: 45%;
  --terminator_angle: 135deg;
  padding-block: 1rem;
  transition: all var(--animation_duration);
  background-color: #fff;
  background:
    linear-gradient(
      var(--terminator_angle),
      #fff var(--terminator_position),
      #1d1d1d calc( var(--terminator_position) + 1px)
    );
}
@media (max-width: 85rem) {
  header.site_header:not(.shrink) .main_line {
    --terminator_position: 60%;
  }
}
@media (max-width: 75rem) {
  header.site_header:not(.shrink) .main_line {
    --terminator_position: 80%;
    --terminator_angle: 105deg;
  }
}
@media (max-width: 45rem) {
  header.site_header:not(.shrink) .main_line {
    --terminator_position: 70%;
  }
}
header.site_header.shrink .main_line {
  --terminator_position: 20%;
  padding-block: .4rem;
}
@media (max-width: 87rem) {
  header.site_header.shrink .main_line {
    --terminator_position: 65%;
  }
}
header.site_header .main_line > * {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
header.site_header .main_line .logo {
  line-height: 0;
}
header.site_header .main_line .logo a {
  display: inline-block;
}
header.site_header .main_line .logo img {
  display: block;
  width: 450px;
  transition: all var(--animation_duration);
  margin-bottom: .1rem;
}
@media (max-width: 90rem) {
  header.site_header:not(.shrink) .logo img {
    width: 380px;
  }
}
@media (max-width: 50rem) {
  header.site_header:not(.shrink) .logo img {
    width: 280px;
  }
}
header.site_header.shrink .main_line .logo img {
  width: 160px;
  margin-bottom: 0;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Main
███████████████████████████████████████████████████████████████████████████████████████████████
*/
body > main {
  padding-block: 0;
}
body > main ul {
  margin-bottom: var(--text_block_spacer);
  margin-left: 1.7em;
}
body > main p,
body > main li {
  max-width: 90ch;
}
body > main :focus-visible {
  outline-color: rgba(58, 176, 226, .9);
  outline-width: 3px;
  outline-offset: 4px;
  border-radius: .3rem;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Sections
███████████████████████████████████████████████████████████████████████████████████████████████
*/
main > section {
  padding-block: 5rem;
  margin-bottom: 0;
}
main > section figure:has(+ p) {
  margin-bottom: var(--pico-typography-spacing-vertical);
}
main > section > h1,
main > section > h2 {
  position: relative;
  z-index: 0;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Hero (nur auf HP)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
section.hero {
  position: relative;
  aspect-ratio: 3/1;
  background-image: url('../img/home/hero.webp');
  background-size: cover;
  background-position: 50% 50%;
  --triangle_leg_short: 12vw;
  --triangle_leg_long: 16vw;
  --claim_vertical_overlap: 9rem;
  border-bottom: 4rem solid var(--color_primary_dark);
}
section.hero::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 calc(var(--triangle_leg_long)/2) calc(var(--triangle_leg_short)/2);
  border-color: transparent transparent var(--color_primary_dark) transparent;
}
section.hero > * {
  z-index: 1;
}
section.hero .claim_con {
  position: relative;
  overflow: visible;
  width: clamp(16rem, 43rem, 100%);
}
section.hero .claim {
  position: absolute;
  bottom: calc(var(--claim_vertical_overlap) * -1);
  display: block;
  padding: 3rem;
  background-color: var(--color_key);
  background-color: rgba(0, 0, 0, .8);
  width: 100%;
  color: #fff;
  clip-path: polygon(0 0, calc(100% - var(--triangle_leg_short) / 2) 0, 100% calc(var(--triangle_leg_long) / 2), 100% 100%, 0 100%);
  border-radius: .1rem;
  backdrop-filter: blur(5px);
}
section.hero .claim hgroup {
  display: flex;
  flex-direction: column;
  color: inherit;
}
section.hero .claim h1 {
  font-size: 2.4em;
  line-height: 1.15em;
  color: inherit;
}
section.hero .claim hgroup h1 {
  order: 2;
}
section.hero .claim hgroup p {
  order: 1;
  font-size: .9em;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: inherit;
  margin-bottom: 0;
}
section.hero .claim .button_array {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
}
section.hero .pic_source {
  grid-column: -1/1;
}
@media (max-width: 90rem) {
  section.hero .claim_con {
    width: clamp(16rem, 35rem, 100%);
  }
  section.hero .claim h1 {
    font-size: 2.2em;
  }
}
@media (max-width: 80rem) {
  section.hero {
    aspect-ratio: 5/2;
    --triangle_leg_short: 9vw;
    --triangle_leg_long: 9vw;
  }
  section.hero .claim {
    padding: 1.5rem;
    clip-path: polygon(0 0, calc(100% - var(--triangle_leg_short) / 2) 0, 100% calc(var(--triangle_leg_long) / 2), 100% 100%, 0 100%);
  }
  section.hero .claim h1 {
    font-size: 2em;
  }
}
@media (max-width: 50rem) {
  section.hero {
    position: unset;
    aspect-ratio: unset;
    border-bottom: none;
    padding-block: 3rem;
  }
  section.hero::after {
    display: none;
  }
  section.hero > * {
    z-index: unset;
  }
  section.hero .claim_con {
    position: unset;
    overflow: unset;
    width: auto;
  }
  section.hero .claim {
    position: unset;
    bottom: unset;
    padding: 1rem;
    border-radius: .6rem;
    clip-path: unset
  }
  section.hero .claim h1 {
    font-size: 1.5em;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Intro (nur auf HP)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
section.intro {
  background-color: var(--color_primary_dark);
  color: #fff;
}
section.intro * {
  color: inherit;
}
section.intro a {
  color: inherit;
}
section.intro .service_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
section.intro .service_list li a {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 3;
  text-decoration: none;
  background-color: #444;
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, calc(100% - 3rem / 2) 0, 100% calc(2rem / 2), 100% 100%, 0 100%);
}
section.intro .service_list li a.stahlbau {
  background-image: url('../img/home/stahlbau.webp');
}
section.intro .service_list li a.treppen {
  background-image: url('../img/home/treppen.webp');
}
section.intro .service_list li a.balkone {
  background-image: url('../img/home/balkone.webp');
}
section.intro .service_list li a.edelstahl {
  background-image: url('../img/home/edelstahl.webp');
}
section.intro .service_list li a.gelaender_zaeune_tore {
  background-image: url('../img/home/gelaender.webp');
}
section.intro .service_list li a span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: .7em .5em;
  font-size: 1.3em;
  line-height: 1.1em;
  background-color: rgba(0, 0, 0, .7);
  backdrop-filter: blur(4px);
}
section.intro .service_list li a:hover span {
  background-color: rgba(255, 255, 255, .8);
  color: #000;
}
@media (max-width: 55rem) {
  section.intro .service_list {
    grid-template-columns: 1fr 1fr;
  }
  section.intro .service_list li a span {
    font-size: 1.2em;
  }
}
@media (max-width: 35rem) {
  section.intro .service_list {
    width: 353px;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Figure (klickbar)
███████████████████████████████████████████████████████████████████████████████████████████████
*/
figure[role="button"] {
  cursor: zoom-in;
  transition: transform 0.3s ease;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
}
figure[role="button"]:hover {
  transform: scale(1.04);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Disclaimer
███████████████████████████████████████████████████████████████████████████████████████████████
*/
main .disclaimer {
  position: relative;
  padding: 1.5ch 1ch 1.5ch 3.3ch;
  background-color: rgba(0, 0, 0, .02);
  border-radius: .5rem;
  backdrop-filter: blur(4px) grayscale(70%);
  font-size: .8em;
  line-height: 1.4em;
  opacity: .9;
}
main .disclaimer::before {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  top: -.3rem;
  left: -.3rem;
  width: 1.2rem;
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptLS4wMDEgNS43NWMuNjkgMCAxLjI1MS41NiAxLjI1MSAxLjI1cy0uNTYxIDEuMjUtMS4yNTEgMS4yNS0xLjI0OS0uNTYtMS4yNDktMS4yNS41NTktMS4yNSAxLjI0OS0xLjI1em0yLjAwMSAxMi4yNWgtNHYtMWMuNDg0LS4xNzkgMS0uMjAxIDEtLjczNXYtNC40NjdjMC0uNTM0LS41MTYtLjYxOC0xLS43OTd2LTFoM3Y2LjI2NWMwIC41MzUuNTE3LjU1OCAxIC43MzV2Ljk5OXoiLz48L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
  filter: contrast(.1);
  opacity: .5;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Zeitstrahl
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.timeline_section {
  --timeline_bg_color: #f4f4f4;
  background: linear-gradient(145deg, #ddd 50%, #aaa calc( 50% + 1px ));
  box-shadow:
    inset 0px 0px 1px rgba(0, 0, 0, 0.00),
    inset 0px 0px 4px rgba(0, 0, 0, 0.01),
    inset 0px 0px 10px rgba(0, 0, 0, 0.01),
    inset 0px 0px 18px rgba(0, 0, 0, 0.02),
    inset 0px 0px 28px rgba(0, 0, 0, 0.02),
    inset 0px 0px 40px rgba(0, 0, 0, 0.02),
    inset 0px 0px 54px rgba(0, 0, 0, 0.03),
    inset 0px 0px 70px rgba(0, 0, 0, 0.03),
    inset 0px 0px 89px rgba(0, 0, 0, 0.04),
    inset 0px 0px 110px rgba(0, 0, 0, 0.04);
}
.timeline {
  --line_color: #444;
  --line_width: 3px;
  --line_offset: 2rem;
  --dot_dimension: 21px;
  --dot_color: #333;
  --event_bg_color: rgba(0, 0, 0, .85);
  --event_border_color: rgba(0, 0, 0, .9);
  --event_text_color: #fff;
  --time_horizontal_offset: calc( var(--line_offset) / 2 );
  --time_color: #222;
  display: block;
  width: 100%;
  max-width: 800px;
  margin: auto;
  padding: 2rem 3rem;
  background-color: var(--timeline_bg_color);
  border-radius: .2rem;
  box-shadow:
    0px 1px 1px rgba(0, 0, 0, 0.02),
    2px 3px 5px rgba(0, 0, 0, 0.04),
    4px 7px 12px rgba(0, 0, 0, 0.06),
    6px 13px 21px rgba(0, 0, 0, 0.08),
    10px 20px 33px rgba(0, 0, 0, 0.10);
}
@media (max-width: 50rem) {
  .timeline_section {
    background: unset;
    background-color: var(--timeline_bg_color);
    box-shadow: unset;
  }
  .timeline {
    padding: 0;
    box-shadow: unset;
  }
}
@media (max-width: 40rem) {
  .timeline {
    --line_offset: 1rem;
  }
}
.timeline h2 {
  text-align: center;
}
.timeline ol {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.timeline ol::before {
  content: "";
  position: absolute;
  left: var(--line_offset);
  top: 0;
  width: var(--line_width);
  height: 100%;
  background: var(--line_color);
}
.timeline ol li {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.timeline ol li + li {
  margin-top: 2rem;
}
.timeline ol li::before {
  content: "";
  position: absolute;
  left: calc( var(--line_offset) + var(--line_width) / 2 - var(--dot_dimension) / 2 );
  top: calc( var(--dot_dimension) * 2.2 );
  width: var(--dot_dimension);
  aspect-ratio: 1;
  background: var(--dot_color);
  border-radius: 50%;
  border: 4px solid var(--timeline_bg_color);
  z-index: 1;
}
.timeline article {
  container-type: unset;
  width: 100%;
}
.timeline article time {
  flex: none;
  display: inline-block;
  width: auto;
  font-weight: bold;
  color: var(--time_color);
  position: relative;
  z-index: 1;
  background-color: var(--timeline_bg_color);
  padding: 1px var(--time_horizontal_offset);
}
.timeline .timeline_event {
  background: var(--event_bg_color);
  border: 1px solid var(--event_border_color);
  padding: 1rem;
  border-radius: .5rem;
  margin-left: calc( var(--line_offset) * 2 + var(--line_width) );
  position: relative;
  color: var(--event_text_color);
}
.timeline .timeline_event * {
  color: inherit;
}
.timeline .timeline_event h3 {
  font-size: 1.25em;
  margin-top: 0;
}
.timeline .timeline_event > *:last-child {
  margin-bottom: 0;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Leistungen
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#services_grid {
  --triangle_leg: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
#services_grid article {
  display: flex;
  flex-direction: column;
  gap: calc( var(--inner_paddings) / 2 );
  --article_bg_color: #fff;
  --inner_paddings: 2rem;
  background-color: var(--article_bg_color);
  padding: var(--inner_paddings);
  box-shadow:
    0px 0px 1px rgba(0, 0, 0, 0.01),
    0px 0px 5px rgba(0, 0, 0, 0.02),
    1px 1px 12px rgba(0, 0, 0, 0.03),
    2px 2px 21px rgba(0, 0, 0, 0.04),
    3px 3px 33px rgba(0, 0, 0, 0.05);
}
#services_grid article > * {
  margin-bottom: 0;
}
#services_grid article > :last-child {
  margin-bottom: 0;
}
#services_grid article h2 {
  order: 0;
  font-size: 1.4em;
}
#services_grid article img {
  order: -1;
  aspect-ratio: 5/2;
  object-fit: cover;
  clip-path: polygon(0 0, calc(100% - var(--triangle_leg)) 0, 100% var(--triangle_leg), 100% 100%, 0 100%);
}
@media (max-width: 60rem) {
  #services_grid {
    margin-inline: auto;
    width: 700px;
    max-width: 100%;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 40rem) {
  #services_grid {
    --triangle_leg: 2rem;
    gap: 3rem;
  }
  #services_grid article {
    background-color: unset;
    padding: 0;
    box-shadow: unset;
  }
  #services_grid article h2 {
    order: -1;
  }
  #services_grid article img {
    order: 0;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    News-Teaser
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#news_teaser {
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}
#news_teaser .teaser {
  flex-grow: 0;
  flex-shrink: 1;
  width: 48%;
  margin: 1%;
}
#news_teaser .teaser img {
  float: left;
  margin: 0 1em .5em 0;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Aktuelles / News
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#news {
  container-name: news_con;
  container-type: inline-size;
  --teaser_pic_width: 400px;
}
#news #no_news {
  display: block;
  margin-bottom: 8em;
}
#news .newsblock {
  margin-top: var(--text_block_spacer);
}
#news .clc {
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  @container news_con (width < 37rem) {
    row-gap: var(--text_block_spacer);
  }
}
#news .clc .col {
  flex-grow: 0;
  flex-shrink: 1;
  @container news_con (width < 37rem) {
    width: 100% !important;
  }
}
#news .clc .col.pic {
  width: var(--teaser_pic_width);
}
#news .clc .col.contents {
  width: calc( 100% - var(--teaser_pic_width) - 2em );
}
#news .clc .col.pic img {
  display: block;
  width: auto;
  max-width: 100%;
}
@media (max-width: 600px) {
  #news .contents a.fancybox {
    display: inline-block;
    overflow: visible;
    line-height: 0;
  }
  #news .contents a.fancybox img {
    float: none !important;
    clear: both;
    max-width: 100%;
    margin: 0 !important;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    News-Galerie
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#news .gallery {
  --pics_per_gallery_row: 3;
  --transition_duration: 350ms;
  display: grid;
  grid-template-columns: repeat(var(--pics_per_gallery_row), 1fr);
  margin-bottom: var(--text_block_spacer);
  gap: .5rem;
  @container news_con (width < 37rem) {
    --pics_per_gallery_row: 2;
  }
  @container news_con (width < 23rem) {
    --pics_per_gallery_row: 1;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Bild-Text-Layout
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.pic_text_layout {
  overflow: visible;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
  --pic_width: 550px;
  --gap: 4rem;
  margin-bottom: var(--text_block_spacer);
}
.pic_text_layout + .pic_text_layout {
  margin-top: 3em;
}
.pic_text_layout .col {
  flex-grow: 0;
  flex-shrink: 1;
}
.pic_text_layout .col.pic {
  width: var(--pic_width);
  padding-top: .5em;
}
.pic_text_layout .col.pic figure + figure {
  margin-top: .5rem;
}
.pic_text_layout .col.pic img {
  display: block;
  width: auto;
  max-width: 100%;
}
.pic_text_layout .col.text {
  width: calc( 100% - var(--pic_width) - var(--gap));
}
.pic_text_layout .col > h2,
.pic_text_layout .col > h3 {
  margin-top: 0;
}
@media (max-width: 70rem) {
  .pic_text_layout {
    display: block;
  }
  .pic_text_layout .col {
    width: 100% !important;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Buttons
███████████████████████████████████████████████████████████████████████████████████████████████
*/
.button_con {
  text-align: center;
}
.button {
  display: inline-block;
  padding: .7em 2em;
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #fff !important;
  background-color: var(--color_primary_dark);
  border-radius: .4rem;
  border: 1px solid #fff;
}
.button.small {
  padding: .4em 1.5em;
  font-size: 1em;
}
.button:hover {
  background-color: var(--color_secondary_bright);
  color: #111 !important;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Kontakt
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#contact_info {
  font-style: normal;
  width: 900px;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: 3rem;
}
#contact_info h2 {
  text-align: center;
}
#contact_info .boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  justify-items: stretch;
  align-content: center;
  align-items: stretch;
  padding: 1rem 0;
}
#contact_info .boxes .box {
  border: 2px solid var(--color_secondary);
  padding: 2rem;
  width: 37ch;
  max-width: 100%;
  margin-inline: auto;
}
#contact_info .boxes .box a {
  color: inherit;
  text-decoration-color: inherit;
  text-underline-offset: .15em;
}
#contact_info .boxes .box .iconized::before {
  font-family: var(--fontawesome);
  font-size: 1em;
  display: inline-block;
  width: 1.4rem;
  text-align: center;
  margin-right: .4em;
  text-decoration: none;
  line-height: inherit;
}
#contact_info .iconized.street::before {
  content: '\f018';
}
#contact_info .iconized.address::before {
  content: '\f5a0';
}
#contact_info .iconized.telephone::before {
  content: '\f095';
}
#contact_info .iconized.mobile::before {
  content: '\f3cd';
}
#contact_info .iconized.fax::before {
  content: '\f1ac';
}
#contact_info .iconized.email::before {
  content: '\f0e0';
}
@media (max-width: 60rem) {
  #contact_info .boxes {
    gap: 1rem;
  }
  #contact_info .boxes .box {
    padding: 1.5rem;
    width: unset;
    max-width: unset;
  }
}
@media (max-width: 45rem) {
  #contact_info .boxes {
    grid-template-columns: 1fr;
    gap: .5rem;
    width: 37ch;
    max-width: 100%;
    margin-inline: auto;
  }
  #contact_info .boxes .box {
    border-width: 1px;
    width: 100%;
  }
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Karte
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#karte {
  padding-block-end: 0;
}
#karte .gmod {
  margin-bottom: 0;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
  Footer
███████████████████████████████████████████████████████████████████████████████████████████████
*/
body > footer {
  --padding_block: 3rem;
  background-color: var(--color_primary_dark);
  background: radial-gradient(ellipse at center 200%, var(--color_primary_dark), var(--color_key) 100%);
  color: #fff;
  padding-block: var(--padding_block);
}
body > footer:has(> .bottom_line) {
  padding-bottom: 0;
}
body > footer * {
  color: inherit;
}
body > footer a {
  text-decoration: none;
}
body > footer a:hover {
  text-decoration: underline;
}
body > footer .wide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .5rem 1.5rem;
}
body > footer .iconized::before {
  font-family: var(--fontawesome);
  font-size: 1em;
  display: inline-block;
  width: 1.4rem;
  text-align: center;
  margin-right: .4em;
  text-decoration: none;
}
body > footer .iconized.telephone::before {
  content: '\f095' / 'Telefon:';
}
body > footer .iconized.mobile::before {
  content: '\f3cd' / 'Mobil:';
}
body > footer .iconized.fax::before {
  content: '\f1ac' / 'Fax:';
}
body > footer .iconized.email::before {
  content: '\f0e0' / 'E-Mail';
}
body > footer .footer_nav_con {
  text-align: center;
  width: 100%;
  margin-top: 1rem;
}
body > footer ul {
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  gap: 2em;
}
body > footer ul li {
  list-style: none;
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    Bottom-Line
███████████████████████████████████████████████████████████████████████████████████████████████
*/
body > footer .bottom_line {
  background-color: #222;
  padding: .5em 0;
  overflow: visible;
  text-align: center;
  font-size: .9em;
  margin-top: var(--padding_block);
}
/*
███████████████████████████████████████████████████████████████████████████████████████████████
    CWD im Footer
███████████████████████████████████████████████████████████████████████████████████████████████
*/
#cwd {
  padding: .5em 1em;
  color: #fff;
  background-color: #222;
  text-align: center;
  font-size: .75em;
  line-height: 1.4em;
}
#cwd * {
  color: inherit !important;
  line-height: inherit !important;
  opacity: .8;
}
#cwd a {
  text-decoration: none !important;
}
#cwd a:hover {
  text-decoration: underline !important;
  opacity: 1;
}