/*
Theme Name: Blue Diamond Child (GEPOC)
Theme URI: -
Description: Child Theme für GEPOC. Enthält SEO-, Accessibility-, Performance- und Design-Anpassungen. Änderungen bitte NUR hier vornehmen, damit ein Update des Parent Themes sie nicht überschreibt.
Author: -
Template: bluediamond
Version: 2.0.0
*/

/* ==================================================================
   GEPOC – Designsystem
   ------------------------------------------------------------------
   Aufgebaut auf den Hausfarben aus den Theme-Optionen:
     Gelb      #ebe11e   Akzent (Briefbogen, Datenblätter)
     Anthrazit #272727   Navigation
     Rot       #fa030f   bisherige Linkfarbe

   Behobene Probleme:
   1. Weiße Schrift auf Gelb (Kontrast ~1,5:1, nötig sind 4,5:1)
      → auf Gelb steht jetzt immer Anthrazit
   2. Gelb UND Rot als konkurrierende Akzente ohne System
      → Gelb = Aktion, Dunkelrot = Textlink, sonst neutral
   3. Überschriften im Inhalt optisch nicht von Fließtext
      unterscheidbar (16px, Stärke 400, gleiche Farbe)
      → eigene Typo-Hierarchie
   4. 940px Textbreite bei 16px = ~110 Zeichen pro Zeile
      → auf 68ch begrenzt

   Alles ist auf den Inhaltsbereich und klar benannte Klassen
   beschränkt. Kopfbereich, Menü und Footer werden nur dort
   angefasst, wo es um Lesbarkeit geht.
   ================================================================== */

:root {
	--gepoc-gelb: #ebe11e;
	--gepoc-gelb-dunkel: #d4ca10;
	--gepoc-anthrazit: #272727;
	--gepoc-text: #3d3d3d;
	--gepoc-text-hell: #6b6b6b;
	--gepoc-linie: #e5e5e5;
	--gepoc-linie-hell: #f0f0ee;
	--gepoc-flaeche: #f8f8f6;
	--gepoc-link: #b00710;
	--gepoc-link-hover: #7d0409;
}


/* ==================================================================
   1. TYPOGRAFIE IM INHALTSBEREICH
   ================================================================== */

.gdl-page-content {
	color: var(--gepoc-text);
}

.gdl-page-content h2 {
	font-family: "Open Sans", HelveticaNeue, "Helvetica Neue", Arial, sans-serif;
	font-size: 27px;
	line-height: 1.28;
	font-weight: 600;
	color: var(--gepoc-anthrazit);
	letter-spacing: -0.01em;
	margin: 2.4em 0 0.75em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--gepoc-linie);
}

.gdl-page-content > h2:first-child {
	margin-top: 0.3em;
}

.gdl-page-content h3 {
	font-family: "Open Sans", HelveticaNeue, "Helvetica Neue", Arial, sans-serif;
	font-size: 19px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--gepoc-anthrazit);
	margin: 2em 0 0.5em;
}

.gdl-page-content h4 {
	font-family: "Open Sans", HelveticaNeue, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--gepoc-anthrazit);
	margin: 1.7em 0 0.5em;
}

.gdl-page-content p {
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 1.2em;
	max-width: 68ch;
}

/* Einleitungsabsatz: etwas größer, setzt den Einstieg ab */
.gdl-page-content > p:first-child {
	font-size: 18.5px;
	line-height: 1.65;
	color: #333;
	margin-bottom: 1.5em;
}

.gdl-page-content strong,
.gdl-page-content b {
	font-weight: 600;
	color: var(--gepoc-anthrazit);
}


/* ==================================================================
   2. LISTEN
   ================================================================== */

.gdl-page-content ul,
.gdl-page-content ol {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 1.5em;
	max-width: 68ch;
}

.gdl-page-content ul {
	list-style: none;
	padding-left: 0;
}

.gdl-page-content ul > li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.55em;
}

/* gelber Aufzählungsstrich statt grauem Punkt */
.gdl-page-content ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 9px;
	height: 2px;
	background: var(--gepoc-gelb-dunkel);
}

.gdl-page-content ol {
	padding-left: 1.4em;
}

.gdl-page-content ol > li {
	margin-bottom: 0.55em;
	padding-left: 0.3em;
}


/* ==================================================================
   3. LINKS
   Rot bleibt erhalten, aber in einer Abstufung mit ausreichendem
   Kontrast (#b00710 ≈ 7:1 auf Weiß statt #fa030f ≈ 4:1).
   ================================================================== */

