/* ===== RESET / BASIS ===== */

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

/* ===== HEADER ===== */

header {
  padding-top: 10px;
  position: relative;
  height: 180px;
  background: url("../Bilder/Dia/head_mobil.jpg") center/cover no-repeat;
}

header::after {
  content:"";
  position:absolute;
  inset: 0;
  background: rgba(255,255,255,0);
}

/* ===== TOPBAR ===== */

.topbar-bar {
   position:relative;
   padding-top: 3px;
   background: rgba(255,255,255,0.8);
   backdrop-filter: blur(4px);
   border-bottom: 1px solid rgba(0,0,0,.06);
   z-index: 110;
}

.topbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  padding:4px 8px;
}

/* ===== LOGO ===== */

.logo {
   text-align:center;
}

.logo img {
  height:48px;
  max-width:100%;
}

/* ===== AMPEL / PPR ===== */

.ampel {
  text-align:right;
}

.ampel img,
.ppr-icon {
  height:42px;
}

/* ===== BURGER ===== */

#burger {
  width:44px;
  height:44px;
  border:none;
  border-radius:8px;
  background: rgba(69,169,238,.95);
  color:white;
  font-size:26px;
  cursor: pointer;
  position: relative;
  z-index:120;
}

/* ===== NAVIGATION ===== */

#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 98;
  display: none;
}

body.menu-open #overlay {
  display: block;
}

nav {
  position: fixed;
  top:0;
  left:0;
  width:50%;
  max-width:320px;
  height:100%;
  background:#fff;
  transform: translateX(-100%);
  transition:.25s ease;
  z-index:100;
  padding:20px;
  padding-top: 80px;
}

body.menu-open nav {
  transform: translateX(0);
}

nav a {
  display:block;
  padding:12px 0;
  border-bottom:1px solid #ddd;
  text-decoration:none;
  color:#333;
  font-size:18px;
}

/* ===== CONTENT ===== */

main {
  padding:15px;
}

.modulbox {
  margin: 25px 0;
  padding: 14px 14px 16px 14px;
  background: #f7f9fb;
  border-left: 4px solid #45A9EE;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.trenner {
  clear: both;
  height: 1px;
  margin: 35px 0 30px 0;
  border-bottom: 1px solid #ddd;
}

/* ===== PILOTENINFO (DE + EN) ===== */

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

.accordion{
  background:#f0f0f0;
  cursor:pointer;
  padding:12px;
  width:100%;
  border:1px solid #ccc;
  text-align:left;
  font-size:16px;
  margin-top:8px;
}

.panel{
  display:none;
  padding:10px;
  border:1px solid #ccc;
  border-top:none;
  background:white;
}

.panel ul{
  padding-left:18px;
}

@media(min-width:900px){
  .panel{
    display:block;
  }
}

.ppr-hinweis {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 18px 0;
  padding: 10px 14px;
  background: rgba(255, 235, 59, 0.14);
  border-left: 4px solid #f2c200;
  border-radius: 6px;
  font-size: 15px;
}

.ppr-hinweis img {
  height: 30px;
  flex-shrink: 0;
}