/* =========================================================================
   VA Match Pro — Zielgruppen-Landingpages (Merker 26.08.2026)

   Gemeinsames Stylesheet fuer alle /va-fuer-XXX/-Seiten. Wird zusaetzlich
   zu startseite.css geladen, erbt von dort Header, Footer, Buttons und
   Container. Hier stehen nur die Bausteine, die es sonst nirgends gibt.

   Praefix: .lp-   (LandingPage)

   ACHTUNG Spezifitaet: Das Site-Editor-CSS (DB, wp_global_styles 881) setzt
   vieles mit !important. Wo ein Override noetig ist, Klasse doppeln
   (.lp-x.lp-x) statt !important zu stapeln. Siehe CLAUDE.md §13.
   ========================================================================= */

/* ── Hero ───────────────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  background: #083141;
  color: #fff;
  padding: 86px 0 96px;
  overflow: hidden;
}
/* Optionales Hintergrundbild. Wird per style="" am Element gesetzt. */
.lp-hero.has-bg { background-size: cover; background-position: center; }
.lp-hero.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8,49,65,.94) 0%, rgba(8,49,65,.82) 52%, rgba(8,49,65,.55) 100%);
}
.lp-hero > .vs-container { position: relative; z-index: 1; }
.lp-hero-eyebrow {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c8dde3;
  margin-bottom: 16px;
}
/* Breit genug, dass "Deine VA für Dein Immobiliengeschäft." auf dem Desktop
   in EINE Zeile passt. Auf schmalen Schirmen bricht es normal um. */
.lp-hero h1 {
  color: #fff;
  max-width: 1040px;
  font-size: clamp(28px, 3.6vw, 45px);
  line-height: 1.16;
  letter-spacing: -.6px;
  margin: 0 0 22px;
}
/* Zweiter Satz der Ueberschrift: eigene Zeile, gleiche Groesse, gleiche
   Farbe. Haelt den Umbruch ruhig, statt dass beide Saetze ineinanderlaufen. */
.lp-hero h1 .lp-h1-hell {
  display: block;
  color: inherit;
  font-weight: inherit;
  margin-top: .12em;
}
.lp-hero-sub {
  font-size: 18.5px;
  line-height: 1.62;
  color: #dbe7ec;
  max-width: 56ch;
  margin: 0 0 34px;
}
.lp-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* Gesetzter Umbruch im Hero-Text. Auf schmalen Schirmen unnoetig, dort
   bricht der Satz von selbst und der Umbruch wuerde nur Luecken reissen. */
.lp-br-wide { display: inline; }

@media (max-width: 640px) {
  .lp-br-wide { display: none; }
  .lp-hero { padding: 44px 0 48px; }
  .lp-hero-sub { font-size: 17px; }
  .lp-hero-ctas .vs-btn { width: 100%; text-align: center; }
}

