/*--------------------------------------------------------------
	Textfarbe bei Markierung
--------------------------------------------------------------*/
/* ganz am Ende deiner Styles */
html ::selection {
  background: #1c8f34 !important;
  color: #fff !important;
}

/* Fallback für alte Firefox-Versionen */
html ::-moz-selection {
  background: #1c8f34 !important;
  color: #fff !important;
}



.frame::after,
.frame-default::after {
    content: "";
    display: block;
    clear: both;
}




/* eigene Button Farbe gruen */
.btn-primary {
  background-color: #1d9035;
  border: none;              /* entfernt den Rahmen */
  margin: 10px 10px 10px 0;
}

/* Hover / Fokus identisch wie Normalzustand */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  margin: 10px 10px 10px 0;
  background-color: #44c45e;
  border: none;
  box-shadow: none;          /* entfernt Bootstrap-Schatten bei Fokus */
}

  

/* Optional: Fehlernachrichten oder Hinweise */
form .error-message {
    color: red;
    font-size: 0.9em;
    margin-top: -5px;
}

/* ————————————————————————————
   TOP SERVICES BLOCK
   ———————————————————————————— */
.top-services {
    padding: 1.25rem 0;
}

/* ————————————————————————————
   DESKTOP: 3 SPALTEN (Links — Punkte — Rechts)
   ———————————————————————————— */
.services-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

/* Spalten-Ausrichtung */
.services-col-left {
    text-align: right;
    padding-right: 0.5rem;
}

.services-col-center {
    display: flex;
    justify-content: center;
}

.services-col-right {
    text-align: left;
    padding-left: 0.5rem;
}

/* ————————————————————————————
   LINKS & RECHTS: Listen
   ———————————————————————————— */
.services-list,
.services-dot-list {
    margin: 0;
    padding: 0;
    list-style: none; /* Wichtig: keine Standardpunkte */
}

.services-link {
    color: #424242;
    text-decoration: none;
}

.services-link:hover,
.services-link:focus {
    text-decoration: underline;
}

/* ————————————————————————————
   EINHEITLICHE ZEILENHÖHE LINKS — MITTE — RECHTS
   ———————————————————————————— */
.services-item,
.services-dot-list li {
    margin: 0;
    padding: 0.15rem 0;
    font-size: 0.95rem;
    line-height: 1.2;
}

/* Punkt-Zeilen flexen → perfekte vertikale Zentrierung */
.services-dot-list li {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sichtbarer grüner Punkt */
.services-dot-list li::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #2e7d32;
}


/* Desktop: Zeilenabstand enger */
@media (min-width: 992px) {
    .top-services .services-item,
    .top-services .services-dot-list li {
        padding: 0.12rem 0;   /* vorher 0.25 */
        line-height: 1.15;    /* etwas enger */
    }
}



/* ————————————————————————————
   MOBILE (max 768px)
   ———————————————————————————— */
@media (max-width: 768px) {

    .services-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .services-col-center {
        display: none; /* Punktspalte ausblenden */
    }

    .services-col-left,
    .services-col-right {
        text-align: left;
        padding: 0;
        width: 100%;
    }

    .services-list {
        margin-bottom: 1rem;
    }
}







/* -------------------------------------------------
   Kontaktzeile unter Header / über Hauptmenü
   ------------------------------------------------- */
.contact-bar {
    padding: 0.35rem 0;
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    color: var(--brand-green);        /* grüne Schrift */
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background-color: #ffffff;
}

/* Standard: Desktop-Ansicht */
.contact-bar-desktop {
    display: block;
}

@media (min-width: 992px) {
    .contact-bar-desktop {
        white-space: nowrap;   /* verhindert jeglichen Umbruch */
    }

}


.contact-bar-mobile {
    display: none;
}

/* Links + Icons */
.contact-icon-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 1rem;
    text-decoration: none;
    color: var(--brand-green);
    font-weight: 600;
    font-size: 0.95rem;
}

.contact-icon-link i {
    font-size: 1rem;
}

.contact-icon-link:hover,
.contact-icon-link:focus {
    text-decoration: underline;
}

/* -----------------------------------------
   Mobile: nur Icons + Telefon / Kontakt
   ----------------------------------------- */
