/*Beim Hoovern der Kacheln werden die Bilder etwas gezoomt*/
.card.overflow-hidden img {
    transition: transform 0.3s ease-in-out;
}
.card.overflow-hidden:hover img {
    transform: scale(1.1);
}

/* Standard-Zustand für das Bild in der Kachel */
.card .card-img {
    transition: border-color 0.3s ease-in-out;
    border: 4px solid rgb(0,102,51); /* Dein Start-Grün (Beispiel: Baumit-Grün) */
}

.container-below-top {
  padding: none;
}

.grid-child.container-below-top {
  background-color: #f4f6f7;
  padding: 4px 2px;
}

.mybanner {
  max-width: 55%;
  padding: 0;
  margin: 0;
  gap: 8px;
  border: none;
  background-color: #f4f6f7;
  max-height: 125px;
}

/* Altmann-Logo links oben auf mobile Geräten Höhe beschränken */
@media (max-width: 767.98px) {
  .mybanner {
   max-height:75px;
  }
}

@media (max-width: 767.98px) {
  .navbar-toggler {
    margin-left: auto;
  }
}

/* Nav-Bar auf mobile Geräten Höhe beschränken */
@media (max-width: 767.98px){
.container-header .container-nav {
  /*max-height: 80px;  funktioniert nicht denn dann ist das Menü durchsichtig*/
  /*padding: 0px 5px;*/
    justify-content: right; /* setzt das ganze Menü nach rechts auf mobilen Geräten*/
}
  }

.container-below-top .grid-child{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 6px;
  padding: 0px 0px;
}

.container-below-top .mybanner{
  order: 1;
  margin-right: auto;
}

.container-below-top search {
  order: 2 !important;
  margin-right: 7px;
  margin-left: 3px;
  max-width: 20%;
}

.container-below-top .mod-languages {
  order: 3;
  max-width: 20%;
}

/* Grundlegende Größenbegrenzung für das Icon */
img.mf-menu {
    width: auto;           /* Verhindert Verzerrung */
    height: 1.2em;        /* Skaliert das Bild passend zur Schrifthöhe */
    max-width: 30px;      /* Absolute Obergrenze der Breite */
    max-height: 30px;     /* Absolute Obergrenze der Höhe */
    
    /* Sorgt dafür, dass Bild und Text auf einer Linie sind */
    display: inline-block;
    vertical-align: middle;
    
    /* Abstand zum Text "Marken" */
    margin-right: 4px;
    
    /* Optional: Falls das Bild leicht unscharf wirkt */
    image-rendering: -webkit-optimize-contrast;
}

.field-entry.en-leihm {
  list-style-type: none;
  display: block;
  text-align: left;
}

.field-entry.herst-leihm {
  list-style-type: none;
  display: block;
  text-align: left;
  font-size: 1.3rem;
  font-weight: bold;
}

.field-entry.art-leihm {
  list-style-type: none;
  display: block;
  text-align: left;
}

.field-entry.type-leihm {
  list-style-type: none;
  display: block;
  text-align: left;
  font-size: 1.5rem;
  font-weight: bold;
  color: rgb(0,102,51);
}

.field-entry .foto3-leih {
  list-style-type: none;
}

/*Email der Article der Kategorie Team ohne Aufzählungszeichen */
.field-entry.name{
  list-style-type: none !important;
  display: block;
  text-align: left;
  font-weight: bold;
  font-size: 1.5rem;
  color: rgb(0,102,51);
}

.field-entry.position-team{
  list-style-type: none !important;
  diplay: block;
  text-align: left;
  font-weight: bold;
  font-size: 1.1rem;
}

.field-entry.festnetz-team{
  list-style-type: none;
  display: block;
  text-align: left;
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: 0.8rem;
}

/* Sucht das Label des Feldes "mobil-team" und setzt das Icon davor */
.field-entry.mobil-team .field-label::before {
    font-family: "Font Awesome 6 Free";
    content: "\f3cd"; /* Hex-Code für fa-mobile-screen-button */
    font-weight: 900;
    margin-right: 8px;
    color: var(--cassiopeia-color-primary); /* Nutzt die Template-Farbe */
}

.field-entry.mobil-team{
  /*list-style-type: none; */
  display: block;
  text-align: left;
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: 0.8rem;
}

/*Email der Article der Kategorie Team ohne Aufzählungszeichen */
.field-entry.email-adr{
  list-style-type: none !important;
  display: block;
  text-align: left;
  margin-top: 0.8rem;
  font-size: 0.9rem;
}
.field-entry.email-adr a{
  text-decoration: none;
}


