/* Gemeinsame Handy-Darstellung für die Unterseiten */
#mobile-brand,
#mobile-nav {
  display: none;
}

@media screen and (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background-color: #000099 !important;
    background-image: none !important;
  }

  /* Alte Desktop-Kopfzeilen verschwinden nur auf dem Handy. */
  #nockenleiste,
  #bmwleiste,
  #buttonleiste,
  #deckel_oben_links,
  #deckel_unten_links,
  #deckel_oben_rechts,
  #deckel_unten_rechts {
    display: none !important;
  }

  /* Mikes fertiger Header bleibt unverändert. */
  #mobile-brand {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1200 / 375 !important;
    background: url("../Bilder/Mobile_Webseite.png") center center / 100% 100% no-repeat !important;
    position: relative !important;
    z-index: 40 !important;
  }

  /* Originale Kennzeichen-Navigation. */
  #mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 6px !important;
    width: 100% !important;
    margin: -18px 0 0 !important;
    padding: 4px 8px 6px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    position: relative !important;
    z-index: 50 !important;
  }

  #mobile-nav a {
    height: 30px !important;
    min-width: 0 !important;
    padding: 2px 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 1px solid #003f7d !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    text-decoration: none !important;
  }

  #mobile-nav a:nth-child(1),
  #mobile-nav a:nth-child(2) { background: #fff !important; }
  #mobile-nav a:nth-child(3),
  #mobile-nav a:nth-child(4) { background: #f2c500 !important; }
  #mobile-nav a:nth-child(5),
  #mobile-nav a:nth-child(6) { background: #d71920 !important; }
  #mobile-nav a:nth-child(7),
  #mobile-nav a:nth-child(8) { background: #003f7d !important; }

  #mobile-nav img {
    display: block !important;
    width: auto !important;
    height: 18px !important;
    max-width: 96% !important;
    object-fit: contain !important;
    border: 0 !important;
  }

  /* Alte Kapitel-/Galerie-Navigation links wird mobil zu einer
     waagerechten, scrollbareren Leiste statt einer 150px-Seitenspalte. */
  #Buttons_links {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    z-index: 25 !important;
    background: #000099 !important;
    box-sizing: border-box !important;
  }

  #Buttons_links > table,
  #Buttons_links > table > tbody {
    display: block !important;
    width: max-content !important;
    height: auto !important;
  }

  #Buttons_links > table > tbody > tr {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    vertical-align: middle !important;
  }

  #Buttons_links > table > tbody > tr > td:first-child,
  #Buttons_links > table > tbody > tr > td:last-child {
    display: none !important;
  }

  #Buttons_links > table > tbody > tr > td:nth-child(2) {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 2px !important;
  }

  /* Normaler Seiteninhalt folgt nun im Dokumentfluss statt in einem
     festen Desktop-Fenster. */
  #contentScroller {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 6px 8px 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  #contentScroller table {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #contentScroller td,
  #contentScroller th {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #contentScroller img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* News-Seite besitzt statt contentScroller eigene alte Ebenen. */
  #Titel_1,
  #Titel_Text,
  #Window {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #Titel_1 table,
  #Window table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #Window img,
  #Titel_1 img {
    max-width: 100% !important;
    height: auto !important;
  }
}



/* --------------------------------------------------------------
   FIX Historie: alte Desktop-Tabellen mobil untereinander stapeln.
   So werden Texte und Bilder nicht rechts abgeschnitten.
   -------------------------------------------------------------- */
