/*
 * heiler-sport.de — Custom CSS für Oneo 5.7
 * Regel: main.css, icons.css, normalize.css NIE anfassen.
 * Farbänderungen: NUR die CSS-Variablen in :root anpassen.
 */

/* =============================================
 * 0. CSS-VARIABLEN (Corporate Colors heiler-sport)
 * ============================================= */
:root {
    /* Farben */
    --color-text:           #212121;
    --color-text-light:     #9e9e9e;
    --color-text-inv:       #ffffff;
    --color-link:           #ff6f00;
    --color-selection:      #ff9900;

    --color-h1:             #e65100;
    --color-h2:             #ef6c00;
    --color-highlight:      #ff9900;
    --color-highlight-dark: #cc5900;

    --color-confirm:        #8bc34a;
    --color-info:           #03a9f4;
    --color-warning:        #f44336;

    /* Navigation */
    --nav-bar-bg:           #ff9900;
    --nav-text:             #ffffff;
    --nav-hover-color:      #006f3d;
    --nav-dropdown-bg:      #339900;
    --nav-mobile-bg:        #26231d;

    /* Buttons */
    --btn-bg:               #ef6c00;
    --btn-bg-secondary:     transparent;

    /* Hintergründe */
    --bg-dark:              #26231d;
    --bg-light:             #f3efed;
    --border-light:         #efe9e3;
    --border-medium:        #d8d0ca;
    --bg-timeline:          #9e9e9e;

    /* Swiper */
    --swiper-theme-color:   #ff9900;
}

/* =============================================
 * 1. BASIS & TYPOGRAFIE
 * ============================================= */

html {
    -webkit-tap-highlight-color: var(--color-highlight);
}

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

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

h1, .h1 { color: var(--color-h1); }
main-content, .h2 { color: var(--color-h2); }
h3, .h3 { color: var( --color-highlight); }

/* =============================================
 * 2. NAVIGATION & HEADER
 * ============================================= */

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

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

/* Hover + Active */
.main-navigation > ul > li > a:hover,
.main-navigation > ul > li > a:focus,
.main-navigation > ul > li > a.highlight,
.main-navigation > ul > li > strong.trail,
.main-navigation > ul > li > strong.forward,
.main-navigation > ul > li > span.active,
.main-navigation > ul > li > span.trail,
.main-navigation > ul > li > span.forward {
    color: var(--nav-hover-color) !important;
}

/* Unterstrich-Linie */
.main-navigation > ul > li > a:before {
    border: 2px solid var(--nav-bar-bg);
}

/* Active-Unterstrich */
.main-navigation > ul > li > a.active:not(.highlight):after,
.main-navigation > ul > li > a.trail: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 > span.active:not(.highlight):after,
.main-navigation > ul > li > span.trail:not(.highlight):after {
    background-color: var(--nav-bar-bg);
}

/* Dropdown-Pfeil */
.main-navigation > ul > li.submenu:hover > a:after,
.main-navigation > ul > li.submenu:hover > span.trail:after,
.main-navigation > ul > li.submenu:hover > span.forward:after {
    border-top: 4px solid var(--nav-bar-bg);
}
.header-navigation.is-bottom .main-navigation > ul > li.submenu:hover > a:after {
    border-bottom: 4px solid var(--nav-bar-bg);
}

/* Dropdown-Menü */
.main-navigation > ul > li > ul,
.main-navigation ul ul {
    background-color: var(--nav-dropdown-bg) !important;
}
.main-navigation > ul > li > ul a:hover {
    color: var(--nav-bar-bg) !important;
}

.mega-dropdown {

	background: #339900;
}
/* Mega Menu */

.mega-dropdown-column ul a {
    color: var(--color-text-inv);
}  

.mega-dropdown-column h1 a {
    color: var (--color-text-inv);
}

.mega-dropdown-column h2,
.mega-dropdown-column h3 {
    color: var(--color-text-inv);
}
.mega-dropdown-column ul a:hover {
    color: var(--color-text-inv);
}
.main-navigation-search > a:hover,
.main-navigation-search > a:focus {
    color: var(--nav-bar-bg);
}

/* Mobile Nav */
.main-navigation-mobile-open {
    background: var(--nav-bar-bg);
    color: var(--nav-bar-bg);
    text-indent: 30px;
    line-height: 1.2;
}
.main-navigation-mobile-open:after {
    position: absolute;
    top: 11px; right: 11px; left: 11px;
}
.main-navigation-mobile a,
.main-navigation-mobile span.active,
.main-navigation-mobile span.trail,
.main-navigation-mobile span.forward,
.main-navigation-mobile li li {
    color: var(--nav-text);
}