/* Container für das Bild Team */
.team .item-image {
    display: block !important;
   /* text-align: center !important;*/
    float: none !important; /* Verhindert das seitliche Umfließen */
    width: 300px;
    margin-bottom: 1.0rem; /* Abstand zum Text darunter */
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* Das Bild selbst innerhalb der Marken-Klasse */
.team .item-image img {
    max-height: 300px !important; /* Begrenzt die Höhe */
    width: auto !important;       /* Behält das Seitenverhältnis bei */
    display: block !important; 
    border-top-left-radius: 6px !important; /* Deine gewünschte Rundung */
  border-top-right-radius: 6px; !important;
    object-fit: contain;          /* Sorgt dafür, dass nichts verzerrt wird */
}

.team .item-content {
  display: block;
  width: 300px;
  height: 143px;
  text-align: center;
  float: none;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

.team .fields-container {
  background: #22262A09;
  display: block !important;
  text-align: center !important;
  float: none !important;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  width: 300px;
}

.team .blog-item{
  /*width: 300px !important;*/
  align-items: center;
  margin-bottom: 15px;
  /*box-shadow: 10px 10px 12px -1px rgba(0,0,0,0.31);
-webkit-box-shadow: 10px 10px 12px -1px rgba(0,0,0,0.31);
-moz-box-shadow: 10px 10px 12px -1px rgba(0,0,0,0.31);*/
}

.team .blog-items {
  padding: 20px !important;
}

/*Field Name Schriftgröße einstellen
.team-h3 {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
}
*/

/* Styling für Full Article Images innerhalb des "marken" Kategorieblogs */
/* Gezielte Begrenzung der Full-Article-Bilder im Marken-Blog */
/* in jedem Article unter Full Image class muss man "marken-full" eintragen*/
.marken-full img {
    max-width: 200px;
    max-height: 150px;
    width: auto;          /* Sorgt dafür, dass kleinere Bilder nicht aufgebläht werden */
    height: auto;         /* Behält das Seitenverhältnis bei */
    object-fit: contain;  /* Das Bild wird innerhalb der Maße eingepasst, ohne beschnitten zu werden */
    display: block;       /* Verhindert Inline-Abstände */
  margin-left: auto;
  margin-right: auto;     /*zentrieren*/
    margin-bottom: 1.0rem;  /* Optional: Kleiner Abstand zum Text darunter */
}

/* Container für das Bild in der Marken-Übersicht */
.marken .item-image {
    display: block !important;
    text-align: center !important;
    float: none !important; /* Verhindert das seitliche Umfließen */
    width: 100%;
    margin-bottom: 1.0rem; /* Abstand zum Text darunter */
}

/* Das Bild selbst innerhalb der Marken-Klasse */
.marken .item-image img {
    max-height: 150px !important; /* Begrenzt die Höhe */
    max-width: 200px !important;
    width: auto !important;       /* Behält das Seitenverhältnis bei */
    display: inline-block !important; 
    border-radius: 3px !important; /* Deine gewünschte Rundung */
    object-fit: contain;          /* Sorgt dafür, dass nichts verzerrt wird */
}

/* Den Intro-Text in der Marken-Übersicht zentrieren */
.marken .item-content {
    text-align: center; /* Grundsätzliche Zentrierung */
    max-width: 800px;   /* Verhindert, dass der Text bei breiten Bildschirmen zu weit auseinanderläuft */
  
  /*  margin-left: auto;  Zentriert den Text-Container selbst 
    margin-right: auto;  */
    hyphens: auto;      /* Aktiviert Silbentrennung für schöneren Textfluss */
  margin-bottom: 0.8rem;
}

/* Erzwingt die volle Breite für jeden Artikel im Marken-Kategorieblog */
.marken .blog-item {
    width: 97% !important;
    display: flex;
    flex-direction: column;
  border: 1px solid #000000;
  border-radius: 7px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  margin-bottom: 30px !important;
  box-shadow: 10px 10px 12px -1px rgba(0,0,0,0.31);
-webkit-box-shadow: 10px 10px 12px -1px rgba(0,0,0,0.31);
-moz-box-shadow: 10px 10px 12px -1px rgba(0,0,0,0.31);
    flex: 1 1 100%; /* Verhindert das Zusammenziehen */
}

/* Den Container des Buttons auf die volle Breite zwingen und Text rechts ausrichten */
.marken .readmore {
    display: block;
    width: 100%;
    text-align: right !important;
    clear: both; /* Verhindert Konflikte mit fließenden Bildern */
    margin-top: auto; /* Schiebt den Button nach unten, falls die Box eine Mindesthöhe hat */
}

/*.item-content {
  text-align: justify;
  hyphens: auto;
}*/

.site-grid {
    background-color: #f4f6f7;
}

.header {
    background-color: #f4f6f7;
}

.grid-child {
    padding: 10px 10px;
    background-color: white;
   /* border-radius: 15px;*/
}

.container-topbar {
  background: rgba(0,102,51,0.65);
  height: 55px;
    display: flex;
    justify-content: right; /* Nutze 'flex-end' für rechts, 'space-between' für Verteilung */
    align-items: right;
    width: 100%;
  padding: 3px;
}

/* Vergrößert die Flaggen im Sprachumschalter-Modul */
.mod-languages img {
    width: 15px !important;  /* Breite der Flagge */
    height: auto !important; /* Proportionale Höhe */
    margin: 1px;             /* Abstand zwischen den Flaggen */
    border-radius: 2px;      /* Optional: Leicht abgerundete Ecken */
    transition: transform 0.2s; /* Optional: Kleiner Effekt beim Drüberfahren */
}

/* Optional: Effekt beim Drüberfahren (Hover) */
.mod-languages img:hover {
    transform: scale(1.1);
}

div.navbar-brand {
  backgroun: rgba(0,102,51,0.7);
}

.container-header {
  margin-top: 0px;
}

/* Abstände im horizontalen Menü verringern */
.container-nav .mod-menu.nav {
    gap: 0.3rem; /* Steuert den Gesamtabstand zwischen den Elementen */
}

.container-header .mod-menu {
    color: rgb(0,102,51);
}

.container-header .mod-menu a {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px; 
  padding: 3px 10px;
  color: rgba(0,102,51,0.7);
}

.container-header .mod-menu a:hover {
    background-color: #eee;
}

button.navbar-toggler.navbar-toggler-right.collapsed {
    color: rgb(0,102,51);
  border: 0px solid #000000;
}
button.navbar-toggler.navbar-toggler-right {
    color: rgb(0,102,51);
  border: 0px solid #000000;
}
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Schriftfarbe für den Button "Secondary" >Weiterlesen global ändern */
.btn-secondary {  
  /*color: #FFFFFF !important; Hier Ihre Wunschfarbe eintragen */
  background-color: white;
  border-color: rgb(0,102,51);
  display: block;
    margin-left: auto;   /* nach rechts ausrichten */
    margin-right: 0;
    width: fit-content; /* Verhindert, dass der Button die ganze Breite einnimmt */
}

/* Hover-Effekt (beim Drüberfahren) */
/* Hintergrundfarbe für btn-primary beim Drüberfahren ändern */
.btn-secondary:hover {
    background-color: #f4f6f7 !important; /* Hier dein gewünschtes Grün oder eine andere Farbe */
    border-color: #f4f6f7 !important;     /* Passt den Rahmen ebenfalls an */
    color: #000000 !important;            /* Stellt sicher, dass die Schrift weiß bleibt */
  transition: background-color 0.5s ease;
  display: block;
    margin-left: auto;   /* nach rechts ausrichten */
    margin-right: 0;
    width: fit-content; /* Verhindert, dass der Button die ganze Breite einnimmt */
}

/* Bildunterschrift im kompletten Beitrag vergrößern */
figcaption.caption {
    font-size: 1.1rem; /* Standard ist oft 0.8rem bis 0.9rem */
    font-weight: 500;   /* Optional: etwas fetter machen */
    margin-top: 5px;    /* Abstand zum Bild */
  color: rgb(0,102,51); /* Grüne Schrift */
  text-align: center;
}

/* Blogansicht für Kategorie Leihmaschinen kat-leihm steht im Menu unter Page-Display*/
/* --- MOBILE FIRST (Standard für Smartphone) --- */
/* Wir zielen nur auf Seiten mit unserer Kategorie-Klasse */

.kat-leihm .com-content-category-blog__item, 
.kat-leihm .com-content-article {
    display: flex;
    flex-direction: column; /* Stapelt Bild oben, Text unten */
}

p.kat-leihm .item-content {
  text-align: justify;  /*Blocksatz*/
  hyphens: auto;  /*Silbentrennung*/
  margin: 0px;
}

.kat-leihm .leihm-intro-img {
    order: 0;               /* Bild nach oben */
    width: 100% !important;
  height: auto;
    margin-bottom: 1.5rem;
}

.kat-leihm .leihm-full-img {
  order: -1;
  width: 100% !important;
  height: auto;
  margin-bottom: 1.5rem;
}

.kat-leihm .article-introtext,
.kat-leihm .com-content-article__body {
    order: 2;               /* Text unter das Bild */
    text-align: justify;    /* Blocksatz */
    hyphens: auto;          /* Trennt lange Wörter automatisch */
  margin-left: 15px;
  grid-column: 1 / -1;
}

.kat-leihm .com-content-article__body img {
  width: 100% !important;
  height: auto;
}

@media (min-width: 768px) {
.kat-leihm .fields-container {
  order: 0;
  padding-left: 1rem;
}
/* Container als Grid definieren */
.kat-leihm .item-page {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Teilt den Platz in 2 gleich große Spalten */
    gap: 15px; /* Abstand zwischen Bild und Feldern */
    align-items: start;
}

/* Das Bild in die linke Spalte zwingen */
.kat-leihm .leihm-full-img {
    grid-column: 1;
    width: 100%;
    height: auto;
}

/* Die Custom Fields in die rechte Spalte zwingen */
/* (Cassiopeia packt Fields oft in eine Klasse namens .fields-container oder .jcfields) */
.kat-leihm .fields-container, 
.kat-leihm .jcfields {
    grid-column: 2;
}

/* Responsive Design: Auf dem Handy untereinander anzeigen */
@media (max-width: 768px) {
    .kat-leihm .item-page {
        grid-template-columns: 1fr;
    }
    .kat-leihm .leihm-full-img,
    .kat-leihm .fields-container,
    .kat-leihm .jcfields {
        grid-column: auto;
    }
}
  
.kat-leihm .leihm-intro-img {
  max-height: 350px !important;
  width: auto !important;
  /*object-fit: contain;*/
}
  
.kat-leihm .leihm-full-img {
  order: -1;
  width: 450px !important;
  height: auto;
  margin-left: 15px;
  margin-bottom: 1.5rem;
}
  .kat-leihm .com-content-article__body img {
  width: 32.5% !important;
  margin-left: auto;
  height: auto;
  }
}

/* Trennlinie am Ende jedes Blog-Beitrages */
.kat-leihm .blog-item {
 /*   margin-bottom: 2rem;      
    padding-bottom: 2rem;         */
}

.container-myfooter {
  background: rgba(0,102,51,0.65);
  background-image: none;
  padding: 3px 10px;
}
.myfooter {
  color: #FFFFFF !important;
  background: rgba(0,102,51,0.65);
  background-image: none;
  padding: 17px;
  border-radius: 6px;}

/* Falls sich Links im Modul befinden, diese ebenfalls schwarz machen */
.myfooter a {
    color: #FFFFFF !important;
    text-decoration: underline; /* Optional: Damit man sieht, dass es Links sind */
}

/* Optional: Farbe beim Drüberfahren mit der Maus (Hover) */
.myfooter a:hover {
    color: #333333 !important;
}

.myfooter p {
  margin-bottom: 3px !important;
  line-height: 1.3 !important;
}

.container-footer {
  margin-top: 0px;
}

.footer .grid-child {
  background-color: #f4f6f7;
  padding: 13px 13px;
  margin-left: 4px;
  justify-content: right;
}

/* Tel-Nummer und Emailadresse im Modul footer-telnr-email stylen*/
.contact-info-bottom a {
    text-decoration: none;
  }
.contact-info-bottom a:hover {
    text-decoration: underline;
}

.contact-info-bottom i {
    color: white;
    width: 25px; /* Sorgt dafür, dass die Icons sauber untereinander stehen */
    font-size: 1.4rem;
}

/* Stil für die Social Media Leiste im Footer */
.myfooter .social-icons {
    display: flex;
    gap: 25px; /* Abstand zwischen den Icons */
    margin-top: 15px;
}

.myfooter .social-icons a {
    font-size: 2.2rem; /* Größe der Icons */
    color: white;
    transition: transform 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

/* Hover-Effekt: Icons werden etwas heller und bewegen sich leicht hoch */
.myfooter .social-icons a:hover {
    color: var(--link-hover-color);
    transform: translateY(-3px);
}

/* Spezifische Farben (Optional - falls du die Originalfarben möchtest) */
.myfooter .social-icons a[title="Instagram"]:hover { color: #E1306C; }
.myfooter .social-icons a[title="Facebook"]:hover { color: #4267B2; }
.myfooter .social-icons a[title="YouTube"]:hover { color: #FF0000; }

.back-to-top-link:hover {
background-color: #f4f6f7;
  color: #000000;
}