@media screen and (max-width: 700px) {
  body.mobil-historie #contentScroller {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.mobil-historie #contentScroller table,
  body.mobil-historie #contentScroller tbody,
  body.mobil-historie #contentScroller tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  body.mobil-historie #contentScroller td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  body.mobil-historie #contentScroller td[width="25"],
  body.mobil-historie #contentScroller td[width="90"] {
    display: none !important;
  }

  body.mobil-historie #contentScroller img {
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 8px auto !important;
  }

  body.mobil-historie #contentScroller .kapitel1,
  body.mobil-historie #contentScroller .vorwort {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.mobil-historie #contentScroller div[align="justify"],
  body.mobil-historie #contentScroller p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* ------------------------------------------------------------
     FIX Kontakt: Foto + Adressblock mobil untereinander darstellen.
     ------------------------------------------------------------ */
  body.mobil-kontakt #contentScroller {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.mobil-kontakt #contentScroller table,
  body.mobil-kontakt #contentScroller tbody,
  body.mobil-kontakt #contentScroller tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  body.mobil-kontakt #contentScroller td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  body.mobil-kontakt #contentScroller img {
    display: block !important;
    max-width: min(270px, 88vw) !important;
    width: auto !important;
    height: auto !important;
    margin: 10px auto !important;
  }

  body.mobil-kontakt #contentScroller .Adressblock,
  body.mobil-kontakt #contentScroller .email,
  body.mobil-kontakt #contentScroller .kontakt {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body.mobil-kontakt #contentScroller .Adressblock,
  body.mobil-kontakt #contentScroller .email {
    text-align: center !important;
  }
}


/* ==============================================================
   MORGEN-FIX: Historie / Links / Galerie
   ============================================================== */
#mobile-links-grid,
#mobile-gallery-subnav,
.mobile-thumb-grid {
  display: none;
}

@media screen and (max-width: 700px) {

  /* HISTORIE: alle 7 Kapitelknöpfe sind ohne Seitwärtsscrollen sichtbar. */
  body.mobil-historie #Buttons_links {
    overflow-x: hidden !important;
    white-space: normal !important;
    padding: 7px 6px !important;
  }

  body.mobil-historie #Buttons_links > table,
  body.mobil-historie #Buttons_links > table > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body.mobil-historie #Buttons_links > table > tbody > tr {
    display: inline-block !important;
    width: 64px !important;
    margin: 3px 2px !important;
    vertical-align: top !important;
  }

  body.mobil-historie #Buttons_links > table > tbody > tr > td:nth-child(2) {
    width: 60px !important;
    padding: 0 !important;
  }

  body.mobil-historie #Buttons_links img {
    width: 60px !important;
    height: 40px !important;
    max-width: none !important;
  }

  /* LINKS: Desktop-Mosaik mobil ausblenden; farbige Endgrafiken
     ohne Mouse-over in einem sauberen Zweier-Raster zeigen. */
  body.mobil-links #contentScroller {
    display: none !important;
  }

  body.mobil-links #mobile-links-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 10px 28px !important;
    box-sizing: border-box !important;
  }

  body.mobil-links .mobile-link-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.mobil-links .mobile-link-card img {
    display: block !important;
    width: 100% !important;
    max-width: 190px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  body.mobil-links .mobile-link-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    width: calc((100% - 10px) / 2) !important;
    justify-self: center !important;
  }

  /* GALERIE: die vier Hauptknöpfe groß und immer 2 nebeneinander. */
  body.mobil-galerie #mobile-gallery-subnav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 10px !important;
    width: 100% !important;
    padding: 9px 14px 10px !important;
    box-sizing: border-box !important;
    background: #000099 !important;
  }

  body.mobil-galerie #mobile-gallery-subnav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  body.mobil-galerie #mobile-gallery-subnav img {
    display: block !important;
    width: 145px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Die kleine alte 9-spaltige Galerie-Hauptnavigation mobil nicht doppelt zeigen. */
  body.mobil-galerie #contentScroller > table > tbody > tr:nth-child(1),
  body.mobil-galerie #contentScroller > table > tbody > tr:nth-child(2) {
    display: none !important;
  }

  /* BMW-Galerie / Video-Show: eigene große Touch-Vorschauen. */
  body.mobil-galerie .mobile-thumb-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 6px 10px 24px !important;
    box-sizing: border-box !important;
  }

  body.mobil-galerie .mobile-thumb-grid > a,
  body.mobil-galerie .mobile-thumb-grid > .mobile-thumb-static {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  body.mobil-galerie .mobile-thumb-grid img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 400px !important;
  }

  body.mobil-galerie .mobile-thumb-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    width: calc((100% - 10px) / 2) !important;
    justify-self: center !important;
  }

  /* Auf genau diesen beiden Übersichtsseiten den alten Mini-Inhalt ausblenden,
     damit nichts doppelt erscheint. */
  body.mobil-galerie #mobile-gallery-thumbs ~ #contentScroller,
  body.mobil-galerie #mobile-video-thumbs ~ #contentScroller {
    display: none !important;
  }
}


