:root {

  --clr-geo-green: #02874D;
  --clr-geo-blue: #0A88B2;
  --clr-geo-yellow: #FFFF1B;
  --clr-geo-red: #FD5A00;

  --clr-geo-black: black;
  --clr-geo-white: white;

  --clr-geo-fg: var(--clr-geo-black);
  --clr-geo-bg: var(--clr-geo-white);

  --spacer-small: 1em;
}

@media (min-width: 54rem) {
  :root {
    --spacer-small: 2em;
  }
}

  /* ANCHOR  Reset */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  
  body,
  h1,
  h2,
  p,
  ul {
    margin: 0;
  }
  
  ul[class] {
    list-style-type: none;
    padding: 0;
  }
  
  img {
    display: block;
    max-width: 100%;
  }
  
  /* ANCHOR  Typography */

  body {
    /*font-family: 'Fjalla One', sans-serif;*/
    font-family: "Open Sans", sans-serif;
    /*font-family: 'Abril Fatface', cursive;*/
    font-size: 1.25rem;
    background-color: var(--clr-geo-green);    
  }
  
  h1,
  h2 {
  
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  a {
    text-decoration: underline 0.15em var(--clr-geo-yellow);
    color: var(--clr-geo-red);
    text-underline-offset: var(--offset, 0.2em);
    transition: --offset 400ms, text-decoration-color 400ms;
  }

  a:hover, a:focus {
    color: var(--clr-geo-black);    
    text-decoration-color: var(--clr-geo-red);
    text-decoration-thickness: 3px;
    --offset: 0.4em;
  }

  .text-super {
    /*font-family: "Fjalla One";*/    
    font-family: 'Henny Penny';
    font-size: 8rem;
    color: var(--clr-geo-yellow);
  }
  
  @media (max-width: 80rem) {
    .text-super {
      /*font-family: "Fjalla One";*/
      font-family: 'Henny Penny';
      font-size: 7rem;
    }

  }

  @media (max-width: 71rem) {
    .text-super {
      /*font-family: "Fjalla One";*/
      font-family: 'Henny Penny';
      font-size: 4.5rem;
    }

  }

  @media (max-width: 48rem) {
    .text-super {
      /*font-family: "Fjalla One";*/
      font-family: 'Henny Penny';
      font-size: 3rem;
    }

  }


  .text-small {
    font-size: 1rem;
    color: var(--clr-geo-bg);
  }
  


  /* ANCHOR  Components */
  
  
  /* ANCHOR  General Layout */

 .header-container,
  section,
  .footer-container {
    max-width: 70rem;
    margin-inline: auto;
    padding-inline: 0.5rem;
  }
  
  @media (min-width: 54rem) {
    .header-container,
    section,
    .footer-container {
      padding-inline: 8rem;
    }
  }
  
  @media (min-width: 30rem) {
    .header-container,
    section,
    .footer-container {
      padding-inline: 4rem;
    }
  }

  .wappen{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;    
  }

  .content {
    width: 100%;
  }
  
  .content > * + * {
    margin-top: var(--spacer, var(--spacer-small));
  }

  section {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-small);
  
    padding-block: 2rem;
  }
    
  /* ANCHOR  Specifics */

  #counter {
    color: var(--clr-geo-yellow);
    text-align: center;
  }