/* ===========================================================
   Mobil-Optimierung (28.09.2026) — wird als LETZTE Datei geladen.
   Rücksprung: Zeile mit mobile.css in index.html entfernen
   (oder Backup aus ../Backups Homepage V2/_backup_vor_mobil_2026-09-28/ zurückkopieren).
   =========================================================== */

/* ── Hero: echte Bildschirmhöhe am Handy (100vh springt beim Ein-/
   Ausblenden der Adressleiste; svh = kleinste sichtbare Höhe) ── */
@supports (height: 100svh){
  .hero{ min-height: 100svh; }
}

/* ── Hamburger-Menü ── */
@media (max-width: 720px){
  .header-inner{ padding-top: .6rem; padding-bottom: .6rem; }
  .brand-logo{ height: 40px; }

  /* größere Tippfläche, Symbol wird beim Öffnen zum X */
  .nav-toggle{
    width: 44px; height: 44px;
    padding: 10px 8px;
    margin-right: -8px;
  }
  .nav-toggle span{ transform-origin: center; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* Menü: große Zeilen mit Trennlinien, scrollbar falls der Bildschirm
     sehr niedrig ist (Querformat) */
  .main-nav ul{
    gap: 0;
    padding: .25rem var(--pad) .75rem;
    box-shadow: 0 18px 30px -18px rgba(22,19,18,.35);
    max-height: calc(100vh - 70px);
    max-height: calc(100svh - 70px);
    overflow-y: auto;
  }
  .main-nav li + li{ border-top: 1px solid rgba(22,19,18,.08); }
  .main-nav a{
    display: block;
    padding: .9rem 0;
    font-size: 1rem;
    letter-spacing: .06em;
  }
  .main-nav a::after{ display: none; }
  .main-nav a:active{ color: var(--brass); }
  [data-theme="dark"] .main-nav li + li{ border-top-color: rgba(var(--dark-white-rgb), .08); }
}

/* ── Abschnitte etwas kompakter ── */
@media (max-width: 600px){
  .section-head{ margin-bottom: 1.75rem; }
  .section-intro{ font-size: 1rem; }
}

/* ── Neuigkeiten: alle 4 Reiter passen nebeneinander, Pfeile weg ── */
@media (max-width: 600px){
  .musiker-tabs-wrap[data-autorotate]{ margin-bottom: 1.5rem; }
  .musiker-tabs-wrap[data-autorotate] .mtab-arrow{ display: none; }
  .musiker-tabs-wrap[data-autorotate] .musiker-tabs{
    -webkit-mask-image: none;
            mask-image: none;
    justify-content: safe center;
  }
  .musiker-tabs-wrap[data-autorotate] .musiker-tab{
    padding: .65rem .6rem;
    font-size: .78rem;
    letter-spacing: .03em;
  }
  /* Einleitungstext je Reiter kürzer halten */
  .neuigkeiten-panels > .musiker-register > .section-intro{ margin-top: 0; }
}

/* ── Scroll-Boxen (Termine/Facebook/Instagram) am Touchscreen:
   am Ende der Box scrollt die Seite weiter (sonst "hängt" der Finger
   in der Box fest) ── */
@media (hover: none), (max-width: 720px){
  .news-scroll{
    overscroll-behavior: auto;
    padding-right: .75rem;
  }
}

/* ── Termine: kleineres Datumsfeld, weniger Innenabstand ── */
@media (max-width: 560px){
  .termine-list .termin-card{ padding: .85rem .9rem; column-gap: .9rem; }
  .termine-list .termin-date{ min-width: 3.6rem; min-height: 3.6rem; padding: .4rem .5rem; }
  .termine-list .termin-date .d{ font-size: 1.2rem; }
}

/* ── Facebook/Instagram-Kacheln: volle Breite, nichts bricht um ── */
@media (max-width: 600px){
  .fb-feed{ grid-template-columns: 1fr; gap: 1rem; }
  .fb-post-link{ white-space: nowrap; }
}

/* ── Kapelle: die drei Kennzahlen in einer Reihe ── */
@media (max-width: 600px){
  .ueber-stats-row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .ueber-stat-num{ font-size: 1.7rem; }
  .ueber-stat-label{ font-size: .72rem; }
  .ueber-img-frame{ padding: 0 0 .8rem .8rem; }
  .ueber-img-frame::before{ top: .8rem; right: .8rem; }
}

/* ── Zitat-Band ── */
@media (max-width: 600px){
  .quote-band{ min-height: 200px; padding: 2.5rem var(--pad); }
}

/* ── Hell/Dunkel-Knopf kleiner und weiter in der Ecke ── */
@media (max-width: 600px){
  #theme-toggle{
    width: 40px; height: 40px;
    right: .9rem;
    bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Sehr schmale Handys (≤ 360 px) ── */
@media (max-width: 360px){
  .brand-text em{ font-size: .68rem; letter-spacing: .08em; }
  .musiker-tabs-wrap[data-autorotate] .musiker-tab{ padding: .6rem .45rem; font-size: .72rem; }
  .strip-label{ font-size: .74rem; }
}

/* ── Chronik (30.09.2026): nur Jahr + Titel, Klick klappt Text und Fotos auf ── */
.timeline__toggle{
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.timeline__toggle > span:first-child{ flex: 0 1 auto; }
.timeline__toggle:hover > span:first-child{ color: var(--brass); }
.timeline__foto-hint{ display: inline-flex; color: var(--brass); opacity: .7; }
.timeline__foto-hint svg{ width: 15px; height: 15px; }
.timeline__chev{
  flex: none;
  width: .5rem; height: .5rem;
  margin-left: .15rem;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.timeline__item--open .timeline__chev{ transform: translateY(2px) rotate(-135deg); }
.timeline__body{ padding-top: .45rem; }
.timeline__body p{ margin: 0 0 .6em; }
.timeline__body p:last-child{ margin-bottom: 0; }
.timeline__fotos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
  margin-top: .75rem;
}
.timeline__fotos figure{ margin: 0; }
.timeline__fotos img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  cursor: zoom-in;
  background: var(--paper-dim);
}
.timeline__fotos figcaption{
  font-size: .78rem;
  line-height: 1.35;
  color: var(--ink-soft);
  margin-top: .25rem;
}
[data-theme="dark"] .timeline__toggle{ color: var(--dark-text); }
[data-theme="dark"] .timeline__toggle:hover > span:first-child{ color: var(--dark-gold); }
[data-theme="dark"] .timeline__chev{ border-color: var(--dark-gold); }
[data-theme="dark"] .timeline__foto-hint{ color: var(--dark-gold); }
[data-theme="dark"] .timeline__fotos figcaption{ color: rgba(var(--dark-text-rgb), .6); }

/* ── Chronik: Lichtstrahl entlang des Zeitstrahls (02.10.2026, Mittelweg 03.10.) ──
   script.js setzt Höhe/Position von .timeline__beam beim Scrollen und
   markiert erreichte Jahre mit .timeline__item--lit.
   Stärkere/schwächere Fassung: Backups Homepage V2/_backup_vor_lichtstrahl_2026-10-02/ */
.timeline__items{ position: relative; }
.timeline__beam{
  position: absolute;
  left: 0;
  width: 2.5px;
  height: 0;
  transform: translateX(-50%);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .4s ease;
  background: linear-gradient(to bottom,
    rgba(140,47,57,0) 0%,
    rgba(140,47,57,.5) 28%,
    #c1636c 80%,
    #f0d48a 100%);
  box-shadow: 0 0 8px 1px rgba(232,200,106,.45), 0 0 16px 2px rgba(193,99,108,.15);
}
.timeline__beam--on{ opacity: 1; }
/* weicher Schein am Ende des Strahls (ohne Pulsieren) */
.timeline__beam::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 11px; height: 11px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,220,.85) 0%, rgba(243,217,138,.6) 35%, rgba(232,200,106,0) 72%);
  box-shadow: 0 0 12px 3px rgba(243,217,138,.35);
}
/* erreichte Jahrespunkte leuchten */
.timeline__item:before{
  transition: transform .35s cubic-bezier(.65,0,.35,1), box-shadow .5s ease, background-color .5s ease;
}
.timeline__item--lit:before{
  background-color: #b04a55;
  box-shadow: 0 0 0 2px rgba(243,217,138,.35), 0 0 11px 3px rgba(232,200,106,.6);
}
.timeline__item--lit .timeline__item-time{
  text-shadow: 0 0 8px rgba(232,200,106,.35);
}
[data-theme="dark"] .timeline__beam{
  background: linear-gradient(to bottom,
    rgba(200,169,110,0) 0%,
    rgba(200,169,110,.55) 30%,
    #e8c86a 85%,
    #fbe8b0 100%);
  box-shadow: 0 0 8px 1px rgba(232,200,106,.4);
}
[data-theme="dark"] .timeline__item--lit:before{
  background-color: #ecd08a;
  box-shadow: 0 0 0 2px rgba(243,217,138,.22), 0 0 12px 3px rgba(243,217,138,.6);
}

/* ── Kennzahlen-Leiste: Jahre der Auszeichnungen (03.10.2026) ── */
.strip-years{
  display: block;
  margin-top: .3rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--brass);
  opacity: .85;
}
[data-theme="dark"] .strip-years{ color: var(--dark-gold); }