/* Fester Nach-oben-Knopf: mobil unten rechts, Desktop unsichtbar */
#mobile-top-button {
  display: none;
}

@media screen and (max-width: 700px) {
  html {
    scroll-behavior: smooth;
  }

  #mobile-top-button {
    display: flex !important;
    position: fixed !important;
    right: 12px !important;
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    background: rgba(0, 51, 128, 0.88) !important;
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 23px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
  }
}


/* Rodenstock-Nach-oben-Pfeil: weiß / gelb / rot auf Blau */
@media screen and (max-width: 700px) {
  #mobile-top-button {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 3px 0 4px !important;
    background: #003f7d !important;
    border: 2px solid #ffffff !important;
  }

  #mobile-top-button .top-arrow {
    display: block !important;
    height: 10px !important;
    line-height: 10px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin: -1px 0 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.45) !important;
  }

  #mobile-top-button .top-arrow-white  { color: #ffffff !important; }
  #mobile-top-button .top-arrow-yellow { color: #ffd200 !important; }
  #mobile-top-button .top-arrow-red    { color: #e31b23 !important; }
}


/* ==================================================================
   MOBILE v04
   Neu aufgebaut auf der letzten Desktop-sauberen Version.
   ================================================================== */
@media screen and (max-width: 700px) {

  /* HISTORIE: 4 oben + 3 darunter, zweite Reihe mittig. */
  body.mobil-historie #Buttons_links {
    overflow: visible !important;
    white-space: normal !important;
    padding: 7px 6px 9px !important;
  }

  body.mobil-historie #Buttons_links > table,
  body.mobil-historie #Buttons_links > table > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mobil-historie #Buttons_links > table > tbody {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 6px 2px !important;
  }

  body.mobil-historie #Buttons_links > table > tbody > tr {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    grid-column: span 2 !important;
  }

  body.mobil-historie #Buttons_links > table > tbody > tr:nth-child(5) {
    grid-column: 2 / span 2 !important;
  }
  body.mobil-historie #Buttons_links > table > tbody > tr:nth-child(6) {
    grid-column: 4 / span 2 !important;
  }
  body.mobil-historie #Buttons_links > table > tbody > tr:nth-child(7) {
    grid-column: 6 / span 2 !important;
  }

  body.mobil-historie #Buttons_links > table > tbody > tr > td:first-child,
  body.mobil-historie #Buttons_links > table > tbody > tr > td:last-child {
    display: none !important;
  }

  body.mobil-historie #Buttons_links > table > tbody > tr > td:nth-child(2) {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* GALERIE: die alte lokale Navigation bleibt erhalten und steht oben.
     Die vier großen Hauptbuttons stehen DANACH. */
  body.mobil-galerie #Buttons_links {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 10px 5px !important;
    overflow: visible !important;
    white-space: normal !important;
    background: #000099 !important;
    box-sizing: border-box !important;
  }

  /* "Mein 2002": Jahreszahlen kompakt wie bisher. */
  body.mobil-galerie #Buttons_links > table {
    margin: 0 auto !important;
  }

  body.mobil-galerie #Buttons_links img {
    max-width: 82px !important;
    height: auto !important;
  }

  /* BMW-Galerie: E10 / E21 / E9 / E26 / E24 / Mix
     exakt 3 Spalten x 2 Reihen und NICHT größer als die Jahresknöpfe. */
  body.mobil-galerie #Buttons_links > table > tbody {
    text-align: center !important;
  }

  body.mobil-galerie #Buttons_links > table > tbody > tr {
    display: inline-block !important;
    width: 31% !important;
    margin: 3px 0 !important;
    vertical-align: middle !important;
  }

  body.mobil-galerie #Buttons_links > table > tbody > tr > td:first-child,
  body.mobil-galerie #Buttons_links > table > tbody > tr > td:last-child {
    display: none !important;
  }

  body.mobil-galerie #Buttons_links > table > tbody > tr > td:nth-child(2) {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Vier Hauptbuttons nur einmal und unter der lokalen Navigation. */
  body.mobil-galerie #mobile-gallery-subnav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    width: 100% !important;
    padding: 8px 14px 12px !important;
    box-sizing: border-box !important;
    background: #000099 !important;
  }

  body.mobil-galerie #mobile-gallery-subnav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.mobil-galerie #mobile-gallery-subnav img {
    width: 150px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Die kleine originale Vierer-Navigation im Content mobil ausblenden,
     damit die großen Buttons NICHT doppelt erscheinen. */
  body.mobil-galerie #contentScroller > table > tbody > tr:nth-child(1),
  body.mobil-galerie #contentScroller > table > tbody > tr:nth-child(2),
  body.mobil-galerie #contentScroller > table > tr:nth-child(1),
  body.mobil-galerie #contentScroller > table > tr:nth-child(2) {
    display: none !important;
  }

  /* BMW-Galerie-Übersicht: drei Bilder 2 + 1 mittig, Original-Desktop unberührt. */
  body.mobil-galerie #mobile-gallery-thumbs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 6px 10px 24px !important;
    box-sizing: border-box !important;
    background: #000099 !important;
  }

  body.mobil-galerie #mobile-gallery-thumbs > a {
    display: flex !important;
    justify-content: center !important;
  }

  body.mobil-galerie #mobile-gallery-thumbs img {
    width: 100% !important;
    max-width: 390px !important;
    height: auto !important;
  }

  body.mobil-galerie #mobile-gallery-thumbs > a:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    width: calc((100% - 10px) / 2) !important;
    justify-self: center !important;
  }

  /* Video-Show: die 7 Auswahlbilder deutlich größer – eines pro Zeile. */
  body.mobil-galerie #mobile-video-thumbs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 6px 14px 26px !important;
    box-sizing: border-box !important;
    background: #000099 !important;
  }

  body.mobil-galerie #mobile-video-thumbs > a,
  body.mobil-galerie #mobile-video-thumbs > .mobile-thumb-static {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  body.mobil-galerie #mobile-video-thumbs img {
    width: min(400px, 94vw) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Auf den zwei mobilen Übersichtsseiten den alten kleinen Content nicht doppeln. */
  body.mobil-galerie #mobile-gallery-thumbs ~ #contentScroller,
  body.mobil-galerie #mobile-video-thumbs ~ #contentScroller {
    display: none !important;
  }

  /* Nach oben: kleiner, weiß, Gelb-Rot-Blau. */
  #mobile-top-button {
    width: 36px !important;
    height: 36px !important;
    right: 10px !important;
    bottom: 12px !important;
    padding: 2px 0 3px !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    background: #ffffff !important;
    border: 2px solid #003f7d !important;
    border-radius: 50% !important;
  }

  #mobile-top-button .top-chevron {
    display: block !important;
    height: 8px !important;
    line-height: 8px !important;
    margin: -1px 0 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-shadow: none !important;
  }

  #mobile-top-button .top-chevron-yellow { color: #ffd200 !important; }
  #mobile-top-button .top-chevron-red    { color: #e31b23 !important; }
  #mobile-top-button .top-chevron-blue   { color: #0055a4 !important; }
}


