/* ==========================================================================
   0) RESET & BASELINE
   ========================================================================== */
   * { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; }
   body {
     font-family: 'Open Sans', sans-serif;
     background: #111;
     color: #fff;
     line-height: 1.6;
   }
   h1, h2, h3 { font-weight: 800; line-height: 1.2; }
   a { color: inherit; text-decoration: none; }
   a:hover { opacity: .85; }
   ul { list-style: none; }
   
   /* ==========================================================================
      1) DESIGN TOKENS (CSS Variablen)
      ========================================================================== */
   :root{
     --schwarz: #000;
     --weiß: #fff;
     --hellgrau: #ccc;
     --dunkelgrau: #1a1a1a;
     --dunkelblau: #0d1b2a;
     --bordeaux: #751c33;
     --gold: #f5c240;
   
     --card-radius: 22px;
     --card-bg: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
     --card-border: rgba(255,255,255,.08);
     --card-shadow: 0 12px 40px rgba(0,0,0,.45);
   
     --container-max: 1200px;
   
     --foto-hero-h: 72vh;
   }
   
   /* ==========================================================================
      2) GLOBAL LAYOUT & UTILITIES
      ========================================================================== */
   .container { width: min(100% - 40px, var(--container-max)); margin-inline: auto; }
   .text-center { text-align: center; }
   .hide { display:none !important; }
   .section { padding: 80px 40px; }
   
   /* ==========================================================================
      3) NAVIGATION
      ========================================================================== */
   .nav-container{
     position: absolute; inset: 0 0 auto 0;
     z-index: 1000; background: transparent; width: 100%;
   }
   nav{
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     column-gap: 56px;
     padding: 16px 40px;
   }
   .nav-left, .nav-right { display: flex; gap: 60px; align-items: center; }
   .nav-left  { justify-content: flex-end;  }
   .nav-right { justify-content: flex-start; }
   
   nav ul li a{
     color: var(--weiß);
     font-weight: 700;
     font-size: 1.15rem;
     letter-spacing: .6px;
     transition: opacity .2s;
   }
   nav ul li a:hover{ opacity:.7; }
   
   .logo{ display:flex; justify-content:center; }
   .logo img{ height:130px; display:block; }
   
   .lang-switch{
     position: static !important;
     display: inline-flex; align-items: center; gap: 6px;
   }
   .lang-switch button{
     background: none; border: none; color: inherit; font: inherit;
     cursor: pointer; line-height: 1; padding: 0 6px;
   }
   .lang-switch button:hover{ text-decoration: underline; }
   
   .burger{ display:none; font-size:2rem; color:var(--weiß); cursor:pointer; z-index:1100; }
   .nav-menu{
     display:none; flex-direction:column; align-items:center;
     background: var(--dunkelblau);
     position:absolute; top:100%; left:0; width:100%; padding:20px 0; z-index:999;
   }
   .nav-menu.active{ display:flex; }
   
   /* ==========================================================================
      4) HERO (Start) + Social Icons
      ========================================================================== */
   .hero{
     position: relative;
     height: 100vh;
     display: grid; place-items:center;
     background: url('images/nastup.png') center/cover no-repeat;
     text-align: center;
   }
   .hero::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.6); }
   .hero-content{ position:relative; z-index:1; transform: translateY(-12vh); }
   
   .hero h1{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 3rem; 
     animation: fadeIn 2s ease-in-out;
     color: rgba(255, 255, 255, 0.65);
   }
   .hero .btn{
     margin-top: 20px; background: transparent;
     border: 2px solid var(--weiß); color: var(--weiß);
     padding: 15px 30px; font-weight: 800; text-transform: uppercase;
     border-radius: 30px; transition: .3s;
   }
   .hero .btn:hover{ background: var(--weiß); color: var(--schwarz); }
   
   .social-icons{
     position: fixed; top: 40%; left: 20px;
     display: flex; flex-direction: column; gap: 20px; z-index: 999;
   }
   .social-icons a{ color:#fff; font-size:1.5rem; transition: transform .2s, color .2s; }
   .social-icons a:hover{ transform: scale(1.2); color: var(--hellgrau); }
   
   /* ==========================================================================
      5) SEITENBEREICHE & SEKTIONEN
      ========================================================================== */
   /* Über uns (Variante) */
   .about-section-custom{
     display:flex; flex-wrap:wrap;
     background: var(--dunkelblau); color:#fff;
     padding: 80px 0;
   }
   .about-text-custom{ flex:1; padding:60px; display:flex; flex-direction:column; justify-content:center; }
   .about-text-custom h2{ font-size: 2.8rem; text-transform: uppercase; margin-bottom: 10px; }
   .about-text-custom .underline{ width:90px; height:3px; background:#fff; margin-bottom:30px; }
   .about-text-custom p{ font-size:1.1rem; line-height:1.8; }
   .about-image-custom{ flex:1; padding:40px; display:grid; place-items:center; }
   .about-image-custom img{ max-width:90%; border-radius:10px; box-shadow: 0 4px 15px rgba(0,0,0,.4); }
   
   /* About-Hero (links Text / rechts Bild) */
   .about--hero{
     display:grid; grid-template-columns:45% 55%;
     min-height:50vh; width:100vw; gap:0;
   }
   .about__left{
     background: var(--dunkelgrau); color:#fff;
     display:flex; align-items:center; justify-content:center; padding:30px; text-align:center;
   }
   .about-card{ max-width:450px; }
   .about-card h2{ font-size: clamp(28px, 4vw, 56px); margin:0 0 1rem; }
   .about-card p { font-size: clamp(14px, 1.2vw, 20px); line-height:1.6; }
   
   .about__right{
     background: url("/images/noge.jpg") center/cover no-repeat fixed;
     border-radius:0; box-shadow:none; overflow:hidden;
   }
   
   /* Stats */
   .stats-section{ background: var(--dunkelblau); padding: 80px 20px; text-align:center; }
   .stats-container h2{ font-size:2.5rem; margin-bottom:40px; }
   .stats-grid{ display:flex; justify-content:center; gap:60px; flex-wrap:wrap; }
   .stat .number{ font-size:3rem; font-weight:800; }
   .stat .label{ font-size:1.1rem; margin-top:10px; }
   
   /* Veranstaltungen */
   .events-section{ background: var(--dunkelblau); padding: 80px 40px; text-align:center; }
   .events-section h2{ font-size: clamp(28px, 5vw, 48px); line-height: 1.1; margin-bottom: 20px; }
   .events-section ul{ max-width:600px; margin: 0 auto; }
   .events-section li{ font-size:1.1rem; margin-bottom:15px; }
   
   /* Choreografien */
   .choreo-header{ background: var(--dunkelblau); padding: 70px 20px; text-align:center; }
   .choreo-header h2{ font-size: clamp(28px, 5vw, 48px); margin:0; }
   .choreografien-section{ background: var(--dunkelgrau); padding: 60px 24px 80px; color:#fff; }
   .choreografien-grid{
     max-width: var(--container-max); margin: 0 auto;
     display:grid; gap:24px; grid-template-columns: repeat(4, minmax(0,1fr));
   }
   .choreo-col{
     background:#1f1f1f; border:1px solid rgba(255,255,255,.06);
     border-radius:12px; padding:0; box-shadow:0 4px 16px rgba(0,0,0,.35);
   }
   .acc-btn{
     width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
     background:transparent; color:#fff; border:0; padding:16px 18px;
     font-size:1.25rem; font-weight:700; text-align:left; cursor:pointer;
   }
   .acc-btn:focus{ outline:2px solid rgba(255,255,255,.25); outline-offset:2px; }
   .acc-panel{ overflow:hidden; max-height:0; transition:max-height .35s ease, padding .25s ease; padding:0 18px; }
   .acc-panel ul{ list-style:none; padding:6px 0 12px; margin:0; }
   .accordion.open .chev{ transform: rotate(90deg); transition: transform .25s ease; }
   
   /* ==========================================================================
      6) ENSEMBLES: Grid & Karten
      ========================================================================== */
   .ensembles-header{ background: var(--dunkelblau); padding: 70px 20px; text-align:center; }
   .ensembles-header h2{ font-size: clamp(28px, 5vw, 48px); margin:0; }
   .ensembles-section{ background: var(--dunkelgrau); padding: 80px 40px; text-align:center; color:#fff; }
   .ensembles-section .underline{ display:none !important; }
   
   /* Grid: 3 / 2 / 1 Spalten */
   .ensembles-grid{
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 28px;
     max-width: 1200px;
     margin: 0 auto;
     align-items: stretch;
   }
   @media (max-width: 1100px){
     .ensembles-grid{ grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 700px){
     .ensembles-grid{ grid-template-columns: 1fr; }
   }
   
   /* Karte */
   .ensembles-grid .ensemble-card{
     grid-column: auto;
     position:relative; display:flex; flex-direction:column; height:100%;
     background: var(--card-bg); border:1px solid var(--card-border);
     border-radius: var(--card-radius); overflow:hidden;
     box-shadow: var(--card-shadow);
     transform: translateZ(0);
     transition: transform .2s ease, box-shadow .3s ease;
   }
   .ensembles-grid .ensemble-card:hover{
     transform: translateY(-4px);
     box-shadow: 0 18px 60px rgba(0,0,0,.55);
   }
   
   /* Karten-Bild: kompletten Inhalt zeigen, kein Zuschneiden, kein Zoom */
   .ensembles-grid .ensemble-card img{
     width: 100%;
     height: auto;
     object-fit: contain;
     object-position: center center;
     background: transparent;
     display: block;
   }
   .ensembles-grid .ensemble-card:hover img{ transform: none; }
   
   .ensemble-info{
     flex:1; display:flex; flex-direction:column; gap:12px;
     padding: 18px 20px 20px;
     background: radial-gradient(120% 140% at 10% -10%, rgba(255,255,255,.04), transparent 40%);
     text-align:left;
   }
   .ensemble-info h3{
     margin:0 0 2px; font-weight:800; letter-spacing:.4px;
     font-size: clamp(1.1rem, .9rem + .5vw, 1.25rem);
   }
   .ensemble-info p{ color:#e9e9e9; opacity:.92; }
   
   .ensemble-details{
     display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:4px;
   }
   .ensemble-details > div{
     background: rgba(255,255,255,.06);
     border: 1px solid rgba(255,255,255,.10);
     padding: 10px 12px; border-radius: 12px; line-height:1.25;
   }
   .ensemble-details strong{
     display:block; font-size:.75rem; letter-spacing:.4px; text-transform:uppercase; color:#bdbdbd; margin-bottom:6px;
   }
   
   .ensemble-btn{
     margin-top:auto; width:100%; min-height:48px;
     border:0; border-radius:12px; font-weight:800; letter-spacing:.3px;
     color:#1b1400; background: linear-gradient(180deg,#fafaf9,#fafaf9);
     box-shadow: 0 10px 24px rgba(248,248,247,.35);
     transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
   }
   .ensemble-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(241,241,240,.45); }

   
   
   /* ==========================================================================
      7) VORSTAND
      ========================================================================== */
   .vorstand-section{ background: var(--dunkelblau); padding: 80px 40px; text-align:center; color:#fff; }
   .vorstand-section h1{ font-size:2.8rem; margin-bottom:10px; }
   .vorstand-section .underline{ width:100px; height:4px; background:var(--gold); margin:0 auto 40px; }
   .vorstand-grid{
     display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
     gap:30px; max-width: var(--container-max); margin:0 auto;
   }
   .vorstand-card{
     background: var(--dunkelgrau); padding:30px 20px; border-radius:12px;
     box-shadow: 0 6px 20px rgba(0,0,0,.5);
     display:flex; flex-direction:column; align-items:center;
     transition: transform .3s ease;
   }
   .vorstand-card:hover{ transform: translateY(-5px); }
   .vorstand-card img{
     width:90px; height:90px; object-fit:cover; border-radius:50%;
     margin-bottom:20px; border:2px solid var(--gold);
   }
   .vorstand-card h3{ font-size:1.2rem; color:var(--gold); margin-bottom:8px; }
   .vorstand-card p{ font-size:1rem; margin:4px 0; color:var(--hellgrau); }
   
   /* ==========================================================================
      8) GALERIE & LIGHTBOX
      ========================================================================== */
   .gallery-container{ padding: 80px 40px; background: var(--dunkelgrau); }
   .gallery-container h2{ font-size:2.5rem; text-align:center; margin-bottom:40px; }
   .gallery-page-content{ padding:80px 40px; background: var(--dunkelgrau); }
   .gallery-grid{
     display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
     gap:20px; max-width: var(--container-max); margin:0 auto;
   }
   .gallery-grid img{ width:100%; border-radius:10px; cursor:pointer; transition: transform .3s ease; }
   .gallery-grid img:hover{ transform: scale(1.05); }
   
   #lightbox{
     display:none; position:fixed; inset:0; background: rgba(0,0,0,.9);
     justify-content:center; align-items:center; z-index:1000;
   }
   #lightbox img{ max-width:90%; max-height:90%; border-radius:10px; }
   
   /* ==========================================================================
      9) KONTAKT & FOOTER
      ========================================================================== */
   .contact-section{ background: var(--dunkelblau); padding:80px 40px; text-align:center; }
   .contact-section h2{ font-size:2.5rem; margin-bottom:20px; }
   form{ max-width:600px; margin:auto; display:flex; flex-direction:column; gap:15px; }
   input, textarea{
     padding:15px; border:1px solid #444; border-radius:8px; background:#222; color:#fff;
   }
   button[type="submit"]{
     padding:15px; background:transparent; border:2px solid #fff; color:#fff;
     font-weight:800; border-radius:8px; cursor:pointer; transition:.3s;
   }
   button[type="submit"]:hover{ background:#fff; color:#000; }
   
   footer{ background: var(--schwarz); color:#aaa; text-align:center; padding:20px; font-size:14px; }
   
   .footer-section{ background:#111; color:#fff; padding:60px 40px 20px; font-size:.95rem; }
   .footer-container{
     display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px;
     max-width: var(--container-max); margin:0 auto;
   }
   .footer-column{ flex:1 1 250px; }
   .footer-logo{ font-size:2rem; margin-bottom:20px; }
   .footer-social a{ color:#fff; font-size:1.5rem; margin-right:15px; transition: transform .2s, color .2s; }
   .footer-social a:hover{ transform: scale(1.2); color: var(--hellgrau); }
   .footer-column h4{ font-size:1.1rem; margin-bottom:15px; letter-spacing:1px; }
   .schedule li{ margin-bottom:15px; }
   .schedule span{ float:right; color: var(--hellgrau); }
   .footer-bottom{ text-align:center; padding-top:30px; color:#bbb; font-size:.85rem; }
   .map-section iframe{ display:block; width:100%; height:400px; border:0; }
   
   /* ==========================================================================
      10) SUBPAGES
      ========================================================================== */
   .static-header{ background: var(--dunkelblau); padding:20px 40px; }
   .subpage-hero{
     background: url('images/texture-dark.jpg') center/cover no-repeat;
     text-align:center; padding: 120px 20px 60px; color:#fff;
   }
   .subpage-hero h1{ font-size:3rem; margin-bottom:10px; }
   .subpage-hero .underline{ width:200px; height:4px; background:#fbfbf9; margin:0 auto; }
   .subpage-content{
     max-width:900px; margin: 40px auto 80px; padding: 0 20px;
     color:#fff; font-size:1.1rem; line-height:1.8;
   }
   
   /* ==========================================================================
      11) FULL-BLEED BANNER (unteres großes Foto)
      ========================================================================== */
   .hero-image{
     width: 100vw;
     margin-left: calc(50% - 50vw);
     margin-right: calc(50% - 50vw);
     display: grid;
     place-items: center;
     background: #111;
     padding: 0;
   }
   .hero-image > img{
     width: 100vw;            /* volle Breite */
     height: auto;            /* Seitenverhältnis behalten */
     max-height: 52vh;        /* Höhe begrenzen (bei Bedarf 45–60vh) */
     object-fit: contain;     /* nichts beschneiden */
     object-position: center center;
     display: block;
   }
   
   /* ==========================================================================
      12) ANIMATIONEN
      ========================================================================== */
   @keyframes fadeIn{
     from { opacity:0; transform: translateY(20px); }
     to   { opacity:1; transform: translateY(0); }
   }
   
   /* ==========================================================================
      13) RESPONSIVE BREAKPOINTS
      ========================================================================== */
   /* ≤ 1100px: Choreografien 2 Spalten */
   @media (max-width: 1100px){
     .choreografien-grid{ grid-template-columns: repeat(2, 1fr); }
   }
   
   /* ≤ 900px: About-Hero untereinander */
   @media (max-width: 900px){
     .about--hero{ grid-template-columns:1fr; }
     .about__right{ background-attachment: scroll; min-height:40vh; }
   }
   
   /* ≤ 768px: Navigation & Hero-Typo, Bannerhöhe */
   @media (max-width: 768px){
     .burger{ display:block; position:absolute; top:25px; right:30px; }
     nav{ grid-template-columns: 1fr auto; column-gap:20px; }
     .nav-left, .nav-right{ gap:15px; }
     nav ul li a{ font-size: 1.05rem; }
     .hero h1{ font-size: 2.5rem; }
   
     .hero-image > img{ max-height: 60vh; }
   }
   
   /* ≤ 640px: Grids einspaltig */
   @media (max-width: 640px){
     .choreografien-grid{ grid-template-columns: 1fr; }
     .ensembles-grid{ grid-template-columns: 1fr; }
   }
  
/* ====================== VORSTAND – OVERRIDES ====================== */

/* Karte insgesamt */
.vorstand-card{
  background:#151515;               /* etwas heller als #111 für Kontrast */
  color:#fff;
}

/* FOTO oben in normaler Größe, schön gefüllt */
.vorstand-card > img,
.vorstand-card .portrait{
  display:block;
  width:100% !important;
  height:220px !important;          /* bei Bedarf: 200–260px */
  object-fit: cover !important;     /* füllt den Rahmen ohne Balken */
  object-position: center 22%;      /* leicht nach oben, damit Köpfe gut im Bild sind */
  border-radius:14px !important;
  border:2px solid rgba(255,255,255,.18); /* dezente Kante – kein Gold */
  margin-bottom:18px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* Alte runde Avatar-Styles sicher übersteuern */
.vorstand-card img{
  width:100% !important;
  height:220px !important;
  border-radius:14px !important;
  object-fit: cover !important;
}

/* Typografie in der Card – alles weiß bzw. hell */
.vorstand-card h3{
  color:#fff !important;            /* statt Gold */
  letter-spacing:.3px;
  margin-bottom:10px;
}

.vorstand-card p,
.vorstand-card li,
.vorstand-card .role,
.vorstand-card a,
.vorstand-card i{
  color:#eaeaea !important;
}

.vorstand-card a:hover{
  color:#fff !important;
}

/* Optional: goldene Rahmen/Icons vollständig entfernen, falls noch vorhanden */
.vorstand-card .gold,
.vorstand-card .is-gold{
  color:#fff !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Rechte Hälfte: Foto vollständig + fix beim Scrollen */
.about__right{
  position: relative;
  background: none !important;   /* alte cover/fixed-Regel neutralisieren */
  overflow: hidden;
}

/* Das eigentliche, fixierte Bild */
.about__right::before{
  content: "";
  position: fixed;
  top: 0;
  left: 45vw;                    /* linke Spalte = 45%, rechte beginnt hier */
  width: 55vw;                   /* rechte Spalte = 55% */
  height: 100vh;

  background-image: url("/images/noge.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;      /* GANZ anzeigen, nichts beschneiden */
  background-color: #111;        /* „Ränder“ in Seitenfarbe */

  z-index: -1;                   /* hinter dem Spalteninhalt */
}

/* Mobile/Fallback (Spalten untereinander, iOS mag kein fixed-Background) */
@media (max-width: 900px){
  .about__right::before{
    position: absolute;          /* kein fixed auf iOS */
    left: 0;
    width: 100%;
    height: 50vh;                /* anpassen nach Geschmack */
  }
}
/* ====== GLOBAL TYPE OVERRIDE: überall Open Sans ====== */
:root{
  --font-sans: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Basis: alles erbt Open Sans */
html, body{
  font-family: var(--font-sans) !important;
}

/* Form-Controls & Buttons ebenfalls */
button, input, select, textarea {
  font-family: inherit !important;
}

/* Alle Headings + prominente Titel */
h1, h2, h3, h4, h5, h6,
.hero h1,
nav a,
.btn,
.ensemble-btn,
.acc-btn,
.footer-logo {
  font-family: var(--font-sans) !important;
}

/* Optional: so wirkt’s wie deine Navbar (kräftig + leicht gesperrt) */
h1, h2, h3 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.map-section{
  background: var(--dunkelblau);
  padding: 60px 20px 70px;
  color:#fff;
}
.map-section h2{
  font-size: clamp(28px, 5vw, 48px);
  text-align:center;
  margin: 0 0 28px;
}

.map-grid{
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 24px;
}
.map-card{
  background: #111;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.map-card h3{
  margin-bottom: 10px;
}
.map-card iframe{
  width: 100%;
  height: 280px;        /* bei Bedarf anpassen */
  border: 0;
  border-radius: 12px;
  display:block;
}
.map-card p{
  margin-top: 10px;
  color:#e5e5e5;
  line-height:1.4;
}

@media (max-width: 1100px){
  .map-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .map-grid{ grid-template-columns: 1fr; }
  .map-card iframe{ height: 320px; }
}
/* ========= Einheitliche, feste Navbar auf allen Seiten ========= */
header { position: relative; }

.nav-container{
  position: sticky;           /* fix am oberen Rand mit normalem Flow */
  top: 0;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: var(--dunkelblau);           /* dunkler Balken – wie auf Screenshot */
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(4px); /* leichte Veredelung */
}

/* Grid & Abstände der Links/Logo */
nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 56px;
  padding: 18px 40px;        /* gleichmäßiger Innenabstand */
}

/* Link-Typo wie in deiner „schönen“ Navbar */
nav ul li a{
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(18px, 1.3vw, 26px);
  text-decoration: none;
  transition: opacity .2s;
}
nav ul li a:hover{ opacity: .75; }

/* Logo-Größe angleichen */
.logo img{ height: 94px; display: block; }

/* Burger/Mobile */
@media (max-width: 768px){
  .logo img{ height: 72px; }
  nav{ grid-template-columns: 1fr auto; column-gap: 20px; padding: 14px 20px; }
}
nav a[aria-current="page"]{
  opacity: 1;
  position: relative;
}
nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:3px; background:#fff; border-radius:2px;
}
/* NAV-TYPO GENAU WIE FRÜHER */
nav ul li a{
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700;         /* vorher 700 */
  font-size: 1.15rem;       /* vorher 1.15rem */
  letter-spacing: .6px;     /* vorher .6px */
  text-transform: none;     /* keine erzwungenen Großbuchstaben */
  color: #fff;
  text-decoration: none;
  transition: opacity .2s;
}
nav ul li a:hover{ opacity:.75; }
/* Subpage-Titel wie "UNSERE ENSEMBLES" stylen */
.subpage-hero h1{
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
  margin: 0;                 /* wie beim Ensembles-Header */
}

/* Linie unter dem Titel wie beim Ensembles-Header ausblenden */
.subpage-hero .underline{ 
  display: none; 
}
/* Überall Open Sans für Überschriften */
h1, h2, h3, h4, h5, h6{
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* Kontakt-Titel exakt wie Ensembles */
.subpage-hero h1{
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
  margin: 0 0 12px;
}

/* Unterlinie anzeigen (falls vorher versteckt) */
.subpage-hero .underline{
  display: block;             /* wichtig: NICHT none */
  width: 200px;
  height: 4px;
  background: #fff;
  margin: 0 auto;
}
/* Überschriften für Sektionen: exakt gleich für KONTAKT & ENSEMBLES */
.subpage-hero h1,
.ensembles-header h2{
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  font-size: clamp(28px, 5vw, 48px) !important;
  line-height: 1.1 !important;
  margin: 0 0 12px !important;
}

/* Unterlinie auf Kontakt anzeigen */
.subpage-hero .underline{
  display: block !important;
  width: 200px;
  height: 4px;
  background: #fff;
  margin: 0 auto;
}
/* Überschrift KONTAKT exakt wie "UNSERE ENSEMBLES" */
.subpage-hero h1{
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  font-size: clamp(28px, 5vw, 48px) !important;
  line-height: 1.1 !important;
  margin: 0 0 12px !important;
}

/* Unterlinie (falls gewünscht) */
.subpage-hero .underline{
  display: block;
  width: 200px;
  height: 4px;
  background: #fff;
  margin: 0 auto;
}
/* Kein Unterstrich im aktiven Navbar-Link */
nav a[aria-current="page"] { position: static; }
nav a[aria-current="page"]::after { content: none !important; display: none !important; }
/* ===== Navbar: Logo links, Menüs rechts (wie Screenshot 1) ===== */
.nav-container {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0d1b2a;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* Flex statt Grid – Reihenfolge steuern */
.nav-container nav{
  display: flex !important;
  align-items: center;
  gap: 28px;
  padding: 16px 40px;
}

/* Logo links */
.logo { order: 1; margin-right: 24px; }
.logo img{ height: 56px; display: block; }

/* Links rechts in einer Zeile */
.nav-left,
.nav-right{
  order: 2;
  display: flex;
  align-items: center;
  gap: 48px;
}
.nav-left{ margin-left: auto; }      /* schiebt Menüs nach rechts */

/* Sprachumschalter am Ende */
.lang-switch{ order: 3; display: inline-flex; gap: 6px; }

/* Linkstil weiß & kräftig */
nav ul li a{
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .6px;
  text-decoration: none;
  transition: opacity .2s;
}
nav ul li a:hover{ opacity: .75; }

/* Falls der aktive Menüpunkt in der Navbar unterstrichen wird → aus */
nav a[aria-current="page"]::after{ display: none !important; }

/* Responsive */
@media (max-width: 960px){
  .logo img{ height: 48px; }
  .nav-left, .nav-right{ gap: 24px; }
}
@media (max-width: 768px){
  .nav-left, .nav-right{ display: none; }  /* hier greift dein Burger */
  .burger{ display: block; }
}
/* ===== Navbar: Logo groß links, Menüs rechts ===== */
.nav-container nav{
  display: flex !important;
  align-items: center;
  gap: 28px;
  padding: 18px 40px;
}

/* Logo groß */
.logo { order: 1; margin-right: 24px; }
.logo img{
  height: 110px;           /* <- gewünschte Größe */
  display: block;
}

/* Menüs rechts in einer Linie */
.nav-left,
.nav-right{
  display: flex;
  align-items: center;
  gap: 48px;
}
.nav-left{ order: 2; margin-left: auto; }
.nav-right{ order: 3; }

/* Linkstil weiß & kräftig */
nav ul li a{
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .6px;
  text-decoration: none;
  transition: opacity .2s;
}
nav ul li a:hover{ opacity: .75; }

/* aktiver Navbar-Link NICHT unterstreichen */
nav a[aria-current="page"]::after{ display: none !important; }

/* Startseite: Navbar transparent über Hero */
.home .nav-container{
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ===== Hero-Überschrift auf der Startseite ausblenden ===== */
.home .hero .hero-content{ display: none; }

/* Responsive: Logo etwas kleiner machen */
@media (max-width: 1100px){ .logo img{ height: 88px; } }
@media (max-width: 768px){
  .logo img{ height: 64px; }
  .nav-left, .nav-right{ gap: 24px; }
}
/* ===== Logo größer + weiter nach links, Links unverändert ===== */

/* bequeme Variablen zum Feinjustieren */
:root{
  --logo-h-desktop: 150px;   /* ← HIER Logo-Höhe am Desktop einstellen */
  --logo-gap: 48px;          /* Abstand zwischen Logo und erster Linkgruppe */
  --nav-pad-left: 20px;      /* Abstand von der linken Fensterkante */
  --nav-pad-right: 40px;     /* rechter Innenabstand */
}

/* Navbar-Layout (bleibt eine Zeile) */
.nav-container nav{
  display: flex !important;
  align-items: center;
  gap: 32px;                                /* Abstand zwischen Gruppen */
  padding-left: var(--nav-pad-left);
  padding-right: var(--nav-pad-right);
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: calc(var(--logo-h-desktop) + 12px); /* genug Höhe für großes Logo */
}

/* Logo links, groß */
.logo{ order: 1; margin-right: var(--logo-gap); }
.logo img{
  height: var(--logo-h-desktop);
  display: block;
}

/* Linkgruppen rechts – Schriftgröße bleibt wie gehabt */
.nav-left, .nav-right{
  display: flex; align-items: center;
  gap: 48px;                     /* Abstand zwischen Links */
}
.nav-left{ order: 2; margin-left: auto; }
.nav-right{ order: 3; }

/* Link-Style (Größe unverändert) */
nav ul li a{
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;           /* NICHT größer machen */
  letter-spacing: .6px;
  text-decoration: none;
  transition: opacity .2s;
}
nav ul li a:hover{ opacity: .75; }

/* aktiven Navigationspunkt nicht unterstreichen */
nav a[aria-current="page"]::after{ display: none !important; }

/* Startseite: transparente Navbar über dem Hero */
.home .nav-container{
  position: absolute;
  left: 0; right: 0; top: 0;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* responsive: Logo schrittweise kleiner */
@media (max-width: 1200px){
  :root{ --logo-h-desktop: 120px; --logo-gap: 40px; }
}
@media (max-width: 900px){
  :root{ --logo-h-desktop: 88px; --logo-gap: 28px; }
  .nav-left, .nav-right{ gap: 28px; }
}
@media (max-width: 700px){
  :root{ --logo-h-desktop: 64px; --logo-gap: 20px; --nav-pad-left: 16px; }
  .nav-left, .nav-right{ gap: 18px; }
}
/* ===== GROßES LOGO + weiter nach rechts, Links bleiben gleich ===== */
:root{
  /* Größe & Abstände bequem hier steuern */
  --logo-h-desktop: 220px;   /* ← Logo-Höhe Desktop (z.B. 240–260px wenn du noch größer willst) */
  --logo-gap: 56px;          /* Abstand zwischen Logo und erster Linkgruppe */
  --logo-offset-x: 140px;    /* wie weit das Logo von links nach RECHTS geschoben wird */
}

/* genug Höhe für die große Marke */
.nav-container nav{
  min-height: calc(var(--logo-h-desktop) + 18px);
}

/* Logo riesig + nach rechts gerückt */
.logo{ 
  order: 1; 
  margin-left: var(--logo-offset-x);   /* schiebt das Logo nach rechts */
  margin-right: var(--logo-gap);       /* Abstand zu den Menüpunkten */
}
.logo img{
  height: var(--logo-h-desktop);
  display: block;
}

/* Linkgruppen & Link-Größe bleiben wie bisher */
.nav-left, .nav-right{
  display: flex; align-items: center; gap: 48px;
}
.nav-left{ order: 2; margin-left: auto; }
.nav-right{ order: 3; }

/* aktive Unterstreichung in der Navbar sicher aus */
nav a[aria-current="page"]::after{ display: none !important; }

/* Startseite: transparente Navbar über dem Hero (wie gehabt) */
.home .nav-container{
  position: absolute; left: 0; right: 0; top: 0;
  background: transparent !important;
  border-bottom: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important;
}

/* responsive: Logo etwas verkleinern, Offset anpassen */
@media (max-width: 1200px){
  :root{ --logo-h-desktop: 180px; --logo-gap: 44px; --logo-offset-x: 100px; }
}
@media (max-width: 900px){
  :root{ --logo-h-desktop: 120px; --logo-gap: 28px; --logo-offset-x: 32px; }
}
@media (max-width: 700px){
  :root{ --logo-h-desktop: 84px;  --logo-gap: 20px; --logo-offset-x: 16px; }
}

/* Falls die große Start-Überschrift noch angezeigt wird, ausblenden: */
/* .hero .hero-content h1{ display:none; } */
/* ===== OVERRIDE: Logo noch größer + weiter nach rechts (nur Desktop) ===== */
@media (min-width: 1200px){
  /* genug Höhe für die sehr große Marke */
  .nav-container nav{
    min-height: 320px; /* Logo-Höhe + etwas Luft */
  }

  /* Logo stark nach rechts rücken und größer machen */
  .logo{
    margin-left: 260px;  /* ← weiter nach rechts (höher = weiter rechts) */
    margin-right: 72px;  /* Abstand zum ersten Menüpunkt */
  }
  .logo img{
    height: 300px;       /* ← größer (300–320px möglich) */
    width: auto;
    max-width: none;
    display: block;
  }

  /* Links bleiben unverändert groß */
  nav ul li a{
    font-size: 1.15rem !important;
    font-weight: 700; /* wie gehabt */
  }
}
/* ===== Poster-Cards: nur Bild + Button ===== */
.ensembles-grid{ gap:28px; } /* leicht kompakter */
.poster-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #131313;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  isolation: isolate;
}
.poster-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.14);
}

/* Bild füllt die Karte, bleibt schön beschnitten */
.poster-card img{
  width: 100%;
  aspect-ratio: 4/5;        /* gleichmäßige Höhe */
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.02);
}

/* weiches Verlaufs-Overlay nach unten */
.poster-card::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:40%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
  pointer-events:none;
  z-index: 1;
  transition: opacity .25s;
}
.poster-card:hover::after{ opacity: .95; }

/* Button */
.poster-cta{
  position: absolute; left:50%; bottom:16px; transform: translateX(-50%);
  z-index: 2;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #0c0c0c;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.poster-card:hover .poster-cta{ box-shadow: 0 14px 28px rgba(0,0,0,.45); }
.poster-cta:active{ transform: translateX(-50%) translateY(1px); }

/* Mobile: Button dauerhaft sichtbar, etwas größerer Touchbereich */
@media (max-width: 640px){
  .poster-cta{ bottom:12px; padding: 14px 24px; }
}

/* Falls alte Inhalte noch im DOM wären – sicher ausblenden */
.ensemble-info, .ensemble-details{ display:none !important; }
/* === ENSEMBLES – kompakte Cards (Foto + Button) ==================== */
.ens-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 24px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.ens-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.ens-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.12);
}

/* Bild: saubere, einheitliche Höhe (nicht zu hoch) */
.ens-card > img{
  width: 100%;
  aspect-ratio: 4 / 3;   /* ~ wie im 2. Screenshot */
  object-fit: cover;
  display: block;
  background: #111;
}

/* Button unten */
.ens-card .ens-apply{
  display: block;
  width: calc(100% - 24px);
  margin: 12px auto 16px;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color:#1b1400;
  background: linear-gradient(180deg,#fafaf9,#f0f0ef);
  box-shadow: 0 10px 24px rgba(248,248,247,.35);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .18s ease;
}
.ens-card .ens-apply:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(241,241,240,.45);
  filter: brightness(.98);
}
.ens-card .ens-apply:active{ transform: translateY(0); }

/* Responsive Spalten wie bisher */
@media (max-width: 1100px){
  .ens-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .ens-grid{ grid-template-columns: 1fr; }
}

/* (Optional) alte, große Karten in diesem Abschnitt ausblenden,
   falls sie noch im DOM stehen sollten: */
.ensembles-section .ensemble-card{ display:none !important; }
/* Name-Label im Bild */
.ens-card { position: relative; } /* hast du bereits, nur zur Sicherheit */
.ens-chip{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(2px);
  pointer-events: none; /* nicht klickbar */
}
/* ============== ENSEMBLE CARDS – KOMPAKT & NICHT GEZOOMT ============== */

/* Grid kompakt & responsiv */
.ensembles-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Karte */
.ens-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .25s ease;
}
.ens-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Medienbereich mit fester Proportion – Bild NICHT beschneiden */
.ens-media{
  aspect-ratio: 4 / 3;                 /* bei Bedarf 3/2 oder 16/10 probieren */
  background: #e7d0b0;                  /* sanfte Fläche hinter dem Bild */
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ens-media img{
  width: 100%;
  height: 100%;
  object-fit: contain !important;       /* wichtig: nie beschneiden */
  object-position: center center;
  transform: none;                      /* kein Zoom */
  transition: transform .25s ease;
}
.ens-card:hover .ens-media img{
  transform: scale(1.02);               /* minimaler „Lift“ beim Hover */
}

/* Name-Label (Chip) im Bild */
.ens-chip{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* Unterer Bereich nur für den Button */
.ens-footer{
  padding: 12px;
  background: radial-gradient(120% 140% at 10% -10%, rgba(255,255,255,.04), transparent 40%);
}

/* Button */
.ens-apply{
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #1b1400;
  background: linear-gradient(180deg,#fafaf9,#f2f2f1);
  box-shadow: 0 10px 24px rgba(248,248,247,.35);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  cursor: pointer;
}
.ens-apply:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(241,241,240,.45);
}
.ens-apply:active{
  transform: translateY(0);
}

/* Mobile etwas mehr Höhe fürs Bild ist oft schöner */
@media (max-width: 640px){
  .ens-media{ aspect-ratio: 3 / 2; }
}
/* Mehr Höhe für den Bildbereich + leicht herauszoomen */
.ens-media{
  aspect-ratio: 1 / 1;       /* vorher 4/3 – Quadrat zeigt mehr Höhe */
  padding: 6px;              /* schmale Sicherheitskante */
}

.ens-media img{
  transform: scale(.90);     /* Bild minimal kleiner */
}

.ens-card:hover .ens-media img{
  transform: scale(.94);     /* dezenter Hover-Zoom */
}
/* Titel-Badge oben links auf jeder Karte */
.ens-card{ position: relative; }

/* liest den Text aus dem data-title Attribut der Karte */
.ens-card[data-title]::before{
  content: attr(data-title);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 12px;

  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  color: #fff;

  /* dunkles Badge mit leichter Kontur/Glanz */
  background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.75));
  box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: none; /* Klicks gehen nicht aufs Badge */
}

@media (max-width: 700px){
  .ens-card[data-title]::before{
    font-size: 13px;
    padding: 7px 10px;
    top: 10px; left: 10px;
  }
}
/* Titel-Badge über der Karte aus dem data-ensemble Attribut */
.ens-card{ position: relative; overflow: hidden; }
.ens-card::before{
  content: attr(data-ensemble);      /* <- kommt aus data-ensemble */
  position: absolute;
  top: 12px; left: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font: 800 14px/1 'Open Sans', system-ui, sans-serif;
  letter-spacing: .02em;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
}
@media (max-width: 700px){
  .ens-card::before{ font-size: 13px; padding: 5px 9px; top: 10px; left: 10px; }
}
/* Karte & Bild bleiben wie gehabt */
.ens-card { position: relative; overflow: hidden; }

/* Name-Badge oben links */
.ens-chip{
  position:absolute; top:12px; left:12px;
  padding:6px 10px; border-radius:12px;
  background:rgba(0,0,0,.78); color:#fff;
  font:800 14px/1 'Open Sans', system-ui, sans-serif;
  letter-spacing:.02em;
  box-shadow:0 6px 14px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:none; z-index:3;
}

@media (max-width:700px){
  .ens-chip{ font-size:13px; padding:5px 9px; top:10px; left:10px; }
}
/* === NAVBAR RE-CENTER FIX (override) === */
.nav-container {
  left: 0; right: 0;
}

.nav-container nav{
  /* zurück zu Grid + mittig begrenzen */
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
}

/* Link-Gruppen links/rechts ausrichten */
.nav-left  { display:flex; gap:48px; justify-content:flex-end;  align-items:center; }
.nav-right { display:flex; gap:48px; justify-content:flex-start; align-items:center; }

/* Logo sauber in die Mitte – ohne Extra-Offset */
.logo{ margin:0 !important; order: 0; }
.logo img{ height:130px; }

/* Alle Offsets/Unterstreichungen sicher neutralisieren */
nav a[aria-current="page"]::after{ content:none !important; }

/* störende frühere Flex-Overrides und große Offsets aushebeln */
@media (min-width: 0){
  .nav-left{ margin-left: 0 !important; }
  .logo{ margin-left: 0 !important; margin-right: 0 !important; }
}

/* Mobile bleibt wie gehabt */
@media (max-width: 768px){
  .burger{ display:block; position:absolute; top:25px; right:30px; }
  nav{ grid-template-columns: 1fr auto; gap:20px; }
  .nav-left, .nav-right{ gap:18px; }
}
/* Logo größer (Desktop), abgestuft für kleinere Screens */
.logo img{
  height: 180px;           /* <-- Wunschgröße */
}
@media (max-width: 1100px){
  .logo img{ height: 130px; }
}
@media (max-width: 768px){
  .logo img{ height: 70px; }
}
/* Links in der Navbar nicht umbrechen */
nav ul li a{
  white-space: nowrap;
}
/* === LOGO: etwas nach links, größer – Menüpunkte bleiben === */
.nav-container nav{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 56px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 40px;
}

/* Feineinstellung: moderater Links-Shift */
.logo{
  position: relative;
  z-index: 2;
  transform: translateX(-90px);   /* vorher -160px → jetzt sanfter */
}

.logo img{
  height: 210px;
  display: block;
}

/* Kein Umbruch bei „Über uns“ etc. */
nav ul li a{ white-space: nowrap; }

/* Responsiv: Shift reduziert sich stufenweise */
@media (max-width: 1200px){
  .logo{ transform: translateX(-70px); }
  .logo img{ height: 170px; }
}
@media (max-width: 900px){
  .logo{ transform: translateX(-40px); }
  .logo img{ height: 120px; }
}
@media (max-width: 768px){
  .logo{ transform: none; }
  .logo img{ height: 72px; }
}
/* === Logo: weiter rechts & größer, Menüpunkte bleiben === */
.nav-container nav{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 56px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 40px;            /* etwas mehr Luft für großes Logo */
}

.logo{
  position: relative;
  z-index: 2;
  transform: translateX(-60px);  /* vorher -90px → etwas nach rechts */
}

.logo img{
  height: 240px;                 /* größer */
  display: block;
}

nav ul li a{ white-space: nowrap; }  /* „Über uns“ in einer Zeile */

/* responsive Abstufungen */
@media (max-width: 1200px){
  .logo{ transform: translateX(-50px); }
  .logo img{ height: 200px; }
}
@media (max-width: 900px){
  .logo{ transform: translateX(-30px); }
  .logo img{ height: 140px; }
}
@media (max-width: 768px){
  .logo{ transform: none; }
  .logo img{ height: 80px; }
}
/* ===== GLOBAL NAVBAR (für ALLE Seiten) ===== */

/* immer oben kleben */
.nav-container{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0d1b2a;                      /* fester, dunkler Balken */
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(4px);
}

/* Mittiges Grid – Links bleiben, wo sie sind */
.nav-container nav{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 56px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 40px;
}

/* Logo: etwas nach links & groß (wie gewünscht) */
.logo{
  position: relative;
  z-index: 2;
  transform: translateX(-60px);             /* feinjustieren: -50/-40 für weiter rechts */
}
.logo img{
  height: 240px;                             /* größer? 260–280px */
  display: block;
}

/* Linkgruppen + Typo */
.nav-left, .nav-right{
  display: flex;
  align-items: center;
  gap: 48px;
}
nav ul li a{
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .6px;
  white-space: nowrap;                       /* „Über uns“ bleibt nebeneinander */
  text-decoration: none;
  transition: opacity .2s;
}
nav ul li a:hover{ opacity: .75; }

/* aktive Unterstreichung vorsichtshalber aus */
nav a[aria-current="page"]::after{ content:none !important; }

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .logo{ transform: translateX(-50px); }
  .logo img{ height: 200px; }
}
@media (max-width: 900px){
  .logo{ transform: translateX(-30px); }
  .logo img{ height: 140px; }
}
@media (max-width: 768px){
  .logo{ transform: none; }
  .logo img{ height: 80px; }
  .nav-left, .nav-right{ gap: 24px; }
}
/* === GLOBAL: überall Lato (Icons bleiben Font Awesome) === */
:root{
  --font-sans: 'Lato', Arial, Helvetica, sans-serif;
}

*:not(i[class^="fa"]):not(i[class*=" fa-"]):not(.fa){
  font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}

html, body, button, input, select, textarea {
  font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
/* Überschrift in Ensemble-Karten korrigieren */
.ens-card h3{
  text-transform: none !important;   /* kein UPPERCASE mehr */
  letter-spacing: .2px;              /* neutraler */
  line-height: 1.25;                 /* bessere Lesbarkeit */
  white-space: normal;               /* darf umbrechen */
  word-break: normal;                /* keine harten Wortbrüche */
}

/* Falls woanders ein globales h3 Uppercase aktiv ist, hier scoped neutralisieren */
.ens-grid .ens-card h3 { text-transform: none !important; }
/* ENSEMBLES: nur EINE Überschrift anzeigen (Chip/Badge ausblenden) */
.ens-grid .ens-card .ens-chip,
.ens-grid .ens-card .poster-chip,
.ens-grid .ens-card [class*="chip"] {
  display: none !important;
}

/* Sicherheit: unterdrücke evtl. pseudo-Titel-Duplikate */
.ens-grid .ens-card::before,
.ens-grid .ens-card::after,
.ens-grid .ens-card h3::before,
.ens-grid .ens-card h3::after {
  content: none !important;
}

/* Saubere H3-Überschrift */
.ens-grid .ens-card h3{
  text-transform: none;
  margin: 0;
  padding: 16px 18px 10px;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
}
/* Überschrift wie auf der Ensembles-Seite */
.ens-card .ens-title{
  margin: 0;
  padding: 14px 18px 10px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

/* Chip ausblenden, damit es nicht doppelt ist */
.home .ens-card .ens-chip{
  display: none;
}
/* Größeres Grid = größere Karten */
.ensembles-grid{
  max-width: 1280px;
  margin: 40px auto 80px;
  padding: 0 16px;
  display: grid;
  gap: 36px;                                  /* mehr Abstand */
  grid-template-columns: repeat(3, minmax(340px, 1fr));  /* 3 breite Spalten */
}

/* Karten optisch etwas kräftiger */
.ens-card{
  border-radius: 22px;
  box-shadow: 0 18px 38px rgba(0,0,0,.45);
}

/* Bild bekommt etwas mehr Fläche (bleibt responsive) */
.ens-media img{
  aspect-ratio: 4 / 3;    /* 4:3, ruhig lassen – wirkt größer durch breiteres Grid */
  width: 100%;
  height: auto;
}

/* Button größer */
.ens-footer .ens-apply{
  font-size: 1rem;
  padding: 14px 20px;
  border-radius: 14px;
}
/* --- NOVOSTI Header wie "NAŠI ANSAMBLi" --- */
.news-header{
  background:#0b2436;            /* derselbe Navy-Look */
  padding:56px 20px;
  text-align:center;
  color:#fff;
}
.news-header h2{
  margin:0;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.02em;
  font-size:clamp(28px,4vw,44px);
}

/* Wrapper unter dem blauen Balken, Card mittig */
.news-wrap{
  padding:36px 20px 56px;
  display:flex;
  justify-content:center;
}
.news-wrap .news-card{
  width:min(100%, 960px);         /* Karte schön breit, aber nicht zu groß */
  margin:0 auto;
}

/* Den alten About-Hero-Block nicht mehr benutzen */
.about.about--hero{ display:none; }
/* ===== Parallax-Banner (kleiner) ===== */
.parallax-banner{
  position:relative;
  background-image:url('images/noge.jpg');
  background-size:cover; background-position:center 45%;
  background-attachment:fixed;
  height:26vh;              /* vorher 46vh */
  min-height:200px;         /* vorher 320px */
  display:grid; place-items:center;
}
/* Ein einzelnes, flaches Bild über "Koreografije" */
.stage-image{
  width:100%;
  height:34vh;        /* flach halten */
  min-height:220px;
  max-height:420px;
  overflow:hidden;
  background:#0b0f14; /* dezenter Rand-/Hintergrundton */
  margin:0;           /* bündig zum blauen Block darunter */
}
.stage-image img{
  width:100%;
  height:100%;
  object-fit:cover;   /* wie im Screenshot: vollflächig, zugeschnitten */
  display:block;
}
@media (max-width:920px){
  .stage-image{ height:28vh; min-height:200px; }
}
@media (max-width:560px){
  .stage-image{ height:24vh; min-height:180px; }
}
/* kompaktere Höhe für das fixierte Bild vor "Koreografije" */
.stage-image-fixed{
  height: 20vh !important;   /* vorher z.B. 34vh */
  min-height: 140px !important;
  max-height: 280px !important;
}

/* auf kleineren Screens noch flacher */
@media (max-width: 920px){
  .stage-image-fixed{ height: 18vh !important; min-height: 130px !important; }
}
@media (max-width: 560px){
  .stage-image-fixed{ height: 16vh !important; min-height: 120px !important; }
}
/* Stabil: Höhe nur aus dem Seitenverhältnis berechnen */
.hero-video-viewport{
  position: relative;
  width: 100%;
  aspect-ratio: var(--video-ratio, 9 / 16); /* Fallback: Portrait, ändere bei Bedarf */
  max-height: 72vh;                          /* Obergrenze, optional anpassen */
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  margin: 0 auto;
}

/* Video vollständig zeigen (kein Beschnitt) */
.hero-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;          /* zeigt den ganzen Inhalt */
  object-position: center;      /* ggf. center bottom / center top */
  display: block;
}
/* ==== Basis: kein horizontales Scrollen, Medien responsiv ==== */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }

/* ==== Burger sichtbar, Links als Overlay-Panel auf Mobil ==== */
.burger{
  display:none; font-size:28px; line-height:1;
  background:none; border:0; color:#fff; cursor:pointer;
  position:absolute; top:16px; right:16px; z-index:1100;
}

/* Overlay, das beide ULs enthält (wir benutzen die vorhandenen ULs) */
@media (max-width: 768px){
  .burger{ display:block; }

  /* ULs standardmäßig verstecken */
  .nav-left, .nav-right{ display:none; }

  /* Wenn geöffnet: als Dropdown/Overlay unter der Navbar */
  body.nav-open .nav-left,
  body.nav-open .nav-right{
    display:grid; gap:12px;
    position:fixed; left:0; right:0;
    top: calc( var(--nav-top, 70px) );
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(6px);
    padding:16px;
    z-index:1000;
  }

  /* nav-left oberhalb, nav-right darunter – sauber gestapelt */
  body.nav-open .nav-right{ top: calc( var(--nav-top, 70px) + 220px ); }

  /* größere Tapp-Ziele */
  .nav-left a, .nav-right a{ font-size:1.2rem; padding:8px 4px; }
}

/* Höhe der Navbar (für das Overlay-Top) */
.nav-container{ --nav-top: 80px; }

/* Startseite: Navbar bleibt bei dir transparent; Hero bekommt Luft */
.home .nav-container{ background: transparent !important; box-shadow: none !important; }
.hero{ padding-top: clamp(70px, 10svh, 120px); }  /* verhindert Überdeckung auf Mobil */
/* iOS/Android mögen 'fixed' nicht → auf Mobil abschalten */
@media (max-width: 1024px){
  .parallax-banner{ background-attachment: scroll !important; }
}

/* Mobil nicht fix neben dem Inhalt kleben */
@media (max-width: 768px){
  .social-icons{
    position: static !important;
    display:flex; justify-content:center; gap:18px; margin:12px 0;
  }
}
/* ===============================
   iPad Pro Tweaks (Portrait)
   11" / 12.9" Portrait: 834–1180px
   =============================== */
   @media (min-width:834px) and (max-width:1180px){
    /* NAV: Desktop-Layout statt Overlay */
    .burger{ display:none !important; }
    .nav-left, .nav-right{ display:flex !important; gap:32px; }
    .nav-container nav{
      grid-template-columns: 1fr auto 1fr;
      gap: 40px;
      padding: 16px 28px;
    }
    .logo img{ height: 110px; }                 /* moderat groß */
    nav ul li a{ font-size: 1.05rem; }          /* kompaktere Typo */
    /* sicherstellen, dass kein Overlay offen bleibt */
    body.nav-open::before{ content:none !important; }
    body.nav-open .nav-left,
    body.nav-open .nav-right{ position:static !important; display:flex !important; opacity:1 !important; transform:none !important; }
    body{ overflow: auto !important; }
  
    /* HERO: etwas Luft unter der (fixen) Nav */
    .hero{ padding-top: 90px; min-height: 70vh; }
  
    /* Parallax: iOS ruckelt bei fixed -> scroll */
    .parallax-banner{ background-attachment: scroll !important; height: 28vh; min-height:220px; }
  
    /* Grids: 2 Spalten für klare Lesbarkeit */
    .ensembles-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 24px; }
    .choreografien-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .map-grid{ grid-template-columns: 1fr 1fr !important; }
  
    /* News-Card: 2-spaltig behalten, Schrift leicht kleiner */
    .news-card{ grid-template-columns: auto 1fr auto; }
    .news-title{ font-size: clamp(18px, 2vw, 22px); }
    .news-price__num{ font-size: clamp(32px, 4.2vw, 46px); }
  }
  
  /* ===============================
     iPad Pro Tweaks (Landscape)
     12.9" Landscape ~1366px
     =============================== */
  @media (min-width:1181px) and (max-width:1366px){
    .burger{ display:none !important; }
    .nav-left, .nav-right{ display:flex !important; gap:40px; }
    .nav-container nav{ gap:48px; padding:18px 36px; }
    .logo img{ height: 130px; }
    nav ul li a{ font-size: 1.1rem; }
  
    .hero{ padding-top: 96px; min-height: 68vh; }
    .parallax-banner{ background-attachment: scroll !important; height: 30vh; min-height:240px; }
  
    .ensembles-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 28px; }
    .choreografien-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
    .map-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  }
  
  /* ===============================
     Universelle Stabilitäts-Extras
     (falls noch nicht gesetzt)
     =============================== */
  @media (max-width:1024px){
    /* iOS: fixed parallax vermeiden */
    .parallax-banner{ background-attachment: scroll !important; }
  }
  img, video{ max-width:100%; height:auto; display:block; }
  .schedule {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .schedule li {
    margin-bottom: 1.2em;
    line-height: 1.4;
  }
  
  .schedule strong {
    display: block;
    font-size: 1.05em;
    margin-bottom: 0.2em;
  }
/* Liste neutralisieren */
.schedule { list-style: none; margin: 0 auto; padding: 0; max-width: 680px; }
/* einzelner Block */
.schedule .slot { text-align: center; margin: 1.25rem 0; }
/* Überschrift pro Ensemble */
.schedule .title { display: block; font-size: 1.1rem; margin-bottom: .35rem; }
/* Tag + Zeit in einer Zeile */
.schedule .when { display: flex; gap: .5rem; justify-content: center; font-weight: 600; }
/* Ort & Adresse */
.schedule .place { margin-top: .2rem; }
.schedule .addr  { opacity: .9; }

/* Falls altes CSS Spans floated/positioniert: hart neutralisieren */
.schedule .when span { float: none !important; display: inline; }
.news-art { display: none !important; }
/* ====== FOTO-STYLING ====== */
.content-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 60px auto;
  padding: 25px;
  max-width: 950px;
  background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-photo:hover {
  transform: scale(1.01);
  box-shadow: 0 25px 55px rgba(0,0,0,0.65);
}

.content-photo img {
  width: 100%;
  height: auto;
  max-width: 880px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.content-photo img:hover {
  transform: scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

.content-photo figcaption {
  text-align: center;
  color: #bfbfbf;
  font-size: 0.95rem;
  margin-top: 14px;
  letter-spacing: 0.4px;
  font-style: italic;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.content-photo:hover figcaption {
  opacity: 1;
  color: #fff;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
  .content-photo {
    padding: 14px;
    margin: 35px auto;
  }
  .content-photo figcaption {
    font-size: 0.85rem;
  }
}
/* ===== Events (Tabs + Cards) ===== */
.events-title{ text-align:center; margin:40px 0 10px; }
.events-switch{ display:flex; gap:10px; justify-content:center; margin-bottom:20px; }
.ev-tab{ padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:#121212; color:#fff; cursor:pointer; font-weight:700; }
.ev-tab.is-active{ background:#1b1b1b; box-shadow:0 8px 24px rgba(0,0,0,.35); }

.events-group{ display:grid; gap:18px; max-width:1100px; margin:0 auto; padding:0 16px 40px; }
.events-group:empty::after{ content:attr(data-empty-text); display:block; text-align:center; opacity:.7; padding:24px 0; }
.is-visible{ display:grid; }

.ev-card{ display:flex; align-items:center; gap:18px; padding:18px; background:linear-gradient(180deg,#171717,#101010);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:0 14px 40px rgba(0,0,0,.35); color:#fff; }
.ev-date{ min-width:92px; text-align:center; font-weight:900; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:12px 10px; }
.ev-date .d{ font-size:20px; }
.ev-date .m{ font-size:14px; opacity:.85; }
.ev-body{ flex:1; }
.ev-title{ margin:0 0 4px; font-size:20px; font-weight:800; }
.ev-meta{ opacity:.8; font-size:.95rem; }

.ev-photos{ display:flex; gap:10px; margin-left:auto; flex-wrap:wrap; }
.ev-thumb{ width:88px; height:64px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.08); cursor:pointer; transition:transform .15s ease; }
.ev-thumb:hover{ transform:scale(1.03); }

/* Lightbox */
.ev-lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.8); z-index:999; padding:20px; }
.ev-lightbox.is-open{ display:flex; }
.ev-lightbox__img{ max-width:min(92vw,1200px); max-height:80vh; border-radius:12px; }
.ev-lightbox__caption{ color:#ddd; margin-top:8px; text-align:center; }
.ev-lightbox__close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:999px; border:0; background:#fff; cursor:pointer; font-size:22px; }

@media (max-width:640px){
  .ev-card{ flex-direction:column; align-items:flex-start; }
  .ev-photos{ margin:6px 0 0; }
}
/* --- FIX: kleines, stabiles Banner --- */
.parallax-banner {
  position: relative;
  height: 22vh !important;     /* kleiner */
  min-height: 150px !important;
  max-height: 280px !important;

  background-image: url('images/noge.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: scroll !important; /* fixed deaktivieren (iOS Bug) */
  overflow: hidden;
}

@media (max-width: 768px) {
  .parallax-banner {
    height: 18vh !important;
    min-height: 130px !important;
  }
}
/* --- DESKTOP: großes, fixiertes Foto --- */
@media (min-width: 769px) {
  .parallax-banner {
    height: 48vh !important;
    min-height: 380px !important;

    background-image: url("images/noge.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed !important;
  }
}
/* ===== Winterpause / Announcement Card ===== */
.ev-announcement{
  max-width:1100px;
  margin:0 auto 18px;
  padding:0 16px;
}
.ev-announcement .box{
  padding:20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#171717,#101010);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  color:#fff;
}
.ev-announcement h2{
  margin:0 0 8px;
  font-size:22px;
  font-weight:900;
}
.ev-announcement p{
  margin:0 0 14px;
  opacity:.9;
  line-height:1.4;
}
.ev-announcement .media{
  border-radius:12px;
  overflow:hidden;
  background:#000;
}

.ev-announcement video,
.ev-announcement img{
  width:100%;
  height:1020px;

  object-fit: cover;          /* füllt endlich die Fläche */
  object-position: 60% 40%;   /* 👈 verhindert starkes Zoomen */

  display:block;
}

@media (max-width: 640px){
  .ev-announcement video,
  .ev-announcement img{
    height:360px;
  }
}
  


/* =========================================================
   NAVBAR FIX (Deutsch schiebt nicht mehr nach rechts)
   -> ganz UNTEN in style.css einfügen
   ========================================================= */

   .nav-container nav{
    /* stabiler als Grid bei langen Wörtern */
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 40px;
  }
  
  /* Link-Gruppen: dürfen schrumpfen */
  .nav-left,
  .nav-right{
    display: flex !important;
    align-items: center;
  
    flex: 1 1 0;      /* wichtig: beide Seiten dürfen kleiner werden */
    min-width: 0;     /* wichtig: erlaubt Shrink statt Overflow */
    gap: clamp(14px, 2.2vw, 48px);
  }
  
  .nav-left{ justify-content: flex-end; }
  .nav-right{ justify-content: flex-start; }
  
  /* Logo bleibt in der Mitte und darf nichts „verschieben“ */
  .logo{
    flex: 0 0 auto;
    margin: 0 18px;
    transform: none !important;     /* killt deine translateX-Experimente */
  }
  .logo img{
    height: 180px;                  /* wie du es magst */
    width: auto;
    display: block;
  }
  
  /* Links: nicht umbrechen, aber dürfen kleiner werden */
  nav ul{
    margin: 0;
    padding: 0;
  }
  nav ul li{
    min-width: 0;
  }
  nav ul li a{
    white-space: nowrap;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem); /* passt sich an */
  }
  
  /* Sprachswitch immer sichtbar, nie umbrechen */
  .lang-switch{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  
  /* Extra: in DE etwas weniger Abstand + minimal kleinere Schrift */
  html[lang="de"] .nav-left,
  html[lang="de"] .nav-right{
    gap: clamp(10px, 1.8vw, 32px);
  }
  html[lang="de"] nav ul li a{
    font-size: clamp(0.90rem, 1.0vw, 1.10rem);
  }
  
  /* Mobile bleibt wie bei dir (Burger) */
  @media (max-width: 768px){
    .nav-container nav{ padding: 14px 20px; }
    .logo img{ height: 80px; }
  }
  
/* =========================================================
   MOBILE NAV – sauber: Logo + Burger + SR|DE oben,
   Menü klappt darunter auf (überschreibt alle alten Overrides)
   ========================================================= */

   @media (max-width: 768px){

    /* Topbar Layout */
    .nav-container nav{
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
    }
  
    /* Logo klein genug */
    .logo{
      flex: 0 0 auto;
      margin: 0 !important;
      transform: none !important;
    }
    .logo img{ height: 64px !important; }
  
    /* Burger sichtbar */
    .burger{
      display: block !important;
      position: static !important;   /* kein wildes absolute nötig */
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }
  
    /* Links in der Topbar NICHT anzeigen */
    .nav-left{ display: none !important; }
  
    /* nav-right bleibt NUR für den Language Switch sichtbar */
    .nav-right{
      display: flex !important;
      align-items: center;
      gap: 8px;
    }
    .nav-right > li:not(.lang-switch){
      display: none !important;
    }
    .lang-switch{
      display: inline-flex !important;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
  
    /* ---------------------------
       Wenn Menü offen ist:
       zeige nav-left + nav-right (mit Links) unter der Topbar
       --------------------------- */
    body.nav-open .nav-left,
    body.nav-open .nav-right{
      display: flex !important;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
  
      width: 100%;
      padding: 14px 16px 18px;
      background: rgba(13,27,42,.98);
      border-top: 1px solid rgba(255,255,255,.10);
    }
  
    /* Im offenen Menü: ALLE nav-right Items wieder anzeigen (inkl. Links) */
    body.nav-open .nav-right > li{
      display: block !important;
    }
  
    /* Im offenen Menü: Language Switch ans Ende, aber sichtbar */
    body.nav-open .lang-switch{
      margin-top: 6px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.10);
      width: 100%;
    }
  
    /* Tapp-Ziele größer */
    body.nav-open .nav-left a,
    body.nav-open .nav-right a,
    body.nav-open .lang-switch button{
      font-size: 1.1rem;
      padding: 8px 0;
    }
  }