/* Zentrales Farbdesign, eingebunden ueber inc/nav_header.php. */
:root {
    /* Einzelne Bestandsseiten laden mycss.css erneut im Seiteninhalt. */
    --primary: #183d32 !important;
    --primary-dark: #183d32 !important;
    --tf-green: #183d32;
    --tf-green-hover: #285b48;
    --tf-lime: #c4c878;
    --tf-lime-hover: #d3d694;
    --tf-surface: #f7f8f2;
    --tf-soft: #edf2e3;
    --tf-border: #d5dfcd;
    --tf-text: #242b27;
    --tf-muted: #566459;
    --ink: var(--tf-text);
    --muted: var(--tf-muted);
    --line: var(--tf-border);
    --blue: var(--tf-green);
    --blue-dark: var(--tf-green-hover);
    --green: var(--tf-green);
    --wash: var(--tf-surface);
}

body.page-main {
    color: var(--tf-text);
    background-color: var(--tf-surface);
}

/* Kraeftigeres Gelbgruen fuer Buttons; die Flaechen behalten Wiesengruen. */
body :is(button, .button, .btn, .btn-primary, .btn-tourenfex, .btn-profile, .tf-tb-cta, .tfx-pp-btn, .tfx-guide-action, .hu-betriebskonto-button, .bp-oeffentlich, .community-primary-btn, .community-choice-btn, .werben-aktion, .werben-muster-button, #scroll-to-top) {
    --tf-lime: #b5d334;
    --tf-lime-hover: #c5df55;
}

/* Gemeinsame Grundelemente auf Inhalts-, Touren- und Profilseiten. */
body.page-main :is(.input-text, .input-select, .input-textarea) {
    color: var(--tf-text);
}

body.page-main :is(.text-color, .btn-text, .counter .value span:last-child) {
    color: var(--tf-green) !important;
}

body.page-main main a:not([class]):not([style]):not(.light a) {
    color: var(--tf-green);
}

body.page-main :is(.tab-nav li.active a, .tab-nav li:hover a, .pagination li.page.active a, .pagination li.page:hover a) {
    color: #fff;
    background: var(--tf-green);
    border-color: var(--tf-green);
}

body.page-main :is(.bg-color, main > section.bg-color) {
    background-color: var(--tf-green);
}

body.page-main .btn.btn-border:not(:is(.btn-danger, .btn-warning, .btn-success, .btn-info)) {
    color: var(--tf-green);
    background: transparent;
    border-color: var(--tf-green);
}

body.page-main .btn.btn-border:not(:is(.btn-danger, .btn-warning, .btn-success, .btn-info)):hover {
    color: var(--tf-green);
    background: var(--tf-lime);
}

body.page-main :is(.form-box input, .form-box select, .form-box textarea):focus {
    border-color: var(--tf-green);
}

body.page-main :is(#scroll-to-top, .scroll-top-btn) {
    color: var(--tf-green) !important;
    background: #d5dfcd !important;
}

body.page-main :is(#scroll-to-top, .scroll-top-btn):hover {
    color: #fff !important;
    background: var(--tf-green) !important;
}

/* Navigation: auch Dropdowns, Suche und mobiles Menue. */
body.page-main #bfx-custom-header,
body.page-main #bfx-custom-header.bfx-scrolled,
body.page-main #bfx-custom-header .bfx-search-bar-container {
    background: var(--tf-green) !important;
}

body.page-main #bfx-custom-header .bfx-dropdown-ul,
body.page-main #bfx-custom-header .bfx-submenu-side,
body.page-main #bfx-custom-header .bfx-mega-panel {
    background: var(--tf-green) !important;
}

#bfx-custom-header .bfx-main-menu-links a:hover,
#bfx-custom-header .bfx-main-menu-links button:hover,
#bfx-custom-header .bfx-main-menu-links a:focus-visible,
#bfx-custom-header .bfx-main-menu-links button:focus-visible {
    color: var(--tf-lime) !important;
}

#bfx-custom-header .bfx-main-menu-links > li > a.bfx-active::after {
    background: var(--tf-lime);
}