.gdl-page-content p > a,
.gdl-page-content li > a,
.gdl-page-content td > a {
	color: var(--gepoc-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(176, 7, 16, 0.4);
	transition: color .15s ease, text-decoration-color .15s ease;
}

.gdl-page-content p > a:hover,
.gdl-page-content li > a:hover,
.gdl-page-content td > a:hover {
	color: var(--gepoc-link-hover);
	text-decoration-color: currentColor;
}


/* ==================================================================
   4. TABELLEN
   ================================================================== */

.gdl-page-content table {
	width: 100%;
	max-width: 68ch;
	border-collapse: collapse;
	margin: 0 0 1.8em;
	font-size: 15px;
	line-height: 1.6;
}

.gdl-page-content table td,
.gdl-page-content table th {
	padding: 11px 14px;
	border-bottom: 1px solid var(--gepoc-linie);
	text-align: left;
	vertical-align: top;
}

.gdl-page-content table tr:nth-child(odd) td {
	background: var(--gepoc-linie-hell);
}

.gdl-page-content table td:first-child {
	font-weight: 600;
	color: var(--gepoc-anthrazit);
	width: 38%;
}


/* ==================================================================
   5. KARTEN (Partner, Produkte, Anwendungen, Service)
   ================================================================== */

.gepoc-partner-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 1.8em 0;
	max-width: 100%;
}

.gepoc-partner {
	flex: 1 1 300px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 26px 28px;
	background: #fff;
	border: 1px solid var(--gepoc-linie);
	border-top: 3px solid var(--gepoc-gelb);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gepoc-partner:hover {
	border-color: #d5d5d5;
	border-top-color: var(--gepoc-gelb);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
	transform: translateY(-2px);
}

.gepoc-partner-logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 58px;
	margin-bottom: 18px;
}

.gepoc-partner-logo img {
	max-height: 58px;
	max-width: 100%;
	width: auto;
	height: auto;
}

.gepoc-partner-rolle {
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gepoc-text-hell);
	margin: 0 0 7px !important;
	max-width: none !important;
}

.gepoc-partner h3 {
	font-size: 19px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--gepoc-anthrazit);
	margin: 0 0 12px !important;
}

.gepoc-partner p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--gepoc-text);
	margin: 0 0 16px !important;
	max-width: none !important;
}

.gepoc-partner-fakten {
	font-size: 13px !important;
	color: var(--gepoc-text-hell) !important;
	border-top: 1px solid var(--gepoc-linie);
	padding-top: 13px;
	margin-top: auto !important;
	margin-bottom: 14px !important;
}

.gepoc-partner .gepoc-partner-link {
	margin-top: auto;
	align-self: flex-start;
	font-size: 14px;
	font-weight: 600;
	color: var(--gepoc-anthrazit);
	text-decoration: none;
	border-bottom: 2px solid var(--gepoc-gelb);
	padding-bottom: 2px;
	transition: border-color .15s ease;
}

.gepoc-partner-fakten + .gepoc-partner-link {
	margin-top: 0;
}

.gepoc-partner .gepoc-partner-link:hover {
	border-bottom-color: var(--gepoc-anthrazit);
	color: var(--gepoc-anthrazit);
}

.gepoc-partner .gepoc-partner-link::after {
	content: " \2192";
}


/* ==================================================================
   6. BUTTONS UND FORMULARE
   Behebt weiße Schrift auf Gelb.
   ================================================================== */

.gdl-page-content .gdl-button,
.gdl-page-content input[type="submit"],
.wpcf7 input[type="submit"] {
	background: var(--gepoc-gelb) !important;
	color: var(--gepoc-anthrazit) !important;
	font-family: "Open Sans", Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 13px 30px !important;
	cursor: pointer;
	transition: background .15s ease;
}

.gdl-page-content .gdl-button:hover,
.gdl-page-content input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover {
	background: var(--gepoc-gelb-dunkel) !important;
	color: var(--gepoc-anthrazit) !important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--gepoc-text);
	border: 1px solid #d8d8d8;
	border-radius: 0;
	padding: 11px 13px;
	background: #fff;
	transition: border-color .15s ease;
	max-width: 100%;
	box-sizing: border-box;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
	border-color: var(--gepoc-gelb-dunkel);
	outline: 2px solid rgba(235, 225, 30, .35);
	outline-offset: 1px;
}


/* ==================================================================
   7. NAVIGATION
   Beim Überfahren wechselte die Beschriftung auf Weiß auf Gelb –
   praktisch unlesbar. Jetzt Anthrazit auf Gelb.
   ================================================================== */