/* ==================================================================
   MOBILE v05 – Mein 2002: Jahresbuttons 1987–2002 wieder sauber
   ================================================================== */
@media screen and (max-width: 700px) {

  /* Nur die Seiten 03_galerie02 bis 03_galerie07 tragen die bestehende
     Jahresnavigation. Sie bekommt wieder 3 Spalten x 2 Reihen. */
  body.mobil-galerie.mobil-jahre #Buttons_links > table,
  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody > tr {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody > tr > td:first-child,
  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody > tr > td:last-child {
    display: none !important;
  }

  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody > tr > td:nth-child(2) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body.mobil-galerie.mobil-jahre #Buttons_links img {
    display: block !important;
    width: 82px !important;
    max-width: 100% !important;
    height: auto !important;
  }
}


/* ==================================================================
   MOBILE v06 – Jahresnavigation 1987–2002 sauber 3 + 3
   Der erste Tabellen-TR ist im Original nur eine Leerzeile.
   Er darf im mobilen Grid keinen Platz belegen.
   ================================================================== */
@media screen and (max-width: 700px) {

  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody > tr:first-child {
    display: none !important;
  }

  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px 6px !important;
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody > tr:not(:first-child) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.mobil-galerie.mobil-jahre #Buttons_links > table > tbody > tr:not(:first-child) > td:nth-child(2) {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}


/* ==================================================================
   MOBILE v07 – BMW-Galerie aufgeräumt
   ================================================================== */
#mobile-bmw-modelnav,
#mobile-bmw-categorynav {
  display: none;
}

