/* Contao Besslich Schmuck style sheet */
/* FE */

/* styling Preisliste */

  .tl_preisliste {
     display: inline-block;                 /* damit width Angabe wirkt */
  }
  .tl_preislisteName {
     width: fit-content;                          /* Breite des Namensfeldes */
     text-align: left;
  }
  .tl_preislisteStueckPr, .tl_preislistePaarPr {
     width: fit-content;                          /* Breite des Stueckpreisfeldes */
     text-align: right;
  }
  .tl_preislisteEinzelBefore::before, .tl_preislistePaarBefore::before { 
    content: "";
    display: inline-block;
    width: 16px;  /* Hier die gewünschte Breite einstellen */
    height: 16px; /* Hier die gewünschte Höhe einstellen */
    background-size: contain; /* Bildgröße anpassen */
    background-repeat: no-repeat;
    position: relative;
    top: 4px;
  }
  .tl_preislisteEinzelBefore::before { 
    background-image: url("/bundles/contaobesslichschmuck/icons/einzelpreis.png");
  }
  .tl_preislistePaarBefore::before { 
    background-image: url("/bundles/contaobesslichschmuck/icons/paarpreis.png");
  }

/* styling detailansicht */
  .detail_text {
    padding-top: 1rem;            /* abstand zum indicator carousell */
  }
/* styling artikelimage */

  .artikelImg {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    border: 3px solid var(--hb-arikel-img-border);
    border-radius: 50%;
  }
  .artikelImgBig {
        width:  16em;                                                                                                     
        height: auto;
  }

  .artikelImgSmall {
    width:10em;
    height:auto;
  }

  .artikelImgList {
    width:8em;
    height:auto;
  }
  
  /* styling schmuckartikel darstellung */  
  .image_container {      /* abstand Auflistung Bilder schmuckartikel */
    margin:0.8em;
  }
  .image_container img {
    vertical-align:top;
    object-fit: scale-down;
  }
  /* styling schmuckartikel mit flex */
  .album_preview {
            display: flex;                /* Flexbox aktivieren */
            flex-direction: row;           /* Items horizontal anordnen (Standard) */
            flex-wrap: wrap;               /* Umbruch bei Überlauf */
            gap: 10px;                     /* Abstand zwischen den Items und Zeilen */
            justify-content: flex-start;
            align-items: stretch;
  }

  .album_preview_item {
    display: inline;
  }
  .album_preview_item img{
    width: 9em; /* Bild passt sich an die Breite des Items an */
    height: auto; /* Höhe des Bildes bleibt proportional */
    border-radius: 50%;
    margin: 0.3em;
  }
  .detail-img-zoom {   //
    border: 3px solid blue;
    border: 3px solid var(--hb-arikel-img-border);
  }
  
  
  /* styling tabelle */
  .headBild {
    width: 10em;
  }
  .headText {
    width: 30em;
  }
  .headBild,.headText,.bodyImg,.bodyText {
    padding-left: 2em;  
  }
  /* alles was innerrhalb der detailbeschreibung steht als block
     ob das ganz richtig ist ??
  */
  .detail_beschreibung {
    display:table;
  }

  /* styling navigation padding */
  nav.pagination ul {
    list-style: none;        /* Entfernt die Aufzählungspunkte */
    padding-left: 10px;   
    margin-left: 0;       
    display: flex;           /* Richtet die <li>-Elemente nebeneinander aus */
    gap: 10px;               /* Abstand zwischen den Listenelementen (optional) */
  }

  nav.pagination ul li {
    margin: 0;               /* Entfernt den Standard-Rand */
    padding: 0;              /* Entfernt das Standard-Padding */
  }
  
  /* konfiguration Jpegslider in detail ansicht 
    .carousel-item {
      position: absolute;
      width: 100%;
      display: block;
      transform: translateX(100%);
      transition: transform 0.6s ease-in-out;
    }
  */
  .carousel-item {
    position: relative;
    transition: transform 0.6s ease-in-out;
  }
.carousel-item.active {
    display: block !important;  /* Wichtiger Fix */
    position: relative;
    transition: transform 0.6s ease-in-out;
}

