:root{
      --bg:#f8fafc;
      --text:#0f172a;
      --muted:#334155;
      --brand:#0b3954;  
      --brand-weak:#e8f1f7;
      --accent:#0b3954;
      --shadow:0 10px 30px rgba(2,8,23,.08);
      --radius:14px;
	  --line:#e6eef6;
	  --card:#ffffff;
    }
    *{box-sizing:border-box}
    html,body{
		margin:0;
		background:var(--bg);
		color:var(--text);
		font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
    }
    a{
		color:var(--accent);
		text-decoration:none;
    }
    a:hover{
		text-decoration:none; 
		color:#145e84;
    }
    .container{
		max-width:1120px;
		margin:0 auto;
		padding:0 20px;
    }
    .container-footer{
		max-width:1120px;
		margin:0 auto;
		padding:0 20px;
	}	
    .card-link:hover {
		transform: scale(1.2);
		transition: transform 0.3s ease;
    }

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

    header{
		position:sticky;
		top:0;
		background:rgba(255,255,255,.9);
		backdrop-filter:saturate(150%) blur(8px);
		z-index:50;
		border-bottom:1px solid var(--line);
    }
    .container.nav{
		display:flex;
		align-items:center;
		justify-content:space-between;
		height:64px;
	}
    .brand{
		font-weight:800;
		letter-spacing:.4px;
	}
	.wrap{
		display:flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;	
	}
    nav ul{
		display:flex;
		gap:22px;
		list-style:none;
		margin:0;
		padding:0;
	}
    nav a{
		color:var(--muted);
		font-weight:600;
	}
    nav a:hover{
		text-decoration: none; 
		color:#145e84
	}
    nav a.active { 
		color:var(--brand); 
		font-weight:700; 
	}

   /* ===============================
       Header mit Logo + Hamburger-Menü
    =============================== */
    header {
      background: #fff;
      border-bottom: 1px solid #e5e7eb;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .container.nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 24px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      font-size: 20px;
      color: var(--brand);
    }
    .brand img {
      height: 36px;
      width: auto;
    }
    .brand a {
      text-decoration: none;
      color: var(--brand);
    }
    header nav ul {
      list-style: none;
      display: flex;
      gap: 20px;
      margin: 0;
      padding: 0;
    }
    header nav a {
      text-decoration: none;
      color: #1f2937;
      font-weight: 500;
    }
    header nav a:hover,
    header nav a.active {
      color: var(--brand);
    }

    /* Hamburger-Button */
    .hamburger {
      display: none;
      flex-direction: column;
      width: 28px;
      height: 20px;
      justify-content: space-between;
      cursor: pointer;
    }
    .hamburger span {
      display: block;
      height: 3px;
      background: var(--brand);
      border-radius: 2px;
      transition: all .3s;
    }



/* ========== HERO ========== */

    .hero{
		position:relative;
		isolation:isolate;
	}
    .hero img{
		width:100%;
		height:420px;
		object-fit:cover;
		border-radius:0 0 var(--radius) var(--radius);
		}
    .hero .overlay{
		position:absolute;
		inset:0;
		background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 55%,rgba(0,0,0,0));
		border-radius:0 0 var(--radius) var(--radius);
		}
    .hero .content{
		position:absolute;
		inset:0;
		display:grid;
		align-items:center;
		}
    .hero .inner{
		color:#fff;
		max-width:1120px;
		margin:0 auto;
		padding:0 20px;
		}
    .hero h1{
		font-size:clamp(28px,4vw,44px);
		line-height:1.1;
		margin:0 0 10px;
		font-weight:900;
		}
    .hero p{
		margin:0 0 18px;
		color:#e6eef6;
		max-width:640px;
		}
    .btn{
		display:inline-block;
		background:var(--brand);
		color:#fff;
		padding:12px 18px;
		border-radius:10px;
		font-weight:700;
		box-shadow:var(--shadow);
	}
    .btn:hover{
		filter:brightness(1.25);
		text-decoration: none;
	}
    .btn--ghost{
		background:#e8f1f7;
		color:var(--brand);
	}