/* Mobile-Breakpoint 1190px (statt Oneo-Standard 900px) */
@media screen and (max-width: 1190px) {
    .main-navigation { display: none; }
    .secondary-navigation { display: none; }
    .mega-dropdown { background-image: none !important; }
    .main-navigation-mobile-open { display: block; }
    .main-navigation-mobile.is-enabled { display: block; position: fixed; }
    .hide-on-mobile { display: none !important; }
    .logo {
        float: none;
        text-align: center;
        margin-left: 0;
        padding-top: 0.8em;
    }
    .logo img { display: inline; height: 3em; }
    .main-navigation {
        zoom: 1;
        position: relative;
        float: none;
        clear: both;
        padding-left: 1.46667em;
        padding-left: calc(1.46667em + var(--safe-area-left));
    }
    .main-navigation:before,
    .main-navigation:after { content: ""; display: table; }
    .main-navigation:after { clear: both; }
}
@media (min-width: 1191px) {
    .show-on-mobile { display: none !important; }
}

/* Sekundäre Navigation */
.secondary-navigation-wrapper,
.secondary-navigation li > a.active,
.secondary-navigation li > a.trail,
.secondary-navigation li > span.active {
    background-color: var(--nav-dropdown-bg);
    color: var(--nav-text);
}
.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(--nav-text);
}
.secondary-navigation li > a:hover,
.secondary-navigation li > a:focus {
    color: var(--nav-hover-color) !important;
}
.secondary-navigation li > strong.trail,
.secondary-navigation li > strong.forward,
.secondary-navigation li > span.active,
.secondary-navigation li > span.trail,
.secondary-navigation li > span.forward {
    background-color: var(--nav-bar-bg);
    color: var(--nav-text);
}
.secondary-navigation li {
    padding-left: 1em;
    padding-right: 1em;
}

/* Telefonheader + Sprachenwechsler */
.page-header { margin: 0 0 0 auto; padding: 0; text-align: right; }
.telefonheader {
    display: block;
    margin-left: auto;
    background-color: var(--nav-bar-bg);
    font-size: 15px;
    color: var(--nav-text);
}
.telefonheader a:link,
.telefonheader a:visited { color: var(--nav-text); }
.telefonheader a:hover   { color: var(--nav-hover-color); }

.mod_changelanguage .level_1 {
    margin-top: 0; margin-bottom: 0;
    padding-top: 10px; padding-bottom: 0;
    background-color: var(--nav-bar-bg);
}
.mod_changelanguage {
    display: block;
    padding-bottom: 10px;
    background-color: var(--nav-bar-bg);
}
.mod_changelanguage li {
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    color: var(--nav-text);
}
.mod_changelanguage li a:link,
.mod_changelanguage li a:visited,
.mod_changelanguage li a:active { color: var(--nav-text); }

/* Header-Navigation links-ausgerichtet */
.header-navigation { margin-right: auto; text-align: left; }

/* Mobile Bold-Fix */
.mobile-navigation-active strong, b { margin: 0.92em; }

/* =============================================
 * 3. BUTTONS & FORMULARE
 * ============================================= */

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

button.-secondary, .button.-secondary, input[type="submit"].-secondary {
    background-color: var(--btn-bg-secondary);
}

input:focus,
textarea:focus {
    border-color: var(--nav-bar-bg);
}
.main-content label .mandatory { color: var(--nav-bar-bg); }

select {
    border: 1px solid #dedede;
    height: 3em;
}

.button.-tertiary { color: var(--color-highlight); }

.button.-tertiary:hover { color: var(--color-highlight-dark); background: transparent !important;}

button:hover, button:focus, .button:hover, .button:focus, input[type="submit"]:hover, input[type="submit"]:focus, .feature-box-link:hover, .headline-box-link:hover, a.-left:hover, a.konfiguratorbutton:hover
/* iOS Zoom-Verhinderung */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select, textarea, input { font-size: 16px; }
}

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

/* =============================================
 * 4. INHALTS-ELEMENTE (Oneo Custom Elements)
 * ============================================= */

/* Zentrierter Wrapper */
.centered-wrapper.-highlight-color { background-color: var(--color-highlight); }