/* Kennzahlen-Leiste am Computer: 4 Kennzahlen nebeneinander, dazwischen
   feine Trennlinien (vorher belegten die Trenner eigene Rasterspalten,
   dadurch standen die Zahlen 2 × 2 und rechts blieb Platz frei) */
@media (min-width: 701px){
  .strip-inner{
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    align-items: start;          /* Zahlen auf gleicher Höhe */
  }
  .strip-sep{
    align-self: center;
    width: 1px;
    height: 3.5rem;
    background: currentColor;
    opacity: .15;
  }
}

/* ── Verein-Karte Blaskapelle EBB: Facebook-Button wie bei Kontakt
   (.social-link) – führt zur Facebook-Seite der EBB (05.10.2026) ── */
.verein-card--ebb .ebb-button{ margin-top: 1rem; color: var(--ink); }
.verein-card--ebb .ebb-button:hover,
.verein-card--ebb .ebb-button:focus-visible{ background: var(--ink); color: var(--paper); }
[data-theme="dark"] .verein-card--ebb .ebb-button{ color: rgba(var(--dark-text-rgb), .65); border-color: rgba(var(--dark-white-rgb), .15); }
[data-theme="dark"] .verein-card--ebb .ebb-button:hover{ color: var(--dark-gold); border-color: var(--dark-gold); background: transparent; }

/* ── Notenlinien-Balken ganz oben im hellen Design: gleiche Machart wie im
   dunklen Design (Linienstärke/Deckkraft unverändert), nur umgekehrte
   Farben – heller Grund, Linien in Bordeaux (05.10.2026) ── */
:root:not([data-theme="dark"]) .staff-line{ background: #f8f3ea; }
:root:not([data-theme="dark"]) .staff-line line{ stroke: var(--brass); }


/* ── RR-Logo im Fußbereich um 30 % größer (08.10.2026: 22 px → 29 px) ── */
.footer-rr-logo{ height: 29px; }