/* =====================================================================
   Marinemusikkorps Kiel – Stylesheet
   Marine-Farbwelt: Navy, Gold, Seeblau, Schaumweiß
   ===================================================================== */

:root {
  --navy-900: #061726;
  --navy-800: #0b2545;   /* Primär */
  --navy-700: #122f55;
  --navy-600: #1b4068;
  --sea:      #2a6f97;   /* Akzent Seeblau */
  --sea-light:#5a96bd;
  --gold:     #e6b422;   /* Akzent Gold (kräftig) */
  --gold-light:#f6d36b;
  --foam:     #eef3f8;
  --paper:    #f7fafc;
  --white:    #ffffff;
  --ink:      #15212f;
  --muted:    #647688;
  --line:     #dfe7ef;

  --maxw: 1180px;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(6, 23, 38, .12);
  --shadow-sm: 0 4px 14px rgba(6, 23, 38, .10);

  --serif: "Barlow Condensed", "Oswald", Impact, "Haettenschweiler", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .5px;
  margin: 0 0 .5em;
  text-transform: uppercase;
}

p { margin: 0 0 1em; }
a { color: var(--sea); text-decoration: none; }
a:hover { color: var(--navy-800); }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--paper); }
.section--navy { background: var(--navy-800); color: var(--foam); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }

.eyebrow {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 15px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 10px;
}
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4vw, 46px); }
.section-head p { color: var(--muted); font-size: 18px; }
.section--navy .section-head p { color: var(--sea-light); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 16px; font-weight: 600;
  padding: 13px 28px; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-light); color: var(--navy-900); }
.btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--navy-800); border-color:#fff; }
.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); color:#fff; }

/* =====================================================================
   Header / Navigation
   ===================================================================== */
.topbar {
  background: var(--navy-900); color: var(--sea-light);
  font-size: 13.5px; letter-spacing: .3px;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; min-height: 38px; }
.topbar a { color: var(--sea-light); }
.topbar a:hover { color: var(--gold-light); }
.topbar .socials { display: flex; gap: 16px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 37, 69, .97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200,168,90,.25);
}
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 13px; color: #fff; }
.brand:hover { color: #fff; }
.brand .anchor { width: 38px; height: 38px; flex: none; }
.brand img.anchor { width: auto; height: 46px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.brand b { font-family: var(--serif); font-size: 22px; letter-spacing: 1px; text-transform: uppercase; display:block; line-height: 1; }
.brand span { font-size: 11.5px; letter-spacing: 3px; color: var(--gold-light); text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; color: #d7e2ee; font-family: var(--serif); text-transform: uppercase;
  letter-spacing: 1.2px; font-size: 16px; padding: 9px 14px; border-radius: 6px; font-weight: 500;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-links a.active { color: var(--gold-light); }
.nav-cta { margin-left: 10px; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: #fff; margin: 5px 0; transition: .25s; }

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative; min-height: 78vh; display: flex; align-items: center;
  color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(6,23,38,.55), rgba(6,23,38,.82)), var(--navy-800);
  background-size: cover; background-position: center;
}
.hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height: 120px;
  background: linear-gradient(180deg, transparent, rgba(6,23,38,.0)); pointer-events:none;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(40px, 7vw, 84px); margin-bottom: 14px; text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.hero .lead { font-size: clamp(18px, 2.4vw, 24px); max-width: 640px; margin: 0 auto 30px; color: #e7eef5; }
.hero .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index:2; color: var(--gold-light); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }

/* =====================================================================
   Generic layout helpers
   ===================================================================== */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }

.lead-text { font-size: 19px; color: var(--ink); }
.muted { color: var(--muted); }

/* Facts / stats */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.fact { text-align: center; padding: 22px 12px; background: rgba(255,255,255,.06); border-radius: var(--radius); border: 1px solid rgba(200,168,90,.25); }
.fact b { display: block; font-family: var(--serif); font-size: 42px; color: var(--gold-light); line-height: 1; }
.fact span { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--sea-light); }

/* Cards */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card .body { padding: 22px 22px 24px; }
.card h3 { font-size: 24px; margin-bottom: 6px; }

/* Ensemble grid */
.ensemble-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.ensemble {
  padding: 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--gold); transition: .2s;
}
.ensemble:hover { border-left-color: var(--sea); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.ensemble h3 { font-size: 21px; margin-bottom: 4px; color: var(--navy-800); }
.ensemble p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* Concert list */
.concert {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 22px; align-items: center;
  padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 14px;
  transition: .2s;
}
.concert:hover { box-shadow: var(--shadow-sm); transform: translateX(3px); }
.concert .date {
  text-align: center; background: linear-gradient(180deg,#f4f9fc,#e6eef4); color: var(--navy-900);
  border: 1px solid #d6e1ea; border-top: 3px solid var(--gold); border-radius: 8px; padding: 9px 6px;
}
.concert .date .d { font-family: var(--serif); font-size: 32px; line-height: 1; display:block; color: var(--navy-900); }
.concert .date .m { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #b07d12; font-weight: 600; }
.concert .info h3 { margin: 0 0 4px; font-size: 23px; }
.concert .info p { margin: 0; color: var(--muted); }
.concert .meta { text-align: right; color: var(--sea); font-weight: 600; white-space: nowrap; }

/* =====================================================================
   Galerie
   ===================================================================== */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; }
.album {
  position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  aspect-ratio: 4/3; box-shadow: var(--shadow-sm); background: var(--navy-700);
}
.album img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.album:hover img { transform: scale(1.06); }
.album .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(6,23,38,.9));
}
.album .cap b { font-family: var(--serif); font-size: 22px; text-transform: uppercase; letter-spacing: .5px; display:block; line-height: 1.1; }
.album .cap span { font-size: 13px; color: var(--gold-light); letter-spacing: 1px; }
.album .count { position: absolute; top: 12px; right: 12px; background: rgba(6,23,38,.7); color:#fff; font-size: 12px; padding: 4px 10px; border-radius: 20px; }

/* Photo strip inside opened album */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; }
.photo-grid img { aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; cursor: pointer; transition: .2s; }
.photo-grid img:hover { transform: scale(1.03); box-shadow: var(--shadow-sm); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(6,23,38,.95); z-index: 100;
  display: none; align-items: center; justify-content: center; flex-direction: column;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox .lb-cap { color: #cfdcea; margin-top: 14px; font-size: 14px; letter-spacing: .5px; }
.lightbox button { position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; border-radius: 8px; width: 52px; height: 52px; font-size: 26px; transition: .2s; }
.lightbox button:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
.lb-close { top: 22px; right: 22px; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }

.back-link { display:inline-flex; align-items:center; gap:8px; font-family: var(--serif); text-transform: uppercase; letter-spacing:1px; cursor:pointer; color: var(--sea); background:none; border:0; font-size:16px; padding:0; margin-bottom: 22px; }

/* =====================================================================
   Medien (Video / Audio)
   ===================================================================== */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px,1fr)); gap: 22px; }