@media screen and (max-width: 700px) {

  /* Die alte zweispaltige Dreamweaver-Seitenleiste wird mobil komplett ersetzt. */
  body.mobil-galerie #Buttons_links {
    display: none !important;
  }

  /* E10 / E21 / E9 / E26 / E24 / Mix: exakt 3 + 3, gleiche Größe. */
  body.mobil-galerie #mobile-bmw-modelnav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
    width: 100% !important;
    padding: 10px 14px 8px !important;
    box-sizing: border-box !important;
    background: #000099 !important;
  }

  body.mobil-galerie #mobile-bmw-modelnav a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  body.mobil-galerie #mobile-bmw-modelnav img {
    display: block !important;
    width: 82px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Unterkategorien wie Berg-Cup / DRM / STT ebenfalls sauber in einer Reihe. */
  body.mobil-galerie #mobile-bmw-categorynav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
    width: 100% !important;
    padding: 2px 14px 8px !important;
    box-sizing: border-box !important;
    background: #000099 !important;
  }

  body.mobil-galerie #mobile-bmw-categorynav a,
  body.mobil-galerie #mobile-bmw-categorynav span {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.mobil-galerie #mobile-bmw-categorynav img {
    display: block !important;
    width: 82px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Reihenfolge auf der BMW-Galerie-Hauptseite:
     Modelle -> 4 Galerie-Hauptbuttons -> 3 große Bilder (2 + 1 mittig). */
  body.mobil-galerie #mobile-gallery-thumbs {
    margin-top: 0 !important;
  }
}


/* ==================================================================
   MOBILE v08 – Jahresbuttons 1987–2002 wieder sichtbar
   v07 hat #Buttons_links zu pauschal ausgeblendet.
   Auf den Mein-2002-Jahresseiten wird es wieder eingeblendet.
   ================================================================== */
@media screen and (max-width: 700px) {
  body.mobil-galerie.mobil-jahre #Buttons_links {
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 10px 5px !important;
    overflow: visible !important;
    white-space: normal !important;
    background: #000099 !important;
    box-sizing: border-box !important;
  }
}


/* ==================================================================
   MOBILE v12 – Linkseite nach Form/Größe geordnet
   ================================================================== */
@media screen and (max-width:700px) {
  body.mobil-links #mobile-links-grid {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px 10px !important;
    padding:14px 12px 28px !important;
    align-items:center !important;
  }

  body.mobil-links #mobile-links-grid .mobile-link-card {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  /* Breite Logos bleiben eher flach. */
  body.mobil-links #mobile-links-grid .link-wide img {
    width:100% !important;
    max-width:190px !important;
    height:auto !important;
  }

  /* Runde / hochformatige Logos: gleiche optische Fläche. */
  body.mobil-links #mobile-links-grid .link-round img,
  body.mobil-links #mobile-links-grid .link-portrait img {
    width:auto !important;
    max-width:145px !important;
    max-height:170px !important;
    height:auto !important;
  }

  /* Kronast + Niederbayern: passend breit nebeneinander. */
  body.mobil-links #mobile-links-grid .link-landscape img {
    width:100% !important;
    max-width:190px !important;
    height:auto !important;
  }

  /* STT / Kübler / Berg-Cup: gleichmäßige breite Karten. */
  body.mobil-links #mobile-links-grid .link-medium img {
    width:100% !important;
    max-width:190px !important;
    height:auto !important;
  }

  /* Bei 19 Einträgen sitzt der letzte (Berg-Cup) mittig. */
  body.mobil-links #mobile-links-grid .mobile-link-card:last-child {
    grid-column:1 / -1 !important;
    width:calc((100% - 10px) / 2) !important;
    justify-self:center !important;
  }
}