/* open-sans-300 - 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: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-300.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-300.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-300italic - 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: "Open Sans";
  font-style: italic;
  font-weight: 300;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-300italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-300italic.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-regular.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-regular.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-italic - 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: "Open Sans";
  font-style: italic;
  font-weight: 400;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-italic.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 500;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-500.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-500.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-500italic - 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: "Open Sans";
  font-style: italic;
  font-weight: 500;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-500italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-500italic.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-600.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-600.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-600italic - 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: "Open Sans";
  font-style: italic;
  font-weight: 600;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-600italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-600italic.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-700.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-700.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-700italic - 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: "Open Sans";
  font-style: italic;
  font-weight: 700;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-700italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-700italic.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 800;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-800.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-800.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800italic - 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: "Open Sans";
  font-style: italic;
  font-weight: 800;
  src:
    url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-800italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/open-sans-v44-latin/open-sans-v44-latin-800italic.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-slab-100 - 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 Slab";
  font-style: normal;
  font-weight: 100;
  src:
    url("./assets/fonts/roboto-slab-v36-latin/roboto-slab-v36-latin-100.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/roboto-slab-v36-latin/roboto-slab-v36-latin-100.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-slab-200 - 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 Slab";
  font-style: normal;
  font-weight: 200;
  src:
    url("./assets/fonts/roboto-slab-v36-latin/roboto-slab-v36-latin-200.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/roboto-slab-v36-latin/roboto-slab-v36-latin-200.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-slab-300 - 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 Slab";
  font-style: normal;
  font-weight: 300;
  src:
    url("./assets/fonts/roboto-slab-v36-latin/roboto-slab-v36-latin-300.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/roboto-slab-v36-latin/roboto-slab-v36-latin-300.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-slab-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 Slab";
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/fonts/roboto-slab-v36-latin/roboto-slab-v36-latin-regular.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("./assets/fonts/roboto-slab-v36-latin/roboto-slab-v36-latin-regular.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/*-------------------------------------------------+
 |                                                 |
 |                      RESET                      |
 |                                                 |
 +-------------------------------------------------*/

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    min-height: 100dvh;
    background-color: #fff;
    color: #000;
    display: flex;
    flex-direction: column;
  }

  ul,
  ol {
    list-style: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  address {
    font-style: normal;
  }

  :where([hidden]) {
    display: none !important;
  }

  :where(:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

@layer normalize {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  p,
  blockquote,
  pre,
  figure,
  dl,
  dd {
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  img {
    object-fit: cover;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  fieldset {
    border: 0;
    min-width: 0;
    padding: 0;
  }

  legend {
    padding: 0;
  }

  textarea {
    resize: vertical;
  }

  button,
  select {
    text-transform: none;
  }

  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
}
/*-------------------------------------------------+
 |                                                 |
 |                      FONTS                      |
 |                                                 |
 +-------------------------------------------------*/

@layer fonts {
  html,
  body {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    font-family:
      "Open Sans",
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
    text-rendering: optimizeSpeed;
  }

  .h1 {
    font-family: "Roboto Slab";
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
  }

  .h2 {
    font-family: "Roboto Slab";
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
  }

  .h3 {
    font-family: "Roboto Slab";
    font-weight: 500;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.35;
  }

  .subtitle {
    font-family: "Roboto Slab";
    font-weight: 400;
    font-size: clamp(1.175rem, 2.25vw, 1.5rem);
    line-height: 2;
  }

  .small {
    font-size: 0.75rem;
    font-weight: 500;
  }
  .bigger {
    font-size: 1.35rem;
  }
  .xl {
    font-size: 1.75rem;
  }
  .xxl {
    font-size: 2rem;
  }

  .caps {
    text-transform: capitalize;
  }
  .caps-lock,
  .uppercase {
    text-transform: uppercase;
  }
  .text-center {
    text-align: center;
  }

  .bold,
  strong {
    font-weight: 700;
  }

  .sans {
    font-family: "Open Sans";
  }
  .slab {
    font-family: "Roboto Slab";
  }
}

/*-------------------------------------------------+
 |                                                 |
 |                    UTILITIES                    |
 |                                                 |
 +-------------------------------------------------*/

@layer utilities {

  .block{
    display: block;
  }
  [class|="box"] {
    padding: 1rem 1.25rem;
    display: inline-flex;
    align-items: center;
  }
  .box-light {
    background-color: var(--primary-light);
    color: var(--white)

  }

  [class|="btn"] {
    padding: 1rem 1.25rem;
    display: inline-flex;
    align-items: center;
  }
  .btn-primary {
    color: var(--white);
    background-color: var(--primary);
  }
  .btn-black {
    padding-inline: 1.75rem;
    color: var(--white);
    background-color: var(--black);
  }
  .btn-secondary {
    background-color: gray;
    color: var(--white);
    &:hover {
      background-color: var(--primary-dark);
    }
  }
  .btn-sub-nav {
    display: block;
    padding: 1.5rem 1.75rem;
    width: 100%;
    color: var(--white);
    &:hover {
      background-color: var(--primary-dark);
    }
  }
  .btn-nav {
    color: var(--medium-gray);
    background-color: transparent;
    &:hover {
      color: var(--white);
      background-color: var(--black);
    }
    &[data-current] {
      color: var(--white);
      background-color: var(--primary-dark);
    }
  }

  .center {
    place-self: center;
  }

  .content {
    margin-inline: auto;
    width: min(calc(100% - 4ch), var(--max-content));
  }
  .content-padding {
    padding-inline: max(2ch, calc((100dvw - var(--max-content)) / 2));
  }

  .content-small {
    width: min(calc(100% - 4ch), var(--max-small-content));
  }

  .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  /* Default (xs / mobile) */
  [data-cols="1"] {
    grid-column: span 1;
  }
  [data-cols="2"] {
    grid-column: span 2;
  }
  [data-cols="3"] {
    grid-column: span 3;
  }
  [data-cols="4"] {
    grid-column: span 4;
  }
  [data-cols="5"] {
    grid-column: span 5;
  }
  [data-cols="6"] {
    grid-column: span 6;
  }
  [data-cols="7"] {
    grid-column: span 7;
  }
  [data-cols="8"] {
    grid-column: span 8;
  }
  [data-cols="9"] {
    grid-column: span 9;
  }
  [data-cols="10"] {
    grid-column: span 10;
  }
  [data-cols="11"] {
    grid-column: span 11;
  }
  [data-cols="12"] {
    grid-column: span 12;
  }
  @media (min-width: 576px) {
    [data-cols-sm="1"] {
      grid-column: span 1;
    }
    [data-cols-sm="2"] {
      grid-column: span 2;
    }
    [data-cols-sm="3"] {
      grid-column: span 3;
    }
    [data-cols-sm="4"] {
      grid-column: span 4;
    }
    [data-cols-sm="5"] {
      grid-column: span 5;
    }
    [data-cols-sm="6"] {
      grid-column: span 6;
    }
    [data-cols-sm="7"] {
      grid-column: span 7;
    }
    [data-cols-sm="8"] {
      grid-column: span 8;
    }
    [data-cols-sm="9"] {
      grid-column: span 9;
    }
    [data-cols-sm="10"] {
      grid-column: span 10;
    }
    [data-cols-sm="11"] {
      grid-column: span 11;
    }
    [data-cols-sm="12"] {
      grid-column: span 12;
    }
  }
  @media (min-width: 768px) {
    [data-cols-md="1"] {
      grid-column: span 1;
    }
    [data-cols-md="2"] {
      grid-column: span 2;
    }
    [data-cols-md="3"] {
      grid-column: span 3;
    }
    [data-cols-md="4"] {
      grid-column: span 4;
    }
    [data-cols-md="5"] {
      grid-column: span 5;
    }
    [data-cols-md="6"] {
      grid-column: span 6;
    }
    [data-cols-md="7"] {
      grid-column: span 7;
    }
    [data-cols-md="8"] {
      grid-column: span 8;
    }
    [data-cols-md="9"] {
      grid-column: span 9;
    }
    [data-cols-md="10"] {
      grid-column: span 10;
    }
    [data-cols-md="11"] {
      grid-column: span 11;
    }
    [data-cols-md="12"] {
      grid-column: span 12;
    }
  }
  @media (min-width: 992px) {
    [data-cols-lg="1"] {
      grid-column: span 1;
    }
    [data-cols-lg="2"] {
      grid-column: span 2;
    }
    [data-cols-lg="3"] {
      grid-column: span 3;
    }
    [data-cols-lg="4"] {
      grid-column: span 4;
    }
    [data-cols-lg="5"] {
      grid-column: span 5;
    }
    [data-cols-lg="6"] {
      grid-column: span 6;
    }
    [data-cols-lg="7"] {
      grid-column: span 7;
    }
    [data-cols-lg="8"] {
      grid-column: span 8;
    }
    [data-cols-lg="9"] {
      grid-column: span 9;
    }
    [data-cols-lg="10"] {
      grid-column: span 10;
    }
    [data-cols-lg="11"] {
      grid-column: span 11;
    }
    [data-cols-lg="12"] {
      grid-column: span 12;
    }
  }

  .grid {
    display: grid;
  }

  .grow {
    flex-grow: 1;
  }

  .list {
    list-style: disc;
    padding-left: 4ch;
  }

  .m-y-s {
    margin-block: 1rem;
  }
  .m-y {
    margin-block: 2rem;
  }
  .m-y-l {
    margin-block: 4rem;
  }
  .m-b-s {
    margin-bottom: 1rem;
  }
  .m-b {
    margin-bottom: 2rem;
  }
  .m-b-l {
    margin-bottom: 4rem;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  .text-primary {
    color: var(--primary);
  }
  .text-primary-dark {
    color: var(--primary-dark);
  }
  .text-primary-light {
    color: var(--primary-light);
  }

  .w-full {
    width: 100%;
  }
  .h-full {
    height: 100%;
  }
}

:root {
  --primary: #800000;
  --primary-light: oklab(
    from var(--primary) calc(l + 0.1285) calc(a * 0.5175) calc(b * 0.3146)
  );
  --primary-dark: oklab(
    from var(--primary) calc(l + 0.04305) calc(a * 0.502) calc(b * 0.3146)
  );
  --dark-gray: #333333;
  --medium-gray: #7f7f7f;
  --light-gray: #999999;
  --black: #000;
  --white: #fff;
  --bg: var(--white);
  --fg: var(--black);
  --max-content: 72rem;
  --max-small-content: 35rem;
}

/*-------------------------------------------------+
 |                                                 |
 |                      HEADER                     |
 |                                                 |
 +-------------------------------------------------*/
header {
  width: 100%;
  background-color: var(--white);

  position: sticky;
  top: -6.25rem;

  border-bottom: 1px solid var(--light-gray);
  z-index: 1000;
}
#home-nav {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#site-nav ul {
  list-style: 0;
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  font-size: 0.9rem;
}

#leistungen-link {
  anchor-name: --leistungen-link;
}
#site-nav:has(+ #leistungen-sub-links:hover) #leistungen-link {
  color: var(--white);
  background-color: var(--black);
}

#leistungen-sub-links {
  position: absolute;
  visibility: hidden;
  position-anchor: --leistungen-link;
  top: anchor(bottom);
  left: anchor(left);

  width: fit-content;
  display: flex;
  flex-direction: column;
  background-color: var(--primary-light);
}
#site-nav:has(#leistungen-link:hover) + #leistungen-sub-links,
#leistungen-sub-links:hover {
  visibility: visible;
}