/* Blockquote */
blockquote:before,
.main-content > q:before { color: var(--color-highlight); }

/* Information */
.information                   { color: var(--nav-bar-bg); }
p.information:before,
div.information:before,
span.information:before        { background: var(--nav-bar-bg); }

/* Accordion */
.ce_accordion .toggler         { color: var(--nav-text); background-color: var(--nav-bar-bg); }
.ce_accordion .toggler:hover   { color: var(--nav-text); background-color: var(--nav-dropdown-bg); }
.ce_accordion .toggler.active  { color: var(--nav-text); background-color: var(--nav-dropdown-bg); }
.ce_accordion .accordion       { background-color: var(--bg-light); }
.content-accordion .handorgel__header__button:hover,
.content-accordion .handorgel__header__button:focus-visible { color: var(--color-highlight); }

/* Feature Box */
.feature-box-text .feature-box-line        { background: var(--color-highlight); }
.feature-box-text .feature-box-subheadline { color: var(--color-highlight); }

/* Fading Boxes */
.fading-boxes-item-image { background-color: var(--color-highlight); }
.fading-boxes-item-link  { background: var(--color-highlight); }
.fading-boxes-item-image:after { top: 6em; font-size: 1.6em; }
.fading-boxes-item-text h3     { font-size: 1.6em; }

/* Icon Boxes */
.icon-boxes-item h3                           { color: var(--color-highlight); }
.icon-boxes-item.-circle .icon-boxes-item-icon { border: 2px solid var(--color-highlight); color: var(--color-highlight); }
.icon-boxes-item-link.-link                   { color: var(--color-highlight); }

/* Portfolio */
.filter-navigation > ul li a.active  { background: var(--color-highlight); }
.portfolio-boxes-item-category        { background: var(--color-highlight); }
.portfolio-boxes-item-image:before    { bottom: -7em; }

/* Counter Boxes */
.counter-boxes-item-icon { color: var(--color-highlight); }
.counter-boxes-item:before { color: var(--color-highlight); }

/* Team Boxes */
.team-boxes-image-wrapper { background-color: var(--color-highlight); }
.team-boxes-social-icons:after { background: var(--color-highlight); }

/* Icon List */
.multicolumn-icon-list li:before { color: var(--color-highlight); }
.main-content ul li[data-icon]:before { color: var(--color-selection) !important; }

/* Anchor Nav */
.anchor-nav-item-icon { color: var(--color-highlight); }

/* Headline Box */
.headline-box:after { background: var(--color-highlight) !important; }
.headline-box .headline-box-subheadline { color: var(--color-highlight); }

/* Teaser Boxes */
.teaser-boxes-item .teaser-boxes-label {
    color: var(--color-highlight);
    border: 2px solid var(--color-highlight);
}

/* Testimonial */
.testimonial-item-icon { color: var(--color-highlight); }

/* Skills */
.skills-item-meter-inner { color: var(--color-highlight); }

/* Tab Navigation */
.tab-navigation a.is-active {
    box-shadow: 0 10px 0 -1px white, 0 -3px var(--color-highlight), -3px 0 3px -1px rgba(0,0,0,0.1), 3px 0 3px -1px rgba(0,0,0,0.1);
}
@media screen and (max-width: 599px) {
    .tab-navigation a.is-active {
        border-color: var(--color-highlight);
        background: var(--color-highlight);
        box-shadow: 0 1px var(--color-highlight);
    }
}
.tab-navigation.-image-tabs a:hover,
.tab-navigation.-image-tabs a:focus,
.tab-navigation.-image-tabs a.is-active,
.tab-navigation.-image-tabs a:before { color: var(--color-highlight); }
.tab-navigation.-image-tabs a.is-active:after { border-top-color: var(--color-highlight); }

/* Slider */
.slider-nav-item-icon { color: var(--color-highlight); }
.half-slider { height: 700px; }
@media screen and (max-width: 599px) {
    .half-slider { height: calc(100vh - 6.4em - 2em); }
    .half-slider img { max-width: 100%; height: 700px; }
}

/* Timeline */
.timeline-item-dot { background: var(--color-highlight); }
.timeline:before   { background: var(--bg-timeline); }

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