#bfx-custom-header .bfx-mega-heading {
    color: var(--tf-lime);
}

#bfx-custom-header .bfx-question-nav-icon [data-open-question-badge] {
    border-color: var(--tf-green);
}

#bfx-custom-header .bfx-search-flex button {
    color: var(--tf-green);
    background: var(--tf-lime);
}

@media (max-width: 1100px) {
    #bfx-custom-header .bfx-main-menu-links {
        background: var(--tf-green);
    }
}

/* Helle Inhaltsflaechen; weisse Bildbeschriftungen bleiben erhalten. */
body.page-main .title > p::before,
body.page-main .title > p::after {
    background-color: var(--tf-lime);
}

body.page-main main > section.section-color,
body.page-main .tf-discover-section {
    background-color: var(--tf-surface);
}

body.page-main main > section:not(.light):not(.as-intro-band) :is(h1, h2, h3, h4, h5, h6),
body.page-main .tf-section-head h2,
body.page-main .tf-trend-card__title {
    color: var(--tf-green);
}

body.page-main .tf-highlight-section .tf-hl-card .tf-hl-card__title,
body.page-main .tf-region-section .tf-region-card .tf-region-card__body h3 {
    color: #fff;
}

/* Der Bildkopf des Tourenbuchs braucht helle Schrift statt Inhaltsfarben. */
body.page-main .as-intro-band :is(.as-intro-title, .fex-hero-title) {
    color: #fff;
}

body.page-main .as-intro-band .as-eyebrow {
    color: var(--tf-lime);
}

body.page-main .as-intro-band .fex-hero-title .word.highlight {
    color: #9de46b;
}

body.page-main .as-intro-band .as-eyebrow::before,
body.page-main .as-intro-band .fex-hero-slide-dot[aria-current="true"] {
    background: var(--tf-lime);
}

body.page-main main > section:not(.light):not(.as-intro-band) a:not([class]),
body.page-main .btn-text,
body.page-main .tf-eyebrow,
body.page-main .icon-box > i {
    color: var(--tf-green);
}

body.page-main main > section:not(.light):not(.as-intro-band) a:not([class]):hover,
body.page-main .btn-text:hover {
    color: var(--tf-green-hover);
    text-decoration: underline;
}

body.page-main .tf-section-sub,
body.page-main .tf-trend-card__meta,
body.page-main .tf-discover-tab__hint,
body.page-main .tf-intro-text,
body.page-main .tf-pill-copy small {
    color: var(--tf-muted);
}

/* Primaere Aktionen: dunkle Schrift auf Gelbgruen. */
body.page-main :is(.btn, .btn-primary, .btn-tourenfex, .btn-profile, .tf-tb-cta):not(:is(.btn-danger, .btn-warning, .btn-success, .btn-info, .btn-delete, .tour-delete-btn)),
body.page-main .tf-discover-controls button:hover:not(:disabled) {
    color: var(--tf-green);
    background: var(--tf-lime);
    border-color: var(--tf-lime);
}

body.page-main :is(.btn, .btn-primary, .btn-tourenfex, .btn-profile, .tf-tb-cta):not(:is(.btn-danger, .btn-warning, .btn-success, .btn-info, .btn-delete, .tour-delete-btn)):hover {
    color: var(--tf-green);
    background: var(--tf-lime-hover);
    border-color: var(--tf-green);
}

/* Tourenbuch: Aktionen im Kopfbereich und Tour-Moment im zentralen Farbdesign. */
body.page-main #tour_method_selection #btn-db,
body.page-main :is(.fex-ranking-sticky-actions, .fex-hero-actions) .fex-hero-btn-primary {
    color: var(--tf-green) !important;
    background: var(--tf-lime);
    border: 1px solid var(--tf-green) !important;
}

body.page-main :is(.fex-ranking-sticky-actions, .fex-hero-actions) .fex-hero-btn-primary:hover {
    background: var(--tf-lime-hover);
    border-color: var(--tf-green);
}

