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

html, body {
  height: 100%;
}

 body {
  text-align: center;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Navbar */
.navbar{
  position:fixed;
  top:0;width:100%;
  background:#C4C8D1;
  z-index:1000
}

.header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:10px 20px
}

/* Logos */
.logo1,.logo2{
  height:clamp(36px,6vw,60px)
}

.logo1{
  width:calc(clamp(36px,6vw,60px) * 1200 / 252) ;
}

/* Rechte Seite */
.right-side{
  display:flex;
  align-items:center;
  gap:20px
}

/* Titeltext */
.text-container{
  text-align:center;
}

.text-container .text1{
  font-size:clamp(12px,2vw,24px);
}

.text-container .text2{
  font-size:clamp(8px,1vw,16px);
  color:#222D4C;
  margin-top:2px
}

/* Hamburger-Icon – zentrierter Pivot */
.menu-icon{
  position:relative;
  width:clamp(24px,3.5vw,42px);
  height:clamp(18px,2.6vw,32px);
  cursor:pointer;
  flex-shrink:0
}

.bar{
  position:absolute;
  left:0;right:0;
  height:clamp(2px,0.45vw,5px);
  background:#222D4C;
  border-radius:2px;
  transition:transform .35s ease,opacity .35s ease;
  transform-origin:center center
}

.bar1{
  top:0
}

.bar2{
  top:50%;
  transform:translateY(-50%)
}

.bar3{
  bottom:0
}

/* X-Animation – Schnittpunkt exakt in der Mitte */
.change .bar1{
  top:50%;transform:
  translateY(-50%) rotate(45deg)
}

.change .bar2{
  opacity:0
}

.change .bar3{
  bottom:50%;
  transform:translateY(45%) rotate(-45deg)
}

/* Dropdown-Menü */
.menu{
  position:fixed;
  top:calc(clamp(56px,8.6vw,80px) + 10px);
  right:20px;
  background:#C4C8D1;
  border-radius:8px;
  padding:clamp(6px,0.8vw,12px) clamp(14px,2vw,24px);
  display:none;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  z-index:1000
}

.menu a{
  display:block;
  text-decoration:none;
  color:#222D4C;
  font-size:clamp(13px,1.2vw,18px);
  padding:clamp(6px,0.6vw,10px) 0
}

.menu a:hover{
  text-decoration:underline
}

.menu.show{
  display:block
}

.zsmedia{
  text-align: center;
  top: 50%;
  bottom:50%;
}

/* Inhalt */
.content{
  flex: 1;              /* schiebt die Fußzeile ans Ende */
  padding-top: calc(clamp(56px,8.6vw,80px) + 20px);
  padding-bottom: 3vw;
}

.text1,.text2,.text3,h2,h3{
  white-space:pre-wrap
}

.text3,h2,h3{
  margin-top:1vw
}

.text1{
  font-size:24px;
  font-weight:bold;
  color:#222D4C;
  margin:5px
}

.text2{
  font-size:18px;
  color:#666;
  margin-top:5px
}

/* h1 trägt Klasse .text3 → clamp() hier, nicht in h1-Regel */
.text3{
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:clamp(20px,6vw,40px);
  color:black;
  text-align:center
}

p {
  white-space: pre-wrap;
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 3vw;

}

h3{
  text-align:center;
  font-size:clamp(15px,2.2vw,24px)
}

/* Flaggen-Grid */
.container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(16px,3vw,40px);
  margin-top:clamp(20px,4vw,40px)
}
.flag-item{
  text-align:center;
  width:clamp(80px,15vw,150px)
}

.flag-item img{
  width:100%;
  height:auto;
  display:block;
}

.flag-item a{
  display:block;
  margin-top:clamp(6px,1vw,10px);
  text-decoration:none;
  color:#222D4C;
  font-weight:bold;
  font-size:clamp(11px,1.2vw,16px)
}

.footer{
  background:#C4C8D1;
  padding:clamp(20px,3vw,40px) 20px clamp(12px,2vw,20px)
}

.footer-content{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo{
  left: 20px;
  right: 20px;
  top: 40%;
  bottom: 10%;
  transform: translateY(-50%);
  height: clamp(30px,5vw,50px);
  width: calc(clamp(30px,5vw,50px) * 1200 / 252);

}

.footer-text{
  width: 100%;
  text-align: center;
}

.footer-title{
  font-size:clamp(10px,1.5vw,18px);
  color:#222D4C;
  left: 40%;
  top: 10%;
  bottom: 50%;
  transform: translateY(-50%);
}

/* Mobile: Links untereinander zentriert */
@media(max-width:600px){
  .footer-content{
    grid-template-columns:1fr;
    text-align:center
  }
  .footer-logo{
    margin:0 auto
  }

}

/* Mobile ≤ 600px */
@media(max-width:600px){.right-side{gap:0px}}