@charset "utf-8";

/*
	CSS Document
	Kundenanpassung an HELIX ULTIMATE

	http://ws-ip-10/hoell

	Dieses Dokument:	D:\wms\Computer\CMS\Installationen\css\hoell\custom.css
	für:				\\WS-IP-10\web\hoell\templates\shaper_helixultimate\css\custom.css			
	
	2023-12-06	wms		Version 1.0.0 Neuanlage
	2024-03-24	wms		weitere Modifikationen
    2026-03-10	wms		weitere Modifikationen
    2026-03-22	wms		Responsive Anpassungen Mobile & Tablet
    2026-03-22	wms&KI	Responsive Anpassungen Mobile & Tablet
*/
/*  Variable für Farben definieren		*/
:root
	{
	--dunkelgrau:						#333;
	--hellgrau:							#f5f5f5;
	--hoellgelb: 						#ffff00;
	--hoellgruen:						#060;
	--hoellblau:						#0345bf;
	}
/*	Body-Top Höhe						*/

#sp-body-top
	{    
	height:								50px;
	}

/*	Breadcrumb Hintergrundfarbe und		*/
/*	Zeilenbeginn passend zur Umgebung	*/
.breadcrumb
	{
	background-color:					var(--hoellgruen);
	padding-left:						0;
	}
/*  Breadcrumb Aktives Element Farbe	*/
.breadcrumb-item.active
	{
	color:								var(--hoellgelb);
	}
/*	Breadcrumb Trennzeichen Farbe		*/
#sp-body-top .breadcrumb-item::before
	{
	color:								white;
	}
/*	Bottom Modul Höhe und Rand			*/	
#sp-bottom
	{
    height: auto;          /* statt fester 310px */
    min-height: 310px;     /* Desktop bleibt wie bisher */
    padding-top: 20px;
    padding-bottom: 20px;  /* Abstand nach unten */
	}
/*	Bottom Modul Titel in grau			*/	
#sp-bottom .sp-module .sp-module-title
	{
	color:								var(--dunkelgrau);			
	}
/*	Bottom Modul Linkfarben				*/
#sp-bottom a
	{
	color:								var(--dunkelgrau); 
	}
#sp-bottom a:hover
	{
	color:								#006600; 
	}
#sp-bottom a:active
	{
	color:								#006600; 
	}
#sp-bottom a:focus
	{
	color:								var(--dunkelgrau);
	}
/*	Footer Höhe angepasst				*/
#sp-footer
	{
	height:								80px;
	}
/*																	Aufzählungszeichen definieren		*/
/*********************************************************************************************************
.custom-counter 
	{
	margin:               5px;                    /* Einrückung hor   *//*
	padding:              5px;                    /* Einrückung ver   *//*
	list-style-type:      none;
	}
.custom-counter li 
	{
	counter-increment:    step-counter;
	margin-bottom:        10px;                   /* Zeilenabstand    *//*
	}
.custom-counter li::before 
	{
	content:              counter(step-counter);
	margin-right:         10px;                   /* Abstand zum Text *//*
	font-size:            80%;
	background-color:     #060;
	color:                white;
	font-weight:          bold;
	padding:              3px 8px;
	border-radius:        11px;
	}
	******************************************************************************************************/
.custom-counter 
	{
	margin:               30px;                   /* Einrückung der Liste                           */
	padding:              0px;                    /* zusätzlicher Rahmenbreite innerhalb der Margin */
	list-style-type:      none;
	}
.custom-counter li 
	{
	counter-increment:    step-counter;
	text-indent:          -45px;                  /* 1. <li>-Zeile nach links ausgezogen            */
	margin-bottom:        10px;                   /* Abstand li zu li                               */
	text-align:			  justify;				  /* Blocksatz										*/	
	}
.custom-counter li::before 
	{
	content:              counter(step-counter);
	margin-right:         20px;                   /* Abstand Nummer zu Text                         */
	font-size:            80%;
	background-color:     #060;
	color:                white;
	font-weight:          bold;
	padding:              3px 8px;                /* Form des Hintergrundes                         */
	border-radius:        11px;                   /* Kreis oder Rechteck                            */
	}

/*************************************************************/
/* wms - 2026-06-07 - START KARUSSELL AUF DER STARTSEITE     */
/* wms - 2026-06-07 - siwhw sp pagebuilder oberfläche        */
/*************************************************************/