/* News */
.news-image-teaser h2 a:hover,
.news-image-teaser h2 a:focus    { color: var(--color-highlight); }
.news-boxed-item h3 > a:hover,
.news-boxed-item h3 > a:focus    { color: var(--color-highlight); }
.news-boxed-item-image:after     { color: var(--color-highlight); }
.news-full-category a,
.mod_newsarchive .block .info a  { color: var(--color-highlight); }
.news-tag-list a:hover           { background: var(--color-highlight); }

/* Icon Text Block */
.icon-text-block:before { color: var(--color-highlight); }
.icon-text-block:after  { background: var(--color-highlight); }

/* Info List */
.info-list-item-icon   { color: var(--color-highlight); }
.info-list-item-number { background: var(--color-highlight); }

/* Pagination */
.pagination a:hover,
.pagination a:focus { color: var(--color-highlight); }
.pagination .active { background: var(--color-highlight); color: var(--nav-text); }
.pagination { clear: both; }

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

/* Image Brightness Overlay */
.image-reduce-brightness .centered-wrapper-background { filter: brightness(75%); }

/* =============================================
 * 5. CUSTOM RSCE ELEMENTS (heiler-spezifisch)
 * ============================================= */

/* animierte-ueberschrift-h1 */
.animierte-ueberschrift-h1 h1 {
    position: relative;
    margin: 0;
    font-size: 2.4em;
    line-height: 1.2;
    font-weight: bold;
}
.animierte-ueberschrift-h1 h1 > .typing-headline-dummy {
    color: var(--nav-text);
    pointer-events: none;
}
.animierte-ueberschrift-h1 h1 > .typing-headline-text {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.typing-headline h1 > .typing-headline-dummy {color: transparent;}
.typing-headline h2 > .typing-headline-dummy {color: transparent;}
.typing-headline h3 > .typing-headline-dummy {color: transparent;}

/* headline-subheadline-h1 */
.headline-subheadline-h1 h1 {
    margin: 0.11111em 0;
    font-size: 2.4em;
    font-weight: normal;
    letter-spacing: 0.1em;
    color: inherit;
    text-transform: uppercase;
}
@media screen and (max-width: 599px) {
    .headline-subheadline-h1 h1 { font-size: 1.86667em; }
}
.headline-subheadline-h1 h1.-bold      { font-weight: bold; }
.headline-subheadline-h1 h1.-small     { font-size: 1.6em; }
.headline-subheadline-h1 h1.-medium    { font-size: 2.13333em; }
.headline-subheadline-h1 h1.-large     { font-size: 2.8em; }
.headline-subheadline-h1 h1.-super-size { font-size: 3.46667em; }
.headline-subheadline-h1 h2 {
    margin: 0;
    font-size: 0.93333em;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--color-text-light);
    text-transform: uppercase;
}

/* Typing Headline: nicht-animiert */
.typing-headline.not-animated h2 > .typing-headline-dummy,
.typing-headline.not-animated h3 > .typing-headline-dummy { color: inherit; }

