/* MABEDA.SOLAR, Anpassungen am Greenaro-Klon.
   Bewusst klein gehalten. Struktur, Breiten und Bewegung der Vorlage bleiben
   unberuehrt; hier steht nur, was ohne Alternative ist. */

/* ---------------------------------------------------------------- Logo
   Die Wortmarke ist 4,4:1 breit, das Vorlagen-SVG war deutlich kompakter. */
.rts__main__header .logo img {
  width: 230px;
  height: auto;
  display: block;
}

.rts__offcanvas__header .logo img {
  width: 190px;
  height: auto;
}

/* Die Wortmarke traegt schwarze Umrisse und den Claim in Schwarz, auf Nacht
   verschwindet beides. Bis eine helle Logo-Variante von der Kundin vorliegt,
   steht sie im Fussbereich auf einer hellen Flaeche. */
.rts__footer__area__two .footer-brand .logo {
  background: var(--rts-white);
  border-radius: 12px;
  padding: 14px 18px;
}

.rts__footer__area__two .footer-brand .logo img {
  width: 240px;
  height: auto;
  display: block;
}

/* ------------------------------------------------------ Ankersprünge
   Der Kopf bleibt beim Scrollen stehen und wuerde sonst die ersten 74 Pixel
   jeder Sektion verdecken. */
#ueber-uns,
#leistungen,
#anlagen,
#gebiete,
#fragen,
#kontakt {
  scroll-margin-top: 90px;
}

/* Auf dem Handy verbirgt die Vorlage die obere Leiste und den Telefon-Knopf
   im Kopf. Ohne Ersatz waere die Nummer dort nirgends erreichbar. */
.rts__offcanvas__footer .offcanvas-tel {
  display: inline-flex;
  margin-bottom: 24px;
}

/* ------------------------------------------------------- Deutsche Texte
   capitalize macht aus "Ueber uns" ein "Ueber Uns". */
.rts__main__menu nav ul li > a,
.rts__offcanvas__mobile__menu nav ul li > a,
.rts-about-wrapper .about-bottom-wrapper .about-counter .counter-item .desc {
  text-transform: none;
}

/* ---------------------------------------------------------------- Hero
   Die Vorlage lieferte ein Platzhalterbild. Auf der echten Drohnenaufnahme
   steht die weisse Schrift teils auf hellem Blech, deshalb ein Verlauf,
   der nur die Textseite abdunkelt. */
.rts-banner-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: linear-gradient(100deg, rgba(20, 20, 58, 0.82) 0%, rgba(20, 20, 58, 0.66) 42%, rgba(20, 20, 58, 0.22) 68%, rgba(20, 20, 58, 0) 86%);
  z-index: 0;
  pointer-events: none;
}

.rts-banner-wrapper .banner-content {
  position: relative;
  z-index: 1;
}

.rts-banner-wrapper .banner-card-wrapper {
  z-index: 1;
}