.video-card { background:#000; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.video-card video { width: 100%; display:block; aspect-ratio: 16/9; background:#000; object-fit: cover; }
.video-card .vc-body { padding: 14px 16px; background:#fff; }
.video-card h3 { font-size: 19px; margin: 0 0 2px; }
.video-card p { margin:0; color: var(--muted); font-size: 14px; }

.audio-list { display: grid; gap: 12px; }
.audio-item { display:flex; align-items:center; gap: 16px; padding: 16px 18px; background:#fff; border:1px solid var(--line); border-radius: var(--radius); }
.audio-item .num { font-family: var(--serif); font-size: 26px; color: var(--gold); width: 34px; text-align:center; flex:none; }
.audio-item .ai-info { flex: 1; min-width: 0; }
.audio-item .ai-info b { display:block; font-size: 16px; }
.audio-item audio { height: 38px; }

/* =====================================================================
   Forms / Kontakt / Bewerbung
   ===================================================================== */
.info-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.info-card h3 { color: var(--navy-800); font-size: 24px; margin: 0 0 38px; }
.info-row { display:flex; gap: 12px; margin-bottom: 12px; }
.info-row .ic { color: var(--gold); flex:none; width: 22px; }

.field { margin-bottom: 18px; }
.field label { display:block; font-weight:600; margin-bottom:6px; font-size: 14px; letter-spacing:.3px; }
.field input, .field textarea {
  width:100%; box-sizing:border-box; padding: 12px 14px; border:1px solid var(--line); border-radius: 8px; font: inherit; background: var(--paper);
}
.info-card { overflow-wrap:anywhere; }
.info-card a { word-break:break-word; }
.field textarea { max-width:100%; resize:vertical; }
.field input:focus, .field textarea:focus { outline:none; border-color: var(--sea); background:#fff; }
.note { font-size: 13px; color: var(--muted); }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--navy-800); color: #b9c8d8; padding: 60px 0 28px; font-size: 15px; }
.site-footer h4 { color: #fff; font-size: 20px; margin-bottom: 16px; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer a { color: #aebfd0; }
.site-footer a:hover { color: var(--gold-light); }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom: 9px; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; flex-wrap:wrap; gap: 12px; font-size: 13.5px; color:#7f93a8; }
.footer-bottom a { color:#7f93a8; }

/* Page hero (sub pages) */
.page-hero { background: linear-gradient(180deg, rgba(6,23,38,.62), rgba(11,37,69,.92)), var(--navy-700); background-size:cover; background-position:center; color:#fff; padding: 96px 0 72px; text-align:center; }
.page-hero h1 { font-size: clamp(36px,5.5vw,64px); }
.page-hero p { color: var(--sea-light); font-size: 18px; max-width: 640px; margin: 0 auto; }
.breadcrumb { color: var(--gold-light); font-size:13px; letter-spacing:2px; text-transform:uppercase; margin-bottom: 12px; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .nav-links {
    position: fixed; inset: 0 0 auto 0; z-index: 55; background: var(--navy-800); flex-direction: column;
    align-items: stretch; gap: 0; padding: 70px 16px 22px; border-bottom: 2px solid var(--gold);
    transform: translateY(-130%); transition: transform .3s ease; box-shadow: var(--shadow);
  }
  .nav-links.open { transform: translateY(0); }
  .nav .brand, .nav .nav-toggle { position: relative; z-index: 61; }
  .nav-links a { padding: 14px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-cta { margin: 12px 0 0; }
  .nav-toggle { display: block; }
  .topbar { display:none; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .concert { grid-template-columns: 70px 1fr; }
  .concert .meta { grid-column: 1 / -1; text-align: left; }
  .section { padding: 60px 0; }
}

/* =====================================================================
   v2 – Wappen-Header, Hero-Video, Jubiläum, Besetzung, Hörproben
   ===================================================================== */
.brand .wappen { height: 50px; width: auto; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
@media (max-width:560px){ .brand .wappen{ height:40px; } .brand b{ font-size:18px; } }

/* Hero mit Videohintergrund */
.hero { overflow: hidden; }
.hero .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero .hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,23,38,.55), rgba(6,23,38,.78));
}
.hero .container { position: relative; z-index: 2; }
.hero .wappen-hero { height: 96px; margin: 0 auto 18px; display:block; filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)); }

/* Jubiläums-Badge + Feature */
.jubilee-badge {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  background: rgba(200,168,90,.16); border:1px solid var(--gold);
  color: var(--gold-light); font-family:var(--serif); text-transform:uppercase;
  letter-spacing:2px; font-size:14px; padding:7px 16px; border-radius:30px;
}
.jubilee {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color:#fff; border-radius:16px; overflow:hidden; border:1px solid rgba(200,168,90,.35);
  box-shadow: var(--shadow);
}
.jubilee .inner { display:grid; grid-template-columns: 1.1fr .9fr; gap:0; }
.jubilee .txt { padding: 48px 44px; }
.jubilee .txt h2 { font-size: clamp(30px,4vw,48px); color:#fff; }
.jubilee .big-year { font-family:var(--serif); font-size: 92px; line-height:.9; color:var(--gold-light); margin:0 0 6px; }
.jubilee .txt p { color:#cfe0ee; }
.jubilee .media { background-size:cover; background-position:center; min-height: 320px; }
.jubilee .concert-line { display:flex; gap:14px; align-items:center; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); }
.jubilee .concert-line .cal { text-align:center; background:var(--gold); color:var(--navy-900); border-radius:8px; padding:8px 12px; font-family:var(--serif); line-height:1; }
.jubilee .concert-line .cal b{ display:block; font-size:26px; } .jubilee .concert-line .cal span{ font-size:11px; letter-spacing:1px; }
@media (max-width:860px){ .jubilee .inner{ grid-template-columns:1fr; } .jubilee .media{ min-height:220px; order:-1; } .jubilee .txt{ padding:32px 24px; } .jubilee .big-year{ font-size:64px; } }

/* Hörproben (Startseite) */
.player { display:grid; gap:12px; }
.track { display:flex; align-items:center; gap:16px; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:12px; transition:.2s; }
.track:hover{ box-shadow:var(--shadow-sm); }
.track .tnum{ font-family:var(--serif); font-size:24px; color:var(--gold); width:30px; text-align:center; flex:none; }
.track .tmeta{ flex:1; min-width:0; } .track .tmeta b{ display:block; font-size:16px; } .track .tmeta span{ font-size:13px; color:var(--muted); }
.track audio{ height:40px; max-width:300px; }
@media (max-width:680px){ .track{ flex-wrap:wrap; } .track audio{ width:100%; max-width:none; } }

/* Dirigentin */
.conductor { display:grid; grid-template-columns: 360px 1fr; gap:44px; align-items:center; }
.conductor img { width:100%; border-radius:14px; box-shadow:var(--shadow); }
.conductor .role { color:var(--gold); font-family:var(--serif); letter-spacing:2px; text-transform:uppercase; }
@media (max-width:760px){ .conductor{ grid-template-columns:1fr; } .conductor img{ max-width:320px; } }

/* Mitglieder-Raster (Besetzung) */
.member-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:16px; }
.member { text-align:center; }
.member .ph { aspect-ratio: 3/4; border-radius:12px; overflow:hidden; background:var(--navy-700); box-shadow:var(--shadow-sm); }
.member .ph img { width:100%; height:100%; object-fit:cover; transition:.4s; filter:saturate(.95); }
.member:hover .ph img { transform:scale(1.05); }
.member b { display:block; margin-top:10px; font-family:var(--serif); font-size:18px; letter-spacing:.5px; color:var(--navy-800); }

/* Ensemble-Karten mit Bild */
.ens-card { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s; }
.ens-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.ens-card .pic { aspect-ratio:16/10; background:var(--navy-700); background-size:cover; background-position:center; }
.ens-card .pic.noimg{ background:linear-gradient(135deg,var(--navy-700),var(--sea)); display:flex; align-items:center; justify-content:center; }
.ens-card .pic.noimg span{ font-family:var(--serif); color:var(--gold-light); font-size:40px; }
.ens-card .b { padding:18px 20px 22px; }
.ens-card h3 { font-size:22px; color:var(--navy-800); margin:0 0 6px; }
.ens-card p { margin:0; color:var(--muted); font-size:14.5px; }

/* Bewerbungs-Wege */
.path-card { background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px; padding:26px; box-shadow:var(--shadow-sm); }
.path-card .step{ font-family:var(--serif); color:var(--sea); letter-spacing:1px; font-size:14px; text-transform:uppercase; }
.path-card h3{ font-size:23px; color:var(--navy-800); margin:6px 0 8px; }
.path-card p{ margin:0; color:var(--muted); }

/* =====================================================================
   Mobile-Härtung – Überlauf & Hero-Titel
   ===================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; }
h1, h2, h3 { overflow-wrap: break-word; word-break: normal; hyphens: auto; }

@media (max-width: 600px) {
  .hero { min-height: 88vh; }
  .hero h1 { font-size: 34px; letter-spacing: .5px; line-height: 1.05; }
  .hero .lead { font-size: 16px; }
  .hero .wappen-hero { height: 70px; }
  .hero .btns { gap: 10px; }
  .hero .btn { padding: 12px 18px; font-size: 14px; }
  .page-hero h1 { font-size: 34px; }
  .big-year { font-size: 64px !important; }
  .section-head h2, .conductor h2, .jubilee .txt h2 { font-size: 28px; }
  .container { padding: 0 18px; }
  .jubilee .txt { padding: 26px 20px; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 29px; }
}

/* =====================================================================
   Orchester-Porträts (klein, ohne Namen, Instrumentengattungs-Reihenfolge)
   ===================================================================== */
.portrait-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(108px,1fr)); gap:10px; }
.portrait-grid .pf { aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:var(--navy-700); box-shadow:var(--shadow-sm); }
.portrait-grid img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .35s ease; }
.portrait-grid .pf:hover img { transform:scale(1.06); }
@media (max-width:560px){ .portrait-grid{ grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:8px; } }

/* =====================================================================
   Bewegte Hintergründe auf Unterseiten + Leitung
   ===================================================================== */
.page-hero { position: relative; overflow: hidden; }
.page-hero .ph-rot { position:absolute; inset:0; z-index:0; background:var(--navy-800); }
.page-hero .ph-rot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease; }
/* Erstes Bild sofort voll sichtbar (kein Aufhellen beim Laden) + dauerhafte Grundebene gegen Abdunkeln beim Wechsel */
.page-hero .ph-rot img:first-of-type { opacity:1; }
.page-hero .ph-rot img.on { opacity:1; }
.page-hero .ph-veil { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,23,38,.6), rgba(11,37,69,.9)); }
.page-hero .container { position:relative; z-index:2; }