/* News Boxed ohne Icon */
.news-boxed-item-image-ohne-icon { position: relative; margin-bottom: 0.33333em; }
.news-boxed-item-image-ohne-icon:after {
    font: 1.66667em/1 "RockSolid Icons";
    -webkit-font-smoothing: antialiased;
    text-indent: 0;
    display: inline-block;
    position: absolute;
    top: 0; right: 0.8em;
    padding: 0.32em;
    color: var(--color-highlight);
    background: var(--nav-text);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.news-boxed-item-image-ohne-icon img { display: block; width: 100%; height: auto; }

/* =============================================
 * 6. LAYOUT & FOOTER
 * ============================================= */

.footer-top-link:after {
	font: 1.06667em/1 "RockSolid Icons";
	content: "\e01a";
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: geometricPrecision;
	text-indent: 0;
	display: inline-block;
	position: relative;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 1.0625em;
	text-align: center;
	background: #ff6f00;
}
.footer-top-link:hover:after,
.footer-top-link:focus:after {
	color: #ff6f00;
	background-color: #fff0e5;
}
/* =============================================
 * 7. UTILITY-KLASSEN
 * ============================================= */

.orangeschrift      { color: var(--color-highlight); }
.sporthybridturfmenu { font-weight: bold; }
.no-margin-h2 h2   { margin-top: 0; }

/* Sportplatz-Vergleichstabelle */
.gut      { text-align: center; font-size: 1.5em; background-color: #390; }
.mittel   { text-align: center; font-size: 1.5em; background-color: #FFFF57; }
.schlecht { text-align: center; font-size: 1.5em; background-color: var(--color-highlight); }
.einheit  { text-align: center; }

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

/* Responsive Ausblenden */
@media screen and (max-width: 900px) {
    .headerentfernenaufphone,
    .mod_breadcrumb,
    .entfernenaufphone,
    .tabelle { display: none; }
}
@media screen and (min-width: 901px) {
    .entfernenaufdesktop { display: none; }
}

/* =============================================
 * 6. BLUE OVERRIDE — main.css nutzt hardcoded #33b1ec
 *    Nur dekorative Flächen + sichtbare Akzente überschreiben.
 *    Icon-Fonts (RockSolid Icons) NICHT anfassen.
 * ============================================= */

/* Swiper */
:root:root { --swiper-theme-color: #ff9900 !important; }

/* Textselektion */
::selection { background: #ff9900 !important; }

/* Formular-Fokus-Rahmen */
input:focus, textarea:focus { border-color: #ff9900 !important; }
.main-content label .mandatory { color: #ff9900 !important; }

/* Portfolio Hover-Overlay */
.portfolio-tiles-item-link       { background: rgba(255, 153, 0, 0.85) !important; }
.portfolio-tiles-item-link h4    { color: #ffffff !important; }
.portfolio-boxes-item-more       { background: #ff9900 !important; }

/* Fading Boxes Overlay */
.fading-boxes-item-image  { background-color: #ff9900 !important; }
.fading-boxes-item-text   { background: rgba(255, 153, 0, 0.85) !important; }
.fading-boxes-item-link   { background: #ff9900 !important; }

/* Feature Box Linie + Subheadline */
.feature-box-text p::before          { background: #ff9900 !important; }
.feature-box-text .feature-box-subheadline { color: #ff9900 !important; }

/* Centered Wrapper Highlight-Hintergrund */
.centered-wrapper.-highlight-color { background-color: #ff9900 !important; }

/* Headline Box Linie oben */
.headline-box::after { background: #ff9900 !important; }

/* Teaser Boxes Label-Rahmen */
.teaser-boxes-item .teaser-boxes-label {
    color: #ff9900 !important;
    border-color: #ff9900 !important;
}

/* Team Boxes Bild-Overlay */
.team-boxes-image-wrapper { background-color: #ff9900 !important; }

/* Filter Navigation aktiver Filter */
.filter-navigation > ul li a.active { background: #ff9900 !important; }

/* Testimonial Anführungszeichen */
.testimonial::before,
blockquote.testimonial::before { color: #ff9900 !important; }

/* Blockquote Anführungszeichen */
.main-content blockquote::before { color: #ff9900 !important; }

/* Pricing Table */
.pricing-table-plan p       { background: #ff9900 !important; }
.pricing-table-plan p::after { border-top-color: #ff9900 !important; }

/* Drop Cap */
p.drop-cap::first-letter, span.drop-cap { background: #ff9900 !important; }

/* Suchformular Overlay */
.main-navigation-search-form { background: rgba(255, 153, 0, 0.92) !important; }

/* Timeline Icon-Kreise (data-icon Attribute) */
.timeline-item[data-icon]::before { background: #ff9900 !important; }

/* Icon Boxes — nur die Kreis-Rahmen-Variante (-headline-icon) */
.-headline-icon > .icon-boxes-item-icon {
    border-color: #ff9900 !important;
    color: #ff9900 !important;
}


/* Typing Headline */

.typing-headline-text h2 {color: var(--color-text) ;}

.news-boxed-item-image-more > a {background: rgba(255, 111, 0, 0.5) !important; }

.portfolio-tiles-item-link {
    background: rgba(255, 111, 0, 0.8) !important;
}

.multicolumn-icon-list > h2::after {
    background: var(--color-highlight) ;
}

.typing-headline h2 > .typing-headline-text {color: var(--color-text) !important;}

.-color-inverted .typing-headline h1 > .typing-headline-text {color: var(--color-text-inv) !important;}
.-color-inverted .typing-headline h2 > .typing-headline-text {color: var(--color-text-inv) !important;}
.-color-inverted .typing-headline h3 > .typing-headline-text {color: var(--color-text-inv) !important;}


/* Rocksolid Icons */

@font-face {
  font-family: "RockSolid Icons";
  src:        url("../fonts/rocksolid-icons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Pricimg Table */

.pricing-table-plan h3 {background: var(--color-link);}