/* Statt der Sternebewertung steht in der Karte die Telefonnummer. */
.rts-banner-wrapper .banner-card-wrapper .inner-card .card-content .banner-review .stars .tel {
  color: var(--heading-color);
  font-size: 18px;
  font-weight: var(--f-bold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.rts-banner-wrapper .banner-card-wrapper .inner-card .card-content .banner-review .stars .tel:hover {
  color: var(--heading-color-4);
}

/* ------------------------------------------------------------ Galerie
   Die Galeriebilder tragen width und height, damit beim Nachladen nichts
   springt. Ohne height:auto behaelt das Bild die Attributhoehe von 675 und
   wird gestaucht; auf dem Handy war der Streifen dadurch so hoch, dass die
   Bildunterschrift aus dem Bild fiel. */
.project__wrapper__2 .project__slide__item .img img {
  height: auto;
}

/* ------------------------------------------------------------- Bento
   Auch hier rechnete die Vorlage mit dunklen Platzhaltern. Die Drohnen-
   aufnahmen sind hell, die weisse Schrift braucht darunter einen Verlauf.
   ::before, damit die Beschriftung darueber liegen bleibt. */
.choose__items__wrapper .choose__single__item .choose__img::before,
.choose__items__wrapper .choose__img__item .choose__img::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.choose__items__wrapper .choose__single__item .choose__img::before {
  background: linear-gradient(to top, rgba(20, 20, 58, 0.88) 0%, rgba(20, 20, 58, 0.5) 32%, rgba(20, 20, 58, 0) 62%);
}

.choose__items__wrapper .choose__img__item .choose__img::before {
  background: linear-gradient(to bottom, rgba(20, 20, 58, 0.8) 0%, rgba(20, 20, 58, 0.12) 26%, rgba(20, 20, 58, 0.3) 58%, rgba(20, 20, 58, 0.88) 100%);
}

/* ------------------------------------------------------------- CTA-Liste
   Ohne Nummerierung bleibt aus dem Zahlenkreis eine Punktmarke. */
.rts-cta-area .cta-right-list li span {
  min-width: 14px;
  width: 14px;
  height: 14px;
}

/* ------------------------------------------------------------ Kontakt
   Die Anschrift ist kein Link, soll aber wie die beiden anderen Karten
   aussehen. Ein Kartendienst kommt erst hinein, wenn die Kundin es will. */
.rts-contact-info-wrapper .single-contact-info .content .wert {
  display: block;
  color: var(--rts-heading);
  font-size: 24px;
  font-family: var(--font-primary);
  font-weight: var(--f-medium);
  line-height: 1.25;
}

@media screen and (max-width: 1399px) {
  .rts-contact-info-wrapper .single-contact-info .content .wert {
    font-size: 20px;
  }
}

/* ------------------------------------------------------- Fussbereich
   Adresszeilen sind keine Links, sollen aber wie die Liste aussehen. */
.rts__footer__area__two .footer-widget-wrapper .single-widget .widget-list li span {
  color: rgba(254, 250, 232, 0.7);
  font-size: 16px;
  font-weight: var(--f-regular);
}

/* ------------------------------------------------------------ Karte
   Die Vorlage zeigte eine liegende Weltkarte mit fuenf Markern. Baden-
   Wuerttemberg ist fast quadratisch, deshalb ist die Karte in der Hoehe
   begrenzt und mittig gesetzt. Die Prozentwerte der Orte kommen aus
   templates/_karte.py und werden nur dort geaendert. */
.rts__map__area .map__main__wrapper img {
  max-height: 720px;
  width: auto;
}

.rts__map__area .row > [class*="col-"] {
  text-align: center;
}

.map__main__wrapper .round-shape li {
  width: 14px;
  height: 14px;
  background: var(--btn-color);
  box-shadow: 0 0 0 4px rgba(248, 216, 0, 0.18);
  transform: translate(-50%, -50%);
  transition: none;
}

.map__main__wrapper .round-shape li .ort {
  position: absolute;
  right: 22px;
  top: 50%;
  white-space: nowrap;
  color: var(--rts-white);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--f-medium);
  letter-spacing: 0.01em;
  /* Die noerdlichen Namen liegen ueber dem Punktraster, der Schatten haelt sie lesbar. */
  text-shadow: 0 1px 8px rgba(20, 20, 58, 0.95), 0 0 3px rgba(20, 20, 58, 0.9);
  transform: translateY(calc(-50% + var(--versatz, 0px)));
}

.map__main__wrapper .round-shape .ort-ubstadt   { left: 43.66%; top: 29.21%; }
.map__main__wrapper .round-shape .ort-bruchsal  { left: 42.76%; top: 30.96%; }
.map__main__wrapper .round-shape .ort-stutensee { left: 39.78%; top: 34.71%; }
.map__main__wrapper .round-shape .ort-karlsruhe { left: 37.74%; top: 35.69%; }
.map__main__wrapper .round-shape .ort-offenburg { left: 25.85%; top: 57.85%; }
.map__main__wrapper .round-shape .ort-zell      { left: 28.97%; top: 62.88%; }
.map__main__wrapper .round-shape .ort-kinzigtal { left: 32.85%; top: 65.11%; }

/* Vier Orte im Norden liegen keine zwanzig Kilometer auseinander. Die Punkte
   bleiben exakt, nur die Schrift rueckt so weit auseinander, dass sie lesbar
   bleibt. */
.map__main__wrapper .round-shape .ort-ubstadt .ort   { --versatz: -7px; }
.map__main__wrapper .round-shape .ort-bruchsal .ort  { --versatz: 1px; }
.map__main__wrapper .round-shape .ort-karlsruhe .ort { --versatz: 13px; }
.map__main__wrapper .round-shape .ort-kinzigtal .ort { --versatz: 5px; }

/* Unter 1200 Pixeln schrumpft die Karte so weit, dass die Beschriftung
   ineinanderlaeuft. Dort tritt die Liste an ihre Stelle. */
.gebiete__liste {
  display: none;
}

@media screen and (max-width: 1199px) {
  .map__main__wrapper .round-shape li .ort {
    display: none;
  }

  /* Ohne Beschriftung braucht der linke Rand keinen Platz mehr, der Umriss
     rueckt in die Mitte. Punkte und Bild wandern gemeinsam. */
  .rts__map__area .map__main__wrapper {
    transform: translateX(-7%);
  }

  .gebiete__liste {
    display: inline-block;
    text-align: left;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
  }

  .gebiete__liste li {
    color: var(--rts-white);
    font-size: 18px;
    line-height: 1.5;
    padding-left: 26px;
    position: relative;
  }

  .gebiete__liste li + li {
    margin-top: 10px;
  }

  .gebiete__liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--btn-color);
  }
}