@media (max-width: 991.98px) {
    .contact-bar {
        text-align: center;
    }

    .contact-bar-desktop {
        display: none;            /* Textzeile ausblenden */
    }

    .contact-bar-mobile {
        display: inline-flex;     /* Icons + Text anzeigen */
        justify-content: center;
        gap: 1.75rem;
    }
}

/* Desktop: Inhalte breit ziehen */
@media (min-width: 992px) {
    .contact-bar-desktop {
        text-align: center;
      font-weight: 600;
        letter-spacing: 0.8px;        /* optisch breiter */
        word-spacing: 8px;            /* auseinandergezogen */
    }
}


/* =========================================
   Kontaktzeile (Steinstraße …) auf Desktop
   Flex aus, kompakt + zentriert
   ========================================= */
@media (min-width: 992px) {

  /* Eltern-Wrapper zentriert den Block */
  .contact-bar .main-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Die eigentliche Adresszeile: KEIN Flex mehr */
  .contact-bar-desktop {
    display: inline-block !important;   /* statt flex */
    width: auto !important;            /* nicht 100% Breite */
    text-align: center !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }

  /* Abstand um die kleinen Kapellchen-Icons */
  .contact-bar-desktop img {
    margin: 0 2.5rem;
    vertical-align: middle;
  }
}


/* ===================================================================
   Einheitliche Inhaltsbreite für Header, Kontaktzeile & Menü
   =================================================================== */
.main-wrapper {
  max-width: 1180px;   /* oder 1140px o.ä., wie du magst */
  width: 100%;
  margin: 0 auto;
  padding-inline: 1rem;  /* kleiner Rand innen für schmale Screens */
}


/* Logo auf Desktop bündig an die linke Kante der main-wrapper */
@media (min-width: 992px) {
  .logo-img {
    max-width: 550px;
    width: 100%;
    height: auto;
    transform: none;   /* kein nach rechts schieben mehr */
  }
}


/* Nur das zweizeilige Menü oben (top-services) weiter nach rechts schieben */
@media (min-width: 992px) {
  .top-services .services-row {
    display: flex;
    justify-content: flex-end;   /* schiebt beide Spalten nach rechts */
  }
}


/* Desktop: Logo etwas größer darstellen */
@media (min-width: 992px) {
  .logo-img {
    max-width: 650px;   /* vorher ca. 550px */
    width: 100%;
    height: auto;
  }
}


/* Desktop: Logo gezielt größer einstellen (Override von main.css) */
@media (min-width: 992px) {
  header .logo-img {
    width: 650px !important;   /* Logo größer */
    height: auto;
  }
}


/* Desktop: Logo im Header vertikal zentrieren */
@media (min-width: 992px) {
  .top-header .row {
    display: flex;
    align-items: center;   /* vertikale Zentrierung der Spalten */
  }

  .top-header .col-lg-6 {
    display: flex;
    align-items: center;   /* Logo in seiner eigenen Spalte zentrieren */
  }

  .logo-img {
    display: block;
  }
}


/* Nur Desktop: Logo + zweizeiliges Menü in der Header-Row vertikal zentrieren */
@media (min-width: 992px) {
  .row.top-header {
    align-items: center !important; /* überschreibt .align-items-start von Bootstrap */
  }
}



/* ======================================
   NAVBAR: Menü-Button mobil zentrieren
   ====================================== */
@media (max-width: 991.98px) {

  /* Wrapper im grünen Balken zentrieren */
  .navbar-custom .main-wrapper {
    justify-content: center;   /* Inhalt mittig */
  }

  /* Auto-Margin, das den Button nach rechts schiebt, aufheben */
  .navbar-custom .navbar-toggler {
    margin-left: 0;            /* statt auto */
    margin-right: 0;           /* optional: auch 0.25rem, wenn gewünscht */
  }
}

/* ======================================
   NAVBAR: Hauptmenü Desktop zentrieren
   ====================================== */
@media (min-width: 992px) {
  /* Inhalt innerhalb des Collapse mittig anordnen */
  .navbar-custom .navbar-collapse {
    justify-content: center;
  }

  /* Falls das UL des Menüs mit .navbar-nav kommt: mittig ausrichten */
  .navbar-custom .navbar-nav {
    margin-left: auto;
    margin-right: auto;
  }
}