/* Einheitliche Bildgröße im SP Page Builder Karussell */
/*.sppb-carousel img,
.sppb-carousel-item img,
.sppb-addon-carousel img {
    width: 100%;
    height: 280px;         gewünschte Höhe 
    object-fit: cover;     sauberer Zuschnitt 
    display: block;
}
*/
/*************************************************************/
/* wms - 2026-06-07 - ENDE  KARUSSELL AUF DER STARTSEITE     */
/*************************************************************/

/*************************************************************/
/* wms - 2026-06-08 - START KATEGORIE-BLOG UEBERSICHT        */
/*************************************************************/

/********************************************
 *  Layout-Fix: Spalten in einer Zeile gleich hoch
 ********************************************/

/* Zeile als Flex-Container */
body.view-category .article-list .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Spalten strecken */
body.view-category .article-list .col-lg-6 {
    display: flex;
}

/* Joomla-Artikel-Container strecken */
body.view-category .article-list .article {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Pferdebox füllt die Spalte vollständig */
body.view-category .wms-horse-item {
/*    flex: 1 1 auto;
    display: flex;
    flex-direction: column;

    padding: 22px;
    border: 2px solid #aaa;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);*/
    display: flex;
    gap: 40px;
    padding: 20px;
    margin-bottom: 4px;        /* Abstand zwischen Zeilen mit zweierblöcken */
    background: #fff;
    border: 1px solid #060;
    border-radius: 10px;        /* Rahmen um Bild und Felder */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/********************************************
 *  Titel
 ********************************************/
.wms-horse-title {
    font-size: 28px;
    margin-bottom: 15px;
    border-bottom: 1px solid #060;
    padding-bottom: 5px;
}

.wms-horse-title a {
    color: #060;
    text-decoration: none;
}

/* Titel der Pferde-Detailseiten einfärben */
body.view-article h1 {
    color: #060; /* schönes, sattes Rot */
}

/* Dezente Linie unter dem Titel */
body.view-article h1 {
    border-bottom: 2px solid #060;
    padding-bottom: 8px;
    margin-bottom: 20px;
}


/********************************************
 *  Layout: Bild links, Felder rechts
 ********************************************/
.wms-horse-wrapper {
    display: flex;
    gap: 35px;
    align-items: flex-start;
}

/********************************************
 *  Bild
 ********************************************/
.wms-horse-image {
/*    flex: 0 0 375px;
    width: 375px;
    margin-top: 15px; */
    flex-shrink: 0;
    width: 280px;  /* feste Breite für alle Bilder */   
}

.wms-horse-image img {
 /*   width: 100%; */
    height: 250px;
 /*   object-fit: cover;
    border-radius: 6px; */
    width: 100%;
/*    height: auto; */
    object-fit: cover;
    display: block;
}

/* --- WMS: STARTLayout Bild + Felder nebeneinander --- */

.wms-top-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.wms-top-image {
    flex: 0 0 420px;
}

/* Rechte Spalte (Felder) – nimmt den Rest */
.wms-top-fields {
    flex: 1; /* wird automatisch breiter */
}

@media (max-width: 768px) {
    .wms-top-wrapper {
        flex-direction: column;
    }

    .wms-top-image img {
        width: 100%;
    }
}
/* --- WMS: ENDE Layout Bild + Felder nebeneinander --- */

/********************************************
 *  Felder
 ********************************************/
.wms-horse-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.wms-horse-field {
    display: flex;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.wms-horse-field strong {
    width: 160px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}

.wms-horse-field span {
    flex: 1;
    color: #444;
}

 .wms-horse-fields {
    flex: 1 1 auto;
}

.wms-horse-fields div {
    margin-bottom: 6px;
    font-size: 16px;
}

/* --- WMS: Pferde-Felder (Variante A – nur Detailansicht, hohe Spezifität) --- */
/* --- WMS: Pferde-Felder – einspaltig, nur Detailansicht --- */
/* --- WMS: START Felder einspaltig erzwingen (nur Detailansicht) --- */

.wms-detail-view .wms-horse-fields {
    display: block !important;
    width: 100%;
}

/* Bootstrap/Helix Grid neutralisieren */
.wms-detail-view .wms-horse-fields .row,
.wms-detail-view .wms-horse-fields .col,
.wms-detail-view .wms-horse-fields [class*="col-"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Jede Zeile als Block */
.wms-detail-view .wms-horse-fields div {
    display: block !important;
    padding: 6px 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 1.1rem;
}

/* Label links breiter */
.wms-detail-view .wms-horse-fields strong {
    display: inline-block;
    width: 180px;
    font-weight: 600;
    color: #333;
}
/* --- WMS: ENDE  Felder einspaltig erzwingen (nur Detailansicht) --- */

/* Introtext */
.wms-horse-intro {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
}

/* Button */
.wms-horse-button {
    margin-top: 20px;
}

.wms-horse-button .btn {
    padding: 10px 22px;
    font-size: 16px;
    border-radius: 4px;
}

/*************************************************************/
/* wms - 2026-06-08 - ENDE  KATEGORIE-BLOG UEBERSICHT        */
/*************************************************************/

/*************************************************************/
/* wms - 2026-06-08 - START KATEGORIE-BLOG DETAILS           */
/*************************************************************/

/*************************************************************/
/* wms - 2026-06-08 - START BEITRAGSBILD UND FELDER          */
/*************************************************************/

.wms-top-wrapper {
    display: flex;
    gap: 30px;
    margin: 20px 0 40px 0;
    align-items: flex-start;
}

/* Abstand unter dem Top-Bereich (Bild + Felder) */
.wms-top-wrapper {
    margin-bottom: 40px;
}

.wms-top-image img {
    width: 420px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.wms-top-fields div {
    margin-bottom: 6px;
    font-size: 1.05rem;
}

@media (max-width: 768px) {
    .wms-top-wrapper {
        flex-direction: column;
    }

    .wms-top-image img {
        width: 100%;
    }
}

/*************************************************************/
/* wms - 2026-06-08 - ENDE  BEITRAGSBILD UND FELDER          */
/*************************************************************/

/*************************************************************/
/* wms - 2026-06-08 - START TEXT UND PEDIGREE                */
/*************************************************************/
/* Wrapper */
.wms-editor-wrapper {
    width: 100%;
    margin: 40px 0;
    overflow: hidden;
}
/* Abstand unter dem Pedigree + Text Block */
.wms-editor-wrapper {
    margin-bottom: 50px;
}

.wms-pedigree-img {
    float: left;
    width: 420px;        /* Größer */
    max-width: 45%;
    margin: 0 30px 25px 0;
    border-radius: 6px;
}

/* Text */
.wms-editor-text {
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Mobil */
@media (max-width: 768px) {
    .wms-pedigree-img {
        float: none;
        display: block;
        margin: 0 auto 20px auto;
        width: 100%;
        max-width: 420px;
    }
}

/*************************************************************/
/* wms - 2026-06-08 - ENDE  TEXT UND PEDIGREE                */
/*************************************************************/

/*************************************************************/
/* wms - 2026-06-08 - START GALERIE                          */
/*************************************************************/

/* wms 2026-03-10
   Raster für Artikel-Galerie                     */
.artikel-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.artikel-galerie img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Galerie in gleichmäßigen Kacheln anzeigen */
.wms-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

/* Abstand unter der Galerie */
.wms-gallery {
    margin-bottom: 60px;
}

.wms-gallery img {
    width: 100%;
    height: 180px;          
    object-fit: cover;      /* sauberer Zuschnitt */
    border-radius: 10px;    /* runde Ecken */
    display: block;         /* verhindert kleine Lücken unter Bildern */
    cursor: pointer;
    transition: 0.2s;
}

.wms-gallery img:hover {
    transform: scale(1.05);
}

/* Overlay */
#wms-lightbox-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 999999 !important;
    animation: fadeIn 0.3s ease;
}

/* Bild etwas kleiner */
#wms-lightbox-overlay img {
    max-width: 70%;
    max-height: 70%;
    border-radius: 6px;
    box-shadow: 0 0 20px #000;
    opacity: 0;
    animation: imageFade 0.4s ease forwards;
}

#wms-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}

/* Fade-In Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes imageFade {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Pfeile */
.wms-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    user-select: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.wms-lightbox-arrow:hover {
    opacity: 1;
}

#wms-lightbox-prev {
    left: 40px;
}

#wms-lightbox-next {
    right: 40px;
}

/*************************************************************/
/* wms - 2026-06-08 - ENDE  GALERIE                          */
/*************************************************************/

/*************************************************************/
/* wms - 2026-06-08 - START VIDEO                            */
/*************************************************************/

/*************************************************************/
/* wms - 2026-08-07 - VIDEO responsive                       */
/*************************************************************/

.wms-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;   /* 16:9 Seitenverhältnis */
    height: 0;
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 40px;
}

.wms-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*************************************************************/
/* wms - 2026-06-08 - ENDE  VIDEO                            */
/*************************************************************/

/*************************************************************/
/* wms - 2026-06-08 - ENDE  KATEGORIE-BLOG DETAILS           */
/*************************************************************/

/* ============================================================
   wms - 2026-03-22 - START Responsive Anpassungen Mobile & Tablet
   wms - 2026-03-26 - iPad 11" Querformat Fix ergänzt
   ============================================================ */

/* ============================================================
   wms - 2026-08-07 - Responsive Anpassungen Mobile & Tablet
   Korrektur: .wms-horse-wrapper → .wms-horse-item (aktueller Selektor)
   ============================================================ */

/* --- iPad Querformat & kleine Desktops (bis 1180px) --- */
@media (max-width: 1180px) {

    .wms-horse-image {
        flex: 0 0 200px;
        width: 200px;
        max-width: 200px;
        overflow: hidden;
    }

    .wms-horse-image img {
        height: 170px;
    }

    .wms-horse-info {
        min-width: 0;
        overflow: hidden;
    }

    .wms-horse-title {
        font-size: 20px;
    }

    .wms-horse-item {
        gap: 20px;
        padding: 16px;
    }

    body.view-category .wms-horse-item {
        padding: 16px;
    }
}

/* --- Tablet Hochformat (bis 991px) --- */
@media (max-width: 991px) {

    /* Bild und Felder untereinander */
    .wms-horse-item {
        flex-direction: column;
        gap: 12px;
    }

    /* Bild volle Breite */
    .wms-horse-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        overflow: visible;
        margin-top: 10px;
    }

    .wms-horse-image img {
        height: auto;
        width: 100%;
        object-fit: unset;
    }

    .wms-horse-info {
        min-width: unset;
        overflow: visible;
        width: 100%;
    }

    .wms-horse-title {
        font-size: 22px;
    }
}

