./* Kleine Monitore */
body { margin: 0; padding: 0; color: hsl(0,0%,48%); font-size: 1.2em; font-family: Helvetica, sans-serif;}

.reframe { max-width: 96%; margin: 0 auto; }
#topline { background: black; color: white; }
#topline p { margin: 0; padding:0 0 20px 0; font-size: 1.6em; text-align: center; line-height: 100%; }

h1 { font-size:2.00em;; font-family:arial, sans-serif; }
h2 { font-size:1.40em;; font-family:arial, sans-serif; }
h3 { font-size:1.20em;; font-family:arial, sans-serif; }
p { font-size:1.00em;; font-family:arial, sans-serif; }

.footer { font-size:1.00em;; font-family:arial, sans-serif; text-align: center;}
.slideshow { padding-bottom: 15px; padding-top: 15px;}
.logo { padding-bottom: 15px; }

ul { font-size: 1.00em;	font-family: arial, sans-serif; }
ol { font-size: 1.00em;	font-family: arial, sans-serif; }

ul#mainmenu { 
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack:justify;
	justify-content: space-between;
	margin-left: 0; 
	padding-left: 0; 
	list-style-type: none}

ul#mainmenu li { 
	position: relative;
   width: 100%;
   -moz-border-radius: 10px; 
   -khtml-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px; 
   border: 1px solid black;
   font-family: arial, sans-serif;
   font-weight: bold;
   font-size:1.00em;
   background: black; 
   margin-right: 1px; 
   margin-bottom:1ex }

ul#mainmenu li a { 
   display:block; padding: 10px; text-decoration: none; color: white; }

ul#mainmenu li a:hover { 
   display: block; color: khaki;}     
   
ul#mainmenu ul li { 
   background: none; margin-top: 0; display: block; margin-bottom: 1px; }
   
 ul#mainmenu li:hover { 
   display: block; color: khaki;}  

ul#mainmenu li:hover ul { 
   display: block; }
   
ul#mainmenu ul { 
   background: rgba(0,0,0,0.8); 
   position: absolute; right:0; padding-left: 0; width: 200%; 
   display: none; 
   z-index:100; }
   

#home { background: salmon; color:white; padding: 10px; text-align: center; font-weight: bold; cursor: pointer }

/* Tabletts */
@media only screen and (min-width: 400px) {
	.reframe { max-width: 400px; }
	ul#mainmenu li { 
	width: 49%
	}
}

@media only screen and (min-width: 720px) {
	#topline { background: plum; height: 30px; }
	.reframe { max-width: 720px; }
	
	ul#mainmenu { 
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}

	ul#mainmenu li { 
	width: 33%
	}
   
	#main {
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-justify-content: space-between;
		-ms-flex-pack:justify;
		justify-content: space-between;
	}
	
	#content, #sidebar { width: 47% }

	#content article { width: 100%; float:none; }
	#product-section-4 { width: 100%; float:none; }
}

/* Mittlere Größe */
@media only screen and (min-width: 980px)  {
	#topline { background: orangered; }
	.reframe { max-width: 980px; }
	#content{ width: 65% }
	#content-4{ width: 100% }
	#sidebar { width: 30% }
	
	#content {
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-justify-content: space-between;
		-ms-flex-pack:justify;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
		#content-4 {
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-justify-content: space-between;
		-ms-flex-pack:justify;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
	#content article {
		width: 48%;
	}
	.product-section-4 {
		width: 32%;
	}
	
	#content header {
		height:2.8em;
	}
}

/* Große Monitore */
@media only screen and (min-width: 1280px)  {
	#topline { background: gold; }
	.reframe { max-width: 1280px; padding: 5px;}
	#content{ width: 68% }
	#content-4{ width: 100% }
	#sidebar { width: 28% }
	
	#content article {
		width: 48%;
	}
	.product-section-4 {
		width: 24%;
	}
	
	#content header {
		height:2.8em;
	}

}
/* ==========================================================================
   Design-Formatierung für die Onlineshop-Teaser-Box (Brücken-Links)
   ========================================================================== */