/*
    .carousel-item.active {
      transform: translateX(0);
      z-index: 2;
      width: 330px;
    }
*/
    .carousel-item.active img, .carousel-item.active video {
      border-radius:50%;
      border: 3px solid var(--hb-arikel-img-border)
    }
    .carousel-item-next {
      transform: translateX(100%);
    }

    .carousel-item-prev {
      transform: translateX(-100%);
    }
    .carousel-indicators {
      list-style: none; /* Entfernt die Zahlen */
      margin-bottom: -0.8em !important;
    }
    .carousel-control-prev:hover, .carousel-control-next:hover {
      background:transparent;
    }
    .carousel-control-next, .carousel-control-prev {
       width: 6%;     /* breite der Schaltfläche */
    }
  .carousel-control-next {    /* abs. position pfeil nächstes Bild Achtung auf bildgröße achten*/
    right: 0px;
  }
  .carousel-control-prev {    /* abs. position pfeil vorheriges Bild */
    left: 00px;
  }

    
  .carousel-indicators button.thumbnail {
    width: 100px;
  }
  .carousel-indicators button.thumbnail:not(.active) {
    opacity: 0.7;
  }
/*    thumbnail links */
.carousel.slide {
  display: flex; /* Ermöglicht horizontales Layout */
  align-items: center; /* Zentriert die Thumbnails vertikal */
  gap: 10px;
}


.carousel-indicators button {

  margin: 5px 0; /* Abstand zwischen den Thumbnails */
  background-color: transparent; 
}
.carousel-indicators button img {
  border-radius: 50%; /* Runde Thumbnails */
}
.carousel-indicators [data-bs-target] {
  background-color: transparent; /* Farbe für die inaktiven Thumbnail */
  opacity: 1;
  width: 4em; /* Größe der Thumbnails */
  height: 4em;
  margin-top:2em;
}
.carousel-indicators button.active {
  background-color: transparent; /* Farbe für den aktiven Thumbnail */
}
.carousel-indicators button.active img {
  border: 2px solid var(--hb-arikel-img-border);
}
  /* Rechts-Pfeil drehen, um einen Pfeil nach unten zu erzeugen 
  .carousel-control-prev-icon, .carousel-control-next-icon {
    transform: rotate(90deg);    Pfeil nach unten 
    background-size: 100%;
  }
  */
.carousel-control-next-icon, .carousel-control-prev-icon {
    color: var(--hb-arikel-img-border); /* SVG-Farbe durch CSS */
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-inner {
/*  flex-grow: 1;  Nutzt den verbleibenden Platz für die Slides ????*/
  padding-bottom: 1em;
}
/* Play-Icon Video Styling */
.play-icon-wrapper {
    position: relative;
    width: 100%; /* Gleiche Breite wie das Bild */
    height: auto; /* Automatische Höhe */
    /* display: inline-block; */
}

.play-icon {
    width: 100%;
    height: 100%;
    display: block;
}

.play-icon-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 20px solid var(--hb-arikel-img-border);;  /* Dreieck zeichnen */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 0.5;          /* Movepfeil helligkeit */

}
/*            Styling startseite  */

.start {       /* artikel startseite */
  height: 800px;

}
.startseite { position:absolute; }
.startseite.item1 { top: 16%;  left:12%; visibility: visible;animation-duration: 2s;animation-iteration-count: 1;animation-name: slideInDown;}
.startseite.item2 { top: 8%;  left:30%; visibility: visible; animation-duration: 5s;animation-iteration-count: 1;animation-name: slideInUp; }
.startseite.item3 { top: 8%;  left:65%; visibility: visible; animation-duration: 5s;animation-name: slideInRight;}
.startseite.item4 { top: 42%; left:15%; width: 10em;}
.startseite.item5 { top: 46%; left:50%; }
.startseite.item6 { top: 46%; left:35%; }
.startseite.item7 { bottom: 0%; left:10%; visibility: visible;animation-duration: 2s;animation-iteration-count: 3;animation-name: bounceIn; }
.startseite.item8 { bottom: 20%; left:30%; visibility: visible;animation-duration: 2s;animation-iteration-count: 1;animation-name: fadeInLeft; }
.startseite.item9 { bottom: 5%; left:65%; visibility: visible;animation-duration: 3s;animation-name: fadeInDownBig; }
.startseite.item1 img{ width:12em; }
.startseite.item2 img{ width:13em; }
.startseite.item3 img{ width:16em; }
.startseite.item4 img{ width:5em; }
.startseite.item5 img{ width:5em; }
.startseite.item6 img{ width:5em; }
.startseite.item6 p{ margin:1em; }
.startseite.item7 img{ width:12em; }
.startseite.item8 img{ width:8em; }
.startseite.item9 img{ width:18em; }