/* ========== COUNTER ========== */

    .counter-wrap{
		transform:translateY(-26px);
	}
    .counter{
		background:#fff;
		border:1px solid #e6eef6;
		border-radius:16px;
		box-shadow:var(--shadow);
		display:grid;
		grid-template-columns:1fr 1fr 1fr 1fr;
		gap:18px;
		padding:18px 22px;
	}
    .counter .num{
		font-size:clamp(36px,6vw,52px);
		font-weight:900;
		color:var(--brand);
		line-height:1;
		}
    .counter .label{
		color:var(--muted);
		margin-top:2px;
		}
    .counter small{
		color:#64748b;
		}

/* ========== INHALT ========== */

    section{
		padding:15px 0;
	}
    .full-post {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 24px;
    }
    .full-post img {
      max-width: 100%;
      height: auto;
      margin-bottom: 14px;
      border-radius: 8px;
    }
    .full-post .meta {
      font-size: 14px;
      color: #64748b;
      margin-bottom: 4px;
    }
    .full-post h2 {
      margin-top: 0;
      font-size: 22px;
    }
    h2{
		font-size:clamp(22px,3vw,32px);
		line-height:1.2;
		margin:0 0 14px;
	}
    .grid{
		display:grid;
		grid-template-columns:repeat(12,1fr);
		gap:22px;
	}
    .card{
		grid-column:span 4;
		background:#fff;
		border:1px solid #e8edf3;
		border-radius:14px;
		box-shadow:var(--shadow);
		padding:18px;
	}
    .card h3{
		margin:6px 0 6px;
		font-size:18px;
	}
    .card img {
  		width: 100%;
  		height: 180px;
  		object-fit: cover;
  		border-radius: 8px;
  		margin-bottom: 10px;
	}

    /* ===============================
       Beiträge
    =============================== */
    .full-post-news {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 30px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      overflow: hidden;
    }
    .full-post-news img {
      float: left;
      max-width: 260px;
      height: auto;
      margin: 0 16px 8px 0;
      border-radius: 8px;
      cursor: zoom-in;
      transition: transform 0.25s ease;
    }
    .full-post-news img:hover {
      transform: scale(1.03);
    }
    .full-post-news h2 {
      margin-top: 6px;
      color: #0b3954;
	  font-weight: 800;	
	  font-size: 1.3em;	
	  font-stretch: expanded;	
    }
    .full-post-news .meta {
      font-size: 0.9em;
      color: #64748b;
      margin-bottom: 6px;
    }
    .full-post-news p {
      text-align: justify;
    }
    @media (max-width: 720px) {
      .full-post-news img {
        float: none;
        display: block;
        margin: 0 auto 12px auto;
        max-width: 90%;
      }
    }

/* ================= Suche ================= */
.search { text-align:center; margin:32px 0; }
.search input {
  width:90%;
  max-width:520px;
  padding:10px 16px;
  border-radius:8px;
  border:1px solid #cbd5e1;
  font-size:15px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04) inset;
}
.search input:focus { outline:2px solid var(--brand); border-color:var(--brand); }