.shop-teaser-box {
    display: block !important;
    background-color: #fafafa !important; /* Dezenter, heller Hintergrund */
    padding: 15px !important;
    
    /* Der edle goldene Akzentbalken auf der linken Seite */
    border-left: 4px solid #d9a74a !important; 
    
    margin: 20px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 1.00em !important;
    line-height: 1.6 !important;
    color: #444444 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    clear: both !important;
}

/* Formatierung des Anchor-Links innerhalb der Teaser-Box */
.shop-teaser-box a {
    font-weight: bold !important;
    color: #2c3e50 !important; /* Edles, dunkles Schiefergrau */
    text-decoration: underline !important;
    transition: color 0.2s ease-in-out !important;
}

/* Hover-Effekt: Der Link schlägt beim Drüberfahren flüssig in Humidor-Gold um */
.shop-teaser-box a:hover {
    color: #d9a74a !important;
    text-decoration: underline !important;
}

/* Mobile Optimierung für Smartphones */
@media (max-width: 768px) {
    .shop-teaser-box {
        margin: 20px 15px !important; /* Passt die Seitenabstände auf Handys an */
        padding: 12px !important;
        font-size: 0.9em !important;   /* Leicht verkleinerte Schrift auf mobilen Displays */
    }
}

/* ==========================================================================
   Design-Formatierung für das Sektoren-Sprungmenü (Inhaltsverzeichnis)
   ========================================================================== */

/* Der umschließende Hauptrahmen des Menüs */
.sektoren-nav-container {
    display: block !important;
    background-color: #1a252f !important;
    border: 2px solid #2c3e50 !important; /* Unser edles, dunkles Schiefergrau */
    border-radius: 6px !important;
    padding: 20px !important;
    margin: 30px auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.03) !important;
}

/* Innenrahmen für die Inhaltszentrierung */
.sektoren-nav-inner {
    max-width: 1100px;
    margin: 0 auto !important;
}

/* Die "Inhaltsübersicht"-Überschrift im Menü */
.sektoren-nav-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin-bottom: 12px !important;
}

/* Die Listen-Struktur für die Links */
.sektoren-nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px 30px !important; /* Flexibler Abstand zwischen den Punkten */
}

.sektoren-nav-list li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Das visuelle Styling der Sprunglinks */
.sektoren-nav-list a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #d9a74a !important; /* Unser markantes Humidor-Gold */
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-block !important;
}

