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

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #B9C2C5;
}

#topbar {
    display: flex;
    flex-wrap: wrap;
    background: #B9C2C5;
}

header {
    background: #2A3D47;
    color: #B9C2C5;
    width:100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding:0;
}

header h1{
    margin:0;
    font-size:2.5rem;
}

nav {
    width: 100%;
    background: #2A3D47;
    font-size:1.7rem;
    padding:0 0 1rem 0;
}

nav ul{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    margin:0;
    padding:0;
    justify-content:space-evenly;
}

nav a{
    text-decoration:none;
    color:#b9c2c5;
    font-weight:500;
    position:relative;
}

main {
    background: #B9C2C5;
    padding: 1rem 0 0 1rem;
    margin-bottom:0;
}

main h2{
    color:#162036;
    font-size:4rem;
    padding:1rem 0 0 3rem;
}

main p{
    color:#162036;
    font-size:2.5rem;
    padding:0 0 1rem 3rem;
}

.img {
    padding:0 0 1rem 3rem;
}

footer {
    background: #2A3D47;
    color: #B9C2C5;
    width: 100%;
    margin-top:0;
}

/* ganz wichtig: Standard-Abstände killen */
footer h2, footer h3, footer p {
    margin: 0;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    padding: 2rem 3rem;
}

.footer-contact {
    flex: 1;
    min-width: 240px;
    position:relative;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.8rem 0;
    position:relative;
    padding-left:0;
}

.brand img {
    position:relative;
}

.brand h2 {
    margin:0;
}

.footer-contact p {
    line-height: 1.7;
    padding-bottom:4rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-left:2rem;
    margin-right:auto;
    min-width: 180px;
}

.footer-links a {
    color: #B9C2C5;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-bottom {
    padding: 1rem 3rem 0rem 5rem;
    font-size: 0.9rem;
}

/*Impressum*/
.Impressum {
    padding: 0 0 30rem 0;
}
.Impressum h2 {
    font-size: 3rem;
    padding: 0 3.5rem;
    color: #162036;
}

.Impressum p{
    font-size:1.8rem;
    padding:0 3.5rem 1rem;
}

.Impressum p, .Impressum address {
    padding-left: 3.5rem;
}

.Impressum address {
    display:block;
    padding:0 3.5rem 1rem 3.5rem;
    font-style:normal;
    font-size:1.8rem;
    color:#162036;
}

.Impressum a {
    color: #162036;
    text-decoration:none;
}
.Impressum a:visited {
    color:#162036;
}

.Impressum a:hover {
    text-decoration:underline;
}

/*Datenschutzerklärung*/
.datenschutz{
    display:flex;
    justify-content:center;
    width:100%;
}

.datenschutz main {
    max-width: 75rem;
    min-width:0;
}

.datenschutz p, .daenschutz h1, .datenschutz h2, .datenschutz li {
    text-align:left;
}

.datenschutz section {
    margin-bottom:2.5rem;
}

.Blick h2 {
    font-size: 3rem;
    color: #162036;
    margin:0;
    width:auto
}

.Blick h3 {
    font-size: 2rem;
    color: #162036;
    margin: 0;
    padding: 1rem 3rem 0 3rem;
    width: auto;
}

.Blick p {
    padding: 0 3rem 0.5rem 3rem;
    font-size: 1.5rem;
    color: #162036;
    width:auto;
}

.Blick p, section p{
    line-height:1.6;
}

.Verantwortlich h2 {
    font-size: 2rem;
    color: #162036;
    margin: 0;
    padding: 0.5rem 3rem 0 3rem;
    width: 100%;
}

.Verantwortlich p {
    padding: 0 3rem 0.5rem 3rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

.Verantwortlich address {
    padding: 0 3rem 0.5rem 3rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%; 
    display:block;
    font-style: normal;
}
.Verantwortlich a {
    color: #162036;
    text-decoration: none;
}

.Verantwortlich a:visited {
    color: #162036;
}

.Verantwortlich a:hover {
    text-decoration: underline;
}

.Host h2 {
    font-size: 2rem;
    color: #162036;
    margin: 0;
    padding: 0 3rem 0 3rem;
    width: 100%;
}

.Host p {
    padding:0 3rem 0.5rem 3rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

.Host address {
    padding: 0 3rem 0.5rem 3rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
    display: block;
    font-style: normal;
}

.Host ul {
    padding: 0 3rem 0 5rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

.Kontakt h2 {
    font-size: 2rem;
    color: #162036;
    margin: 0;
    padding: 0 3rem 0 3rem;
    width: 100%;
}

.Kontakt p {
    padding: 0 3rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

.Kontakt ul {
    padding: 0 3rem 1.5rem 5rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

.Cookies h2 {
    font-size: 2rem;
    color: #162036;
    margin: 0;
    padding: 0 3rem 0 3rem;
    width: 100%;
}

.Cookies p {
    padding: 0 3rem 0.5rem 3rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

.Extern h2 {
    font-size: 2rem;
    color: #162036;
    margin: 0;
    padding:0 3rem;
    width: 100%;
}

.Extern p {
    padding: 0 3rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

.Extern ul {
    padding: 0 3rem 1.5rem 5rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

.Rechte h2 {
    font-size: 2rem;
    color: #162036;
    margin: 0;
    padding:0 3rem;
    width: 100%;
}

.Rechte p {
    padding: 0 3rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

.Rechte ul {
    padding: 0 3rem 0 5rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}
.unten {
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
    padding-bottom:0.5rem;
}

.Aktuell h2 {
    font-size: 2rem;
    color: #162036;
    margin: 0;
    padding:0 3rem;
    width: 100%;
}

.Aktuell p {
    padding: 0 3rem 1.5rem 3rem;
    font-size: 1.5rem;
    color: #162036;
    width: 100%;
}

@media (max-width: 900px) {
    header h1 {
        font-size: 2rem;
    }

    main h1 {
        font-size: 2.5rem;
    }

    main p {
        font-size: 2rem;
        padding: 0 1.5rem 1rem 1.5rem;
    }

    main img {
        padding: 0 1.5rem 1rem 1.5rem;
    }

    .footer-top {
        padding: 2rem 1.5rem;
        gap: 2rem;
    }
}

@media (max-width: 600px) {

  /* Header: Logo + Titel untereinander (oder enger) */
  header {
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  header h1 {
    font-size: 1.6rem;
  }

  /* Navigation: untereinander, leicht klickbar */
  nav {
    padding: 0.75rem 0;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  nav a {
    font-size: 1.3rem;
    padding: 0.25rem 0.5rem; /* bessere Touch-Fläche */
  }

  /* Main: weniger “links-lastig” */
  main {
    padding: 1rem 1rem;
  }

  main h1 {
    font-size: 2rem;
    padding: 0 1rem;
  }

  main p {
    font-size: 1.3rem;
    padding: 0 1rem 1rem 1rem;
  }

  main img {
    padding: 0 1rem 1rem 1rem;
    margin: 0 auto;
  }

  /* Footer: Spalten untereinander */
  footer {
      max-width:600px;
  }
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1rem;
    gap: 1.5rem;
  }

  .footer-links {
    margin: 0;          /* deine Desktop-Margins raus */
    min-width: unset;
  }

  /* Optional: Kontaktdaten etwas kleiner */
  .footer-contact p,
  .footer-contact h2 {
    font-size: 1rem;
  }
  .datenschutz main,
  .Impressum main {
    padding: 0 2rem;

  }
}