.sf-menu > li > a:hover,
.sf-menu > li.current-menu-item > a,
.sf-menu > li.current_page_item > a,
.sf-menu > li:hover > a {
	color: var(--gepoc-anthrazit) !important;
	background-color: var(--gepoc-gelb) !important;
}

.sf-menu ul li a:hover,
.sf-menu ul li.current-menu-item > a {
	color: var(--gepoc-anthrazit) !important;
	background-color: var(--gepoc-gelb) !important;
}

/* Tastaturbedienung sichtbar machen */
.sf-menu a:focus-visible,
.gdl-page-content a:focus-visible,
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 3px solid var(--gepoc-gelb-dunkel);
	outline-offset: 2px;
}


/* ==================================================================
   8. KOPFBEREICH UND SEITENLEISTE
   ================================================================== */

.logo-right-text-content {
	font-size: 14px;
	color: var(--gepoc-anthrazit);
}

.custom-sidebar-title,
.sidebar-wrapper h3 {
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gepoc-anthrazit);
	padding-bottom: 9px;
	border-bottom: 2px solid var(--gepoc-gelb);
	margin-bottom: 14px;
}

.sidebar-wrapper .menu li a {
	display: block;
	padding: 9px 0;
	font-size: 15px;
	color: var(--gepoc-text);
	border-bottom: 1px solid var(--gepoc-linie);
	text-decoration: none;
	transition: color .15s ease, padding-left .15s ease;
}

.sidebar-wrapper .menu li a:hover,
.sidebar-wrapper .menu li.current-menu-item > a {
	color: var(--gepoc-anthrazit);
	padding-left: 6px;
	font-weight: 600;
}


/* ==================================================================
   8b. SLIDER-BESCHRIFTUNG
   Der Text stand in #4a4a4a auf einem hellen Bild – zu schwach.
   ================================================================== */

.flex-caption {
	color: var(--gepoc-anthrazit) !important;
}

.flex-caption h2,
.flex-caption .gdl-slider-title {
	font-weight: 600 !important;
	color: var(--gepoc-anthrazit) !important;
}

/* Der weiße Kasten hinter der Beschriftung bekommt etwas mehr
   Deckkraft, damit der Text auf jedem Bild lesbar bleibt. */
.flex-caption,
.flexslider .flex-caption {
	background-color: rgba(255, 255, 255, .92) !important;
	border-left: 4px solid var(--gepoc-gelb);
	padding: 18px 22px !important;
}


/* ==================================================================
   9. SPRACHUMSCHALTER (Polylang)
   ================================================================== */

.gepoc-sprachwahl,
.sf-menu li.lang-item a {
	font-weight: 600;
}

.sf-menu li.lang-item {
	text-transform: uppercase;
}

.sf-menu li.current-lang > a {
	background-color: var(--gepoc-gelb) !important;
	color: var(--gepoc-anthrazit) !important;
}


/* ==================================================================
   10. MOBIL
   ================================================================== */

@media (max-width: 767px) {
	.gdl-page-content h2 { font-size: 22px; margin-top: 1.9em; }
	.gdl-page-content h3 { font-size: 17.5px; }
	.gdl-page-content p,
	.gdl-page-content ul,
	.gdl-page-content ol { font-size: 15.5px; }
	.gdl-page-content > p:first-child { font-size: 17px; }
	.gepoc-partner { padding: 20px 22px; }
	.gepoc-partner-logo { height: 46px; }
	.gepoc-partner-logo img { max-height: 46px; }
	.gdl-page-content table { font-size: 14px; }
	.gdl-page-content table td,
	.gdl-page-content table th { padding: 9px 10px; }
	.gdl-page-content table td:first-child { width: 45%; }
}


/* ==================================================================
   11. DRUCK
   Datenblätter und Produktseiten werden im B2B oft ausgedruckt
   oder als PDF abgelegt.
   ================================================================== */

@media print {
	.top-navigation-wrapper,
	.gdl-navigation-wrapper,
	.sidebar-wrapper,
	.footer-wrapper,
	.copyright-wrapper,
	.flexslider { display: none !important; }

	.gdl-page-content { width: 100% !important; }
	.gdl-page-content p,
	.gdl-page-content ul { max-width: none; }
	.gepoc-partner { break-inside: avoid; border: 1px solid #999; }
	.gdl-page-content a::after { content: " (" attr(href) ")"; font-size: 11px; color: #666; }
}