/* CUSTOM CSS - SPORTRAEN.COM 
    Optimiert für Contao 5.x / Oneo
    Zusammenführung aus Theme Assistant & Legacy Custom CSS
*/

/* --- 0. FONTS LOKAL --- */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/open-sans-v34-latin-700.woff2') format('woff2');
}

:root {
    /* --- VIEWPORTS & LAYOUT --- */
    --container-max-width: 1280px;
    --breakpoint-desktop: 1280px;
    --breakpoint-tablet: 900px;
    --breakpoint-mobile: 600px;
    
    /* --- FARBEN TYPOGRAFIE --- */
    --color-text: #212121;
    --color-text-light: #9e9e9e;
    --color-text-inv: #ffffff;
    --color-text-inv-light: #efefef;
    --color-link: #ff6d00;
    --color-selection: #ff9800;
    
    /* --- FARBEN ÜBERSCHRIFTEN & AKZENTE --- */
    --color-h1: #e65100;
    --color-h2: #ef6c00;
    --color-highlight: #ff9800;
    --color-highlight-dark: #e65100;
    
    /* --- NAVIGATION & HEADER --- */
    --header-bg: #ffffff;
    --nav-bar-bg: #ff9900;     /* Dein altes Orange */
    --nav-text: #ffffff;
    --nav-hover-bg: #006f3d;
    --nav-dropdown-bg: #339900; /* Dein altes Grün */
    --nav-mobile-bg: #26231d;
    --nav-border: #d8d0ca;
    --subnav-bar-bg: #339900;
    
    /* --- STATUSFARBEN --- */
    --color-confirm: #8bc34a;
    --color-info: #03a9f4;
    --color-warning: #f44366;
    
    /* --- BUTTONS --- */
    --color-btn-bg: #ef6c00;
    --color-btn-secondary-bg: #ff9900;
    
    /* --- HINTERGRÜNDE & RAHMEN --- */
    --bg-dark: #26231d;
    --bg-light: #f3efed;
    --border-light: #efe9e3;
    --border-medium: #d8d0ca;
    --border-dark: #a39994;
    --shadow-color: rgba(0,0,0,0.2);
}

/* --- 1. BASIS SETUP --- */
html { font-size: 15px; }
@media (max-width: var(--breakpoint-mobile)) { html { font-size: 13px; } }

body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-text-inv);
}

::selection { background: var(--color-selection); color: var(--color-text-inv); }

/* --- 2. TYPOGRAFIE --- */
h1, .h1 { font-size: 1.86667em; color: var(--color-h1); }
h2, .h2 { font-size: 1.6em; color: var(--color-h2); }
h3, .h3 { font-size: 1.4em; color: var(--color-text); }
h4, .h4 { font-size: 1.2em; color: var(--color-text); margin: 0; }

a { color: var(--color-link); text-decoration: none; transition: color 0.3s ease; }
a:hover { text-decoration: underline; }

p.drop-cap:first-letter, span.drop-cap {
    background-color: var(--nav-bar-bg) !important;
    color: var(--color-text-inv) !important;
}

/* --- 3. HEADER & NAVIGATION --- */
.page-header { 
    background-color: var(--header-bg) !important; 
    margin-top: 0;
}

.main-navigation-wrapper { background-color: var(--nav-bar-bg) !important; }

.main-navigation > ul > li > a,
.main-navigation > ul > li > span,
.main-navigation > ul > li > strong {
    color: var(--nav-text) !important;
}

.main-navigation > ul > li:hover > a,
.main-navigation > ul > li:hover > span {
    color: var(--nav-hover-bg) !important;
}

.main-navigation ul ul { background-color: var(--nav-dropdown-bg) !important; }

.main-navigation > ul > li > a.active:not(.highlight):after, .main-navigation > ul > li > a.trail:not(.highlight):after, .main-navigation > ul > li > a.forward:not(.highlight):after, .main-navigation > ul > li > strong.active:not(.highlight):after, .main-navigation > ul > li > strong.trail:not(.highlight):after, .main-navigation > ul > li > strong.forward:not(.highlight):after, .main-navigation > ul > li > span.active:not(.highlight):after, .main-navigation > ul > li > span.trail:not(.highlight):after, .main-navigation > ul > li > span.forward:not(.highlight):after {
    background-color: var(--nav-bar-bg);
}


