/*
Theme Name: Wanderland
Theme URI: https://www.wanderland.at
Description: Wanderland – Österreich mit allen Sinnen erleben. Custom Child Theme für wanderland.at/neu. Modernes, schnelles Outdoor-Theme mit SEO-Silo-Struktur, Custom Post Types für Wanderungen und vollständiger Monetarisierungs-Integration.
Author: Wanderland.at
Version: 2.9.104
Template: twentytwentyfive
Text Domain: wanderland
Tags: hiking, outdoor, austria, custom-post-type, seo-optimized
*/
/* ============================================
WANDERLAND DESIGN SYSTEM
============================================ */
:root {
/* Brand Colors */
--wl-green: #2D6A4F;
--wl-green-dark: #1B4332;
--wl-green-mid: #40916C;
--wl-green-light: #52B788;
--wl-green-pale: #D8F3DC;
--wl-green-ghost: #F0FBF3;
--wl-blue: #1B4F8A;
--wl-blue-light: #2E86C1;
--wl-blue-pale: #E6F1FB;
--wl-gold: #F4A620;
--wl-gold-dark: #C17F14;
--wl-gold-pale: #FEF3DC;
/* Neutrals */
--wl-cream: #FAFAF7;
--wl-white: #FFFFFF;
--wl-dark: #1A1A1A;
--wl-mid: #4A4A4A;
--wl-muted: #757575;
--wl-light: #F5F5F2;
--wl-border: #E2E0DA;
--wl-border-dark: #C8C6BE;
/* Difficulty Colors */
--wl-easy: #1B5E20;
--wl-easy-bg: #E8F5E9;
--wl-medium: #E65100;
--wl-medium-bg: #FFF3E0;
--wl-hard: #B71C1C;
--wl-hard-bg: #FFEBEE;
--wl-alpine: #4A148C;
--wl-alpine-bg: #F3E5F5;
/* Typography */
--wl-font-heading: 'Playfair Display', Georgia, "Times New Roman", serif;
--wl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--wl-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Spacing */
--wl-space-xs: 4px;
--wl-space-sm: 8px;
--wl-space-md: 16px;
--wl-space-lg: 24px;
--wl-space-xl: 40px;
--wl-space-2xl: 64px;
/* Radii */
--wl-radius-sm: 6px;
--wl-radius-md: 16px;
--wl-radius-lg: 16px;
--wl-radius-xl: 24px;
--wl-radius-pill:9999px;
/* Shadows */
--wl-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
--wl-shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
--wl-shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
/* Transitions */
--wl-transition: all 0.2s ease;
}
/* ============================================
RESET & BASE
============================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--wl-font-body);
font-size: 16px;
line-height: 1.7;
color: var(--wl-dark);
background: var(--wl-cream);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--wl-green);
text-decoration: none;
transition: var(--wl-transition);
}
a:hover { color: var(--wl-green-dark); }
/* ============================================
TYPOGRAPHY
============================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--wl-font-heading);
font-weight: 700;
line-height: 1.25;
color: var(--wl-dark);
margin: 0 0 var(--wl-space-md);
}
h1 { font-size: clamp(28px, 5vw, 48px); }
h2 { font-size: clamp(22px, 4vw, 36px); }
h3 { font-size: clamp(18px, 3vw, 24px); }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }
p {
margin: 0 0 var(--wl-space-md);
color: var(--wl-mid);
font-size: 16px;
line-height: 1.75;
}
.lead {
font-size: 18px;
line-height: 1.6;
color: var(--wl-mid);
}
/* ============================================
LAYOUT
============================================ */
.wl-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--wl-space-lg);
}
.wl-container--wide {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--wl-space-lg);
}
.wl-container--narrow {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--wl-space-lg);
}
.wl-section {
padding: var(--wl-space-2xl) 0;
}
.wl-section--sm {
padding: var(--wl-space-xl) 0;
}
/* ============================================
HEADER & NAVIGATION
============================================ */
#wl-header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--wl-green);
transition: background 0.3s ease, box-shadow 0.3s ease;
}
#wl-header.scrolled {
background: var(--wl-green-dark);
box-shadow: var(--wl-shadow-md);
}
.wl-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 88px;
gap: var(--wl-space-lg);
}
/* Logo */
.wl-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.wl-logo__icon {
width: 38px;
height: 38px;
background: rgba(255,255,255,0.15);
border-radius: var(--wl-radius-sm);
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(255,255,255,0.25);
}
.wl-logo__text {
font-family: var(--wl-font-heading);
font-size: 22px;
font-weight: 700;
color: #fff;
letter-spacing: -0.3px;
}
.wl-logo__text span {
color: var(--wl-gold);
}
/* Primary Navigation */
.wl-nav-primary {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.wl-nav-primary > li > a {
display: block;
padding: 8px 14px;
color: rgba(255,255,255,0.88);
font-size: 14px;
font-weight: 500;
border-radius: var(--wl-radius-sm);
transition: var(--wl-transition);
}
.wl-nav-primary > li > a:hover,
.wl-nav-primary > li.current-menu-item > a {
background: rgba(255,255,255,0.12);
color: #fff;
}
/* Dropdown */
.wl-nav-primary li.menu-item-has-children {
position: relative;
}
.wl-nav-primary li.menu-item-has-children > ul.sub-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
background: var(--wl-white);
border-radius: var(--wl-radius-md);
box-shadow: var(--wl-shadow-lg);
list-style: none;
padding: 8px;
margin: 0;
border: 1px solid var(--wl-border);
z-index: 100;
}
.wl-nav-primary li.menu-item-has-children:hover > ul.sub-menu {
display: block;
}
.wl-nav-primary ul.sub-menu li a {
display: block;
padding: 9px 12px;
color: var(--wl-dark);
font-size: 14px;
border-radius: var(--wl-radius-sm);
transition: var(--wl-transition);
}
.wl-nav-primary ul.sub-menu li a:hover {
background: var(--wl-green-ghost);
color: var(--wl-green);
}
/* Nav CTA */
.wl-nav-actions {
display: flex;
align-items: center;
gap: var(--wl-space-sm);
flex-shrink: 0;
}
.wl-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 20px;
font-family: var(--wl-font-ui);
font-size: 14px;
font-weight: 600;
border-radius: var(--wl-radius-sm);
border: none;
cursor: pointer;
transition: var(--wl-transition);
text-decoration: none;
white-space: nowrap;
}
.wl-btn--gold {
background: var(--wl-gold);
color: #3d2600;
}
.wl-btn--gold:hover {
background: var(--wl-gold-dark);
color: #3d2600;
transform: translateY(-1px);
}
.wl-btn--green {
background: var(--wl-green);
color: #fff;
}
.wl-btn--green:hover {
background: var(--wl-green-dark);
color: #fff;
transform: translateY(-1px);
}
.wl-btn--outline {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.5);
}
.wl-btn--outline:hover {
background: rgba(255,255,255,0.12);
color: #fff;
border-color: rgba(255,255,255,0.8);
}
.wl-btn--lg {
padding: 14px 28px;
font-size: 16px;
}
/* Mobile Menu Toggle */
.wl-nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.wl-nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: var(--wl-transition);
}
/* ============================================
HERO – STARTSEITE
============================================ */
.wl-hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--wl-green-dark);
}
.wl-hero__bg {
position: absolute;
inset: 0;
background-image: url('images/hero-bg.jpg');
background-size: cover;
background-position: center;
opacity: 0.45;
}
.wl-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(27, 67, 50, 0.3) 0%,
rgba(27, 67, 50, 0.7) 60%,
rgba(27, 67, 50, 0.9) 100%
);
}
.wl-hero__content {
position: relative;
z-index: 2;
width: 100%;
padding: 80px 0 60px;
}
.wl-hero__label {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.9);
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
padding: 6px 14px;
border-radius: var(--wl-radius-pill);
margin-bottom: 20px;
}
.wl-hero h1 {
color: #fff;
font-size: clamp(36px, 6vw, 64px);
line-height: 1.1;
margin-bottom: 16px;
max-width: 700px;
}
.wl-hero h1 em {
font-style: normal;
color: var(--wl-gold);
}
.wl-hero__sub {
color: rgba(255,255,255,0.8);
font-size: 18px;
max-width: 520px;
margin-bottom: 36px;
}
/* Hero Search */
.wl-hero-search {
display: flex;
max-width: 560px;
background: #fff;
border-radius: var(--wl-radius-lg);
overflow: hidden;
box-shadow: var(--wl-shadow-lg);
margin-bottom: 32px;
}
.wl-hero-search input {
flex: 1;
border: none;
outline: none;
padding: 16px 20px;
font-size: 15px;
font-family: var(--wl-font-body);
color: var(--wl-dark);
background: transparent;
}
.wl-hero-search input::placeholder {
color: var(--wl-muted);
}
.wl-hero-search button {
background: var(--wl-gold);
border: none;
padding: 0 24px;
cursor: pointer;
color: #3d2600;
font-size: 14px;
font-weight: 600;
font-family: var(--wl-font-ui);
transition: var(--wl-transition);
white-space: nowrap;
}
.wl-hero-search button:hover {
background: var(--wl-gold-dark);
}
/* Hero Stats */
.wl-hero-stats {
display: flex;
gap: 32px;
flex-wrap: wrap;
}
.wl-hero-stat {
text-align: center;
}
.wl-hero-stat__num {
display: block;
font-family: var(--wl-font-heading);
font-size: 28px;
font-weight: 700;
color: #fff;
line-height: 1;
}
.wl-hero-stat__lbl {
display: block;
font-size: 11px;
color: rgba(255,255,255,0.65);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-top: 4px;
}
/* Hero Scroll Indicator */
.wl-hero__scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 2;
animation: bounce 2s infinite;
}
.wl-hero__scroll span {
font-size: 11px;
color: rgba(255,255,255,0.5);
letter-spacing: 1px;
text-transform: uppercase;
}
.wl-hero__scroll-arrow {
width: 20px;
height: 20px;
border-right: 2px solid rgba(255,255,255,0.4);
border-bottom: 2px solid rgba(255,255,255,0.4);
transform: rotate(45deg);
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}
/* ============================================
REGION GRID
============================================ */
.wl-regions {
background: var(--wl-white);
}
.wl-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--wl-space-xl);
gap: var(--wl-space-md);
}
.wl-section-header__left {}
.wl-section-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--wl-green);
margin-bottom: 8px;
}
.wl-section-title {
font-family: var(--wl-font-heading);
font-size: clamp(24px, 4vw, 36px);
color: var(--wl-dark);
margin: 0;
}
.wl-section-link {
font-size: 14px;
font-weight: 600;
color: var(--wl-green);
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
.wl-section-link:hover {
color: var(--wl-green-dark);
}
.wl-region-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.wl-region-card {
position: relative;
border-radius: var(--wl-radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
background: var(--wl-green);
cursor: pointer;
display: block;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wl-region-card:hover {
transform: translateY(-4px);
box-shadow: var(--wl-shadow-lg);
}
.wl-region-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.wl-region-card:hover .wl-region-card__img {
transform: scale(1.06);
}
.wl-region-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(27,67,50,0.85) 0%,
rgba(27,67,50,0.2) 60%,
transparent 100%
);
}
.wl-region-card__body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
}
.wl-region-card__name {
font-family: var(--wl-font-heading);
font-size: 20px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.wl-region-card__count {
font-size: 12px;
color: rgba(255,255,255,0.75);
display: flex;
align-items: center;
gap: 4px;
}
/* Large featured region card */
.wl-region-card--large {
grid-column: span 2;
aspect-ratio: auto;
min-height: 320px;
}
.wl-region-card--large .wl-region-card__name {
font-size: 28px;
}
/* ============================================
TOUR CARDS
============================================ */
.wl-tours {
background: var(--wl-cream);
}
.wl-tour-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.wl-tour-grid--2col {
grid-template-columns: repeat(2, 1fr);
}
.wl-tour-card {
background: var(--wl-white);
border-radius: var(--wl-radius-lg);
overflow: hidden;
border: 1px solid var(--wl-border);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
display: block;
text-decoration: none;
}
.wl-tour-card:hover {
transform: translateY(-4px);
box-shadow: var(--wl-shadow-md);
border-color: var(--wl-green-light);
}
.wl-tour-card__img-wrap {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--wl-green-pale);
}
.wl-tour-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.wl-tour-card:hover .wl-tour-card__img {
transform: scale(1.05);
}
.wl-tour-card__badges {
position: absolute;
top: 12px;
right: 12px;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
}
.wl-diff-badge {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: var(--wl-radius-pill);
letter-spacing: 0.3px;
}
.wl-diff-badge--easy { background: var(--wl-easy-bg); color: var(--wl-easy); }
.wl-diff-badge--medium { background: var(--wl-medium-bg); color: var(--wl-medium); }
.wl-diff-badge--hard { background: var(--wl-hard-bg); color: var(--wl-hard); }
.wl-diff-badge--alpine { background: var(--wl-alpine-bg); color: var(--wl-alpine); }
.wl-tour-card__body {
padding: 18px 20px 20px;
}
.wl-tour-card__region {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--wl-green);
margin-bottom: 6px;
}
.wl-tour-card__title {
font-family: var(--wl-font-heading);
font-size: 17px;
font-weight: 700;
color: var(--wl-dark);
margin-bottom: 10px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wl-tour-card__meta {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.wl-tour-card__meta-item {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--wl-muted);
}
.wl-tour-card__meta-icon {
width: 14px;
height: 14px;
opacity: 0.6;
}
.wl-tour-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--wl-border);
}
.wl-stars {
display: flex;
align-items: center;
gap: 3px;
}
.wl-stars__star {
color: var(--wl-gold);
font-size: 13px;
line-height: 1;
}
.wl-stars__score {
font-size: 12px;
color: var(--wl-muted);
margin-left: 4px;
}
.wl-tour-card__link {
font-size: 13px;
font-weight: 600;
color: var(--wl-green);
display: flex;
align-items: center;
gap: 4px;
}
/* ============================================
TOUR LIST (Kategorie-Seite)
============================================ */
.wl-tour-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.wl-tour-list-item {
background: var(--wl-white);
border: 1px solid var(--wl-border);
border-radius: var(--wl-radius-md);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 18px;
text-decoration: none;
transition: var(--wl-transition);
}
.wl-tour-list-item:hover {
border-color: var(--wl-green-light);
box-shadow: var(--wl-shadow-sm);
transform: translateX(4px);
}
.wl-tour-list-item__thumb {
width: 80px;
height: 80px;
border-radius: var(--wl-radius-sm);
object-fit: cover;
flex-shrink: 0;
background: var(--wl-green-pale);
}
.wl-tour-list-item__body {
flex: 1;
min-width: 0;
}
.wl-tour-list-item__title {
font-family: var(--wl-font-heading);
font-size: 16px;
font-weight: 700;
color: var(--wl-dark);
margin-bottom: 6px;
}
.wl-tour-list-item__meta {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.wl-tour-list-item__right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
/* ============================================
BREADCRUMB
============================================ */
.wl-breadcrumb {
background: var(--wl-light);
border-bottom: 1px solid var(--wl-border);
padding: 12px 0;
}
.wl-breadcrumb__inner {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--wl-muted);
flex-wrap: wrap;
}
.wl-breadcrumb__inner a {
color: var(--wl-green);
font-weight: 500;
}
.wl-breadcrumb__sep {
color: var(--wl-border-dark);
font-size: 11px;
}
/* ============================================
CATEGORY HERO
============================================ */
.wl-cat-hero {
background: var(--wl-green-dark);
position: relative;
overflow: hidden;
padding: 60px 0 48px;
}
.wl-cat-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.3;
}
.wl-cat-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(27,67,50,0.7), rgba(27,79,138,0.4));
}
.wl-cat-hero__content {
position: relative;
z-index: 2;
}
.wl-cat-hero__pre {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.wl-cat-hero__region-pill {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
color: rgba(255,255,255,0.9);
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--wl-radius-pill);
}
.wl-cat-hero h1 {
color: #fff;
font-size: clamp(28px, 5vw, 48px);
margin-bottom: 12px;
}
.wl-cat-hero__desc {
color: rgba(255,255,255,0.78);
font-size: 16px;
max-width: 560px;
margin-bottom: 28px;
line-height: 1.65;
}
.wl-cat-stats {
display: flex;
gap: 28px;
flex-wrap: wrap;
}
.wl-cat-stat__num {
display: block;
font-family: var(--wl-font-heading);
font-size: 24px;
font-weight: 700;
color: #fff;
}
.wl-cat-stat__lbl {
display: block;
font-size: 11px;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
letter-spacing: 0.8px;
}
/* ============================================
FILTER BAR
============================================ */
.wl-filter-bar {
background: var(--wl-white);
border-bottom: 1px solid var(--wl-border);
padding: 0;
position: sticky;
top: 68px;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.wl-filter-bar__inner {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 0;
overflow-x: auto;
scrollbar-width: none;
}
.wl-filter-bar__inner::-webkit-scrollbar { display: none; }
.wl-filter-label {
font-size: 12px;
font-weight: 700;
color: var(--wl-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
flex-shrink: 0;
}
.wl-filter-pill {
padding: 7px 16px;
border-radius: var(--wl-radius-pill);
font-size: 13px;
font-weight: 500;
border: 1.5px solid var(--wl-border);
background: var(--wl-white);
cursor: pointer;
color: var(--wl-mid);
transition: var(--wl-transition);
white-space: nowrap;
flex-shrink: 0;
}
.wl-filter-pill:hover {
border-color: var(--wl-green);
color: var(--wl-green);
}
.wl-filter-pill.active {
background: var(--wl-green);
color: #fff;
border-color: var(--wl-green);
}
/* ============================================
DETAIL PAGE – SINGLE TOUR
============================================ */
.wl-tour-detail {}
.wl-tour-detail__hero {
background: var(--wl-green-dark);
position: relative;
overflow: hidden;
padding: 52px 0 40px;
}
.wl-tour-detail__hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.35;
}
.wl-tour-detail__hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(23,52,4,0.75), rgba(27,67,50,0.6));
}
.wl-tour-detail__hero-content {
position: relative;
z-index: 2;
}
.wl-tour-detail__pre {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.wl-tour-detail__hero h1 {
color: #fff;
font-size: clamp(24px, 4vw, 40px);
margin-bottom: 12px;
line-height: 1.2;
}
/* Info Box (sticky on mobile) */
.wl-info-box {
background: var(--wl-white);
border-radius: var(--wl-radius-md);
padding: 18px 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 8px;
margin-top: 20px;
box-shadow: var(--wl-shadow-md);
}
.wl-info-box__item {
text-align: center;
}
.wl-info-box__val {
display: block;
font-family: var(--wl-font-heading);
font-size: 18px;
font-weight: 700;
color: var(--wl-dark);
line-height: 1;
}
.wl-info-box__lbl {
display: block;
font-size: 10px;
color: var(--wl-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-top: 4px;
}
/* Content Layout */
.wl-tour-content {
display: grid;
grid-template-columns: 1fr 340px;
gap: 40px;
align-items: start;
}
.wl-tour-content__main {}
.wl-tour-content__sidebar {
position: sticky;
top: 110px;
}
/* Elevation Chart */
.wl-elevation {
background: var(--wl-white);
border: 1px solid var(--wl-border);
border-radius: var(--wl-radius-md);
padding: 20px;
margin-bottom: var(--wl-space-lg);
}
.wl-elevation__title {
font-size: 13px;
font-weight: 600;
color: var(--wl-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
/* Trail Steps */
.wl-trail-steps {
margin-bottom: var(--wl-space-xl);
}
.wl-trail-step {
display: flex;
gap: 16px;
margin-bottom: 20px;
}
.wl-trail-step__num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--wl-green);
color: #fff;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.wl-trail-step__body {}
.wl-trail-step__title {
font-size: 16px;
font-weight: 600;
color: var(--wl-dark);
margin-bottom: 4px;
}
.wl-trail-step__desc {
font-size: 14px;
color: var(--wl-mid);
line-height: 1.65;
margin-bottom: 6px;
}
.wl-trail-step__km {
font-size: 11px;
background: var(--wl-green-ghost);
color: var(--wl-green-dark);
font-weight: 600;
padding: 3px 10px;
border-radius: var(--wl-radius-pill);
display: inline-block;
}
/* ============================================
AFFILIATE BOXES
============================================ */
.wl-affiliate-strip {
background: var(--wl-green-ghost);
border: 1px solid #B7E4C7;
border-radius: var(--wl-radius-md);
padding: 20px 24px;
display: flex;
align-items: center;
gap: 18px;
margin: var(--wl-space-xl) 0;
}
.wl-affiliate-strip__icon {
width: 48px;
height: 48px;
background: var(--wl-green);
border-radius: var(--wl-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wl-affiliate-strip__text {
flex: 1;
min-width: 0;
}
.wl-affiliate-strip__title {
font-size: 15px;
font-weight: 600;
color: var(--wl-green-dark);
margin-bottom: 2px;
}
.wl-affiliate-strip__sub {
font-size: 13px;
color: var(--wl-green-mid);
}
/* Gear Box */
.wl-gear-box {
background: var(--wl-green-ghost);
border: 1px solid #B7E4C7;
border-radius: var(--wl-radius-lg);
padding: 20px;
margin-bottom: var(--wl-space-xl);
}
.wl-gear-box__title {
font-size: 16px;
font-weight: 600;
color: var(--wl-green-dark);
margin-bottom: 4px;
}
.wl-gear-box__sub {
font-size: 13px;
color: var(--wl-green-mid);
margin-bottom: 16px;
}
.wl-gear-item {
background: var(--wl-white);
border: 1px solid #C8E6C9;
border-radius: var(--wl-radius-sm);
padding: 12px 14px;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
margin-bottom: 8px;
transition: var(--wl-transition);
}
.wl-gear-item:last-child { margin-bottom: 0; }
.wl-gear-item:hover {
border-color: var(--wl-green-light);
background: var(--wl-white);
transform: translateX(4px);
}
.wl-gear-item__icon {
width: 36px;
height: 36px;
background: var(--wl-green-pale);
border-radius: var(--wl-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 18px;
}
.wl-gear-item__info { flex: 1; min-width: 0; }
.wl-gear-item__name {
font-size: 13px;
font-weight: 600;
color: var(--wl-dark);
}
.wl-gear-item__price {
font-size: 11px;
color: var(--wl-muted);
}
.wl-gear-item__cta {
font-size: 12px;
font-weight: 600;
color: var(--wl-green);
white-space: nowrap;
}
/* GPX Download CTA */
.wl-gpx-cta {
background: var(--wl-blue);
border-radius: var(--wl-radius-md);
padding: 20px 24px;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: var(--wl-space-xl);
}
.wl-gpx-cta__icon {
width: 44px;
height: 44px;
background: rgba(255,255,255,0.15);
border-radius: var(--wl-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wl-gpx-cta__text { flex: 1; }
.wl-gpx-cta__title {
font-size: 15px;
font-weight: 600;
color: #fff;
margin-bottom: 2px;
}
.wl-gpx-cta__sub {
font-size: 12px;
color: rgba(255,255,255,0.65);
}
/* ============================================
NEWSLETTER SECTION
============================================ */
.wl-newsletter {
background: var(--wl-green-dark);
padding: var(--wl-space-2xl) 0;
text-align: center;
}
.wl-newsletter h2 {
color: #fff;
margin-bottom: 8px;
}
.wl-newsletter__sub {
color: rgba(255,255,255,0.72);
font-size: 16px;
margin-bottom: 28px;
}
.wl-nl-form {
display: flex;
max-width: 460px;
margin: 0 auto;
gap: 8px;
}
.wl-nl-form input {
flex: 1;
border: none;
border-radius: var(--wl-radius-sm);
padding: 13px 18px;
font-size: 14px;
font-family: var(--wl-font-body);
outline: none;
color: var(--wl-dark);
}
.wl-nl-form button {
background: var(--wl-gold);
border: none;
padding: 13px 22px;
border-radius: var(--wl-radius-sm);
font-size: 14px;
font-weight: 600;
color: #3d2600;
cursor: pointer;
font-family: var(--wl-font-ui);
white-space: nowrap;
transition: var(--wl-transition);
}
.wl-nl-form button:hover {
background: var(--wl-gold-dark);
}
/* ============================================
FOOTER
============================================ */
#wl-footer {
background: var(--wl-dark);
color: rgba(255,255,255,0.65);
padding: 56px 0 0;
}
.wl-footer-grid {
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 24px;
}
.wl-footer__about-title {
font-family: var(--wl-font-heading);
font-size: 20px;
color: #fff;
margin-bottom: 10px;
}
.wl-footer__about-text {
font-size: 14px;
line-height: 1.7;
margin-bottom: 16px;
}
.wl-footer-heading {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255,255,255,0.4);
margin-bottom: 14px;
}
.wl-footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.wl-footer-links li a {
font-size: 14px;
color: rgba(255,255,255,0.65);
text-decoration: none;
transition: color 0.2s;
}
.wl-footer-links li a:hover {
color: var(--wl-green-light);
}
.wl-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
font-size: 13px;
flex-wrap: wrap;
gap: 8px;
}
/* ============================================
UTILITIES
============================================ */
.wl-text-green { color: var(--wl-green); }
.wl-text-muted { color: var(--wl-muted); }
.wl-text-white { color: #fff; }
.wl-bg-white { background: var(--wl-white); }
.wl-bg-light { background: var(--wl-cream); }
.wl-bg-green { background: var(--wl-green); }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.wl-region-grid { grid-template-columns: repeat(2, 1fr); }
.wl-tour-grid { grid-template-columns: repeat(2, 1fr); }
.wl-tour-content { grid-template-columns: 1fr; }
.wl-tour-content__sidebar { position: static; }
.wl-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 768px) {
.wl-nav-primary { display: none; }
.wl-nav-toggle { display: flex; }
.wl-nav-actions .wl-btn--outline { display: none; }
.wl-nav-primary.open {
display: flex;
flex-direction: column;
position: absolute;
top: 68px;
left: 0;
right: 0;
background: var(--wl-green-dark);
padding: 12px;
gap: 2px;
}
.wl-region-grid { grid-template-columns: 1fr; }
.wl-region-card--large { grid-column: span 1; }
.wl-tour-grid { grid-template-columns: 1fr; }
.wl-section-header { flex-direction: column; align-items: flex-start; }
.wl-info-box { grid-template-columns: repeat(2, 1fr); }
.wl-hero { min-height: 70vh; }
.wl-footer-grid { grid-template-columns: 1fr; }
.wl-nl-form { flex-direction: column; }
.wl-affiliate-strip { flex-direction: column; align-items: flex-start; }
.wl-gpx-cta { flex-direction: column; align-items: flex-start; }
.wl-cat-hero { padding: 40px 0 32px; }
.wl-filter-bar { top: 0; }
}
@media (max-width: 480px) {
.wl-container { padding: 0 16px; }
.wl-hero-stats { gap: 20px; }
.wl-info-box { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================
ANIMATIONS
============================================ */
@media (prefers-reduced-motion: no-preference) {
.wl-region-card,
.wl-tour-card,
.wl-tour-list-item {
animation: fadeInUp 0.4s ease both;
}
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================
PRINT
============================================ */
@media print {
#wl-header, .wl-filter-bar, .wl-newsletter, #wl-footer { display: none; }
.wl-tour-content { grid-template-columns: 1fr; }
}
/* ============================================================
SINGLE POST & ARCHIVE INLINE-STYLES (Erweiterung)
============================================================ */
/* Post-Content Bilder mit Caption */
.wp-caption { max-width: 100%; margin: 24px 0; }
.wp-caption-text { font-size: 12px; color: var(--wl-muted); text-align: center; margin-top: 6px; font-style: italic; }
/* Verbesserte Abschnitt-Trenner */
.wp-block-separator { border: none; border-top: 2px solid var(--wl-green-pale); margin: 40px 0; }
/* Gutenberg Image-Block */
.wp-block-image img { border-radius: var(--wl-radius-md); }
.wp-block-image figcaption { font-size: 12px; color: var(--wl-muted); text-align: center; margin-top: 6px; }
/* Gutenberg Quote */
.wp-block-quote { border-left: 4px solid var(--wl-green); padding: 14px 20px; background: var(--wl-green-ghost); border-radius: 0 var(--wl-radius-sm) var(--wl-radius-sm) 0; margin: 24px 0; }
.wp-block-quote p { font-size: 17px; font-style: italic; color: var(--wl-green-dark); margin: 0; }
.wp-block-quote cite { font-size: 13px; color: var(--wl-muted); display: block; margin-top: 8px; }
/* Gutenberg Columns */
.wp-block-columns { gap: 24px; }
/* ── WP Admin Bar ─────────────────────────────────────────── */
html body.admin-bar .wl-filter-bar { top: calc(68px + 32px); }
@media (max-width: 782px) { html body.admin-bar .wl-filter-bar { top: calc(68px + 46px); } }
/* ── Improved Hero Search ─────────────────────────────────── */
.wl-hero-search:focus-within { box-shadow: 0 0 0 3px rgba(244,166,32,0.35), 0 8px 32px rgba(0,0,0,0.25); }
/* ── Smooth Scroll ────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
/* ── Loading Skeleton für Feed Cards ─────────────────────── */
@keyframes wl-skeleton { 0%{opacity:.6}50%{opacity:1}100%{opacity:.6} }
.wl-skeleton { animation: wl-skeleton 1.5s ease-in-out infinite; background: var(--wl-border); border-radius: 4px; }
/* ── Verbesserte Tour-Card ────────────────────────────────── */
.wl-tour-card__body { display: flex; flex-direction: column; }
.wl-tour-card__footer { margin-top: auto; }
/* ── Focus Styles (Accessibility) ────────────────────────── */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--wl-gold);
outline-offset: 2px;
border-radius: 2px;
}
/* ── Print Styles ─────────────────────────────────────────── */
@media print {
#wl-header, .wl-filter-bar, .wl-newsletter, #wl-footer,
.wl-post-share, .wl-related-posts, .wl-single-sidebar { display: none !important; }
.wl-single-layout { grid-template-columns: 1fr !important; }
.wl-post-content { font-size: 12pt; }
}
/* ===== Mega-Menue nach Bundesland ===== */
.wl-nav-primary .wl-mega-item{position:relative;}
.wl-nav-primary .wl-mega-item > a{display:inline-flex;align-items:center;gap:5px;}
.wl-caret{font-size:9px;opacity:.65;transition:transform .18s ease;}
.wl-mega-item:hover .wl-caret{transform:rotate(180deg);}
.wl-mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);min-width:540px;max-width:92vw;background:#fff;border-radius:16px;box-shadow:0 20px 54px rgba(20,40,30,.20);padding:18px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;z-index:500;border:1px solid #e9eee9;}
.wl-mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:18px;}
.wl-mega-item:hover .wl-mega,.wl-mega-item:focus-within .wl-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.wl-mega__head{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#2D6A4F;margin:2px 6px 13px;}
.wl-mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.wl-mega__card{display:flex;gap:11px;align-items:center;padding:8px;border-radius:11px;text-decoration:none;transition:background .15s ease;}
.wl-mega__card:hover{background:#f2f7f3;}
.wl-mega__thumb{width:62px;height:46px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#e7efe9;display:block;}
.wl-mega__title{font-size:13px;line-height:1.32;color:#1b2b22;font-weight:600;}
.wl-mega__count{color:#9bb0a4;font-weight:500;font-size:12px;}
.wl-mega__all{display:inline-block;margin:13px 6px 2px;font-size:13px;font-weight:700;color:#2D6A4F;text-decoration:none;}
.wl-mega__all:hover{text-decoration:underline;}
.wl-mega--themen{min-width:540px;}
@media (max-width:980px){.wl-mega{display:none!important;}}
/* Tour-Tipp Sidebar global */ .wl-sidebar-widget__title{text-transform:uppercase;letter-spacing:0.8px;font-size:13px;font-weight:700;color:#757575;margin-bottom:14px}.wl-sidebar-widget .wl-stour{display:flex;flex-direction:column;text-decoration:none;border:1px solid #e9eee9;border-radius:var(--wl-radius-lg);overflow:hidden;background:#fff;margin-bottom:14px;transition:box-shadow .15s ease,transform .15s ease}.wl-sidebar-widget .wl-stour:hover{box-shadow:0 6px 18px rgba(27,67,50,0.10);transform:translateY(-2px)}.wl-sidebar-widget .wl-stour__img{display:block;width:100%;height:120px;overflow:hidden}.wl-sidebar-widget .wl-stour__img img{width:100%;height:100%;object-fit:cover;display:block}.wl-sidebar-widget .wl-stour__body{display:block;padding:10px 12px 12px}.wl-sidebar-widget .wl-stour__title{display:block;font-weight:600;font-size:14.5px;line-height:1.35;color:#1b2b22}.wl-sidebar-widget .wl-stour__meta{display:block;margin-top:5px;font-size:12.5px;color:#5a6b62}.wl-sidebar-widget .wl-stour-all{display:block;text-align:center;margin-top:4px;padding:11px 12px;font-weight:600;font-size:13.5px;color:#1B4332;text-decoration:none;border:1px solid #cfe3d6;border-radius:var(--wl-radius-lg);background:#f1f7f3;transition:background .15s ease}.wl-sidebar-widget .wl-stour-all:hover{background:#e6f1ea}
/* Touren-Karten: gleiche Hoehe, Footer unten */
.wl-tour-card{display:flex;flex-direction:column;height:100%}
.wl-tour-card__body{display:flex;flex-direction:column;flex:1 1 auto}
.wl-tour-card__footer{margin-top:auto}
/* === Mobile-Nav-Fix: Mega-Menüs stapeln statt überlaufen (v1) === */
@media (max-width:980px){
body.wl-mob-open #wl-header .wl-mega{position:static!important;transform:none!important;left:auto!important;top:auto!important;min-width:0!important;max-width:100%!important;width:100%!important;opacity:1!important;visibility:visible!important;box-shadow:none!important;border:0!important;background:transparent!important;padding:2px 18px 10px!important;z-index:auto!important;}
body.wl-mob-open #wl-header .wl-mega *{min-width:0!important;max-width:100%!important;}
body.wl-mob-open{overflow-x:hidden!important;}
}
/* === Mobile-Nav-Fix v2: kein Querscrollen === */
@media (max-width:980px){
html,body{overflow-x:hidden!important;}
#wl-header,.wl-container,.wl-nav-inner{max-width:100%!important;}
}
/* === Branding: Untertitel + Logo-Bild === */
.wl-logo__textwrap{display:flex;flex-direction:column;justify-content:center;line-height:1.12;}
.wl-logo__subtitle{display:block;font-size:11px;font-weight:500;letter-spacing:.02em;color:#ffffff;opacity:.82;margin-top:2px;white-space:nowrap;}
.wl-logo--img{display:inline-flex;align-items:center;}
.wl-logo--img img,.wl-logo__img,.wl-logo--img .custom-logo{height:auto!important;max-height:66px!important;width:auto!important;max-width:460px!important;display:block!important;}
@media(max-width:980px){.wl-logo__subtitle{font-size:10px;}.wl-logo--img img{max-height:66px!important;}}
/* Logo-Badge (Vektor) */
.wl-logo{gap:12px!important;}
.wl-logo__badge{display:inline-flex;align-items:center;flex-shrink:0;}
.wl-logo__badge svg{width:auto;height:66px;display:block;}
.wl-logo__text{font-size:36px!important;}
@media(max-width:980px){.wl-nav-inner{height:74px;}.wl-logo__badge svg{height:54px;width:auto;}.wl-logo__text{font-size:30px!important;}.wl-logo--img img,.wl-logo--img .custom-logo,.custom-logo{max-height:46px!important;max-width:280px!important;}}
/* ── WL MEGAMENÜ NAVIGATION (wp_nav_menu) ─────────────────────────────────── */
/* Bestehende wl-nav-primary Styles beibehalten, Untermenüs neu */
.wl-nav-primary { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:4px; }
.wl-nav-primary > .wl-nav-item > a.wl-nav-link { display:flex; align-items:center; gap:4px; padding:8px 12px; color:#fff; text-decoration:none; font-size:14px; font-weight:500; border-radius:6px; transition:background .2s; white-space:nowrap; }
.wl-nav-primary > .wl-nav-item > a.wl-nav-link:hover,
.wl-nav-primary > .wl-nav-item.wl-active > a.wl-nav-link { background:rgba(255,255,255,.15); }
.wl-caret { font-size:10px; opacity:.7; transition:transform .2s; display:inline-block; }
.wl-mega-item:hover > a .wl-caret { transform:rotate(180deg); }
/* Megamenü Panel */
.wl-mega {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border-top: 3px solid #2D6A4F;
border-bottom: 3px solid #f0f0f0;
box-shadow: 0 8px 30px rgba(0,0,0,.12);
z-index: 9999;
animation: wlDropIn .18s ease;
}
@keyframes wlDropIn {
from { opacity:0; transform:translateY(-6px); }
to { opacity:1; transform:translateY(0); }
}
.wl-mega__inner { max-width:1200px; margin:0 auto; padding:24px 32px; }
.wl-mega__list {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 4px;
}
.wl-mega__item a.wl-mega__link {
display: flex;
align-items: center;
padding: 9px 14px;
color: #1a1a1a;
text-decoration: none;
font-size: 14px;
border-radius: 6px;
transition: background .15s, color .15s;
}
.wl-mega__item a.wl-mega__link:hover,
.wl-mega__item.wl-active a.wl-mega__link {
background: #f0f7f3;
color: #2D6A4F;
font-weight: 600;
}
/* Pfeil-Links (→ Karte, → Übersicht) */
.wl-mega__item a.wl-mega__link[href*="karte"],
.wl-mega__item a.wl-mega__link[href*="wanderungen"],
.wl-mega__item a.wl-mega__link[href*="themen-kategorien"] {
color: #2D6A4F;
font-weight: 600;
border-bottom: 1px solid #e8f0eb;
border-radius: 0;
margin-bottom: 4px;
padding-bottom: 12px;
}
/* Megamenü öffnen bei Hover */
.wl-mega-item { position: static; }
.wl-mega-item:hover > .wl-mega,
.wl-mega-item:focus-within > .wl-mega { display: block; }
/* Nav-Wrapper muss position:relative haben */
.wl-nav-inner,
.wl-header { position: relative; }
/* Mobile: Megamenü ausblenden unter 900px */
@media (max-width: 900px) {
.wl-mega { display: none !important; }
.wl-caret { display: none; }
}
/* === Mobiles Mega-Menue: Akkordeon === */
@media (max-width: 980px) {
/* Untermenues standardmaessig eingeklappt */
body.wl-mob-open #wl-header .wl-mega-item .wl-mega { display: block !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
visibility: hidden !important;
transition: max-height .3s ease, opacity .2s ease;
}
/* Nur das aktive (aufgeklappte) Menue zeigen */
body.wl-mob-open #wl-header .wl-mega-item.wl-open .wl-mega { display: block !important;
max-height: 1500px !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Feature-Karten mobil ausblenden (sparen Platz) */
body.wl-mob-open #wl-header .wl-mega__feature { display: none !important; }
/* Tap-Targets vergroessern */
#wl-header .wl-nav-primary .wl-nav-link {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
}
#wl-header .wl-mega__link { min-height: 44px; display: flex; align-items: center; }
/* Pfeil wieder sichtbar als Auf/Zu-Indikator */
#wl-header .wl-nav-primary .wl-caret {
display: inline-block !important;
transition: transform .25s ease;
}
body.wl-mob-open #wl-header .wl-mega-item.wl-open .wl-caret { transform: rotate(180deg); }
}
/* === Tour-Karten mobil (gestapeltes Layout) === */
@media (max-width: 640px) {
.wl-tour-list-item {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
padding: 0 !important;
overflow: hidden;
}
.wl-tour-list-item__thumb {
width: 100% !important;
height: 190px !important;
border-radius: 0 !important;
object-fit: cover;
}
.wl-tour-list-item__body {
width: 100% !important;
padding: 16px 16px 4px !important;
box-sizing: border-box;
}
.wl-tour-list-item__title {
font-size: 19px !important;
line-height: 1.3 !important;
margin: 0 0 10px !important;
}
.wl-tour-list-item__meta {
flex-wrap: wrap !important;
gap: 8px 16px !important;
row-gap: 8px !important;
}
.wl-tour-list-item__meta > * {
white-space: nowrap !important;
}
.wl-tour-list-item__right {
width: 100% !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 16px 16px !important;
box-sizing: border-box;
}
}
/* === Sidebar mobil unter Hauptinhalt === */
@media (max-width: 980px) {
.wl-container > div[style*="grid-template-columns"] {
display: block !important;
}
.wl-container > div[style*="grid-template-columns"] > aside {
width: 100% !important;
margin-top: 32px !important;
}
}
/* === Wetter-/Webcam-Box Titel auf eigene Zeile === */
.wl-weather-box__txt strong,
.wl-webcam-widget__txt strong {
display: block !important;
font-size: 16px;
font-weight: 600;
color: #1B4332;
margin-bottom: 4px;
}
.wl-weather-box__txt > span,
.wl-webcam-widget__txt > span {
display: block;
font-size: 13px !important;
font-weight: 300;
color: #40916C;
line-height: 1.4;
}
/* === Wetter-/Webcam als Karten-Box (wie Übernachten) === */
.wl-weather-box,
.wl-webcam-widget {
background: #F0FBF3;
border: 1px solid #B7E4C7;
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
box-sizing: border-box;
}
/* === Wetter-/Webcam Icon-Badge (wie Gear-Items) === */
.wl-weather-box__icon,
.wl-webcam-widget__icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px !important;
height: 36px !important;
background: #D8F3DC;
border-radius: 8px;
font-size: 18px;
line-height: 1;
margin-bottom: 10px;
flex: 0 0 auto;
}
/* === Service-Box Abstand angleichen === */
.wl-gear-box--service { margin-bottom: 20px !important; }
/* === Tablet-Zone Mega stapeln (981-1024) === */
@media (min-width:981px) and (max-width:1024px){
.wl-mega{ left:auto !important; right:8px !important; transform:none !important; min-width:0 !important; width:360px !important; max-width:calc(100vw - 24px) !important; }
.wl-mega__inner{ flex-direction:column !important; }
.wl-mega__list{ width:100% !important; min-width:0 !important; }
.wl-mega__feature{ flex:0 0 auto !important; width:100% !important; max-width:none !important; margin-top:16px; }
}
/* === Mega Liste lange Links: mehr Platz, kein Ueberlauf (Desktop) === */
@media (min-width:1025px){
.wl-mega{ min-width:600px !important; }
.wl-mega__feature{ flex:0 0 250px !important; }
.wl-mega__list .wl-mega__link{ white-space:normal; overflow:hidden; }
}
/* === Mega Link Icons (Vorschlag 1) === */
.wl-mega__list .wl-mega__item{ position:relative; }
.wl-mega__list .wl-mega__link{ display:flex; align-items:center; gap:9px; padding-left:14px !important; }
.wl-mega__list .wl-mega__link::before{ content:""; flex:0 0 20px; width:20px; height:20px; background-repeat:no-repeat; background-position:center; background-size:18px 18px; opacity:.9; }
.wl-mega--wandern .wl-mega__item:nth-child(1) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--wandern .wl-mega__item:nth-child(2) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--wandern .wl-mega__item:nth-child(3) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--wandern .wl-mega__item:nth-child(4) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--wandern .wl-mega__item:nth-child(5) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--wandern .wl-mega__item:nth-child(6) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(1) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(2) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(3) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(4) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(5) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(6) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(7) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(8) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(9) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--regionen .wl-mega__item:nth-child(10) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--sommer .wl-mega__item:nth-child(1) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--sommer .wl-mega__item:nth-child(2) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--sommer .wl-mega__item:nth-child(3) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--sommer .wl-mega__item:nth-child(4) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--sommer .wl-mega__item:nth-child(5) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--sommer .wl-mega__item:nth-child(6) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--sommer .wl-mega__item:nth-child(7) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--winter .wl-mega__item:nth-child(1) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--winter .wl-mega__item:nth-child(2) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--winter .wl-mega__item:nth-child(3) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--winter .wl-mega__item:nth-child(4) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--winter .wl-mega__item:nth-child(5) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--winter .wl-mega__item:nth-child(6) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--themen .wl-mega__item:nth-child(1) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--themen .wl-mega__item:nth-child(2) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--themen .wl-mega__item:nth-child(3) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--themen .wl-mega__item:nth-child(4) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--themen .wl-mega__item:nth-child(5) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--themen .wl-mega__item:nth-child(6) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--themen .wl-mega__item:nth-child(7) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--themen .wl-mega__item:nth-child(8) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--stories .wl-mega__item:nth-child(1) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--stories .wl-mega__item:nth-child(2) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--stories .wl-mega__item:nth-child(3) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--stories .wl-mega__item:nth-child(4) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--stories .wl-mega__item:nth-child(5) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--stories .wl-mega__item:nth-child(6) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
.wl-mega--stories .wl-mega__item:nth-child(7) .wl-mega__link::before{ background-image:url("data:image/svg+xml,"); }
/* === Bundesland-Wahrzeichen Icons (einfarbig gruen) === */
.wl-mega--regionen .wl-mega__item:nth-child(-n+9) .wl-mega__link::before{ opacity:.9 !important; background-size:19px 19px !important; flex:0 0 20px !important; width:20px !important; }
.wl-mega--regionen .wl-mega__item:nth-child(1) .wl-mega__link::before{ background-image:url("data:image/svg+xml,") !important; }
.wl-mega--regionen .wl-mega__item:nth-child(2) .wl-mega__link::before{ background-image:url("data:image/svg+xml,") !important; }
.wl-mega--regionen .wl-mega__item:nth-child(3) .wl-mega__link::before{ background-image:url("data:image/svg+xml,") !important; }
.wl-mega--regionen .wl-mega__item:nth-child(4) .wl-mega__link::before{ background-image:url("data:image/svg+xml,") !important; }
.wl-mega--regionen .wl-mega__item:nth-child(5) .wl-mega__link::before{ background-image:url("data:image/svg+xml,") !important; }
.wl-mega--regionen .wl-mega__item:nth-child(6) .wl-mega__link::before{ background-image:url("data:image/svg+xml,") !important; }
.wl-mega--regionen .wl-mega__item:nth-child(7) .wl-mega__link::before{ background-image:url("data:image/svg+xml,") !important; }
.wl-mega--regionen .wl-mega__item:nth-child(8) .wl-mega__link::before{ background-image:url("data:image/svg+xml,") !important; }
.wl-mega--regionen .wl-mega__item:nth-child(9) .wl-mega__link::before{ background-image:url("data:image/svg+xml,") !important; }
/* === Mega Mobile kompakt (platzsparende Links) === */
@media (max-width:980px){
.wl-mega__list{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important; gap:0 !important; }
body.wl-mob-open #wl-header .wl-mega a.wl-mega__link,
body.wl-mob-open #wl-header .wl-mega__list a{ padding-top:3px !important; padding-bottom:3px !important; min-height:0 !important; line-height:1.2 !important; font-size:14px; }
.wl-mega__list .wl-mega__item{ margin:0 !important; }
.wl-mega__list .wl-mega__link{ gap:7px; }
.wl-mega__list .wl-mega__link::before{ flex:0 0 17px; width:17px; height:17px; background-size:15px 15px; }
body.wl-mob-open #wl-header .wl-mega__inner{ padding-top:8px !important; padding-bottom:8px !important; }
}
/* === Hauptkategorien kompakt (Mobile Akkordeon-Titel) === */
@media (max-width:980px){
body.wl-mob-open #wl-header .wl-nav-primary > .wl-nav-item > a.wl-nav-link,
body.wl-mob-open #wl-header .wl-nav-primary > li > a.wl-nav-link{ padding-top:11px !important; padding-bottom:11px !important; min-height:0 !important; }
#wl-header .wl-nav-primary .wl-nav-link{ min-height:0 !important; }
body.wl-mob-open #wl-header .wl-mega-item:not(.wl-open) .wl-mega{ padding:0 !important; border:0 !important; }
}
/* === Filter-Bar Umbruch (keine abgeschnittenen Chips) === */
.wl-filter-bar__inner{ flex-wrap:wrap !important; overflow-x:visible !important; row-gap:8px; }
/* === Wetter-Box (Sidebar, Live Open-Meteo) === */
.wl-wx-box{ min-height:40px; font-family:Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
.wl-wx-box:not(.wl-wx-ready):not(.wl-wx-fail)::after{ content:"Wetter wird geladen \2026"; display:block; font-size:13px; color:#757575; padding:6px 2px; }
.wl-wx-box.wl-wx-fail::after{ content:"Wetter derzeit nicht verf\00FCgbar."; display:block; font-size:13px; color:#757575; padding:6px 2px; }
.wl-wx-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; flex-wrap:wrap; }
.wl-wx-now{ font-size:24px; line-height:1; }
.wl-wx-temp{ font-size:22px; font-weight:600; color:#1B4332; line-height:1; }
.wl-wx-meta{ font-size:13px; color:#40916C; flex:1 1 100%; }
.wl-wx-ampel{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid; border-radius:6px; padding:10px 12px; margin-bottom:12px; }
.wl-wx-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; }
.wl-wx-amtxt{ font-size:13px; font-weight:600; }
.wl-wx-days{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin-bottom:10px; }
.wl-wx-day{ text-align:center; padding:4px 1px; }
.wl-wx-dn{ font-size:11px; color:#757575; }
.wl-wx-ds{ font-size:17px; line-height:1.5; }
.wl-wx-dh{ font-size:13px; font-weight:600; color:#1B4332; }
.wl-wx-dl{ font-size:11px; color:#757575; }
.wl-wx-dd{ width:7px; height:7px; border-radius:50%; margin:5px auto 0; }
.wl-wx-legend{ display:flex; gap:11px; justify-content:center; margin:0 0 12px; }
.wl-wx-legend .wl-wx-lg{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#757575; }
.wl-wx-legend .wl-wx-lg i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.wl-wx-link{ display:block; text-align:center; background:#2D6A4F; color:#fff !important; font-size:13px; font-weight:600; padding:11px; border-radius:6px; text-decoration:none; margin-bottom:12px; font-family:Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
.wl-wx-link:hover{ background:#1B4332; }
.wl-wx-note{ font-size:11px; line-height:1.5; color:#757575; margin-bottom:16px; }
.wl-wx-note a{ color:#2D6A4F; text-decoration:underline; }
/* === Saison-Sidebar angleichen (einheitliches Box-Design) === */
.wl-region-nav{ background:#F0FBF3 !important; border:1px solid #B7E4C7 !important; border-radius:16px !important; padding:18px 20px !important; margin-bottom:20px; }
.wl-region-nav__title{ font-family:Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-size:16px !important; font-weight:600 !important; color:#1B4332 !important; margin:0 0 10px !important; }
.wl-region-nav ul{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:1px; }
.wl-region-nav ul li{ margin:0 !important; }
.wl-region-nav ul li a{ display:block; background:#fff; border-radius:6px; padding:9px 12px !important; font-family:Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-size:13px !important; font-weight:600 !important; color:#1A1A1A !important; text-decoration:none; }
.wl-region-nav ul li a:hover{ background:#D8F3DC; color:#1B4332 !important; }
/* Untersbergblick-Banner: beige, hebt sich bewusst ab */
.wl-ubb-banner{ background:#F7F4EC !important; border:1px solid #E5E0D4 !important; border-radius:14px !important; }
.wl-ubb-banner__inner{ padding:18px 20px !important; font-family:Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; }
.wl-ubb-banner__tag{ background:#2D6A4F !important; color:#fff !important; font-size:10px !important; font-weight:600 !important; letter-spacing:.03em; border-radius:6px !important; padding:4px 10px !important; }
.wl-ubb-banner__inner h3{ font-family:Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-size:16px !important; font-weight:600 !important; color:#1A1A1A !important; line-height:1.3 !important; margin:10px 0 4px !important; }
.wl-ubb-banner__inner p{ font-size:13px !important; color:#6B6B6B !important; line-height:1.5 !important; margin:0 0 12px !important; }
.wl-ubb-banner__btn{ display:inline-block; background:#F4A620 !important; color:#1A1A1A !important; font-family:Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-size:14px !important; font-weight:600 !important; padding:10px 18px !important; border-radius:8px !important; text-decoration:none; }
.wl-ubb-banner__btn:hover{ background:#E69500 !important; }
/* === Breadcrumb in Container ausrichten (alle Seiten) === */
.wl-breadcrumb{ max-width:1200px !important; margin-left:auto !important; margin-right:auto !important; padding-left:24px !important; padding-right:24px !important; box-sizing:border-box; }
/* === Saison-Hero Hintergrundbild (Sommer/Winter) === */
body.tax-saison .wl-archive-hero{ position:relative; overflow:hidden; }
body.tax-saison .wl-archive-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
body.tax-saison.term-sommer-2 .wl-archive-hero__bg{ background-image:url("https://www.wanderland.at/neu/wp-content/uploads/2026/06/liechtensteinklamm-410779_1920-1.jpg"); opacity:0.88; }
body.tax-saison .wl-archive-hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(27,67,50,0.30) 0%, rgba(27,67,50,0.55) 100%); }
body.tax-saison .wl-archive-hero .wl-container{ position:relative; z-index:2; }
/* === Regionen-Auswahlbox Wahrzeichen (Variante 3) === */
.wl-region-nav ul li a{ display:flex !important; align-items:center; gap:9px; }
.wl-region-nav ul li a::before{ content:""; flex:0 0 18px; width:18px; height:18px; background-repeat:no-repeat; background-position:center; background-size:18px 18px; }
.wl-region-nav .wl-rn__name{ flex:1; }
.wl-region-nav .wl-rn__chev{ flex:0 0 auto; color:#B7B7B7; font-size:17px; line-height:1; }
.wl-region-nav ul li a:hover .wl-rn__chev{ color:#2D6A4F; }
.wl-region-nav .wl-rn--bregenzerwald a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021l6-9%204%205%202-3%206%207z%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--burgenland a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V8l3%202V7l4-3%204%203v3l3-2v13z%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--gemeinde-langenegg a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021l6-9%204%205%202-3%206%207z%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--kaernten a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2016c2%200%202-2%204-2s2%202%204%202%202-2%204-2%202%202%204%202%22%2F%3E%3Cpath%20d%3D%22M3%2011c2%200%202-2%204-2s2%202%204%202%202-2%204-2%202%202%204%202%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--niederoesterreich a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v4M10%205h4M6%2021V11l6-4%206%204v10z%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--oberoesterreich a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v4M10%205h4M6%2021V11l6-4%206%204v10z%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--salzburg a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V9l2%201V6l2%201V4l2%202%202-2v3l2-1v4l2-1v12z%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--steiermark a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2218%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M9%208h6%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--tirol a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021l6-9%204%205%202-3%206%207z%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--vorarlberg a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2016c2%200%202-2%204-2s2%202%204%202%202-2%204-2%202%202%204%202%22%2F%3E%3Cpath%20d%3D%22M3%2011c2%200%202-2%204-2s2%202%204%202%202-2%204-2%202%202%204%202%22%2F%3E%3C%2Fsvg%3E"); }
.wl-region-nav .wl-rn--wien a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232D6A4F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202c2%203%202%205%200%207-2-2-2-4%200-7zM6%2021V10l6-3%206%203v11z%22%2F%3E%3C%2Fsvg%3E"); }
/* === Breadcrumb Feinschliff (Abstaende, Farben, Hover) === */
.wl-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:0; font-size:13px; }
.wl-breadcrumb a{ color:#2D6A4F !important; text-decoration:none; font-weight:400; transition:color .15s; }
.wl-breadcrumb a:hover{ color:#1B4332 !important; text-decoration:underline; }
.wl-breadcrumb .wl-bc__sep{ color:#B7B7B7 !important; margin:0 9px !important; font-size:13px; }
.wl-breadcrumb .wl-bc__current{ color:#6B6B6B !important; font-weight:400 !important; }
/* touch 1782487382946 */
/* ============================================================
Mobile-Optimierungen (Touch-Tippgrößen & Chip-Layout)
Hinzugefügt 27.06.2026 – betrifft nur Schmal-Viewports
============================================================ */
@media (max-width: 640px) {
/* Wanderkarte: Filter-Chips horizontal scrollbar statt 3+1-Umbruch */
#wlk-types {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
gap: 8px;
padding-bottom: 4px;
}
#wlk-types::-webkit-scrollbar { display: none; } /* WebKit */
#wlk-types > * {
flex: 0 0 auto; /* Chips behalten Breite, kein Quetschen */
min-height: 44px; /* komfortable Tippgröße */
display: inline-flex;
align-items: center;
}
/* „Ansehen"-Buttons im Akkordeon größer & besser tippbar */
.wlk-item__go {
min-height: 40px;
padding: 8px 14px;
display: inline-flex;
align-items: center;
}
/* Akkordeon-Items etwas luftiger (leichteres Treffen) */
.wlk-item {
min-height: 48px;
}
/* Pager-Buttons (Blättern) auf Touch-Größe */
.wlk-pg {
min-width: 40px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Hero-Suchleiste: 5px-Overflow vermeiden (Button bündig) */
.wl-hero-search {
box-sizing: border-box;
max-width: 100%;
}
.wl-hero-search * { box-sizing: border-box; }
/* Burger minimal vergrößern für sicheres Tippen */
.wl-nav-toggle {
min-width: 44px;
min-height: 40px;
}
}
/* === Aehnliche Touren einspaltig auf Smartphones === */
@media (max-width: 768px) {
.wl-tour-grid { grid-template-columns: 1fr !important; }
}
/* Wanderkarte: Karte volle Breite, Bundeslaender darunter — 2026-06-28 20:21 */
.wlk-wrap .wlk-body{ grid-template-columns: 1fr; }
.wlk-wrap .wlk-mapcol{ position: static; }
/* ==========================================================================
Autorenbox in der Seitenleiste
Bei einer Seite, die Karten, Höhen und Wegtypen automatisch verarbeitet, ist
das Gesicht dahinter kein Beiwerk. Es ist der Beleg, dass jemand für die
Auswahl geradesteht.
========================================================================== */
.wl-author-box {
position: relative;
padding: 24px 22px 20px;
background: var(--wl-white);
border: 1px solid var(--wl-border);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(23, 26, 25, .04);
text-align: left;
overflow: hidden;
}
/* Ein schmaler Streifen in Hausfarbe. Genug Akzent, kein Lärm. */
.wl-author-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--wl-green);
}
.wl-author-box__kopf {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.wl-author-box__avatar,
.wl-author-box img.avatar {
flex: 0 0 72px;
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
object-position: center 30%;
display: block;
box-shadow: 0 0 0 3px var(--wl-white), 0 0 0 4px var(--wl-border);
}
.wl-author-box__info { min-width: 0; }
.wl-author-box__name {
font-family: Georgia, "Times New Roman", serif;
font-size: 19px;
line-height: 1.2;
color: var(--wl-dark);
margin: 0 0 5px;
}
.wl-author-box__rolle {
font-size: 10px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wl-green);
line-height: 1.3;
}
.wl-author-box__bio {
margin: 0 0 16px;
font-size: 13.5px;
line-height: 1.62;
color: var(--wl-mid);
}
.wl-author-box__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 14px;
border-top: 1px solid var(--wl-border);
font-size: 13px;
font-weight: 500;
color: var(--wl-green);
text-decoration: none;
}
.wl-author-box__link span { transition: transform .15s ease; }
.wl-author-box__link:hover { color: var(--wl-dark); }
.wl-author-box__link:hover span { transform: translateX(3px); }
.wl-author-box__link:focus-visible { outline: 2px solid var(--wl-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.wl-author-box__link span { transition: none; }
}
/* ==========================================================================
Teilen-Leiste
Nur Zeichen, keine Wörter. Facebook und WhatsApp erkennt jeder; wer sie
nicht erkennt, bekommt den Namen über title und aria-label. Das spart eine
Zeile, die sonst neben der Überschrift klebt.
========================================================================== */
.wl-post-share {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin: 38px 0 46px;
padding-top: 24px;
border-top: 1px solid var(--wl-border);
}
.wl-post-share__label {
font-size: 12.5px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--wl-mid);
}
.wl-post-share__knoepfe {
display: flex;
align-items: center;
gap: 9px;
}
.wl-share-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1.5px solid #DFDDD6;
border-radius: 50%;
background: var(--wl-white);
/* Dunkel genug, um gesehen zu werden; nicht so bunt, dass es vom Text ablenkt. */
color: var(--wl-dark);
cursor: pointer;
text-decoration: none;
transition: color .14s, border-color .14s, background-color .14s, transform .14s;
}
.wl-share-btn svg { width: 25px; height: 25px; display: block; }
/* Ein Grün für alle drei. Die Leiste bleibt ruhig, die Marken drängen sich
nicht in den Vordergrund. */
.wl-share-btn:hover {
color: var(--wl-white);
background: var(--wl-green);
border-color: var(--wl-green);
transform: translateY(-1px);
}
.wl-share-btn:focus-visible {
outline: 2px solid var(--wl-gold);
outline-offset: 3px;
}
/* Rückmeldung nach dem Kopieren. Sie schwebt über dem Knopf und verschwindet. */
.wl-share-btn__meldung {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 4px 9px;
border-radius: 4px;
background: var(--wl-dark);
color: var(--wl-white);
font-size: 11px;
letter-spacing: .02em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .16s, transform .16s;
}
.wl-share-btn--copy.ist-kopiert {
color: var(--wl-white);
background: var(--wl-green);
border-color: var(--wl-green);
}
.wl-share-btn--copy.ist-kopiert .wl-share-btn__meldung {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Die Überschrift danach braucht Luft, sonst klebt sie an den Knöpfen. */
.wl-post-share + h2,
.wl-post-share + * > h2:first-child {
margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
.wl-share-btn,
.wl-share-btn__meldung { transition: none; }
.wl-share-btn:hover { transform: none; }
}
/* ==========================================================================
Videogalerie
Vor dem Klick liegt nur ein Vorschaubild vom eigenen Server auf der Seite.
Erst der Abspielknopf holt das Video von YouTube.
========================================================================== */
/* --- Filterleiste --- */
.wl-videofilter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 30px;
}
.wl-videofilter__knopf {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 15px;
border: 1px solid var(--wl-border);
border-radius: 999px;
background: var(--wl-white);
color: var(--wl-mid);
font-size: 13.5px;
text-decoration: none;
transition: color .14s, border-color .14s, background-color .14s;
}
.wl-videofilter__knopf:hover {
color: var(--wl-dark);
border-color: var(--wl-dark);
}
.wl-videofilter__knopf.ist-aktiv {
background: var(--wl-green);
border-color: var(--wl-green);
color: var(--wl-white);
}
.wl-videofilter__zahl {
font-size: 11.5px;
opacity: .65;
}
/* --- Gitter --- */
.wl-videogitter {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
gap: 28px 22px;
}
.wl-videokachel__link {
display: block;
text-decoration: none;
color: inherit;
}
.wl-videokachel__bild {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: var(--wl-light);
}
.wl-videokachel__bild img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.wl-videokachel__link:hover .wl-videokachel__bild img { transform: scale(1.04); }
/* Abspielpfeil: ein Dreieck aus Rahmen, kein Bild, kein Zeichensatz. */
.wl-videokachel__pfeil,
.wl-video-embed__pfeil {
display: none;
transition: border-left-color .16s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 11px 0 11px 19px;
border-color: transparent transparent transparent #FFF;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
pointer-events: none;
}
.wl-videokachel__pfeil::before,
.wl-video-embed__pfeil::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 42px;
margin-left: -9px;
border-radius: 12px;
background: rgba(20, 24, 22, .55);
z-index: -1;
transition: background-color .18s;
}
.wl-videokachel__link:hover .wl-videokachel__pfeil::before { background: rgba(20, 24, 22, .74); }
.wl-videokachel__titel {
margin: 13px 0 4px;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.35;
color: var(--wl-dark);
}
.wl-videokachel__link:hover .wl-videokachel__titel { color: var(--wl-green); }
.wl-videokachel__kat {
margin: 0;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--wl-muted);
}
/* --- Einbettung auf der Einzelseite --- */
.wl-video-embed {
position: relative;
aspect-ratio: 16 / 9;
margin: 0 0 18px;
border-radius: 10px;
overflow: hidden;
background: #000;
}
.wl-video-embed__bild {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wl-video-embed__start {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
}
.wl-video-embed__start:hover .wl-video-embed__pfeil::before { background: rgba(20, 24, 22, .74); }
.wl-video-embed__start:focus-visible { outline: 3px solid var(--wl-gold); outline-offset: -3px; }
.wl-video-embed__pfeil {
border-width: 15px 0 15px 26px;
}
.wl-video-embed__pfeil::before {
width: 84px;
height: 58px;
margin-left: -12px;
border-radius: 14px;
}
/* Das iframe liegt unsichtbar darunter, bis der Klick die Adresse setzt. */
.wl-video-embed__rahmen {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.wl-video-embed.ist-aktiv .wl-video-embed__rahmen {
opacity: 1;
pointer-events: auto;
}
.wl-video-embed.ist-aktiv .wl-video-embed__bild,
.wl-video-embed.ist-aktiv .wl-video-embed__start { display: none; }
.wl-video-embed__hinweis {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 9px 14px;
background: rgba(20, 24, 22, .72);
color: rgba(255, 255, 255, .82);
font-size: 11.5px;
line-height: 1.4;
}
.wl-video-embed.ist-aktiv .wl-video-embed__hinweis { display: none; }
.wl-video-fehlt {
padding: 16px 18px;
border-left: 3px solid var(--wl-gold);
background: var(--wl-cream);
color: var(--wl-mid);
font-size: 14px;
}
@media (max-width: 600px) {
.wl-videogitter { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.wl-videokachel__bild img,
.wl-videokachel__pfeil::before,
.wl-video-embed__pfeil::before { transition: none; }
.wl-videokachel__link:hover .wl-videokachel__bild img { transform: none; }
}
/* ==========================================================================
Videothemen (Übersicht)
Die Startseite zeigt nur Themen. Ein Klick öffnet die Videos darin - so
liegen nie alle Videos auf einmal vor dem Besucher.
========================================================================== */
.wl-videothemen {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 22px 18px;
}
.wl-videothema {
display: block;
text-decoration: none;
color: inherit;
}
.wl-videothema__rahmen {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
background: var(--wl-light);
}
.wl-videothema__bild {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.wl-videothema:hover .wl-videothema__bild { transform: scale(1.04); }
/* Ein dunkler Verlauf am unteren Rand, damit die Zahl lesbar bleibt. */
.wl-videothema__rahmen::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 46%;
background: linear-gradient(to top, rgba(20,24,22,.6), transparent);
pointer-events: none;
}
.wl-videothema__zahl {
position: absolute;
bottom: 9px;
right: 10px;
z-index: 1;
padding: 3px 10px;
border-radius: 999px;
background: rgba(20, 24, 22, .68);
color: #fff;
font-size: 11.5px;
font-weight: 500;
}
.wl-videothema__name {
display: block;
margin-top: 11px;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
color: var(--wl-dark);
transition: color .14s;
}
.wl-videothema:hover .wl-videothema__name { color: var(--wl-green); }
.wl-videothema:focus-visible .wl-videothema__rahmen {
outline: 3px solid var(--wl-gold);
outline-offset: 3px;
}
/* Zurück-Link in der Kategorieansicht */
.wl-video-zurueck {
display: inline-block;
margin: 0 0 14px;
font-size: 13.5px;
color: var(--wl-green);
text-decoration: none;
}
.wl-video-zurueck:hover { color: var(--wl-dark); }
@media (prefers-reduced-motion: reduce) {
.wl-videothema__bild { transition: none; }
.wl-videothema:hover .wl-videothema__bild { transform: none; }
}
/* ==========================================================================
Videoübersicht (Variante: ruhige Liste)
Ein Titelvideo, darunter die Themen als schlichte Zeilen in zwei Spalten.
Kein Bilderteppich - schnell zu überblicken.
========================================================================== */
.wl-videotitel {
display: flex;
gap: 22px;
align-items: center;
margin: 0 0 40px;
padding: 0 0 34px;
border-bottom: 0.5px solid var(--wl-border);
}
.wl-videotitel__film {
flex: 0 0 46%;
max-width: 420px;
}
.wl-videotitel__film .wl-video-embed { margin: 0; }
.wl-videotitel__text {
flex: 1 1 auto;
min-width: 0;
}
.wl-videotitel__label {
display: block;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wl-muted);
margin: 0 0 8px;
}
.wl-videotitel__name {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: 22px;
line-height: 1.25;
color: var(--wl-dark);
text-decoration: none;
}
.wl-videotitel__name:hover { color: var(--wl-green); }
.wl-videotitel__kat {
display: inline-block;
margin-top: 10px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--wl-green);
}
/* --- Zwei-Spalten-Liste --- */
.wl-videoliste {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 56px;
}
.wl-videoliste__kopf {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
font-weight: 400;
color: var(--wl-muted);
letter-spacing: .02em;
margin: 0 0 6px;
padding: 0 0 8px;
border-bottom: 0.5px solid var(--wl-border);
}
.wl-videoliste__ul {
list-style: none;
margin: 0;
padding: 0;
}
.wl-videoliste__ul li { margin: 0; }
.wl-videoliste__ul a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 10px 2px;
border-bottom: 0.5px solid var(--wl-border);
text-decoration: none;
color: var(--wl-dark);
transition: color .14s, padding-left .14s;
}
.wl-videoliste__ul li:last-child a { border-bottom: 0; }
.wl-videoliste__ul a:hover {
color: var(--wl-green);
padding-left: 8px;
}
.wl-videoliste__name { font-size: 15.5px; }
.wl-videoliste__zahl {
flex: 0 0 auto;
font-size: 12.5px;
color: var(--wl-muted);
}
.wl-videoliste__ul a:hover .wl-videoliste__zahl { color: var(--wl-green); }
@media (max-width: 640px) {
.wl-videotitel { flex-direction: column; align-items: stretch; gap: 16px; }
.wl-videotitel__film { flex-basis: auto; max-width: none; }
.wl-videoliste { grid-template-columns: 1fr; gap: 22px; }
}
/* --------------------------------------------------------------------------
Videoseite: eigener Rahmen
Die Video-Übersicht wird selbst zusammengebaut und erbt nicht den
Seitenrahmen von page.php. Darum hier zentriert, mit Innenabstand,
damit nichts am Rand klebt - und mit ruhiger Titelgröße.
-------------------------------------------------------------------------- */
.wl-videoseite.wl-page-wrap {
box-sizing: border-box;
max-width: 1080px;
margin: 0 auto;
padding: 46px 32px 76px;
}
.wl-videoseite .wl-page-title {
font-family: Georgia, "Times New Roman", serif;
font-size: 33px;
line-height: 1.18;
color: var(--wl-dark);
margin: 0 0 14px;
}
.wl-videoseite .wl-page-content {
color: var(--wl-mid);
font-size: 16px;
line-height: 1.7;
}
.wl-videoseite .wl-page-content > p:first-child {
max-width: 760px;
margin: 0 0 34px;
}
@media (max-width: 720px) {
.wl-videoseite.wl-page-wrap { padding: 32px 20px 56px; }
.wl-videoseite .wl-page-title { font-size: 27px; }
}
/* --- Blätter-Navigation in den Kategorien (6 pro Seite) --- */
.wl-videoblatt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 40px 0 0;
padding: 20px 0 0;
border-top: 0.5px solid var(--wl-border);
}
.wl-videoblatt__knopf {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border: 1px solid var(--wl-border);
border-radius: 999px;
font-size: 14px;
color: var(--wl-dark);
text-decoration: none;
transition: color .14s, border-color .14s, background-color .14s;
}
.wl-videoblatt__knopf:hover {
color: var(--wl-white);
background: var(--wl-green);
border-color: var(--wl-green);
}
.wl-videoblatt__knopf.ist-aus {
color: var(--wl-muted);
border-color: var(--wl-border);
opacity: .5;
pointer-events: none;
}
.wl-videoblatt__mitte {
font-size: 13px;
color: var(--wl-muted);
}
@media (max-width: 480px) {
.wl-videoblatt__knopf { padding: 8px 13px; font-size: 13px; }
.wl-videoblatt__mitte { display: none; }
}
/* ==========================================================================
Videokategorien im alten Stil: Bild, grüner Titel, Anzahl - drei Spalten
========================================================================== */
.wl-videokat {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px 30px;
}
.wl-videokat__bildlink {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 6px;
background: var(--wl-light);
}
.wl-videokat__bild {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.wl-videokat__bildlink:hover .wl-videokat__bild { transform: scale(1.04); }
.wl-videokat__leer { display: block; }
.wl-videokat__name {
margin: 12px 0 3px;
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.3;
}
.wl-videokat__name a {
color: var(--wl-green);
text-decoration: none;
}
.wl-videokat__name a:hover { text-decoration: underline; }
.wl-videokat__zahl {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 13px;
color: var(--wl-muted);
}
.wl-videokat__play { flex: 0 0 auto; opacity: .75; }
@media (max-width: 860px) {
.wl-videokat { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
}
@media (max-width: 540px) {
.wl-videokat { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.wl-videokat__bild { transition: none; }
.wl-videokat__bildlink:hover .wl-videokat__bild { transform: none; }
}
/* Videoseiten ohne Kopfbild: Titel in den normalen Fluss, dunkel und lesbar. */
.single-wl_video .wl-post-hero { min-height: 0; }
.single-wl_video .wl-post-hero__content {
position: static;
padding: 28px 0 2px;
background: none !important;
text-align: center;
}
.single-wl_video .wl-post-hero__content h1,
.single-wl_video .wl-post-hero__content .wl-post-hero__title,
.single-wl_video .wl-post-hero__title {
color: var(--wl-dark) !important;
text-shadow: none !important;
font-size: 26px !important;
line-height: 1.25 !important;
font-weight: 400 !important;
}
.single-wl_video .wl-post-hero__overlay { display: none; }
/* Videoseite (Vorschlag 3, reduziert): Inhalt und Boxen auf Lesebreite,
Newsletter + Tour-Tipp nebeneinander, Ausrüstung ausgeblendet. */
.single-wl_video .wl-post-main,
.single-wl_video .wl-single-sidebar {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.single-wl_video .wl-single-sidebar { margin-top: 8px; }
.single-wl_video .wl-side-promo {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: stretch;
}
.single-wl_video .wl-side-promo > * { margin-top: 0 !important; }
.single-wl_video .wl-gear-box { display: block; order: 2; }
@media (max-width: 600px) {
.single-wl_video .wl-side-promo { grid-template-columns: 1fr; }
}
/* Videoseite: Reihenfolge Tour-Tipp-Gruppe -> Autor -> Newsletter,
plus Liste 'Beliebte Wanderungen' neben dem Tour-Tipp (Vorschlag C). */
.single-wl_video .wl-single-sidebar { display: flex; flex-direction: column; }
.single-wl_video .wl-side-promo { order: 1; }
.single-wl_video .wl-author-box { order: 4; }
.single-wl_video .wl-sidebar-newsletter { order: 3; margin-top: 0; }
.wl-beliebte__item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
border-bottom: 0.5px solid var(--wl-border);
text-decoration: none;
color: var(--wl-dark);
}
.wl-beliebte__item:last-child { border-bottom: 0; }
.wl-beliebte__item:hover .wl-beliebte__name { color: var(--wl-green); }
.wl-beliebte__bild {
flex: 0 0 auto;
width: 54px;
height: 38px;
border-radius: 5px;
overflow: hidden;
background: var(--wl-light);
}
.wl-beliebte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-beliebte__name { font-size: 13px; line-height: 1.3; }
/* Kurzbeschreibung unter dem Video-Titel, zentriert und ruhig. */
.single-wl_video .wl-video-intro {
max-width: 1040px;
margin: 2px auto 0;
color: var(--wl-mid);
font-size: 15px;
line-height: 1.45;
}
.single-wl_video .wl-video-intro p { margin: 0 0 8px; }
.single-wl_video .wl-video-intro p:last-child { margin-bottom: 0; }
/* Videoseite: Desktop zweispaltig */
@media (min-width: 900px) {
.single-wl_video .wl-single-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 44px;
align-items: start;
}
.single-wl_video .wl-post-main,
.single-wl_video .wl-single-sidebar {
max-width: none;
margin: 0;
}
}
/* Videoseite: Autor + Newsletter voll unter dem Layout (kürzt die Sidebar). */
.single-wl_video .wl-video-unten {
max-width: none;
margin: 40px 0 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.single-wl_video .wl-video-unten .wl-sidebar-newsletter,
.single-wl_video .wl-video-unten .wl-author-box { margin-top: 0; }
/* Videoseite: Titelbereich straffen */
.single-wl_video .wl-post-hero__content h1 { margin-bottom: 4px !important; }
.single-wl_video .wl-post-hero__meta { margin: 0 !important; line-height: 1.2; }
/* Hero-Lesbarkeit: Verlauf + Schatten */
.wl-hero__overlay {
background: linear-gradient(95deg, rgba(12,22,18,.82) 0%, rgba(12,22,18,.52) 38%, rgba(12,22,18,.12) 64%, rgba(12,22,18,0) 100%) !important;
}
.wl-hero__content h1 {
text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.wl-hero__content p {
text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
/* Titel auf Kopfbildern nur kleiner */
.wl-post-hero__content .wl-post-hero__title,
.wl-post-hero__title,
.wl-archive-hero__content h1 {
font-size: 32px !important;
line-height: 1.15 !important;
}
/* Kategorie-Header Variante 1 */
.wl-archive-hero:has(.wl-archive-hero__icon) {
background: #f2f1ea !important;
border: 0 !important;
border-radius: 0 !important;
margin-top: 0 !important;
overflow: hidden !important;
min-height: 0 !important;
padding: 0 !important;
border-left: 8px solid #2d6a4f;
}
.wl-archive-hero:has(.wl-archive-hero__icon) .wl-archive-hero__bg,
.wl-archive-hero:has(.wl-archive-hero__icon) .wl-archive-hero__overlay { display: none !important; }
.wl-archive-hero__content:has(.wl-archive-hero__icon) {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 0 !important;
}
.wl-archive-hero__icon {
flex: 0 0 auto;
width: 52px;
height: 52px;
border-radius: 14px;
background: #eaf3de;
display: flex;
align-items: center;
justify-content: center;
}
.wl-archive-hero__text { min-width: 0; }
.wl-archive-hero__content:has(.wl-archive-hero__icon) h1 {
color: #1b3a2a !important;
margin: 2px 0 0 !important;
}
.wl-archive-hero__content:has(.wl-archive-hero__icon) .wl-hero__label {
color: #27500a !important;
background: #dcebc6 !important;
border: none !important;
}
/* Kategorie-Header: beige, kompakt */
.wl-archive-hero {
border-left: 0 !important;
min-height: 0 !important;
}
.wl-archive-hero .wl-hero__label { display: none !important; }
.wl-archive-hero__content {
padding: 12px 0 !important;
gap: 14px !important;
}
.wl-archive-hero__icon {
width: 46px !important;
height: 46px !important;
background: #2d6a4f !important;
}
.wl-archive-hero__icon svg g { stroke: #f4f1e6 !important; }
.wl-archive-hero__content h1 { margin: 0 !important; }
/* Regionen-Hero: Overlay nach rechts transparent */
.wl-cat-hero__overlay {
background: linear-gradient(90deg, rgba(18,38,28,.75) 0%, rgba(18,38,28,.7) 32%, rgba(18,38,28,.3) 47%, rgba(18,38,28,.06) 58%, rgba(18,38,28,0) 66%) !important;
}
body[class*="term-"] .wl-cat-hero__bg { opacity: 1 !important; }
/* ===== Seite "Mitglied werden" (ID 1859) + Menü-CTA ===== */
body.page-id-1859 .wl-page-title{display:none!important;}
body.page-id-1859 .wl-archive-hero,body.page-id-1859 .entry-header{display:none!important;}
.wl-menu-cta{margin-left:6px;}
.wl-menu-cta > a{background:#f5b301;color:#1b3a2d!important;border-radius:9px;padding:9px 18px!important;font-weight:700;transition:background .15s ease,transform .15s ease;box-shadow:0 2px 8px rgba(0,0,0,.18);}
.wl-menu-cta > a:hover{background:#ffc21f;transform:translateY(-1px);}
.wl-menu-cta > a::after{display:none!important;}
/* ===== Ende Mitglied-werden ===== */
/* ===== Einreich-Formular: Überschriften an Seiten-Schrift (Playfair Display) angleichen ===== */
.wltf-box > legend{font-family:'Playfair Display',Georgia,serif!important;}
/* Footer: Rechtsleiste unten (20.08.2026) */
.wl-footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px}
.wl-footer-legal a{color:rgba(255,255,255,.72);text-decoration:none}
.wl-footer-legal a:hover{color:#F4A620;text-decoration:underline}
.wl-footer-legal__sep{color:rgba(255,255,255,.28)}
@media (max-width:900px){.wl-footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.wl-footer-grid{grid-template-columns:1fr}.wl-footer-bottom{flex-direction:column;align-items:flex-start}}
/* ============================================================
WL-MITMACHEN-CSS (20.08.2026)
Gemeinsames Layout fuer die Anmeldeseiten:
/mitmachen/, /betrieb-anmelden/, /autor-werden/, /guide-werden/
============================================================ */
.mwx{--gr:#2D6A4F;--gr-d:#1E3D31;--gr-h:#F2F8F5;--gold:#F4A620;--gold-d:#8F6A1C;--txt:#1E2B26;--txt-2:#4A564F;--li:#DFE7E3;color:var(--txt);line-height:1.65}
.mwx *{box-sizing:border-box}
.mwx h2,.mwx h3{font-family:var(--wl-font-heading,'Playfair Display',Georgia,serif);color:var(--gr-d);line-height:1.25;margin:0}
.mwx p{margin:0 0 1rem}
.mwx .kicker{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);margin:0 0 .5rem}
.mwx-hero{background:linear-gradient(135deg,var(--gr) 0%,var(--gr-d) 100%);color:#fff;border-radius:14px;padding:2.6rem 2rem;margin:0 0 2.4rem}
.mwx-hero .kicker{color:var(--gold)}
.mwx-hero h2,.mwx-hero h2 *{color:#fff!important;font-size:2.05rem;margin:0 0 .8rem}
.mwx-hero h2 .gold,.mwx-hero .gold{color:var(--gold)!important}
.mwx-hero p,.mwx-hero p *{color:#EAF3EE!important}
.mwx-hero strong{color:#fff!important}
.mwx-hero p{color:#EAF3EE;font-size:1.06rem;max-width:46rem;margin:0}
.mwx-hero .gold{color:var(--gold)}
.mwx-wege{display:grid;gap:1.1rem;margin:0 0 2.6rem}
@media(min-width:820px){.mwx-wege{grid-template-columns:repeat(3,1fr)}}
.mwx-weg{border:1px solid var(--li);border-top:4px solid var(--gr);border-radius:12px;padding:1.4rem 1.5rem;background:#fff;display:flex;flex-direction:column}
.mwx-weg .ico{line-height:0;margin:0 0 .1rem;display:flex;justify-content:center}
.mwx-ico{display:block;width:92px;height:92px}
.mwx-weg:hover .mwx-ico{opacity:.85}
@media(max-width:560px){.mwx-ico{width:78px;height:78px}}
.mwx-weg h3{font-size:1.18rem;margin:0 0 .4rem}
.mwx-weg .fuer{font-size:.86rem;color:var(--txt-2);margin:0 0 .9rem}
.mwx-weg ul{margin:0 0 1.3rem;padding:0 0 0 1.1rem;font-size:.94rem;color:var(--txt-2)}
.mwx-weg li{margin:0 0 .35rem}
.mwx a.mwx-btn,.mwx a.mwx-btn:visited{display:inline-block;background:var(--gr)!important;color:#fff!important;text-decoration:none!important;font-weight:700;font-size:.98rem;padding:.85rem 1.4rem;border-radius:8px;text-align:center;margin-top:auto;border:0}
.mwx a.mwx-btn:hover{background:var(--gold-d)!important;color:#fff!important}
.mwx a.mwx-btn--gold,.mwx a.mwx-btn--gold:visited{background:var(--gold)!important;color:var(--gr-d)!important}
.mwx a.mwx-btn--gold:hover{background:var(--gr)!important;color:#fff!important}
.mwx-fakten{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;background:var(--gr-h);border-radius:12px;padding:1.6rem;margin:0 0 2.6rem}
@media(min-width:700px){.mwx-fakten{grid-template-columns:repeat(4,1fr)}}
.mwx-fakt{text-align:center}
.mwx-fakt b{display:block;font-family:var(--wl-font-heading,'Playfair Display',Georgia,serif);font-size:1.9rem;color:var(--gr);line-height:1.1}
.mwx-fakt span{font-size:.83rem;color:var(--txt-2)}
.mwx-schritte{counter-reset:s;display:grid;gap:1rem;margin:0 0 1rem}
@media(min-width:820px){.mwx-schritte{grid-template-columns:repeat(3,1fr)}}
.mwx-schritt{position:relative;border:1px solid var(--li);border-radius:12px;padding:1.3rem 1.4rem 1.3rem 3.4rem;background:#fff}
.mwx-schritt::before{counter-increment:s;content:counter(s);position:absolute;left:1.1rem;top:1.25rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--gr);color:#fff;font-weight:700;font-size:.92rem;display:flex;align-items:center;justify-content:center}
.mwx-schritt h3{font-size:1.02rem;margin:0 0 .3rem}
.mwx-schritt p{font-size:.93rem;color:var(--txt-2);margin:0}
.mwx-tab{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.95rem}
.mwx-tab th,.mwx-tab td{padding:.85rem .9rem;border-bottom:1px solid var(--li);text-align:left;vertical-align:top}
.mwx-tab thead th{background:var(--gr);color:#fff;font-weight:700;font-size:.9rem}
.mwx-tab tbody th{font-weight:600;color:var(--txt)}
.mwx-tab .ja{color:var(--gr);font-weight:700}
.mwx-tab .nein{color:#7A7A7A}
.mwx-tab tbody tr:nth-child(even){background:#FAFCFB}
.mwx-hinweis{border:1px solid #F0DCAE;background:#FDF8EE;border-radius:10px;padding:1.1rem 1.3rem;font-size:.94rem;color:#5A4A26;margin:0 0 2.4rem}
.mwx-hinweis strong{color:#4A3A18}
.mwx-zurueck{display:inline-block;font-size:.92rem;color:var(--gr);text-decoration:none;font-weight:600;margin:0 0 1.4rem}
.mwx-zurueck:hover{color:var(--gold-d)}
/* Formular-Buttons an die Marke anpassen (statt FluentForms-Blau) */
.frm-fluent-form .ff-btn-submit,.frm-fluent-form button[type=submit]{background:var(--wl-gold,#F4A620)!important;color:#1E3D31!important;border:0!important;font-weight:700!important;border-radius:8px!important;padding:.85rem 1.7rem!important;font-size:1rem!important}
.frm-fluent-form .ff-btn-submit:hover,.frm-fluent-form button[type=submit]:hover{background:#2D6A4F!important;color:#fff!important}
/* Video-Block auf den Mitmach-Seiten */
.mwx-video{margin:0 0 2.4rem}
.mwx-video video{width:100%;height:auto;display:block;border-radius:12px;background:#0D1F10;box-shadow:0 3px 14px rgba(0,0,0,.14)}
.mwx-video figcaption{font-size:.88rem;color:#5A6660;margin-top:.6rem;text-align:center}
/* Zurück-Leiste unten */
.mwx-nav-unten{display:grid;gap:.8rem;margin:2.6rem 0 0;padding-top:1.6rem;border-top:1px solid var(--li)}
@media(min-width:700px){.mwx-nav-unten{grid-template-columns:repeat(3,1fr)}}
.mwx-nav-unten a{display:block;border:1px solid var(--li);border-radius:10px;padding:.9rem 1.1rem;text-decoration:none;color:inherit;background:#fff;font-size:.94rem}
.mwx-nav-unten a:hover{background:var(--gr-h);border-color:var(--gr)}
.mwx-nav-unten b{display:block;color:var(--gr);font-size:1rem;margin-bottom:.15rem}
.mwx-nav-unten span{color:var(--txt-2);font-size:.86rem}
/* ============================================================
WL-MEDIEN-CSS (20.08.2026)
Umschalter Video / Prospekt zum Blättern
============================================================ */
.wl-medien{margin:0 0 2.4rem}
.wl-medien-tabs{display:flex;gap:.5rem;margin:0 0 1rem;flex-wrap:wrap}
.wl-medien-tab{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid #DFE7E3;border-radius:999px;padding:.6rem 1.15rem;font:inherit;font-size:.94rem;font-weight:600;color:#2D6A4F;cursor:pointer;transition:background .15s,border-color .15s}
.wl-medien-tab:hover{background:#F2F8F5;border-color:#2D6A4F}
.wl-medien-tab.is-on{background:#2D6A4F;border-color:#2D6A4F;color:#fff}
.wl-medien-panel{display:none}
.wl-medien-panel.is-on{display:block}
.wl-medien video{width:100%;height:auto;display:block;border-radius:12px;background:#0D1F10}
.wl-medien-hint{font-size:.86rem;color:#5A6660;margin:.6rem 0 0;text-align:center}
/* Prospekt */
.wl-fb{border:1px solid #DFE7E3;border-radius:12px;background:#fff;overflow:hidden}
.wl-fb-buehne{position:relative;min-height:340px;display:flex;align-items:stretch}
.wl-fb-seite{display:none;width:100%;padding:2rem 2.2rem;animation:wlfb .35s ease}
.wl-fb-seite.is-on{display:block}
@keyframes wlfb{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wl-fb-seite .nr{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8F6A1C;margin:0 0 .5rem}
.wl-fb-seite h4{font-family:var(--wl-font-heading,'Playfair Display',Georgia,serif);font-size:1.45rem;color:#1E3D31;margin:0 0 .7rem;line-height:1.25}
.wl-fb-seite p{color:#4A564F;margin:0 0 .8rem;font-size:1rem;line-height:1.65}
.wl-fb-seite ul{color:#4A564F;margin:0 0 .8rem;padding-left:1.2rem;font-size:.97rem}
.wl-fb-seite li{margin:0 0 .35rem}
.wl-fb-seite .gross{font-family:var(--wl-font-heading,'Playfair Display',Georgia,serif);font-size:2.4rem;color:#2D6A4F;line-height:1.1;margin:0 0 .3rem}
.wl-fb-steuerung{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid #DFE7E3;padding:.7rem 1rem;background:#FAFCFB}
.wl-fb-btn{background:#2D6A4F;color:#fff;border:0;border-radius:8px;padding:.55rem 1.1rem;font:inherit;font-size:.92rem;font-weight:600;cursor:pointer}
.wl-fb-btn:hover:not(:disabled){background:#F4A620;color:#1E3D31}
.wl-fb-btn:disabled{background:#DFE7E3;color:#8A8A8A;cursor:default}
.wl-fb-punkte{display:flex;gap:.4rem}
.wl-fb-punkt{width:9px;height:9px;border-radius:50%;background:#DFE7E3;border:0;padding:0;cursor:pointer}
.wl-fb-punkt.is-on{background:#2D6A4F}
.wl-fb-zaehler{font-size:.86rem;color:#5A6660;min-width:3.2rem;text-align:center}
@media(max-width:560px){.wl-fb-seite{padding:1.5rem 1.3rem}.wl-fb-seite h4{font-size:1.25rem}.wl-fb-seite .gross{font-size:1.9rem}}
/* WL-FB-EINHEITLICH (20.08.2026): alle Prospektseiten hell, keine Sonderfarbe fuer die Titelseite */
.wl-fb-seite:first-child .nr{color:#8F6A1C}
.wl-fb-buehne{background:#fff}
/* WL-FB-FEINSCHLIFF (20.08.2026): kompaktere, dichtere Prospektseiten */
.wl-fb-buehne{min-height:0}
.wl-fb-seite{padding:1.7rem 1.9rem 1.9rem}
.wl-fb-seite .nr{display:inline-block;background:#FDF6E7;border-radius:999px;padding:.28rem .8rem;font-size:11.5px;letter-spacing:.14em;margin:0 0 .8rem}
.wl-fb-seite h4{font-size:1.5rem;margin:0 0 .9rem;padding-bottom:.7rem;border-bottom:1px solid #E4EDE8}
.wl-fb-seite p{font-size:1rem;margin:0 0 .85rem}
.wl-fb-seite p:last-child{margin-bottom:0}
.wl-fb-seite ul{list-style:none;display:grid;gap:.5rem;margin:0 0 .9rem;padding:0}
.wl-fb-seite li{position:relative;background:#F4F9F6;border-radius:8px;padding:.72rem .9rem .72rem 2.2rem;font-size:.96rem;line-height:1.55;color:#33403A;margin:0}
.wl-fb-seite li::before{content:'';position:absolute;left:.95rem;top:1.12rem;width:7px;height:7px;border-radius:50%;background:#F4A620}
.wl-fb-seite li strong{color:#1E3D31}
.wl-fb-seite .gross{font-size:3rem;margin:.2rem 0 .4rem;color:#2D6A4F}
.wl-fb-seite a{color:#8F6A1C;font-weight:600}
@media(min-width:760px){.wl-fb-seite ul.zwei{grid-template-columns:1fr 1fr}}
.wl-fb-steuerung{padding:.65rem .9rem}
@media(max-width:560px){.wl-fb-seite{padding:1.3rem 1.1rem 1.5rem}.wl-fb-seite h4{font-size:1.2rem}.wl-fb-seite li{padding-left:2rem;font-size:.93rem}.wl-fb-zaehler{display:none}}
/* WL-CTA-ROBUST (20.08.2026): Der Mega-Menue-Renderer reicht Item-Klassen nicht durch.
Deshalb wird der Mitglied-werden-Knopf ueber sein Ziel angesprochen. */
#wl-header .wl-nav-item > a[href$="/mitglied-werden/"],
header .wl-nav > li > a[href$="/mitglied-werden/"]{
background:#F4A620;color:#1E3D31 !important;border-radius:9px;
padding:10px 20px !important;font-weight:800;letter-spacing:.01em;
box-shadow:0 2px 8px rgba(0,0,0,.18);transition:background .15s,transform .15s;
}
#wl-header .wl-nav-item > a[href$="/mitglied-werden/"]:hover,
header .wl-nav > li > a[href$="/mitglied-werden/"]:hover{
background:#FFC21F;transform:translateY(-1px);
}
#wl-header .wl-nav-item > a[href$="/mitglied-werden/"]::after{display:none !important}
/* ============================================================
WL-KOPFLEISTE-CSS (20.08.2026)
Suche als Lupe, die sich auf Klick aufklappt, und ein
goldener Knopf fuer "Mitglied werden".
============================================================ */
.wl-suche{display:flex;align-items:center;gap:0;width:auto !important;max-width:none}
.wl-suche-knopf{background:none;border:0;padding:6px;margin:0;cursor:pointer;color:#EAF3EE;display:flex;align-items:center;border-radius:8px;transition:color .15s,background .15s}
.wl-suche-knopf:hover{color:#F4A620;background:rgba(255,255,255,.08)}
.wl-suche input[name="s"]{flex:0 0 0 !important;width:0 !important;padding:0 !important;border:0 !important;opacity:0;transition:width .25s ease,opacity .2s ease,padding .25s ease;background:rgba(255,255,255,.12);color:#fff;border-radius:8px;font:inherit;font-size:14px}
.wl-suche input[name="s"]::placeholder{color:#B9D2C4}
.wl-suche.is-auf input[name="s"]{flex:0 0 190px !important;width:190px !important;padding:8px 12px !important;opacity:1;outline:1px solid rgba(244,166,32,.6)}
@media (prefers-reduced-motion: reduce){.wl-suche input[name="s"]{transition:none}}
a.wl-mw-knopf{border-radius:999px !important;
background:#F4A620 !important;color:#1E3D31 !important;
border-radius:999px;padding:10px 22px !important;
font-weight:700;font-size:15px;letter-spacing:.01em;
box-shadow:0 2px 10px rgba(0,0,0,.2);
transition:background .15s ease,transform .15s ease;
white-space:nowrap;text-decoration:none !important;
}
a.wl-mw-knopf:hover{background:#FFC21F !important;transform:translateY(-1px)}
a.wl-mw-knopf::after{display:none !important}
@media (max-width:640px){a.wl-mw-knopf{padding:8px 16px !important;font-size:14px}.wl-suche.is-auf input[name="s"]{flex:0 0 130px !important;width:130px !important}}
/* WL-ABSTAND-SIDEBAR (20.08.2026): Die Regionen-Navigation klebte direkt
am Block "Das könnte dich auch interessieren". */
.wl-related-posts{margin-bottom:0}
.wl-single-sidebar{margin-top:40px}
.wl-single-sidebar .wl-region-nav{margin-top:0}
@media(max-width:782px){.wl-single-sidebar{margin-top:32px}}
/* ============================================================
WL-NL-FORMULAR (20.08.2026)
Das FluentForms-Formular steht in den Newsletter-Kästen auf
dunkelgrünem Grund. FluentForms bringt dunkle Schrift mit,
die dort unlesbar ist — hier auf hell gestellt.
============================================================ */
.wl-newsletter .frm-fluent-form label,
.wl-newsletter .frm-fluent-form .ff-el-input--label label,
.wl-newsletter .frm-fluent-form .ff-el-form-check-label,
.wl-sidebar-newsletter .frm-fluent-form label,
.wl-sidebar-newsletter .frm-fluent-form .ff-el-input--label label,
.wl-sidebar-newsletter .frm-fluent-form .ff-el-form-check-label{
color:#EAF3EE !important;
}
.wl-newsletter .ff-custom_html p,
.wl-sidebar-newsletter .ff-custom_html p,
.wl-newsletter .frm-fluent-form .ff_custom_html p,
.wl-sidebar-newsletter .frm-fluent-form .ff_custom_html p{
color:#B9D2C4 !important;
}
.wl-newsletter .ff-custom_html a,
.wl-sidebar-newsletter .ff-custom_html a,
.wl-newsletter .frm-fluent-form .ff_custom_html a,
.wl-sidebar-newsletter .frm-fluent-form .ff_custom_html a{
color:#F4A620 !important;text-decoration:underline;
}
.wl-newsletter .frm-fluent-form .ff-el-is-error .text-danger,
.wl-sidebar-newsletter .frm-fluent-form .ff-el-is-error .text-danger,
.wl-newsletter .frm-fluent-form .error,
.wl-sidebar-newsletter .frm-fluent-form .error{
color:#FFC9A8 !important;
}
.wl-newsletter .frm-fluent-form input[type="email"],
.wl-sidebar-newsletter .frm-fluent-form input[type="email"]{
background:#FFFFFF;color:#1E2B26;border:1px solid rgba(255,255,255,.35);border-radius:8px;
}
.wl-newsletter .frm-fluent-form input[type="email"]::placeholder,
.wl-sidebar-newsletter .frm-fluent-form input[type="email"]::placeholder{
color:#6B7670;
}
/* Das Sternchen für Pflichtfelder */
.wl-newsletter .frm-fluent-form .ff-el-is-required:after,
.wl-sidebar-newsletter .frm-fluent-form .ff-el-is-required:after{color:#F4A620 !important}
/* Kontrollkästchen sichtbar machen */
.wl-newsletter .frm-fluent-form input[type="checkbox"],
.wl-sidebar-newsletter .frm-fluent-form input[type="checkbox"]{
accent-color:#F4A620;width:17px;height:17px;
}
/* WL-NL-FEINSCHLIFF (20.08.2026): Größen und Abstände im Newsletter-Kasten */
.wl-newsletter h2{font-size:3.1rem;line-height:1.12;margin-top:14px}
.wl-newsletter .wl-container > img{margin-bottom:26px !important}
.wl-sidebar-newsletter h4{font-size:1.35rem;line-height:1.25;margin-top:10px}
.wl-sidebar-newsletter .wl-sidebar-newsletter-icon{margin-bottom:16px}
.wl-newsletter .ff-el-form-check-label,
.wl-sidebar-newsletter .ff-el-form-check-label{font-size:.86rem;line-height:1.5}
.wl-newsletter .ff-custom_html p,
.wl-sidebar-newsletter .ff-custom_html p{font-size:.8rem;line-height:1.5}
@media(max-width:600px){.wl-newsletter h2{font-size:2.25rem}}
/* WL-NL-ZEILEN (20.08.2026): Der Einwilligungssatz soll auf drei Zeilen ausgehen,
auf breiten wie auf schmalen Schirmen. Deshalb Breite begrenzen und
die Schrift in zwei Stufen abstufen. */
.wl-newsletter .ff-el-form-check{max-width:34rem;margin-left:auto;margin-right:auto}
@media(max-width:820px){
.wl-newsletter .ff-el-form-check-label,
.wl-sidebar-newsletter .ff-el-form-check-label{font-size:.8rem;line-height:1.45}
}
@media(max-width:480px){
.wl-newsletter .ff-el-form-check-label,
.wl-sidebar-newsletter .ff-el-form-check-label{font-size:.75rem;line-height:1.45}
}
/* WL-NL-SEITENLEISTE (20.08.2026)
Der schmale Kasten ist rund 300 px breit, auch auf grossen Schirmen.
Media Queries greifen dort nicht, weil sie das Fenster messen, nicht
den Kasten. Deshalb hier feste Groessen fuer diesen Kasten. */
.wl-sidebar-newsletter h4{font-size:1.35rem !important;line-height:1.25;margin:10px 0 6px}
.wl-sidebar-newsletter .wl-sidebar-newsletter-icon{margin-bottom:18px}
.wl-sidebar-newsletter .ff-el-form-check-label{font-size:.75rem !important;line-height:1.45}
.wl-sidebar-newsletter .ff-custom_html p{font-size:.72rem !important;line-height:1.5}
.wl-sidebar-newsletter .ff-el-input--label label{font-size:.86rem !important}
/* ============================================================
WL-SIDEBAR-EINHEITLICH (20.08.2026)
Die zweispaltige Aufteilung galt bisher nur fuer Videos
(.single-wl_video). Beitraege, Huetten und Touren zeigten die
Seitenleiste darunter statt daneben. Jetzt einheitlich.
============================================================ */
@media (min-width:900px){
.single-post .wl-single-layout,
.single-huette .wl-single-layout,
.single-wanderung .wl-single-layout,
.wl-single-layout:has(> .wl-single-sidebar){
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:44px;
align-items:start;
}
.single-post .wl-single-sidebar,
.single-huette .wl-single-sidebar,
.single-wanderung .wl-single-sidebar,
.wl-single-layout > .wl-single-sidebar{
margin-top:0;
position:sticky;
top:130px;
}
}
/* Nachtrag 22.08.2026: zusaetzlich generisch ueber :has(), damit jedes
Single-Template mit Seitenleiste automatisch zweispaltig laeuft. */
/* ============================================================
WL-ANREISE-MARKUP (22.08.2026)
Anreise-Felder der V-Cloud-Touren enthalten HTML. Ausgabe jetzt
ueber wp_kses_post statt esc_html; hier die Typografie dazu.
============================================================ */
.wl-tour-anreise__wert{color:var(--wl-mid);flex:1;min-width:0}
.wl-tour-anreise__wert p{margin:0 0 6px}
.wl-tour-anreise__wert p:last-child{margin-bottom:0}
.wl-tour-anreise__wert a{color:var(--wl-green);text-decoration:underline}
.wl-tour-anreise__wert a:hover{color:var(--wl-green-dark)}
/* ============================================================
WL-TDW-KARTE (22.08.2026)
Tour der Woche auf der Startseite: Markup lag bisher ohne
Container und ohne Styles direkt im Body.
============================================================ */
.wl-tdw-sec{padding:4px 0 44px}
.wl-tdw{display:flex;align-items:stretch;background:#fff;border:1px solid var(--wl-border);border-radius:var(--wl-radius-md);overflow:hidden;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:box-shadow .2s ease,transform .2s ease}
.wl-tdw:hover{box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-2px)}
.wl-tdw__img{flex:0 0 320px;background-size:cover;background-position:center;min-height:200px}
.wl-tdw__body{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:26px 30px;min-width:0}
.wl-tdw__tag{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#F4A620}
.wl-tdw__title{font-family:'Playfair Display',Georgia,serif;font-size:25px;line-height:1.25;color:var(--wl-dark)}
.wl-tdw__region{font-size:13px;color:var(--wl-mid)}
.wl-tdw__cta{margin-top:6px;font-size:14px;font-weight:600;color:var(--wl-green)}
@media(max-width:700px){.wl-tdw{flex-direction:column}.wl-tdw__img{flex:0 0 190px;min-height:190px}.wl-tdw__body{padding:20px 22px}.wl-tdw__title{font-size:21px}}
/* === WL-REGION-NAV: Orte als kompakte Chips ========================== */
.wl-region-nav .wl-rn__orte>ul{flex-direction:row!important;flex-wrap:wrap!important;gap:5px!important;padding:8px 12px 12px!important;align-items:flex-start!important}
.wl-region-nav .wl-rn__orte>ul>li.wl-rn__ort{width:auto!important;flex:0 0 auto!important;margin:0!important;line-height:0!important}
.wl-region-nav .wl-rn__orte>ul>li.wl-rn__ort>a{display:inline-block!important;width:auto!important;padding:4px 10px!important;border-radius:999px!important;background:#eef4f0!important;border:1px solid #dbe7e0!important;color:#2D6A4F!important;font-size:12px!important;line-height:1.4!important;white-space:nowrap!important;text-decoration:none!important;vertical-align:top;box-shadow:none!important}
.wl-region-nav .wl-rn__orte>ul>li.wl-rn__ort>a:hover,.wl-region-nav .wl-rn__orte>ul>li.wl-rn__ort>a:focus-visible{background:#2D6A4F!important;border-color:#2D6A4F!important;color:#fff!important}
/* ---------------------------------------------------------------------------
* Querkarten in Regions- und Kategorielisten (29.08.2026)
* Ersetzt die schmalen Textzeilen: Bild links, Text und Kennzahlen rechts.
* ------------------------------------------------------------------------- */
.wl-zeilen{display:flex;flex-direction:column;gap:14px}
.wl-quer{display:flex;gap:16px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .18s ease,transform .18s ease}
.wl-quer:hover{box-shadow:0 6px 20px rgba(0,0,0,.10);transform:translateY(-2px)}
.wl-quer__bild{position:relative;flex:0 0 210px;min-height:150px;overflow:hidden;background:#EAF1EE}
.wl-quer__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wl-quer__ersatz{position:absolute;inset:0;background:linear-gradient(160deg,#2D6A4F 0%,#1B4332 100%)}
.wl-quer__text{display:flex;flex-direction:column;gap:6px;padding:16px 18px 16px 0;min-width:0;flex:1}
.wl-quer__kopf{display:flex;gap:10px;align-items:center;font-size:12px;color:#6B7280;text-transform:uppercase;letter-spacing:.04em}
.wl-quer__titel{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:600;line-height:1.25;color:#1B4332}
.wl-quer__anriss{font-size:14px;line-height:1.55;color:#4B5563;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wl-quer__zahlen{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;color:#2D6A4F}
@media(max-width:640px){
.wl-quer{flex-direction:column;gap:0}
.wl-quer__bild{flex:none;width:100%;height:170px;min-height:0}
.wl-quer__text{padding:14px 16px 16px}
.wl-quer__titel{font-size:18px}
}
/* Regionen-Wolke in der Sidebar (29.08.2026) */
.wl-regionen__wolke{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wl-regionen__pille{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1px solid rgba(45,106,79,.22);background:#F4F8F6;color:#1B4332;font-size:12.5px;line-height:1.2;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.wl-regionen__pille:hover{background:#2D6A4F;border-color:#2D6A4F;color:#fff}
.wl-regionen__pille span{font-size:11px;color:#6B7280;font-weight:600}
.wl-regionen__pille:hover span{color:#D8E8E0}
.wl-regionen__mehr{margin-top:10px}
.wl-regionen__mehr summary{cursor:pointer;font-size:12.5px;color:#2D6A4F;font-weight:600;list-style:none;padding:4px 0}
.wl-regionen__mehr summary::-webkit-details-marker{display:none}
.wl-regionen__mehr summary::before{content:'+ ';font-weight:700}
.wl-regionen__mehr[open] summary::before{content:'\2212 '}
.wl-regionen__wolke--klein .wl-regionen__pille{font-size:11.5px;padding:4px 8px}
/* Orte-Box nach Kategorien gruppiert (29.08.2026) */
.wl-orte__gruppe{border-top:1px solid rgba(0,0,0,.07);margin-top:0}
.wl-orte__gruppe summary{display:flex;justify-content:space-between;align-items:center;padding:9px 0;color:#1B4332;font-weight:600;font-size:13px}
.wl-orte__gruppe summary b{font-weight:600;color:#6B7280;font-size:11.5px}
.wl-orte__liste{display:flex;flex-direction:column;padding:0 0 8px}
.wl-orte__zeile{display:block;padding:6px 0 6px 10px;border-left:2px solid rgba(45,106,79,.20);font-size:13px;line-height:1.35;color:#374151;text-decoration:none}
.wl-orte__zeile:hover{border-left-color:#2D6A4F;color:#2D6A4F}
/* Ausflugsziele als Kategoriekacheln (29.08.2026) */
.wl-ziele__gitter{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.wl-ziele__kachel{display:flex;flex-direction:column;gap:2px;padding:12px 10px;border-radius:10px;background:#F4F8F6;color:#1B4332;text-decoration:none;transition:background .15s ease,transform .15s ease}
.wl-ziele__kachel:hover{background:#E2EEE8;transform:translateY(-1px)}
.wl-ziele__kachel svg{width:22px;height:22px;color:#2D6A4F;margin-bottom:4px}
.wl-ziele__name{font-size:13px;font-weight:600;line-height:1.25}
.wl-ziele__zahl{font-size:11.5px;color:#6B7280}
.wl-ziele__kachel--aktiv{background:#2D6A4F;color:#fff}
.wl-ziele__kachel--aktiv svg{color:#fff}
.wl-ziele__kachel--aktiv .wl-ziele__zahl{color:#CFE3D9}
.wl-ziele__kachel--aktiv:hover{background:#245A42}