body.page-main #tour_method_selection #btn-custom,
body.page-main :is(.fex-ranking-sticky-actions, .fex-hero-actions) .fex-hero-btn-secondary {
    color: #fff !important;
    background: var(--tf-green);
    border: 1px solid var(--tf-lime) !important;
}

body.page-main :is(.fex-ranking-sticky-actions, .fex-hero-actions) .fex-hero-btn-secondary:hover {
    background: var(--tf-green-hover);
    border-color: var(--tf-lime);
}

/* Hero-Kacheln: Bilder und Logo werden nicht eingefaerbt. */
body.page-main .tf-home-hero__tile {
    background: rgba(24, 61, 50, .88);
    border-color: rgba(196, 200, 120, .55);
}

body.page-main .tf-home-hero__tile:hover {
    color: #fff;
    background: var(--tf-green);
    border-color: var(--tf-lime);
}

/* Tabs, Karten und Slider-Steuerung; Score-/Rangfarben bleiben bestehen. */
body.page-main .tf-discover-tab {
    color: var(--tf-text);
    background: #fff;
    border-color: var(--tf-border);
    box-shadow: 0 2px 5px rgba(24, 61, 50, .04);
}

body.page-main .tf-discover-tab:hover {
    border-color: var(--tf-green);
}

body.page-main :is(.tf-discover-tab__icon, .tf-discover-tab__mark) {
    color: var(--tf-green);
    background: var(--tf-soft);
}

body.page-main .tf-discover-tab[aria-selected="true"] {
    color: #fff;
    background: var(--tf-green);
    border-color: var(--tf-green);
    box-shadow: 0 9px 20px rgba(24, 61, 50, .18);
}

body.page-main .tf-discover-tab[aria-selected="true"] :is(.tf-discover-tab__icon, .tf-discover-tab__mark) {
    color: var(--tf-green);
    background: var(--tf-lime);
}

body.page-main .tf-discover-tab[aria-selected="true"] .tf-discover-tab__hint {
    color: #e5eddf;
}

body.page-main .tf-trend-card__body,
body.page-main .tf-tb-date,
body.page-main .tf-pill-link > i {
    background: var(--tf-soft);
}

body.page-main :is(.tf-tb-author, .tf-tb-date) {
    color: var(--tf-green);
}

body.page-main .tf-about-card {
    background: linear-gradient(160deg, #fff, var(--tf-soft));
    border-color: var(--tf-border);
}

body.page-main :is(.tf-stat-item, .tf-pill-link) {
    color: var(--tf-green);
    border-color: var(--tf-border);
}

body.page-main .tf-pill-link:hover {
    background: var(--tf-soft);
    border-color: var(--tf-green);
}

body.page-main :is(.tf-stat-item i, .tf-pill-link > i, .tf-pill-arrow) {
    color: var(--tf-green);
}

body.page-main :is(.tf-discover-card, .tf-highlight-section .tf-hl-card) {
    background-color: var(--tf-green);
    border-color: var(--tf-border);
}

body.page-main .tf-discover-card__metric {
    color: var(--tf-green);
    background: var(--tf-lime);
    border-color: var(--tf-lime);
    box-shadow: 0 2px 8px rgba(24, 61, 50, .18);
}

body.page-main .tf-discover-controls button {
    color: var(--tf-green);
}

/* Fokus bleibt auf hellen Flaechen und dunklen Bildern sichtbar. */
body.page-main :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--tf-green);
    outline-offset: 3px;
}

#bfx-custom-header :is(a, button, input):focus-visible,
body.page-main .tf-home-hero__tile:focus-visible,
body.page-main .tf-discover-card__image:focus-visible,
body.page-main .tf-hl-card:focus-visible,
body.page-main footer a:focus-visible {
    outline-color: var(--tf-lime);
}

/* Tourenbuch-Aufruf deutlich vom dunklen Footer absetzen. */
body.page-main #fex-tb-band {
    color: var(--tf-green);
    background: var(--tf-lime);
}

body.page-main #fex-tb-band :is(.fex-tb-band-title, .fex-tb-band-text) {
    color: var(--tf-green);
}

