@font-face {
    font-family: "fira-sans";
    src: url("../fonts/fira-sans/FiraSans-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "fira-sans";
    src: url("../fonts/fira-sans/FiraSans-Italic.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "fira-sans";
    src: url("../fonts/fira-sans/FiraSans-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "fira-sans";
    src: url("../fonts/fira-sans/FiraSans-BoldItalic.woff2") format("woff2");
    font-weight: bold;
    font-style: italic;
}

*,
*:before,
*:after {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/** /
* {
  outline: 1px dotted rgba( 0, 0, 0, .2 );
}
/**/

html {
    font-size: 62.5%;
    line-height: 1.333em;
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 38rem;
    @media (width < 700px) {
        scroll-padding-top: 9rem;
    }
}

body {
    background-color: #f0f0f0;
    border-bottom: 0;
    border-top: 0;
    color: #0f0f0f;
    font:
        1.6rem/3rem "fira-sans",
        Arial,
        Helvetica,
        sans-serif;
    line-height: 1.333;
    min-height: 100%;
}

img {
    max-width: 100%;
}

header {
  display: none;
}

#page-wrapper {
    margin: 0 auto;
    max-width: 96rem;
    padding: clamp(4rem, 7.8vw, 10rem) 1rem 4rem;
}

.intro-wrapper,
.map-wrapper {
    text-align: center;
}

#breaker {
    background-color: #af1641;
    border-radius: 9rem;
    color: #fff;
    display: inline-block;
    font-size: clamp(2.25rem, 7.03125vw, 9rem);
    font-style: italic;
    line-height: 1.5;
    margin: clamp(3rem, 6vw, 6rem) auto;
    padding: 0 2rem;
    transform: rotate(-4deg);
    & > span {
        opacity: 0.5;
    }
}

.intro {
    font-size: clamp(1.6rem, 3.9vw, 4.8rem);
    padding: clamp(2rem, 6.25vw, 8rem) 0 4rem;
    text-align: center;
    strong {
        @media (width >= 360px) {
            white-space: nowrap;
        }
    }
    & + p {
        font-size: clamp(1.6rem, 2.4vw, 2.4rem);
        padding-bottom: 4rem;
    }
}

.colgrp {
    display: flex;
    gap: clamp(2rem, 4vw, 4rem);
    flex-wrap: wrap;
    margin: clamp(2rem, 4vw, 4rem) 0;
    & > div {
        margin: 2rem 0;
        width: calc( 50% - 2rem );
        &.size--2 {
          width: 100%;
        }
        @media ( width < 640px ) {
            width: 100% !important;
        }
        h1,
        h2,
        h3 {
            text-wrap: balance;
        }
        img {
            border-radius: clamp(2rem, 4vw, 4rem);
        }
        img,
        h2,
        h3,
        p {
            margin-bottom: 1rem;
        }
        h2 {
            color: #af1641;
            font-size: clamp(1.8rem, 3.6vw, 4rem);
            position: relative;
            span {
                bottom: clamp(2.4rem, 2.34vw, 3rem);
                color: #fff;
                text-shadow: 0 0 0.5rem #0009;
                left: 1rem;
                position: absolute;
            }
            a {
              color: #af1641;
              text-decoration: none;
              &:hover {
                text-decoration: underline;
              }
            }
        }
        h3 {
            font-size: clamp(1.6rem, 3vw, 3.2rem);
        }
    }
}

.first-col {
    @media (width >= 640px) {
        text-align: right;
    }
}

footer {
    background-color: #af1641;
    color: #fffe;
    & > div {
        margin: 0 auto;
        max-width: 96rem;
        padding: 4rem 1rem 1rem;
        @media ( width < 640px ) {
          text-align: center;
        }
    }
    a {
      color: #fffe;
    }
}

.end {
    background-color: #c1c1c1;
    color: #000e;
    & > p {
        margin: 0 auto;
        max-width: 96rem;
        padding: 1rem;
    }
}

#map {
    display: block;
    margin: 0 auto clamp(4rem, 8vw, 8rem);
    width: 80%;
    & > g {
        & > g {
            &:hover {
                & #nordrhein,
                & #westfalen {
                    fill: #af1641 !important;
                }
            }
        }
    }
    .svgtxt {
        pointer-events: none;
    }
}

ul {
  list-style-type: none;
  li {
    padding-left: 1.6rem;
    position: relative;
    &:before {
      color: #af1641;
      content: '•';
      display: inline-block;
      font-size: 3.2rem;
      left: 0;
      position: absolute;
      top: -1rem;
    }
  }
}