/* Hover-Effekt: Der Link schlägt beim Drüberfahren in Schiefergrau um */
.sektoren-nav-list a:hover {
    color: khaki !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Mobile Anpassung für Smartphones (Macht aus Text-Links Touch-Buttons)
   ========================================================================== */
@media (max-width: 768px) {
    .sektoren-nav-container {
        margin: 25px 15px !important;
        padding: 15px !important;
    }

    .sektoren-nav-title {
        text-align: center !important;
        font-size: 14px !important;
    }

    .sektoren-nav-list {
        display: block !important; /* Schaltet Nebeneinander-Ansicht auf Handys ab */
    }

    .sektoren-nav-list li {
        display: block !important;
        margin-bottom: 10px !important;
    }

    .sektoren-nav-list li:last-child {
        margin-bottom: 0 !important;
    }

    /* Auf Smartphones werden die Links zu großen, leicht zu treffenden Leisten */
    .sektoren-nav-list a {
        display: block !important;
        background-color: #fafafa !important;
        border: 1px solid #eeeeee !important;
        border-radius: 4px !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        color: #2c3e50 !important; /* Startfarbe Dunkelgrau für bessere Lesbarkeit mobil */
        text-align: left !important;
    }

    /* Touch-Effekt auf dem Smartphone */
    .sektoren-nav-list a:active, 
    .sektoren-nav-list a:hover {
        background-color: #2c3e50 !important;
        color: #d9a74a !important;
        text-decoration: none !important;
    }
}



/* ==========================================================================
   Design-Formatierung (HTML5-Klasse)
   ========================================================================== */

/* Der umschließende Hauptcontainer mit Rahmen und abgerundeten Ecken */
.product-section-4 {
    display: block !important;
    margin: 10px auto !important;
    padding: 5px !important;
    background-color: #ffffff !important;
    
    /* Rahmen und Abrundung für die gesamte Box */
    border: 2px solid #2c3e50 !important; /* Eleganter, dunkler Schiefergrau-Rahmen */
    border-radius: 8px !important;         /* Harmonisch abgerundete Ecken */
    
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Zentrierungs-Rahmen für die Inhaltsbreite */
.product-section-4 .inner {
    max-width: 1000px;
    margin: 0 auto !important;
}

/* Die tabellarische Inhaltsbox */
.product-section-4 .tabelle_box {
    display: block !important;
    width: 100% !important;
}

/* Titel-Bereich für den harten Keyword-Link */
.product-section-4 .tabelle_box_titel {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    text-align: left !important;
}

/* Der gelbe Link als Button formatiert mit SCHWARZEM HINTERGRUND */
.product-section-4 .tabelle_box_titel a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    
    /* Farbgestaltung & Hintergrund */
    color: #d9a74a !important;            /* Unser markantes Humidor-Gold */
    background-color: #1a252f !important; /* Tiefer, edler schwarzer/anthraziter Hintergrund */
    
    /* Abstände und Abrundung im Button */
    padding: 8px 5px !important;        /* Innenabstand für echte Button-Optik */
    border-radius: 4px !important;         /* Leicht abgerundete Button-Ecken */
    
    text-decoration: none !important;     /* Unterstreichung entfernt für sauberen Button-Look */
    line-height: 1.4 !important;
    display: inline-block !important;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Edler Hover-Effekt: Invertiert die Farben beim Überfahren mit der Maus */
.product-section-4 .tabelle_box_titel a:hover {
    color: #1a252f !important;            /* Schrift wird dunkel */
    background-color: #d9a74a !important; /* Hintergrund wechselt zu Gold */
    box-shadow: 0px 5px 12px rgba(217, 167, 74, 0.3) !important;
}

/* Bild-Rahmen zur Begrenzung auf riesigen Monitoren */
.product-section-4 .tabelle_box_bild-4 {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.product-section-4 .tabelle_box_bild-4 a {
    display: block !important;
    width: 100% !important;
}

/* Das eigentliche Produktbild (100% responsiv) */
.product-section-4 .tabelle_box_bild-4 img {
    width: auto !important;             /* Wechselt von 100% auf auto, damit das Bild nicht verzerrt */
    max-width: 100% !important;        /* Verhindert, dass das Bild breiter als die Box wird */
    
    /* DIE ENTSCHEIDENDEN REGELN FÜR DIE HÖHENBEGRENZUNG: */
    max-height: 220px !important;       /* Bild darf niemals höher als 200 Pixel sein */
    object-fit: contain !important;     /* Garantiert die proportionale, verzerrungsfreie Skalierung */
    
    margin: 0 auto !important;          /* Zentriert das Bild horizontal in der Box */
    display: block !important;
    border: none !important;
    border-radius: 4px !important;
    transition: transform 0.3s ease !important;
}

/* Dezenter Zoom-Effekt beim Überfahren des Passatore-Bildes mit der Maus */
.product-section-4 .tabelle_box_bild-4 a:hover img {
    transform: scale(1.02) !important;
}

/* ==========================================================================
   Mobile Anpassung für Smartphones (Screen-Weiche)
   ========================================================================== */
@media (max-width: 768px) {
    .product-section-4 {
        margin: 25px 15px !important;
        padding: 15px !important;
    }
    
    .product-section-4 .tabelle_box_titel {
        text-align: center !important;
    }
    
    .product-section-4 .tabelle_box_titel a {
        font-size: 14px !important; /* Optimierte Größe für mobile Displays */
        display: block !important;  /* Dehnt den Button auf Handys über die volle Breite aus */
        padding: 10px 15px !important;
    }
}
/* ==========================================================================
   Design-Formatierung für die neuen Passatore-Sektor-Überschriften
   ========================================================================== */
.sektor-titel {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    border-left: 4px solid #d9a74a !important;
	border-bottom: 2px dashed #d9a74a !important;
    padding-left: 15px !important;
    margin-top: 50px !important;
    margin-bottom: 25px !important;
    letter-spacing: 0.5px !important;
    
    /* DIE ENTSCHEIDENDEN RETTUNGS-BEFEHLE: */
    display: block !important;       /* Erzwingt eine eigene, volle Zeile */
    clear: both !important;          /* Bricht alle Float-Verschiebungen links und rechts radikal auf */
    width: 100% !important;          /* Nutzt die gesamte Breite des Textblocks */
    box-sizing: border-box !important;
}

/* Mobile Optimierung für Smartphones */
@media (max-width: 768px) {
    .sektor-titel {
        font-size: 18px !important;
        margin-top: 35px !important;
        padding-left: 10px !important;
    }
}
/* ==========================================================================
   Modernes Responsive Zwei-Spalten-Footer-Design (HTML5 & Schema.org)
   ========================================================================== */

/* Der umschließende Haupt-Footerbalken */
.site-footer {
    display: block !important;
    background-color: #1a252f !important; /* Tiefer, edler dunkler Hintergrund */
    padding: 40px 20px !important;
    margin-top: 60px !important;
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Flexbox-Container zur Ausrichtung der Boxen */
.footer-container {
    max-width: 1000px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

/* Die einzelnen Inhalts-Spalten (Standard: 45% Breite) */
.footer-box {
    flex: 1 1 45% !important;
    max-width: 45% !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

/* Titel-Formatierung für die Boxen */
.footer-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #d9a74a !important; /* Unser edles Humidor-Gold */
    text-transform: uppercase !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: 0.5px !important;
}

/* Feine Trennlinie unter den Überschriften */
.footer-divider {
    border: none !important;
    border-top: 1px solid #2c3e50 !important;
    margin: 0 0 15px 0 !important;
    width: 100% !important;
}

/* Der Fließtext-Inhalt im Footer */
.footer-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #b0bbc4 !important; /* Angenehmes, gut lesbares Hellgrau auf dunklem Grund */
}

/* Hervorhebung von Firmenname, Domain und Überschriften */
.company-name, .portal-domain, .responsible-heading {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.responsible-heading {
    display: inline-block !important;
    margin-top: 5px !important;
}

/* Styling für alle Verweise im Footer */
.footer-content a {
    color: #d9a74a !important; /* Links leuchten dezent in Gold */
    text-decoration: none !important;
    transition: color 0.2s ease-in-out !important;
}

/* Hover-Effekt: Links werden beim Drüberfahren weiß und unterstrichen */
.footer-content a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Container für Datenschutz- und Impressums-Links */
.footer-legal-links {
    margin-top: 20px !important;
    border-top: 1px solid #2c3e50 !important;
    padding-top: 10px !important;
}

.footer-legal-links a {
    font-weight: bold !important;
}

/* ==========================================================================
   Mobile Anpassung für Smartphones (Bricht Boxen untereinander um)
   ========================================================================== */
@media (max-width: 768px) {
    .site-footer {
        padding: 30px 15px !important;
    }
    
    .footer-container {
        display: block !important; /* Hebt Flexbox auf Handys auf */
    }
    
    .footer-box {
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 35px !important;
        text-align: center !important; /* Zentriert den Text für optimale mobile Optik */
    }
    
    .footer-box:last-child {
        margin-bottom: 0 !important;
    }
    
    .footer-divider {
        margin: 0 auto 15px auto !important;
        width: 50% !important; /* Kürzere, zentrierte Trennlinie auf Handys */
    }
}
/* ==========================================================================
   Design-Formatierung für den Info-Zwischentext
   ========================================================================== */
.sektor-zwischentext {
    display: block !important;
    background-color: #fafafa !important; /* Ganz dezenter, heller Grau-Hintergrund */
    padding: 20px !important;
    
    /* Dunkelgrauer Akzentbalken links für edle Optik */
    border-left: 4px solid #2c3e50 !important; 
    
    margin: 35px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 1.00em; !important;
    line-height: 1.6 !important;
    color: #444444 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    clear: both !important;
}

/* Mobile Optimierung für Smartphones */
@media (max-width: 768px) {
    .sektor-zwischentext {
        margin: 25px 15px !important; /* Mehr Seitenabstand auf mobilen Displays */
        padding: 15px !important;
        font-size: 13px !important; /* Leicht verkleinerter Text für besseren Lesefluss */
    }
}