body.page-main #fex-tb-band .fex-tb-band-giveaway {
    color: #fff;
    background: var(--tf-green);
    border-color: var(--tf-green);
}

body.page-main #fex-tb-band .fex-tb-band-giveaway:hover {
    background: var(--tf-green-hover);
}

body.page-main #fex-tb-band .fex-tb-band-btn {
    color: #fff !important;
    background-color: var(--tf-green);
}

body.page-main #fex-tb-band .fex-tb-band-btn:hover {
    background-color: var(--tf-green-hover);
}

body.page-main #fex-tb-band .fex-tb-band-giveaway:focus-visible {
    outline-color: var(--tf-green);
}

body.page-main footer {
    background: var(--tf-green);
    color: #fff;
}

body.page-main footer :is(h3, h4, a) {
    color: #fff;
}

body.page-main footer a:hover {
    color: var(--tf-lime);
}

/* Tourensuche und Tourenberichte verwenden eigene Farbvariablen. */
body.page-main .probe-main {
    --green: var(--tf-green);
    --ink: var(--tf-text);
    --muted: var(--tf-muted);
    --line: var(--tf-border);
    --canvas: var(--tf-surface);
}

body.page-main :is(.filter-apply, .mobile-view-toggle button[aria-pressed="true"]) {
    color: var(--tf-green);
    background: var(--tf-lime);
}

body.page-main :is(.filter-apply:hover, .mobile-view-toggle button[aria-pressed="true"]:hover) {
    background: var(--tf-lime-hover);
}

body.page-main .tf-tours-hero__title .highlight {
    color: #9de46b;
}

body.page-main .tf-tours-hero__image-note a:hover {
    color: var(--tf-lime);
}

body.page-main :is(.tour-geo-subbar, .tf-news-art, .tta-pill.tta-offline-btn-downloaded, .tta-subbar-btn.tta-offline-btn-downloaded) {
    color: #fff;
    background: var(--tf-green);
    border-color: var(--tf-green);
}

body.page-main #tour-geo-subbar a {
    color: #fff;
}

body.page-main #tour-geo-subbar a:is(:hover, :focus-visible) {
    color: var(--tf-lime);
    outline-color: var(--tf-lime);
}

body.page-main :is(.anchor-nav, .tta-popover-panel, #fex-tourenbuch) {
    background: var(--tf-surface);
    border-color: var(--tf-border);
}

body.page-main :is(.anchor-nav > a, .preview-tour-actions .tta-subbar-btn:not([aria-pressed="true"]):not(.tta-offline-btn-downloaded), .tf-pt-card__body) {
    color: var(--tf-green);
    background: var(--tf-soft);
    border-color: var(--tf-border);
}

body.page-main :is(.anchor-nav > a:hover, .preview-tour-actions .tta-subbar-btn:not([aria-pressed="true"]):not(.tta-offline-btn-downloaded):hover) {
    background: var(--tf-lime);
}

body.page-main :is(.tf-pt-card__title, .tf-pt-card__arrow, .tf-news-title.tf-news-title, .tb-section-head-text h2, .tb-avatar-count, .tb-avatar-count strong, .tf-stat-value, #tf-pwa-banner .tf-pwa-title, #tf-tourbuch-nudge-banner .tf-nudge-title) {
    color: var(--tf-green);
}

/* Bildkarten brauchen helle Beschriftungen statt der allgemeinen Kartenfarbe. */
body.page-main #passende-themen .tf-pt-card :is(.tf-pt-card__body, .tf-pt-card__title, .tf-pt-card__arrow) {
    color: #fff;
}

/* Highlights-Bildkacheln ausserhalb der Slider: helle Schrift und gruener Verlauf. */
body.page-main .tf-hl-card:not(.splide .tf-hl-card) .tf-hl-card__body {
    background: linear-gradient(to top, rgba(24, 61, 50, .9) 0%, rgba(24, 61, 50, .55) 55%, transparent 100%);
}