@media screen and (min-width: 992px) {
    .carousel {
      max-width: 90%;
      margin-left: 1em;
      margin-bottom: 5em;  // damit nächster div noch platz hat;       
    }
}
@media screen and (max-width: 768px) {
    .carousel {
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 5em; /* Weniger Platz unten für kompakte Darstellung */
    }
}
  
/* css mediaprint */
@media print {
.noPrint {
 display:none !important;
}
#header {
  display:none;
}
/** Seitenränder einstellen */  
@page { margin: 2cm }
@page {
  size: A4 portrait;
  //margin: 10pt 0 30pt 0;
  margin: 20mm;
  margin-left: 2,5cm;
  margin-right: 0,5cm;
  margin-top: 2cm;
} 
/* Inhaltsbreite setzen, Floats und Margins aufheben */
/* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */
#content, #page {
  width: 100%; 
  margin: 0; 
  float: none;
}

/* Font auf 16px/13pt setzen, Background auf Weiß und Schrift auf Schwarz setzen.*/
/* Das spart Tinte */
body {
/*  font: 8pt Georgia, "Times New Roman", Times, serif; */
  line-height: 1;
  background: #fff !important;
  color: #000;
  width:   210mm;
  height:  297mm;
}

h1 {
  font-size: 24pt;
}

h2, h3, h4 {
  font-size: 14pt;
  margin-top: 25px;
} 
.page-new {page-break-before: always;}
 
/* Alle Seitenumbrüche definieren */
a {
    page-break-inside:avoid
}
blockquote {
    page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 { 
     page-break-after:avoid; 
     page-break-inside:avoid 
}
h1,h2,h3 {
     font-weight: bold;
     font-size: large;
}

img { 
     page-break-inside:avoid; 
     page-break-after:avoid; 
}
//table, pre { page-break-inside:avoid }
//pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }
    
/* Linkfarbe und Linkverhalten darstellen */
a:link, a:visited, a {
  background: transparent;
  color: #520;
  font-weight: bold;
  text-decoration: underline;
  text-align: left;
}

a {
    page-break-inside:avoid
}

a[href^=http]:after {
      content:" <" attr(href) "> ";
}


article a[href^="#"]:after {
   content: "";
}

a:not(:local-link):after {
   content:" <" attr(href) "> ";
}
    
/**
 * Eingebundene Videos verschwinden lassen und den Whitespace der iframes auf null reduzieren.
 */
.entry iframe, ins {
    display: none;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0pt !important;
    white-space: nowrap;
}
.embed-youtube, .embed-responsive {
  position: absolute;
  height: 0;
  overflow: hidden;
}
    

    
/* Wichtige Elemente definieren */    
p, address, li, dt, dd, blockquote {
  font-size: 100%
}

/* Zeichensatz fuer Code Beispiele */
code, pre { font-family: "Courier New", Courier, mono}

ul, ol {
  list-style: square; margin-left: 18pt;
  margin-bottom: 20pt;    
}

li {
  line-height: 1.6em;
} 

.mod_navigation, .mod_breadcrumb, .pdf_link {
  display:none;
}  

.all_records {
    width: 100%;
    border-collapse: collapse;
  }

.all_records, th, td {
    padding: 5pt;
    vertical-align: top;
    .tablepreistabelle {
      border: 0px;
      th, td {
       border: 0px;
       padding: 0px;
      }
    }
}

}  /* end media print */