/*-------------------------------------------------+
 |                                                 |
 |                      FOOTER                     |
 |                                                 |
 +-------------------------------------------------*/
footer::before {
  content: "";
  display: block;
  flex-grow: 1;
}
footer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#kontakt {
  display: grid;
  grid-template-areas:
    "heading heading heading heading"
    "text text kontakt adresse";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
  justify-items: center;
  margin-block: 2rem 1rem;

  h3 {
    margin-bottom: 0.5rem;
  }
}
#kontakt-heading {
  grid-area: heading;
  place-self: center;
}
#kontakt section:has(#kontakt-text-heading) {
  grid-area: text;
}
#kontakt section:has(#kontakt-daten-heading) {
  grid-area: kontakt;
}
#kontakt-daten-heading + address > dl {
  display: grid;
  width: min-content;
  grid-template-columns: auto auto;
  column-gap: 1ch;
  row-gap: 0.5rem;
}
#kontakt section:has(#adresse-heading) {
  grid-area: adresse;
}
#adresse-heading + address > p {
  line-height: 1.5;
}

#footer-bar {
  width: 100%;
  background-color: var(--dark-gray);
  padding-block: 1rem;
  color: var(--light-gray);
}
#footer-bar > .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  a[href="#"]{
    display: block;
    padding: 1ch 1.5ch 0.5ch 1.5ch;
    text-align: center;
    font-size: 1rem;
    background-color: gray;
    color: white;
    border-radius: 0.5ch;
  }
}
#footer-logo {
  height: 2rem;
}