body.page-main .tf-hl-card:not(.splide .tf-hl-card) :is(.tf-hl-card__title, .tf-hl-card__arrow) {
    color: #fff;
}

body.page-main .tf-hl-card:not(.splide .tf-hl-card) .tf-hl-card__eyebrow {
    color: var(--tf-lime);
}

/* Kartenbedienung: Standort, Routen, Schwierigkeit und Warnungen bleiben fachlich eingefaerbt. */
body.page-main :is(.tfx-map-search button, .tfx-location-control button, .tfx-compass-control:not(.is-following) button, .tfx-offline-head button, .tfx-offline-actions button, .tfx-pp-btn, .tfx-pp-seg button.active, .tfx-point-connection button) {
    color: var(--tf-green);
}

body.page-main :is(.tfx-map-search button:hover, .tfx-map-results button:hover, .tfx-pp-btn:hover, .tfx-map-search button:focus-visible, .tfx-map-results button:focus-visible, .tfx-offline-head button) {
    background: var(--tf-soft);
}

body.page-main :is(.tfx-planner-panel, .tfx-pp-title) {
    color: var(--tf-text);
    background: var(--tf-surface);
}

body.page-main :is(.tfx-pp-head, .tfx-plan-toggle.active, .tfx-point-connection button.is-active) {
    color: #fff;
    background: var(--tf-green);
}

body.page-main .tfx-pp-btn.primary:not(.saved),
body.page-main #tfxExitPlannerDialog button[value="save"],
body.page-main .tfx-map-prompt-actions button {
    color: var(--tf-green);
    background: var(--tf-lime);
    border-color: var(--tf-lime);
}

body.page-main .tfx-pp-btn.primary:not(.saved):hover {
    background: var(--tf-lime-hover);
}

body.page-main .tfx-map-search input[aria-busy="true"] + button::after {
    border-color: var(--tf-border);
    border-top-color: var(--tf-green);
}

body.page-main :is(.tfx-offline-open, .tfx-offline-save, .tfx-plan-toggle) {
    color: #fff;
    background: var(--tf-green);
}

body.page-main :is(.tfx-offline-open, .tfx-offline-save, .tfx-plan-toggle):hover {
    background: var(--tf-green-hover);
}

body.page-main .tfx-pp-title:focus:not(.is-invalid) {
    border-color: var(--tf-green);
}

/* Der Guide nutzt dieselbe Palette, auch auf der eigenstaendigen Offline-Seite. */
body.tfx-offline-page {
    color: var(--tf-text);
    background: var(--tf-surface);
}

body :is(.tfx-guide-entry, .tfx-guide button, .tfx-guide a.tfx-guide-action, .tfx-guide-topics button svg),
body #tfx-guide-slot.tfx-guide-home-slot .tfx-guide-entry strong {
    color: var(--tf-green);
}

body .tfx-guide button.tfx-guide-primary {
    color: var(--tf-green);
    background: var(--tf-lime);
}

body .tfx-guide button.tfx-guide-primary:hover {
    background: var(--tf-lime-hover);
}

body #tfx-guide-slot.tfx-guide-home-slot .tfx-guide-entry,
body .tfx-guide-welcome {
    background: var(--tf-surface);
}

body #tfx-guide-slot.tfx-guide-home-slot .tfx-guide-entry:hover {
    background: var(--tf-soft);
}

body .tfx-guide progress {
    accent-color: var(--tf-green);
}