/* --- Smartphone (bis 767px) --- */
@media (max-width: 767px) {

    .wms-horse-item {
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }

    .wms-horse-image {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 0;
    }

    .wms-horse-image img {
        height: auto;
        width: 100%;
        object-fit: unset;
    }

    .wms-horse-info {
        width: 100%;
    }

    .wms-horse-title {
        font-size: 20px;
    }

    body.view-category .wms-horse-item {
        padding: 14px;
    }

    /* Artikel-Spalten untereinander */
    body.view-category .article-list .col-lg-6 {
        width: 100%;
    }

    /* Galerie: 2 Bilder nebeneinander */
    .wms-gallery img {
        width: calc(50% - 5px);
    }

    /* Lightbox Pfeile kleiner */
    .wms-lightbox-arrow {
        font-size: 40px;
    }
    #wms-lightbox-prev { left: 10px; }
    #wms-lightbox-next { right: 10px; }

    /* Lightbox Bild größer auf kleinem Screen */
    #wms-lightbox-overlay img {
        max-width: 92%;
        max-height: 80%;
    }
}

/* --- Sehr kleine Smartphones (bis 400px) --- */
@media (max-width: 400px) {

    .wms-horse-title {
        font-size: 18px;
    }

    .wms-horse-info div {
        font-size: 14px;
    }

    /* Galerie: 1 Bild pro Zeile */
    .wms-gallery img {
        width: 100%;
    }
}

/* ============================================================
   wms - 2026-08-07 - ENDE  Responsive Anpassungen
   ============================================================ */

/* ============================================================
   wms - 2026-03-22 - ENDE  Responsive Anpassungen Mobile & Tablet
   ============================================================ */


/* wms - 2026-03-18 - ENDE  Kategorie-Blog-Artikel Pferde Detail-Ansicht */