/* SportPort — Ergaenzungen des Nachbaus.
   Absicht: style.css bleibt byte-identisch zur Alt-Seite. Alles, was der
   Nachbau haendisch aendert, steht nur hier — so bleibt jederzeit erkennbar,
   was von der Quelle stammt und was von uns. Wird als LETZTES eingebunden. */

/* --- Karte: statisches Bild statt Google Maps ------------------------------
   #map behaelt seine Groesse aus style.css (absolut, fuellt die Spalte).
   Frueher zeichnete Google hier eine interaktive Karte; jetzt liegt ein
   Bild darunter, das Bild verlinkt zu OpenStreetMap. */
#map {
  display: block;
  background-image: url("../images/karte-piependreiherweg-4.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
#map:focus {
  outline: 2px solid #363636;
  outline-offset: -4px;
}

/* nur fuer Screenreader — der Link braucht einen lesbaren Namen */
#map .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- Kontaktdaten statt Kontaktformular -----------------------------------
   Uebernimmt die rechtsbuendige Ausrichtung, die #contact-form hatte. */
#kontaktdaten {
  text-align: right;
}
#kontaktdaten address {
  margin-bottom: 25px;
  font-style: normal;
  line-height: 1.9;
}
#kontaktdaten .kontakt-liste {
  margin: 0 0 25px;
}
#kontaktdaten .kontakt-liste dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  color: #8a8a8a;
  margin-top: 14px;
}
#kontaktdaten .kontakt-liste dd {
  font-size: 18px;
  margin: 0;
}
#kontaktdaten .kontakt-liste dd a,
#kontaktdaten address a {
  color: #363636;
  border-bottom: 1px solid rgba(54, 54, 54, .35);
}
#kontaktdaten .kontakt-liste dd a:hover,
#kontaktdaten .kontakt-liste dd a:focus {
  border-bottom-color: #363636;
  text-decoration: none;
}
#kontaktdaten .kontakt-hinweis {
  margin-bottom: 25px;
}
#kontaktdaten .btn {
  font-size: 11px;
}

@media (max-width: 767px) {
  /* gleiche Ausnahme, die style.css fuer das Formular vorsah */
  #kontaktdaten {
    text-align: left;
  }

  /* --- Karte auf dem Handy sichtbar machen -------------------------------
     ABWEICHUNG VON 1:1, bewusst und gemeldet.
     .img-side ist absolut positioniert und traegt nur col-md-/col-sm-Klassen.
     Unterhalb von 768px greift keine davon, die Box faellt auf Breite 0
     zusammen — und mit ihr die Karte. Auf der Alt-Seite fiel das nicht auf,
     weil dort ohnehin eine Google-Karte ohne Schluessel stand, die nirgends
     lud. Bliebe es so, gaebe es die bestellte statische Karte auf Telefonen
     nicht, also auf der Mehrheit der Aufrufe.
     Rueckbau: diesen Block loeschen — der Rest bleibt unberuehrt. */
  #contact .img-side {
    position: relative;
    width: 100%;
    height: auto;
  }
  #map {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%;
    min-height: 240px;
  }
  .karten-nachweis {
    font-size: 10px;
  }
}

/* --- Namensnennung der Karte ----------------------------------------------
   Die ODbL verlangt die Nennung der OpenStreetMap-Mitwirkenden. Sie ist
   zusaetzlich ins Bild eingebrannt — aber #map skaliert mit "cover" und
   schneidet je nach Fenstergroesse Raender ab. Deshalb steht sie hier noch
   einmal als Text: der ist nicht wegzuschneiden. */
.karten-nachweis {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 101;
  margin: 0;
  padding: 3px 9px;
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  line-height: 1.5;
  color: #3c3c3c;
}
.karten-nachweis a {
  color: #3c3c3c;
  text-decoration: underline;
}