/* Wetter und Sicherheit: neutrale Karten und Bedienung, keine Mess-/Warnfarben. */
body.page-main .as-wx2-card {
    background: linear-gradient(160deg, #fff, var(--tf-soft));
}

body.page-main :is(.as-wx2-body h3, .as-wx2-five-temp, .wxort-station-name, .wxort-station-temp, .as-pack-icon, .as-pack-dl) {
    color: var(--tf-green);
}

body.page-main :is(.as-wx2-body p, .as-wx2-five-label, .as-pack-meta span) {
    color: var(--tf-muted);
}

body.page-main :is(.as-pack-icon, .wxort-station-temp) {
    background: var(--tf-soft);
}

body.page-main :is(.as-card:hover, .as-pack-card:hover) {
    border-color: var(--tf-green);
}

body.page-main .as-card::before {
    background: radial-gradient(circle, rgba(24, 61, 50, .1), transparent 70%);
}

body.page-main :is(.as-card-go, .as-card-go i) {
    color: var(--tf-green);
}

body.page-main .as-card-go i,
body.page-main .as-card:hover .as-card-go i {
    color: var(--tf-green);
    background: var(--tf-lime);
}

body.page-main .as-wx2-tab {
    color: var(--tf-green);
    background: var(--tf-soft);
}

body.page-main .as-wx2-tab.active {
    color: var(--tf-green);
    background: var(--tf-lime);
}

body.page-main :is(.wx-section-forecast, .as-wx2-forecast-dialog) .as-wx2-tabs .as-wx2-tab {
    color: var(--tf-muted);
    background: none;
}

body.page-main :is(.wx-section-forecast, .as-wx2-forecast-dialog) .as-wx2-tabs .as-wx2-tab.active {
    color: var(--tf-green);
    border-bottom-color: var(--tf-green);
}

body.page-main .wxs-allcams-btn {
    color: var(--tf-green);
    background: var(--tf-surface);
    border-color: var(--tf-green);
}

body.page-main :is(.wxs-allcams-btn:hover, .wxs-cams-view-btn.active) {
    color: var(--tf-green);
    background: var(--tf-lime);
    border-color: var(--tf-lime);
}

body.page-main main > section .as-cam-card .as-cam-body h3 {
    color: #fff;
}

body.page-main :is(.as-wxd-view-toggle button, .wxr-hour-select, .as-wxd-route-time-input) {
    color: var(--tf-green);
    background: var(--tf-soft);
    border-color: var(--tf-border);
}

body.page-main :is(.as-wxd-view-toggle button:hover, .as-wxd-view-toggle button.active, .wxr-day.active) {
    color: var(--tf-green);
    background: var(--tf-lime);
    border-color: var(--tf-green);
}

body.page-main :is(.as-wxd-strip-item.active, .wxr-day:hover) {
    border-color: var(--tf-green);
}

body.page-main .as-wxd-strip-item.active {
    background: var(--tf-soft);
}

body.page-main :is(.as-wxd-hero-temp, .as-wxd-desc-text, .as-wxd-strip-label, .as-wxd-strip-max, .as-wxd-tile-value, .as-wxd-feas-title, .as-wxd-daylight-item, .as-wxd-daylight-reco strong, .wxr-startlabel, .as-wxd-route-time, .as-wxd-route-label, .as-wxd-route-temp, .as-wxd-route-temp-lg, .as-wxd-route-feasibility-item strong) {
    color: var(--tf-green);
}

body.page-main .as-wxd-route-time-marker {
    color: #fff;
    background: var(--tf-green);
}

/* Betriebsregistrierung: helle Beschriftung auf dunkelgruenem Hintergrund. */
body.page-main #betriebskonto.hu-betriebskonto {
    color: #e5eddf;
    background: linear-gradient(135deg, var(--tf-green), var(--tf-green-hover));
}

body.page-main #betriebskonto :is(h2, .hu-betriebskonto-vorteile strong) {
    color: #fff;
}

body.page-main #betriebskonto :is(.hu-betriebskonto-kicker, .hu-betriebskonto-vorteile i) {
    color: var(--tf-lime);
}

body.page-main #betriebskonto .hu-betriebskonto-vorteile i {
    background: rgba(196, 200, 120, .14);
}

body.page-main #betriebskonto :is(.hu-betriebskonto-login, .hu-betriebskonto-vorteile span) {
    color: #e5eddf;
}

body.page-main #betriebskonto a.hu-betriebskonto-button {
    color: var(--tf-green);
    background: var(--tf-lime);
}

body.page-main #betriebskonto a.hu-betriebskonto-button:hover {
    background: var(--tf-lime-hover);
}

body.page-main #betriebskonto a:focus-visible {
    outline-color: var(--tf-lime);
}