/* Subnavigation (Zusatz aus deiner alten Datei) */
.secondary-navigation-wrapper,
.secondary-navigation li > a.active,
.secondary-navigation li > a.trail,
.secondary-navigation li > span.active {
    background-color: var(--subnav-bar-bg);
    color: var(--color-text-inv);
}


.secondary-navigation li > a, .secondary-navigation li > strong, .secondary-navigation li > span.active, .secondary-navigation li > span.trail, .secondary-navigation li > span.forward {
    color: var(--color-text-inv);
}

.secondary-navigation li > a:hover, .secondary-navigation li > a:focus {
    color: var(--nav-hover-bg);
}


/* --- 4. ACCORDION (Deine alten Anpassungen auf Variablen umgestellt) --- */
.ce_accordion .toggler { color: var(--color-text-inv); background-color: var(--nav-bar-bg); }
.ce_accordion .toggler:hover { background-color: var(--nav-dropdown-bg); }
.ce_accordion .toggler.active { background-color: var(--nav-dropdown-bg); }
.ce_accordion .accordion { background-color: var(--bg-light); }

/* --- 5. FORMULARE & LOGIN --- */
fieldset { border: 0 solid var(--nav-dropdown-bg); }
legend { color: var(--color-text-light); }
.mandatory { padding-left: 5px; }

#tl_login_29 .submit { background-color: var(--nav-dropdown-bg); }
.mod_login h5 { color: var(--nav-dropdown-bg); }

/* --- 6. FOOTER --- */
.page-footer, .footer-copyright { 
    background-color: var(--color-text-inv); 
    color: var(--color-selection) !important;
}
.page-footer a { color: var(--color-text-inv) !important; }

.footer-top-link:after { color: var(--color-text-inv);  background-color: var(--color-btn-bg) !important;}

.footer-top-link:hover:after { background-color: color-mix(in srgb, var(--color-btn-bg), var(--color-text-inv) 90%) !important;	color: var(--color-btn-bg); }


@media screen and (max-width: /*:= $v['breakpoint-mobile'] */) {
	.footer-top-link {
		margin-top: 1.66667em;
	}
}


/* --- 7. SPEZIFISCHE LAYOUT-ELEMENTE --- */
.page { padding-top: 0; margin-top: 0; background-color: var(--color-text-inv); }

.centered-wrapper.-highlight-color { background-color: var(--color-highlight); }

.headline-box:after { background-color: var(--color-highlight) !important; }

.main-content ul li[data-icon]:before { color: var(--color-selection) !important; }

.pricing-table-column.-featured, 
.pricing-table-column-title {
    background-color: var(--nav-dropdown-bg) !important;
}

.image-reduce-brightness .centered-wrapper-background {
    filter: brightness(75%);
}

/* FAQ Anpassung */
.faq-full section {
    margin: 2.4em 0;
    padding-left: 0;
}

/* Buttons */

a.-left, a.konfiguratorbutton {
    background-color: var(--color-btn-bg);
}

a.-left:hover, a.konfiguratorbutton:hover  {
    filter: brightness(0.9);
    background-color: var(--color-btn-bg);
    text-decoration: none;
}

button.-secondary, .button.-secondary, input[type="submit"].-secondary, .main-navigation-search-form button, .feature-box-link.-secondary, .headline-box-link.-secondary, .pricing-table-plan a.-secondary, .feature-box-link, .headline-box-link, .pricing-table-plan a, button, .button, input[type="submit"], input[type="reset"], input[type="button"] {
    background-color: var(--color-btn-bg);
}

button.-secondary:hover, .button.-secondary:hover, input[type="submit"].-secondary:hover, .main-navigation-search-form button:hover, .feature-box-link:hover, .headline-box-link:hover, .pricing-table-plan a:hover, button.-secondary:focus, .button.-secondary:focus, input[type="submit"].-secondary:focus, .main-navigation-search-form button:focus, .feature-box-link:focus, .headline-box-link:focus, .pricing-table-plan a:focus, button:hover, button:focus, .button:hover, .button:focus, input[type="submit"]:hover, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="button"]:hover, input[type="button"]:focus  {
    filter: brightness(0.9);
    background-color: var(--color-btn-bg);
    text-decoration: none;
}

.login_info {
    color: var(--color-text);
}