.leaders { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.leader-card { display:flex; gap:20px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:var(--shadow-sm); }
.leader-card > img { width:140px; height:185px; object-fit:cover; object-position:top center; border-radius:10px; flex:none; }
.leader-card .ph-ph { width:140px; height:185px; border-radius:10px; flex:none; background:linear-gradient(135deg,var(--navy-700),var(--sea)); display:flex; align-items:center; justify-content:center; }
.leader-card .ph-ph img { width:78px; height:auto; }
.leader-card .role { color:var(--gold); font-family:var(--serif); text-transform:uppercase; letter-spacing:1.5px; font-size:13px; }
.leader-card h3 { color:var(--navy-800); font-size:22px; margin:5px 0 8px; }
.leader-card p { margin:0; color:var(--muted); font-size:15px; }
@media (max-width:760px){ .leaders{ grid-template-columns:1fr; } }

/* ===== Feinschliff: flacher Header, kompakter Footer ===== */
.nav { min-height: 56px; }
.brand img.anchor { height: 38px; }
.site-header .topbar { min-height: 32px; }
.site-footer { padding: 32px 0 16px; }
.footer-grid { gap: 30px; }
.site-footer h4 { margin-bottom: 8px; }
.site-footer p { margin-bottom: .5em; }
.site-footer .footer-grid > div:first-child img { height: 46px !important; margin-bottom: 8px !important; }
.footer-bottom { margin-top: 20px; padding-top: 14px; }
@media (max-width:900px){ .site-footer{ padding:26px 0 14px; } }

/* ===== v7: Footer-Pep (Gold/Linien), Ensemble-Namen navy, Orchester-Auswahl ===== */
.site-footer { border-top: 3px solid var(--gold); text-align: center; padding: 34px 0 18px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; }
.footer-wappen { height: 56px; margin-bottom: 14px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.footer-rule { width: 90px; height: 2px; background: var(--gold); margin-bottom: 16px; opacity:.9; }
.site-footer h4 { color: #fff; letter-spacing: 1px; margin-bottom: 10px; }
.site-footer h4::after { content:""; display:block; width:40px; height:2px; background:var(--gold); margin:9px auto 0; }
.footer-social a { color: var(--gold-light); }
.site-footer .footer-bottom { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(200,168,90,.35); width:100%; max-width:760px; display:flex; justify-content:center; gap:22px; flex-wrap:wrap; }

.ens-card .b { background: var(--navy-800); }
.ens-card h3 { color: #fff; }
.ens-card p { color: var(--sea-light); }


/* ===== v8: Orchester nach Instrumentengattung ===== */
.orch-sec { font-family:var(--serif); text-transform:uppercase; letter-spacing:2px; color:var(--gold); font-size:19px; margin:30px 0 14px; padding-bottom:7px; border-bottom:1px solid var(--line); }
.orch-sec:first-child { margin-top:0; }

/* ===== v9: Ensembles weiß+Kontrast, Konzerte dünner ===== */
.ens-card .b { background:#fff; border-top:3px solid var(--gold); }
.ens-card h3 { color:var(--navy-800); }
.ens-card p { color:var(--muted); }
.concert { padding:12px 16px; gap:16px; margin-bottom:10px; }
.concert .date { padding:7px 6px; }
.concert .date .d { font-size:26px; }
.concert .info h3 { font-size:19px; margin-bottom:2px; }
.concert .info p { font-size:14px; }

/* ===== v10: Hero Vollbild, klickbare Ensembles, Galerie ruhiger ===== */
.hero { min-height: calc(100vh - 88px); }
@media (max-width:900px){ .hero { min-height: calc(100vh - 56px); } }
.ens-card { cursor: pointer; }
.photo-grid { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }

.emodal { position:fixed; inset:0; background:rgba(6,23,38,.12); z-index:120; display:none; align-items:center; justify-content:center; padding:20px; }
.emodal .box { box-shadow:0 30px 80px rgba(6,23,38,.45), 0 0 0 1px rgba(6,23,38,.06); }
.emodal.open { display:flex; }
.emodal .box { background:#fff; border-radius:16px; max-width:720px; width:100%; max-height:88vh; overflow:auto; box-shadow:var(--shadow); }
.emodal .ehead { height:330px; background-size:cover; background-position:center top; position:relative; background-color:var(--navy-700); }
@media (max-width:560px){ .emodal .ehead { height:240px; } }
.emodal .ex { position:absolute; top:12px; right:12px; width:40px; height:40px; border:0; border-radius:9px; background:rgba(6,23,38,.6); color:#fff; font-size:22px; cursor:pointer; }
.emodal .ex:hover{ background:var(--gold); color:var(--navy-900); }
.emodal .ebody { padding:24px 28px 30px; }
.emodal h3 { font-size:28px; color:var(--navy-800); margin:0 0 4px; }
.emodal .erole { color:var(--gold); font-family:var(--serif); letter-spacing:1px; text-transform:uppercase; font-size:13px; margin-bottom:10px; }
.emodal .members { list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.emodal .members li { padding:7px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--muted); }
.emodal .members li b { color:var(--navy-800); font-weight:600; }
@media (max-width:560px){ .emodal .members{ grid-template-columns:1fr; } }

/* ===== v11: Hero als Vollbild-Video, Header transparent darüber (Startseite) ===== */
body.home .topbar { position:absolute; top:0; left:0; right:0; z-index:60; background:transparent; }
body.home .site-header { position:absolute; top:38px; left:0; right:0; z-index:60; background:rgba(11,37,69,.97); backdrop-filter:blur(8px); border-bottom:1px solid rgba(200,168,90,.25); }
body.home .hero { min-height:100vh; }
body.home .hero .hero-veil { background:linear-gradient(180deg, rgba(6,23,38,.7), rgba(6,23,38,.45) 40%, rgba(6,23,38,.8)); }
@media (max-width:900px){ body.home .site-header { top:0; } }

/* Hero-Text besser lesbar (stärkerer Schatten/Kontur) – ohne den Hero abzudunkeln */
body.home .hero .eyebrow { color:#fff; font-weight:600; font-size:clamp(18px,3vw,30px); letter-spacing:3px; margin-bottom:10px; text-shadow:0 0 10px rgba(255,255,255,.55), 0 0 26px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.7); }
body.home .hero h1 { font-size:clamp(40px,8.5vw,108px); }
body.home .hero .lead { color:#fff; text-shadow:0 0 9px rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.6); }
body.home .hero h1 { color:#ffd766; text-shadow:0 1px 4px rgba(0,0,0,.55), 0 2px 11px rgba(0,0,0,.4); }
/* ===== v12: Hero ganz voll + heller ===== */
body.home .hero { min-height:100vh; min-height:100lvh; }
@media (max-width:820px){
  body.home .hero { min-height:100vh; min-height:100lvh; }
  body.home .hero.fit-js { min-height:0; }
  body.home .hero .hero-bg { height:100%; width:100%; object-fit:cover; }
}
/* Brand: Marinemusikkorps & Kiel enger zusammen */
.brand b { margin-bottom:0; line-height:1; }
.brand > div { line-height:1; }
.brand span { display:block; line-height:1; margin-top:2px; }
body.home .hero::after { display:none; }
body.home .hero .hero-bg { filter: brightness(1.14) saturate(1.05); }
body.home .hero .hero-veil { background:linear-gradient(180deg, rgba(6,23,38,.48), rgba(6,23,38,.2) 42%, rgba(6,23,38,.58)); }

/* ===== v13: Ensemble-Mitglieder mit Foto + grid-2 mobil ===== */
.emodal .members { grid-template-columns:1fr 1fr; gap:0 22px; }
.emodal .members li { display:flex; align-items:center; gap:11px; padding:8px 0; border-bottom:1px solid var(--line); }
.emodal .members li img, .emodal .members li .mav { width:42px; height:42px; border-radius:50%; flex:none; object-fit:cover; object-position:top center; }
.emodal .members li .mav { background:var(--navy-700); color:var(--gold-light); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:18px; }
.emodal .members li .mn { font-size:14.5px; color:var(--navy-800); line-height:1.25; }
.emodal .members li .mn small { color:var(--muted); }
@media (max-width:560px){ .emodal .members{ grid-template-columns:1fr; } }
@media (max-width:680px){ .grid-2{ grid-template-columns:1fr; } }

/* ===== v14: Galerie als Mosaik (Masonry) statt gleichförmiges Raster ===== */
.photo-grid { display:block; column-count:3; column-gap:14px; grid-template-columns:none; }
.photo-grid img { width:100%; height:auto; aspect-ratio:auto; object-fit:fill; border-radius:10px; margin:0 0 14px; break-inside:avoid; display:block; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; }
.photo-grid img:hover { transform:translateY(-3px) scale(1.01); box-shadow:var(--shadow); }
@media (max-width:900px){ .photo-grid{ column-count:2; } }
@media (max-width:520px){ .photo-grid{ column-count:2; column-gap:10px; } .photo-grid img{ margin-bottom:10px; } }

/* ===== v15: Mobile – Ensembles & Konzerte kompakter ===== */
@media (max-width:600px){
  .ens-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .ens-card .pic { aspect-ratio:16/11; }
  .ens-card .b { padding:11px 12px 13px; border-top-width:2px; }
  .ens-card h3 { font-size:16px; }
  .ens-card p { font-size:12px; line-height:1.4; }
  .concert { padding:9px 12px; gap:11px; margin-bottom:8px; }
  .concert .date { padding:5px 5px; }
  .concert .date .d { font-size:20px; }
  .concert .date .m { font-size:10px; }
  .concert .info h3 { font-size:15px; }
  .concert .info p { font-size:12px; }
  .section-head h2 { font-size:26px; }
}

/* ===== v16: Ensembles 5er-Reihen, letzte Reihe zentriert ===== */
.ens-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; grid-template-columns:none; }
.ens-grid > .ens-card { flex:0 0 calc(20% - 15px); }
@media (max-width:900px){ .ens-grid > .ens-card { flex:0 0 calc(50% - 11px); } }
@media (max-width:600px){ .ens-grid { gap:12px; } .ens-grid > .ens-card { flex:0 0 calc(50% - 6px); } }

/* ===== v17: Navigation heller ===== */
.nav-links a { color:#ffffff; }
.nav-links a:hover { color:#ffffff; background:rgba(255,255,255,.12); }
.topbar, .topbar a { color:#cfe0f0; }
body.home .nav-links a { text-shadow:0 1px 8px rgba(0,0,0,.5); }
body.home .brand b, body.home .topbar span { text-shadow:0 1px 8px rgba(0,0,0,.5); }

/* ===== v18: Konzerte mit Foto-Hintergrund + Intro ausgeschmückt ===== */
#konzerte { background:linear-gradient(rgba(6,23,38,.85), rgba(11,37,69,.9)), url(bilder/highlights/h08.jpg) center/cover fixed; }
@media (max-width:900px){ #konzerte { background-attachment:scroll; } }
.intro-photo { border-radius:16px; min-height:360px; background-size:cover; background-position:center; box-shadow:var(--shadow); position:relative; }
.intro-photo::after { content:""; position:absolute; inset:8px; border:1px solid rgba(200,168,90,.55); border-radius:12px; pointer-events:none; }
.facts-row { grid-template-columns:repeat(4,1fr); margin-top:42px; }
.facts-row .fact { background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--gold); }
.facts-row .fact b { color:var(--navy-800); }
.facts-row .fact span { color:var(--muted); }
@media (max-width:600px){ .facts-row { grid-template-columns:1fr 1fr; } .intro-photo{ min-height:230px; } }

/* ===== v19: Topbar raus, Konzerte bewegte Fotos, Galerie-Teaser Collage ===== */
body.home .site-header { top:0; }
#konzerte { position:relative; background:var(--navy-800); }
#konzerte .ph-rot { position:absolute; inset:0; z-index:0; }
#konzerte .ph-rot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.5s ease; }
#konzerte .ph-rot img.on { opacity:1; }
#konzerte .ph-veil { position:absolute; inset:0; z-index:1; background:linear-gradient(rgba(6,23,38,.82), rgba(11,37,69,.9)); }
#konzerte > .container { position:relative; z-index:2; }

#teaser-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:12px; }
#teaser-grid .album { aspect-ratio:auto; height:100%; }
#teaser-grid .album:first-child { grid-column:1 / 3; grid-row:1 / 3; }
@media (max-width:700px){ #teaser-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:120px; } #teaser-grid .album:first-child { grid-column:1 / 3; grid-row:auto; } }

/* ===== v20: Klangkörper-Sektion in Blau ===== */
.intro-navy .lead-text { color:#eaf1f8; }
.intro-navy .split p { color:var(--sea-light); }
.intro-navy .facts-row .fact { background:rgba(255,255,255,.06); border-color:rgba(200,168,90,.3); }
.intro-navy .facts-row .fact b { color:var(--gold-light); }
.intro-navy .facts-row .fact span { color:var(--sea-light); }

/* ===== v21: Galerie-Sprunglinks + YouTube ===== */
.jumplinks { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 0 34px; }
.jumplinks a { font-family:var(--serif); text-transform:uppercase; letter-spacing:1px; font-size:14px; color:var(--navy-800); border:1px solid var(--line); padding:8px 18px; border-radius:30px; }
.jumplinks a:hover { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
.yt { position:relative; padding-bottom:56.25%; height:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Karten-Label Kiel */
.kiel-label { background:var(--navy-800); color:#fff; border:1px solid var(--gold); border-radius:6px; font-family:var(--serif); letter-spacing:.5px; font-size:12px; padding:3px 8px; }
.kiel-label::before { border-top-color:var(--navy-800) !important; }
.leaflet-popup-content { font-family:var(--sans); }

/* ===== v23: Orchester Namen+Rang+Marine-Touch, hellere Titelbilder ===== */
.portrait-grid .pmember { text-align:center; }
.portrait-grid .pmember .mname { display:block; margin-top:7px; font-family:var(--serif); font-size:14px; color:var(--navy-800); letter-spacing:.3px; line-height:1.15; }
.pf { position:relative; border-bottom:2px solid var(--gold); }
.pf::after { content:""; position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(180deg, transparent, rgba(11,37,69,.55)); border-radius:0 0 8px 8px; pointer-events:none; }
.pf .rk { position:absolute; top:6px; right:6px; width:25px; height:25px; border-radius:50%; background:var(--gold); color:var(--navy-900); display:flex; align-items:center; justify-content:center; font-size:13px; border:1.5px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.45); z-index:2; }
.pf .rk-spiess { background:var(--navy-800); color:var(--gold-light); border-color:var(--gold); }
/* Titelbilder heller & strahlend */
.page-hero .ph-veil { background:linear-gradient(180deg, rgba(6,23,38,.22), rgba(11,37,69,.42)); }
.page-hero .ph-rot img { filter:brightness(1.12) saturate(1.08); }
.page-hero h1, .page-hero p, .page-hero .breadcrumb { text-shadow:0 2px 14px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.6); }
/* Nav-Spalt: kein heller Hintergrund oben */
html, body { background:var(--navy-900); }

/* ===== v24: Orchester-Porträts ohne navy-Verlauf (weißer Hintergrund) ===== */
.pf::after { display:none; }
.pf { border-bottom:2px solid var(--gold); background:#fff; }
.pf img { background:#fff; }

/* ===== v25: FIX – Body wieder weiß (navy-Body färbte alle .section blau) ===== */
html, body { background:#ffffff; }
.section { background:#fff; }
.hero, .page-hero, .section--navy, #konzerte { background-color:var(--navy-800); }

/* ===== v26: FIX – Konzert-Kartentexte dunkel (waren weiß auf weiß) ===== */
.section--navy .concert h3, #konzerte .concert h3 { color:var(--navy-800); }
.section--navy .concert p, #konzerte .concert p { color:var(--muted); }
.section--navy .concert .meta, #konzerte .concert .meta { color:var(--sea); }

/* ===== v27: Rang-Label statt Stern/Kreuz ===== */
.pmember .rank { display:block; margin-top:3px; font-family:var(--serif); font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--gold); line-height:1.2; }
.pf .rk { display:none; }

/* ===== v28: Nav-Hide-on-Scroll, Konzert-Klick, Mobile-Center, News ===== */
.site-header { transition: transform .35s ease; }
.site-header.hide { transform: translateY(-100%); }
#konzerte .concert { cursor:pointer; }
#cmodal .box { max-width:540px; }
#cmodal .ex { position:static; float:right; }
.news-grid .card .body { padding:22px; }
.news-grid .ndate { font-family:var(--serif); color:var(--gold); letter-spacing:1px; text-transform:uppercase; font-size:13px; }
.news-grid .card h3 { font-size:21px; margin:4px 0 8px; color:var(--navy-800); }
@media (max-width:600px){
  .section-head { text-align:center; }
  .section-head p { margin-left:auto; margin-right:auto; }
  .grid-2 .card .body, .path-card { text-align:center; }
  .info-card { text-align:center; }
  .info-card .info-row { justify-content:flex-start; text-align:left; }
  .info-card h3 { text-align:center; }
}

/* ===== v29: Orchester zentriert, News ===== */
.portrait-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; grid-template-columns:none; }
.portrait-grid .pmember { flex:0 0 122px; }
@media (max-width:560px){ .portrait-grid { gap:12px; } .portrait-grid .pmember { flex:0 0 92px; } }
.orch-sec { text-align:center; }
.news-feature { display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.news-feature .nf-img { min-height:300px; background-size:cover; background-position:center; }
.news-feature .nf-body { padding:34px; }
@media (max-width:760px){ .news-feature{ grid-template-columns:1fr; } .news-feature .nf-img{ min-height:220px; order:-1; } }

/* === Orchester v33: breite Reihen, kleine Register teilen sich eine Reihe, mittig === */
/* Halbkreis-Sitzordnung wie im Blasorchester (Desktop), mobil gestapelt */
#orchester-grid { position:relative; width:100%; max-width:1060px; margin:6px auto 0; min-height:760px; }
.orch-block { } /* per JS positioniert */
.orch-sec { display:block; text-align:center; font-family:var(--serif); text-transform:uppercase; letter-spacing:1px; color:var(--gold); font-size:12px; margin:0 0 5px; white-space:nowrap; }
.og { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.og .pmember { flex:0 0 50px; width:50px; text-align:center; background:#fff; border:1px solid #c9d0da; border-radius:8px; box-shadow:0 1px 4px rgba(11,37,69,.12); padding:4px; transition:box-shadow .2s ease, transform .2s ease; }
.og .pmember:hover { box-shadow:var(--shadow); transform:translateY(-2px); z-index:5; position:relative; }
.og .rank { display:none; }
#dirigent-mark { position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); background:var(--navy-800); color:#fff; font-family:var(--serif); text-transform:uppercase; letter-spacing:2px; font-size:12px; padding:7px 20px; border-radius:8px; border:1px solid var(--gold); }
/* Sitz-Modus: Register an festen Plätzen (Porträts ohne Namen/Überschriften) */
#orchester-grid.seating { min-height:860px; transform:scale(1.24); transform-origin:top center; margin-top:-70px; margin-bottom:-150px; }
.seating .orch-sec { display:none; }
.seating .mname, .seating .rank { display:none !important; }
.seating .og { gap:4px; }
/* Mobil: striktes Block-Raster, gleiche Reihen (kein Orchesteraufbau) */
@media (max-width:820px){
  #orchester-grid { position:static; min-height:0; display:block; max-width:520px; margin:0 auto; }
  .orch-block { position:static!important; left:auto!important; top:auto!important; width:auto!important; transform:none!important; margin:0 0 24px; }
  .orch-sec { display:block; }
  .og { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; justify-content:initial; }
  .og .pmember { flex:none!important; width:auto!important; }
  #dirigent-mark { display:none; }
}
.og .pf { aspect-ratio:3/4; border-radius:7px; overflow:hidden; background:#fff; box-shadow:none; border-bottom:3px solid var(--gold); position:relative; }
.og .pf img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .35s ease; }
.og .pf:hover img { transform:scale(1.06); }
.og .pf-ph { display:flex; align-items:center; justify-content:center; background:#eef1f5; box-shadow:none; border-bottom:1px solid #e0e4ea; }
.og .pf-ph .ph { font-family:var(--serif); font-size:20px; color:#cdd4dd; font-weight:600; }
.og .mname { display:block; margin-top:3px; font-family:var(--serif); font-size:9.5px; color:var(--navy-800); line-height:1.1; letter-spacing:.1px; }

/* Kontakt: beide Kästen gleich groß (Desktop) */
.split--equal { grid-template-columns:1fr 1fr; align-items:stretch; }
.split--equal > .info-card { height:100%; display:flex; flex-direction:column; }
.split--equal > form.info-card .field:last-of-type { margin-bottom:auto; }
/* Kontakt mobil: Kästen untereinander (Desktop bleibt 2×2) */
@media (max-width:900px){
  .split--equal { grid-template-columns:1fr; gap:22px; }
}
/* Bewerbungs-Kacheln auf Smartphones als 2×2, kompakt */
@media (max-width:600px){
  .appl { grid-template-columns:repeat(2,1fr); gap:12px; }
  .appl .card .body { padding:16px 14px; }
  .appl .card .body h3 { font-size:17px; margin:0 0 4px; }
  .appl .card .body p { margin:0; font-size:13px; }
}

/* Galerie v35: Featured-Video + YouTube-Karten */
.yt-feature { max-width:920px; margin:0 auto; box-shadow:var(--shadow); }
.vid-cap { text-align:center; margin:14px 0 0; font-family:var(--serif); color:var(--navy-800); letter-spacing:.3px; font-size:16px; }
.section--alt .vid-cap { color:var(--navy-800); }
.video-card .yt { border-radius:0; box-shadow:none; }
.vc-link { display:block; text-decoration:none; }
.yt-thumb { position:relative; aspect-ratio:16/9; background:#000 center/cover no-repeat; }
.yt-thumb .play { position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%; background:rgba(11,37,69,.82); transition:.2s; }
.yt-thumb .play::after { content:""; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff; }
.vc-link:hover .yt-thumb .play { background:var(--gold); }
.vc-link:hover .yt-thumb .play::after { border-left-color:var(--navy-900); }
.video-grid--3 { grid-template-columns:repeat(3,1fr); }
.video-grid--3 .video-card { align-self:start; }
@media (max-width:820px){ .video-grid--3 { grid-template-columns:1fr; } }

/* === v38: Galerie-Feinschliff, Hörproben, Historie, maritime Bewerbung === */
/* CD-Titel auf dunklem Hintergrund lesbar (weiße Karten) */
.player .track .tmeta b { color:var(--navy-900); }
.player .track .tmeta span { color:var(--muted); }
.player .track .tnum { color:var(--gold); }
/* Medien-Navigation ansprechender */
.jumplinks { gap:14px; margin:0 0 6px; }
.jumplinks a { font-size:15px; padding:11px 26px; border:1.5px solid var(--line); border-radius:40px; background:#fff; font-weight:600; transition:.2s; box-shadow:var(--shadow-sm); }
.jumplinks a:hover { background:var(--gold); color:var(--navy-900); border-color:var(--gold); transform:translateY(-2px); }
.section--navy .jumplinks a { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
/* Foto-Kacheln: neutrale Grundfarbe statt „?“ */
.photo-grid img { background:#e9edf2; }
/* Galerie-Köpfe mittig */
#videos .section-head, #fotos .section-head, #hoerproben .section-head { text-align:center; margin-left:auto; margin-right:auto; }
#videos .section-head p, #fotos .section-head p, #hoerproben .section-head p { margin-left:auto; margin-right:auto; }
/* Historie-Timeline */
.hist { max-width:1000px; margin:0 auto; }
.hist-lead { display:grid; grid-template-columns:1fr 1fr; gap:18px 40px; text-align:left; color:var(--muted); line-height:1.7; }
.hist-lead p { margin:0 0 4px; }
.hist-lead strong { color:var(--navy-800); }
#hist-more { margin-top:18px; }
@media (max-width:680px){ .hist-lead { grid-template-columns:1fr; } }
.timeline { max-width:1000px; margin:34px auto 0; display:grid; gap:0; }
.tl { position:relative; padding:0 0 30px 78px; }
.tl:last-child { padding-bottom:0; }
.tl::before { content:""; position:absolute; left:23px; top:6px; bottom:-6px; width:2px; background:var(--line); }
.tl:last-child::before { display:none; }
.tl-year { position:absolute; left:0; top:0; width:48px; text-align:center; font-family:var(--serif); font-size:17px; color:var(--gold); font-weight:700; }
.tl-year::after { content:""; position:absolute; left:19px; top:24px; width:12px; height:12px; border-radius:50%; background:var(--gold); border:3px solid #fff; box-shadow:0 0 0 2px var(--gold); }
.tl-body h3 { margin:0 0 4px; color:var(--navy-800); font-size:20px; }
.tl-body p { margin:0; color:var(--muted); }
/* Maritime Bewerbungs-Karten */
.appl .card { border-top:3px solid var(--gold); background:linear-gradient(180deg,#fff, #f7f9fc); }
.appl .card .body h3 { color:var(--navy-800); }
.appl .card .body h3 .ico-emoji { font-size:1.15em; margin-right:7px; }
/* Kontakt-Infozeilen etwas luftiger */
.info-card .info-row { margin-bottom:14px; }
/* Mitglieder-Modal: kompakt, Porträt voll sichtbar */
.pmember { cursor:pointer; }
#mmodal .mbox { max-width:540px; position:relative; padding:32px 34px; text-align:left; }
#mmodal .ex { position:absolute; top:10px; right:10px; z-index:3; }
#mmodal .mrow { display:flex; align-items:center; gap:24px; }
#mmodal .mfoto { width:118px; height:118px; flex:0 0 118px; border-radius:50%; background:#0b2545 center top/cover no-repeat; box-shadow:0 4px 14px rgba(6,23,38,.3); }
#mmodal .mfoto.noimg { background:linear-gradient(160deg,var(--navy-700),var(--navy-900)); }
#mmodal .mtext { padding:0; min-width:0; }
#mmodal .mtext h3 { font-size:24px; color:var(--navy-800); margin:0 0 4px; }
@media (max-width:520px){ #mmodal .mrow{ flex-direction:column; text-align:center; gap:16px; } }
#mmodal .erole { color:var(--gold); font-family:var(--serif); letter-spacing:1px; text-transform:uppercase; font-size:13px; margin-bottom:12px; }
.emodal .edesc { color:var(--muted); line-height:1.65; }
/* dezenter Link-Button (z. B. Mehr zur Geschichte) */
.linkbtn { background:none; border:0; padding:6px 4px; color:var(--gold); font-family:var(--serif); text-transform:uppercase; letter-spacing:1.5px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--gold); border-radius:0; }
.linkbtn:hover { color:var(--navy-800); border-bottom-color:var(--navy-800); }

/* === v44: Galerie-Nav breit, kompakte Hörproben, News-Text dunkel, hellere Konzert-Überlagerung === */
.jumplinks--wide { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:none; }
.jumplinks--wide a { padding:14px 10px; }
@media (max-width:560px){ .jumplinks--wide { grid-template-columns:1fr; } }
.hoer-head { text-align:center; margin-bottom:18px; }
.hoer-head h2 { color:#fff; font-size:30px; margin:2px 0 0; }
.player--compact { grid-template-columns:1fr 1fr; gap:10px 20px; max-width:920px; margin:0 auto; }
.player--compact .track { padding:9px 14px; gap:12px; }
.player--compact .track .tnum { font-size:20px; width:24px; }
.player--compact .track .tmeta b { font-size:15px; }
.player--compact .track audio { height:34px; max-width:160px; }
@media (max-width:680px){ .player--compact { grid-template-columns:1fr; } .player--compact .track audio{ max-width:none; } }
/* Weiße Karten auf blauem Grund: Text dunkel (News etc.) */
.section--navy .card { color:var(--navy-800); }
.section--navy .card h3 { color:var(--navy-800); }
.section--navy .card p { color:var(--muted); }
/* Geschichte mobil: nur 1. Absatz (bis „Sitz in Kiel"), Rest hinter Button */
@media (max-width:600px){
  #historie .hist #hist-p2 { display:none; }
  #historie .hist.open #hist-p2 { display:block; }
}
/* Historie: zwei Zeitstrahlen nebeneinander */
.hist-cols { display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:1040px; margin:14px auto 0; text-align:left; }
.hist-cols .timeline { max-width:none; margin:0; }
.hist-colh { text-align:center; font-family:var(--serif); letter-spacing:.5px; color:var(--navy-800); margin:0 0 18px; }
@media (max-width:760px){ .hist-cols { grid-template-columns:1fr; gap:8px; } }
/* Konzerte: maritimes Hintergrundbild, dezenter eingefärbt */
#konzerte .ph-veil { background:linear-gradient(rgba(11,37,69,.4), rgba(11,37,69,.56)); }
#konzerte .ph-rot img { filter:brightness(1.22) saturate(1.08); }
#konzerte .section-head h2, #konzerte .section-head .eyebrow, #konzerte .section-head p { text-shadow:0 2px 12px rgba(0,0,0,.55); }
/* Hörproben: eigener runder Play/Pause-Button statt Standard-Audio */
.player .track audio { display:none; }
.player .pbtn { width:44px; height:44px; border-radius:50%; border:0; background:var(--gold); cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; transition:.18s; box-shadow:0 2px 8px rgba(0,0,0,.28); }
.player .pbtn:hover { transform:scale(1.07); background:var(--gold-light); }
.player .pbtn .ico { display:block; width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; margin-left:3px; }
.player .track.playing .pbtn .ico { border:0; width:14px; height:15px; margin-left:0; background:linear-gradient(90deg,#fff 0 4px,transparent 4px 10px,#fff 10px 14px); box-shadow:none; }
.player--compact .track { align-items:center; }

/* Galerie-Alben Tabs */
.album-tabs { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 30px; }
.album-tab { font-family:var(--serif); text-transform:uppercase; letter-spacing:1px; font-size:14px; color:var(--navy-800); background:#fff; border:1.5px solid var(--line); padding:11px 24px; border-radius:30px; cursor:pointer; transition:.2s; }
.album-tab:hover { border-color:var(--gold); transform:translateY(-2px); }
.album-tab.active { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }

/* Historie als weiße Karte auf blauem Grund (Orchester-Seite) */
.hist-card { background:#fff; border-radius:16px; padding:42px 52px; box-shadow:var(--shadow); max-width:1180px; margin:0 auto; }
.section--navy .hist-card h2 { color:var(--navy-800); }
.section--navy .hist-card .section-head p { color:var(--muted); }
.section--navy .hist-card h3 { color:var(--navy-800); }
@media (max-width:560px){ .hist-card { padding:28px 22px; } }

/* Abschnitt mit rotierendem Hintergrundbild (z. B. News) */
.has-bg { position:relative; overflow:hidden; }
.has-bg > .ph-rot { position:absolute; inset:0; z-index:0; }
.has-bg > .ph-rot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.5s ease; filter:brightness(1.05); }
.has-bg > .ph-rot img.on { opacity:1; }
.has-bg > .ph-veil { position:absolute; inset:0; z-index:1; background:linear-gradient(rgba(11,37,69,.72),rgba(11,37,69,.84)); }
.has-bg > .container { position:relative; z-index:2; }
/* Mehr-Konzerte: sanftes Aufklappen */
#more-konzerte { max-height:0; overflow:hidden; opacity:0; transition:max-height .55s ease, opacity .45s ease; }
#more-konzerte.open { max-height:900px; opacity:1; }

/* Ensembles in Fünferreihen */
.ens-grid { grid-template-columns:repeat(5,1fr); }
@media (max-width:1000px){ .ens-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .ens-grid { grid-template-columns:repeat(2,1fr); } }

/* Karte sanfter (weniger Kontrast/Sättigung) */
.leaflet-tile { filter: saturate(.92) brightness(1.02); }

/* Historie: historisches Bild */
.hist-figure { margin:6px 0 20px; }
.hist-figure img { width:100%; border-radius:12px; box-shadow:var(--shadow-sm); }
.hist-figure figcaption { font-size:12.5px; color:var(--muted); margin-top:7px; text-align:center; }