/* ── Trust-Band direkt unter dem Hero ───────────────────────────────── */
.lp-trust { background: #EBF2F4; padding: 22px 0; }
.lp-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.lp-trust-item b {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #114C5F;
  line-height: 1.2;
  margin-bottom: 3px;
}
.lp-trust-item span { font-size: 14px; color: #59747C; }
@media (max-width: 620px) {
  .lp-trust-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Abschnitts-Grundlayout ─────────────────────────────────────────── */
/* 54px oben UND unten ergaben dort, wo zwei Abschnitte aufeinander
   treffen, 108px Leerraum. Deshalb knapper. */
.lp-section { padding: 38px 0; }
.lp-section.is-tinted { background: #fafcfd; }
.lp-head { text-align: center; max-width: 820px; margin: 0 auto 30px; }
.lp-eyebrow {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #59747C;
  margin-bottom: 10px;
}
/* Abschnitts-Ueberschrift bewusst kleiner als global. Die grosse Variante
   aus startseite.css wirkt hier zu wuchtig und reisst die Zeilen auseinander.
   Klasse gedoppelt fuer Spezifitaet gegen das Site-Editor-CSS (siehe §13). */
.lp-head.lp-head h2 {
  font-size: clamp(23px, 2.7vw, 33px);
  line-height: 1.22;
  letter-spacing: -.3px;
  text-wrap: balance;
  margin: 0 0 12px;
}
.lp-head.lp-head p {
  font-size: 16.5px;
  line-height: 1.6;
  color: #3d5259;
  max-width: 60ch;
  margin: 0 auto;
  text-wrap: pretty;
}
/* Handy: deutlich knappere Abstaende. Die Desktop-Werte wirken auf
   kleinen Schirmen wie grosse Leerflaechen zwischen den Abschnitten. */
@media (max-width: 640px) {
  .lp-section { padding: 40px 0; }
  .lp-head { margin-bottom: 24px; }
  .lp-head.lp-head h2 { font-size: 21px; margin-bottom: 8px; }
  .lp-head.lp-head p { font-size: 15px; }
  .lp-trust { padding: 20px 0; }
  .lp-why-grid { gap: 20px; }
  .lp-more { margin-top: 24px; }
  .lp-final p { margin-bottom: 22px; }
}

/* ── Aufgaben-Kacheln ───────────────────────────────────────────────── */
.lp-tasks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lp-task {
  background: #fff;
  border: 1px solid #e2edf0;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lp-task:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(8,49,65,.09); }

/* Schmales Bildband oben in der Kachel. Ohne Bild greift der Icon-Fallback. */
.lp-task-bild {
  aspect-ratio: 16 / 5;
  background: #EBF2F4;
  overflow: hidden;
  flex: 0 0 auto;
}
.lp-task-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.lp-task:hover .lp-task-bild img { transform: scale(1.04); }

.lp-task-body { padding: 18px 20px 20px; }

/* Icon-Fallback, solange noch kein Bild hinterlegt ist. */
.lp-task-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: #EBF2F4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  overflow: hidden;
}
.lp-task h3 { font-size: 16.5px; margin: 0 0 6px; }
.lp-task p { font-size: 14.5px; line-height: 1.6; color: #4a6069; margin: 0; }
@media (max-width: 900px) { .lp-tasks { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* Handy: EINE Spalte, aber Bild links neben dem Text statt darueber.
   Zwei Spalten waren zwar kurz, machten die Karten aber schmal, die
   Ueberschriften dreizeilig und die Hoehen ungleich (kurze Karte neben
   langer Karte = viel Leere). Quer ist kompakt UND gleichmaessig. */
@media (max-width: 640px) {
  .lp-tasks { grid-template-columns: 1fr; gap: 12px; }
  .lp-task {
    display: grid;
    grid-template-columns: 104px 1fr;
    align-items: stretch;
  }
  .lp-task-bild { aspect-ratio: auto; height: 100%; min-height: 104px; }
  .lp-task-body { padding: 14px 16px 15px; }
  .lp-task h3 { font-size: 15.5px; margin-bottom: 5px; }
  .lp-task p { font-size: 13.5px; line-height: 1.5; }
  .lp-task:hover { transform: none; }
}

/* ── VA-Kacheln ─────────────────────────────────────────────────────── */
.lp-vas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.lp-va {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #e2edf0;
  border-top: 3px solid transparent;
  border-radius: 16px;
  padding: 22px 18px 20px;
  box-shadow: 0 2px 8px rgba(8,49,65,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-top-color .15s ease;
  min-width: 0;
  height: 100%;
}
.lp-va:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(8,49,65,.1);
  border-top-color: #114C5F;
}
.lp-va-foto { position: relative; display: inline-block; margin-bottom: 11px; flex: 0 0 auto; }
.lp-va-foto img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.lp-va-foto::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #114C5F url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px 13px no-repeat;
  box-shadow: 0 0 0 3px #fff;
}
.lp-va-name {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: #083141;
  margin: 0 0 8px;
  line-height: 1.3;
}
.lp-va-bereich {
  display: inline-block;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: #59747C;
  background: #EBF2F4;
  border-radius: 999px;
  padding: 3px 11px;
  line-height: 1.4;
  margin-bottom: 12px;
  overflow-wrap: break-word;
}
.lp-va-sterne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
}
.lp-va-sterne em { font-style: normal; font-size: 12px; color: #59747C; }
.lp-va-link { margin-top: auto; font-size: 14px; font-weight: 600; color: #114C5F; }
@media (max-width: 1080px) { .lp-vas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .lp-vas { grid-template-columns: repeat(2, 1fr); }
}
/* Handy: VA-Karten quer statt hoch. Untereinander mit grossem Foto
   nahmen sie sehr viel Platz ein, ohne mehr zu zeigen. */
@media (max-width: 560px) {
  .lp-vas { grid-template-columns: 1fr; gap: 10px; max-width: none; }
  .lp-va {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "foto text";
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 12px 16px 12px 12px;
    border-top-width: 1px;
    border-top-color: #e2edf0;
  }
  .lp-va-foto { grid-area: foto; margin: 0; }
  .lp-va-foto img { width: 58px; height: 58px; }
  .lp-va-foto::after { width: 19px; height: 19px; background-size: 10px 10px; box-shadow: 0 0 0 2px #fff; }
  .lp-va-name,
  .lp-va-bereich,
  .lp-va-sterne,
  .lp-va-link { grid-column: 2; justify-self: start; }
  .lp-va-name { font-size: 15.5px; margin: 0 0 4px; }
  .lp-va-bereich { font-size: 11.5px; margin: 0; padding: 2px 9px; }
  .lp-va-sterne { justify-content: flex-start; margin: 5px 0 0; }
  .lp-va-link { margin: 4px 0 0; font-size: 13px; }
  .lp-va:hover { transform: none; }
}

/* ── Warum-Block auf Petrol ─────────────────────────────────────────── */
.lp-why { background: #083141; color: #fff; }
.lp-why h2, .lp-why .lp-head h2 { color: #fff; }
.lp-why .lp-eyebrow { color: #c8dde3; }
.lp-why .lp-head p { color: #c8dde3; }
.lp-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 40px; }
.lp-why-item h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 18px;
  margin: 0 0 9px;
}
.lp-why-item h3::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c8dde3;
  flex: 0 0 auto;
}
.lp-why-item p { color: #c8dde3; font-size: 15px; line-height: 1.65; margin: 0; }
@media (max-width: 720px) { .lp-why-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ── Bewertungen ────────────────────────────────────────────────────── */
.lp-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.lp-review {
  background: #fff;
  border: 1px solid #e2edf0;
  border-radius: 14px;
  padding: 26px 26px 22px;
}
.lp-review-sterne { display: flex; gap: 3px; margin-bottom: 13px; }
.lp-review p { font-size: 15.5px; line-height: 1.65; color: #2c3e44; margin: 0 0 14px; }
.lp-review-autor { font-size: 13.5px; color: #59747C; font-weight: 500; }
@media (max-width: 720px) { .lp-reviews { grid-template-columns: 1fr; } }

/* ── Teaser-Kasten (z. B. Firmenportal) ─────────────────────────────── */
.lp-teaser {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 36px;
  align-items: center;
  background: linear-gradient(135deg, #114C5F 0%, #083141 100%);
  color: #fff;
  border-radius: 20px;
  padding: 48px 44px;
}
/* Mit Hintergrundbild: das Bild fuellt die Flaeche, darueber liegt derselbe
   Petrol-Verlauf halbtransparent. Ohne das waere der weisse Text auf einem
   beliebigen Foto nicht sicher lesbar. Der Inhalt braucht position:relative,
   sonst liegt er unter dem Verlauf. */
.lp-teaser.has-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.lp-teaser.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(17,76,95,.82) 0%, rgba(8,49,65,.74) 100%);
}
.lp-teaser.has-bg > * { position: relative; z-index: 1; }

.lp-teaser .lp-eyebrow { color: #c8dde3; margin-bottom: 10px; }
.lp-teaser h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 12px; }
.lp-teaser p { color: #c8dde3; font-size: 16px; line-height: 1.65; margin: 0; }
.lp-teaser-ctas { display: flex; flex-direction: column; gap: 11px; }
.lp-teaser-ctas .vs-btn { text-align: center; }
@media (max-width: 860px) {
  .lp-teaser { grid-template-columns: 1fr; padding: 28px 22px; gap: 18px; }
}

/* ── Abschluss-CTA ──────────────────────────────────────────────────── */
.lp-final { background: #EBF2F4; text-align: center; }
.lp-final h2 { margin: 0 0 14px; }
.lp-final p { max-width: 620px; margin: 0 auto 30px; font-size: 17px; color: #3d5259; }

/* ── Zentrierter Nachsatz unter einem Grid ──────────────────────────── */
.lp-more { text-align: center; margin-top: 28px; }

/* Abschluss-CTA: eigene Groesse, weil das H2 hier nicht in .lp-head steckt
   und sonst die wuchtige globale Groesse aus startseite.css erbt.
   Klasse gedoppelt fuer Spezifitaet gegen das Site-Editor-CSS (siehe §13). */
.lp-final.lp-final h2 {
  font-size: clamp(23px, 2.7vw, 33px);
  line-height: 1.22;
  letter-spacing: -.3px;
  text-wrap: balance;
  margin: 0 0 14px;
}
.lp-final.lp-final p {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Rekrutierungs-Block: gleicher Kasten wie der Teaser, aber hell. Braucht
   deshalb eigene Textfarben, sonst erbt er die hellen Werte fuer Petrol-
   Untergrund und die Eyebrow verschwindet fast (Merker 28.08.2026). */
.lp-teaser.lp-recruit {
  background: #fff;
  border: 1px solid #e2edf0;
  color: #083141;
}
.lp-teaser.lp-recruit .lp-eyebrow { color: #59747C; }
.lp-teaser.lp-recruit h2 { color: #083141; }
.lp-teaser.lp-recruit p  { color: #3d5259; }

/* Abschluss-CTA: zwei gleichwertige Wege nebeneinander (Job posten oder
   Profile ansehen), auf schmalen Schirmen untereinander. */
.lp-final-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 520px) {
  .lp-final-ctas { flex-direction: column; align-items: stretch; }
  .lp-final-ctas .vs-btn { text-align: center; }
}

/* Dritter Hero-Button (Firmenportal) gehoert zu einem ANDEREN Angebot als
   die beiden davor: nicht VA-Vermittlung, sondern unsere eigene Leistung.
   Deshalb abgesetzt, mit Trennstrich davor und in der
   hellen Akzentfarbe, damit er nicht als dritte Variante desselben Wegs
   gelesen wird. Bewusst ruhiger als die beiden davor, nicht lauter. */
.lp-hero-ctas .lp-cta-extra {
  position: relative;
  margin-left: 26px;
  border-color: rgba(200,221,227,.55) !important;
  color: #c8dde3 !important;
}
.lp-hero-ctas .lp-cta-extra::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(255,255,255,.28);
}
.lp-hero-ctas .lp-cta-extra:hover {
  background: #c8dde3 !important;
  border-color: #c8dde3 !important;
  color: #083141 !important;
}
@media (max-width: 640px) {
  .lp-hero-ctas .lp-cta-extra { margin-left: 0; margin-top: 6px; }
  .lp-hero-ctas .lp-cta-extra::before { display: none; }
}



/* ── Bereichs-Balken ──────────────────────────────────────────────────
   Je Fachbereich ein waagerechter Balken: Bild links, Bereichsname und
   Kurztext, daneben die Profilfotos, rechts der Link in die gefilterte
   Liste. Ersetzt das grosse Kartenraster, ist deutlich kompakter und
   sagt durch die Ueberschrift, warum diese VAs hier stehen. */
.lp-bereich {
  display: grid;
  grid-template-columns: 132px minmax(200px, 1fr) auto auto;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid #e2edf0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(8,49,65,.05);
  transition: box-shadow .15s ease;
}
.lp-bereich + .lp-bereich { margin-top: 14px; }
.lp-bereich:hover { box-shadow: 0 10px 26px rgba(8,49,65,.1); }

.lp-bereich-bild {
  display: block;
  align-self: stretch;
  min-height: 112px;
  overflow: hidden;
  background: #EBF2F4;
}
.lp-bereich-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-bereich-bild.ist-leer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #114C5F 0%, #083141 100%);
}
.lp-bereich-kuerzel {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #c8dde3;
}

.lp-bereich-text { min-width: 0; padding: 14px 0; }
.lp-bereich-text strong {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #083141;
  line-height: 1.3;
}
.lp-bereich-sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #59747C;
}

/* Profilfotos mit Namen darunter. Frueher ueberlappend und ohne Namen,
   dann war nicht erkennbar, dass die Kreise anklickbar sind. Getrennt und
   beschriftet liest sich jeder Kreis als Person und damit als Link. */
.lp-bereich-vas { display: flex; gap: 12px; padding: 12px 0; }
.lp-bereich-va {
  display: block;
  width: 62px;
  text-align: center;
  transition: transform .12s ease;
}
.lp-bereich-va img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 5px;
  background: #EBF2F4;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e2edf0;
  transition: box-shadow .12s ease;
}
.lp-bereich-va-name {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: #59747C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-bereich-va:hover { transform: translateY(-2px); }
.lp-bereich-va:hover img { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #114C5F; }
.lp-bereich-va:hover .lp-bereich-va-name { color: #114C5F; }

/* Als kleiner Button statt Textlink: braucht weniger Breite, ist
   trotzdem klar als Aktion erkennbar, und die Profilkreise bekommen
   dadurch mehr Platz. */
.lp-bereich-link {
  margin-right: 20px;
  padding: 8px 14px;
  border: 1px solid #c8dde3;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #114C5F;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lp-bereich-link:hover {
  background: #114C5F;
  border-color: #114C5F;
  color: #fff !important;
}

@media (max-width: 900px) {
  .lp-bereich {
    grid-template-columns: 96px 1fr;
    grid-template-areas: "bild text" "bild vas" "link link";
    gap: 6px 16px;
    row-gap: 8px;
  }
  .lp-bereich-bild { grid-area: bild; min-height: 100%; }
  .lp-bereich-text { grid-area: text; padding: 14px 14px 0 0; }
  .lp-bereich-vas  { grid-area: vas;  padding: 0 0 14px; }
  .lp-bereich-link { grid-area: link; justify-self: start; margin: 0 0 14px 16px; }
}
@media (max-width: 560px) {
  .lp-bereich-sub { display: none; }
  /* Vier Kreise mussten sonst mehr Platz als vorhanden, der letzte wurde
     abgeschnitten. Schmalere Zellen und weniger Abstand loesen das. */
  .lp-bereich-vas { gap: 6px; flex-wrap: wrap; }
  .lp-bereich-va { width: 52px; }
  .lp-bereich-va img { width: 44px; height: 44px; }
  .lp-bereich-va-name { font-size: 10px; }
}

/* Link auf den Grundlagenartikel unter dem Abschluss-CTA — 16.09.2026 */
.lp-final.lp-final p.lp-grundlagen-link { margin: 26px auto 0; font-size: 15px; }
.lp-grundlagen-link a { color: #114C5F; text-decoration: underline; text-underline-offset: 3px; }
/* Hero-Button zum Grundlagenartikel, hellblau gefuellt — 16.09.2026 */
.vs-btn.lp-cta-grundlagen { background: #c8dde3 !important; color: #083141 !important; border: 2px solid #c8dde3 !important; }
.vs-btn.lp-cta-grundlagen:hover { background: #fff !important; border-color: #fff !important; color: #083141 !important; }