/* ================= Typ-Karten ================= */
.types {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;
  margin-bottom:40px;
}
.type-card {
  position:relative;
  width:320px;
  height:200px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#000;
  transition:transform .2s, box-shadow .2s;
}
.type-card:hover { transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.1); }
.type-card img { width:100%; height:100%; object-fit:cover; opacity:.8; transition:opacity .2s; }
.type-card:hover img { opacity:.9; }
.type-card .overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.type-card .overlay h3{ margin:0; font-size:22px; }
.type-card .overlay p{ margin:4px 0 12px 0; font-size:15px; }
.bttn {
  background:#ffffffcc; color:var(--brand); padding:8px 18px; border-radius:6px; font-weight:600; transition:background .2s,color .2s;
}
.bttn:hover { background:#fff; }

/* ================= Statistik ================= */
.stats {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  margin-bottom:48px;
  text-align:center;
  box-shadow:var(--shadow);
}
.stats h2 { margin-top:0; color:var(--brand); font-size:22px; }
.stats p { font-size:16px; color:var(--text); }

/* ============ Unterseiten – Gruppierte Fahrzeuglisten ============ */
.vehicle-list.year-grouped { display:block; margin-top:32px; }

/* Abschnitt pro Jahr */
.year-section {
  margin-bottom:24px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Jahr-Header mit Pfeil (dreht sich bei open) */
.year-header {
  position:relative;
  margin:0;
  padding:14px 18px 14px 36px;
  background:var(--brand);
  color:#fff;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  border-bottom:1px solid #083040;
  transition:background .3s;
  user-select:none;
}
.year-header:hover { background:#133f66; }
.year-header::before{
  content:"▶";
  position:absolute; left:14px; top:50%;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .3s ease;
  font-size:14px;
}
.year-section.open .year-header::before{ transform:translateY(-50%) rotate(90deg); }

/* Fahrzeuge pro Jahr */
.year-list {
  display:none;
  flex-direction:column;
  gap:1em;
  padding:1.2em;
  background:#f8fafc;
}
.year-section.open .year-list { display:flex !important; }

/* Fahrzeugkarte */
.vehicle-card {
  display:flex;
  align-items:flex-start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
  transition:transform .2s;
}
.vehicle-card:hover { transform:translateY(-2px); }
.vehicle-card img {
  width:140px; height:90px; object-fit:cover; margin-right:1em;
  border-radius:6px; border:1px solid var(--line);
}
.vehicle-card a img { cursor:zoom-in; transition:transform .3s ease; }
.vehicle-card a:hover img { transform:scale(1.03); }

.vehicle-info h3 { margin:0 0 .4em 0; font-size:1.05em; color:var(--brand); }
.vehicle-info p { margin:.2em 0; color:var(--text); }
.meta.red { color:#dc2626; font-weight:600; }
.meta { color:var(--muted); font-size:.9em; }
.vehicle-info .button {
  background:#2563eb; color:#fff; text-decoration:none; padding:.4em .8em; border-radius:4px; font-size:.9em; transition:background .3s;
}
.vehicle-info .button:hover { background:#1e4fd1; }

/* "Alle aufklappen / zuklappen" */
.toggle-wrapper { text-align:center; margin-top:12px; }
.toggle-btn{
  background:#0b3954; color:#fff; border:none; padding:9px 20px; border-radius:6px;
  font-size:.95em; font-weight:500; cursor:pointer;
  transition:background .25s ease, transform .15s ease; box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.toggle-btn:hover { background:#124a6d; transform:translateY(-1px); }

/* ===== Kreisdiagramm + Text nebeneinander ===== */

.stats-flex {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.chart-box {
  width: 280px; /* <<< Diagrammgröße */
  min-width: 240px;
}

#chartTypes {
  width: 100% !important;
  height: auto !important;
}

.chart-note {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  margin-top: 6px;
}

.stats-text {
  flex: 1;
  min-width: 240px;
  font-size: 15px;
  line-height: 1.5;
}

/* ===== Zeitstrahl ===== */
.timeline {
  display: flex;
  gap: 18px;
  margin: 24px 0 32px;
  flex-wrap: wrap;
}
.timeline div {
  background: #f1f5f9;
  padding: 8px 14px;
  border-radius: 6px;
  border-left: 4px solid #0b3954;
  font-size: 14px;
}

    /* ===============================
       TIMELINE UND INHALT
    =============================== */
    .timelines{
      position:relative; margin:24px auto; padding-left:28px;
      max-width:900px;
    }
    .timelines::before{
      content:""; position:absolute; left:14px; top:0; bottom:0;
      width:3px; background:#94a3b8;
    }
    .timelines-event{
      position:relative; margin:0 0 24px 0; padding:0 0 0 16px;
    }
    .timelines-event::before{
      content:""; position:absolute; left:7px; top:8px;
      width:16px; height:16px; background:var(--brand); border-radius:50%;
      box-shadow:0 0 0 4px #e6eef6;
    }
    .events-card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:12px;
      padding:18px;
      box-shadow:0 2px 10px rgba(0,0,0,.03);
    }
    .years{
      font-weight:800;
      color:var(--brand);
      margin-bottom:6px;
      letter-spacing:.5px;
    }
    .events-card h3{ margin:6px 0 8px 0; font-size:18px; }
    .meta{ color:#64748b; font-size:14px; }
    .pdf-link{
      display:inline-flex; align-items:center; gap:10px;
      background:#f1f5f9; padding:10px 14px;
      border:1px solid #e2e8f0; border-radius:8px; color:var(--text);
      transition:background .2s;
    }
    .pdf-link:hover{ background:#e2e8f0; }
    .pdf-link img{ width:24px; height:24px; }

    .thumb { width:100%; height:160px; object-fit:cover; border-radius:8px; }
    .gallery { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
    .gallery a { display:block; border:1px solid #e6eef6; border-radius:10px; overflow:hidden; background:#fff; }
    .gallery img { width:100%; height:140px; object-fit:cover; display:block; }

/* ===== Galerie (3 Bilder je Reihe) ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 14px 0 32px;
}
.gallery img {
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .25s ease;
}
.gallery img:hover {
  transform: scale(1.04);
}

/* Mobile */
@media(max-width: 700px){
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width: 480px){
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* ===== Fuhrpark-History (Wrapper) ===== */

.fuhrpark-history {
  margin: 32px auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Überschrift im Block */
.fuhrpark-history h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #0b3954;
}

/* ===== Einleitungstext unter H2 ===== */
.history-intro {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* Falls du Einleitung als <p class="history-intro"> nutzt */
.fuhrpark-history p.history-intro {
  margin-bottom: 20px;
}

/* Zwischenüberschriften der Epochen */
.fuhrpark-history h3 {
  margin: 20px 0 6px 0;
  font-size: 18px;
  color: #0b3954;
}

/* Absatztexte in den Epochen */
.fuhrpark-history p {
  margin: 0 0 10px 0;
  color: #334155;
  font-size: 15px;
  line-height: 1.6;
}

/* ===== Zeitstrahl (kompakt) ===== */
.fuhrpark-history .timeline {
  display: flex;
  gap: 18px;
  margin: 16px 0 24px;
  flex-wrap: wrap;
}
.fuhrpark-history .timeline div {
  background: #f1f5f9;
  padding: 8px 14px;
  border-radius: 6px;
  border-left: 4px solid #0b3954;
  font-size: 14px;
  color: #1f2937;
}
.fuhrpark-history .timeline div span {
  font-weight: 700;
  margin-right: 6px;
  color: #0b3954;
}

/* ===== Galerie (3 Spalten standard) ===== */
.fuhrpark-history .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 12px 0 28px;
}
.fuhrpark-history .gallery img {
  width: 100%;
  display: block;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fuhrpark-history .gallery img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* Responsive für Galerie */
@media (max-width: 700px) {
  .fuhrpark-history .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .fuhrpark-history { padding: 16px; }
  .fuhrpark-history .gallery { grid-template-columns: 1fr; }
}

/* ========== FOOTER ========== */
    
    footer{
		padding:40px 0 60px;
		margin-top:30px;
		color:#64748b;
		border-top:1px solid var(--line);
		background:var(--card);
	}
	.meta{
		color:#64748b;
		font-size:14px;
	}


/* ========== RESPONSIVE ========== */

    @media (max-width:900px){
      .counter{grid-template-columns:1fr 1fr}
      .grid{grid-template-columns:repeat(6,1fr)}
      .card{grid-column:span 6}
      .hero img{height:360px}	

}
    @media (max-width:520px){
      nav ul{display:none}
	  .counter{grid-template-columns:1fr}	
      .hero img{height:300px}
	  .container {padding: 16px;}
	  .vehicle-card{flex-direction: column;align-items: center;text-align: center;}
	  .vehicle-card img{margin:0 0 .8em 0;width: 90%;height: auto;}
	  .year-header{font-size: 1em;}
	  .toggle-wrapper{margin-top: 8px;}	
    }

    /* Mobile Navigation */
    @media(max-width:820px) {
      .hamburger { display: flex; }
      header nav {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        display: none;
        flex-direction: column;
        text-align: center;
        z-index: 999;
      }
      header nav.open { display: flex; }
      header nav ul {
        flex-direction: column;
        gap: 0;
      }
      header nav li {
        border-bottom: 1px solid #e5e7eb;
      }
      header nav a {
        display: block;
        padding: 14px 0;
      }
      .hamburger.active span:nth-child(1){ transform: rotate(45deg) translateY(8px); }
      .hamburger.active span:nth-child(2){ opacity: 0; }
      .hamburger.active span:nth-child(3){ transform: rotate(-45deg) translateY(-8px); }
    }