/*
Theme Name: Eurovapor Deutschland
Theme URI: https://www.eurovapor-deutschland.de/
Template: twentytwentyone
Author: Betriebsgruppe Deutschland
Description: Editorial-Theme für Eurovapor Deutschland im klassischen Schwarz/Rot/Weiß-Schema. Mit Bilder-Slider, Aktuelles-Bereich, asymmetrischen Layouts und magazinhafter Tiefe.
Version: 3.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eurovapor-de
*/

/* ═══ TOKENS ═══════════════════════════════════════════════ */
:root {
    --ev-bg:          #fafafa;
    --ev-bg-soft:     #f0f0f0;
    --ev-bg-card:     #ffffff;
    --ev-bg-deep:     #1a1a1a;
    --ev-bg-dark:     #0a0a0a;
    --ev-bg-mid:      #2a2a2a;

    --ev-ink:         #0a0a0a;
    --ev-ink-soft:    #3a3a3a;
    --ev-ink-muted:   #707070;
    --ev-ink-light:   #9a9a9a;

    --ev-red:         #c41e1e;
    --ev-red-deep:    #8b1414;
    --ev-red-bright:  #e62828;
    --ev-red-soft:    #fde8e8;

    --ev-line:        #e5e5e5;
    --ev-line-strong: #cccccc;

    --ev-font-display: "Crimson Pro", Georgia, serif;
    --ev-font-body:    "Inter", -apple-system, sans-serif;
    --ev-font-mono:    "JetBrains Mono", monospace;
    --ev-font-accent:  "Caveat", cursive;

    --ev-maxw:        1320px;
    --ev-gutter:      clamp(1.25rem, 3vw, 2.5rem);
    --ev-radius:      6px;
    --ev-radius-lg:   12px;

    --ev-ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.eurovapor-de {
    margin: 0; padding: 0;
    background: var(--ev-bg);
    color: var(--ev-ink);
    font-family: var(--ev-font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
    color: var(--ev-red);
    text-decoration: none;
    transition: color 0.2s var(--ev-ease);
}
a:hover { color: var(--ev-red-deep); }

/* ═══ TYPOGRAFIE ═══════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ev-font-display);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ev-ink);
    margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-weight: 500; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; }

h4 {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-family: var(--ev-font-mono);
    color: var(--ev-red);
}

p { margin: 0 0 1.25em; }

.ev-script {
    font-family: var(--ev-font-accent);
    color: var(--ev-red);
    font-size: 1.4em;
    font-weight: 500;
    letter-spacing: 0;
}

.ev-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ev-font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ev-red);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.ev-eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--ev-red);
}

/* Editorial Section-Number (01, 02, 03 …) */
.ev-section-num {
    font-family: var(--ev-font-mono);
    font-size: 0.78rem;
    color: var(--ev-ink-light);
    letter-spacing: 0.2em;
    margin-right: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.ev-section-num::before {
    content: "—";
    margin-right: 0.5rem;
    color: var(--ev-red);
}

/* ═══ HEADER ═══════════════════════════════════════════════ */
.ev-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--ev-line);
}

.ev-site-header::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--ev-red);
}

.ev-header-inner {
    max-width: var(--ev-maxw);
    margin: 0 auto;
    padding: 1rem var(--ev-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.ev-site-title {
    font-family: var(--ev-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.ev-site-title::before {
    content: "EV";
    width: 40px;
    height: 40px;
    background: var(--ev-bg-deep);
    color: #fff;
    font-family: var(--ev-font-display);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid var(--ev-red);
    flex-shrink: 0;
    letter-spacing: 0;
}

.ev-site-title a { color: var(--ev-ink); }
.ev-site-title a:hover { color: var(--ev-red); }
.ev-site-description { display: none; }

.ev-main-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 0.3rem;
}

.ev-main-nav li { position: relative; }

.ev-main-nav a {
    display: block;
    padding: 0.55rem 1rem;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--ev-ink-soft);
    border-radius: var(--ev-radius);
    transition: all 0.2s var(--ev-ease);
}

.ev-main-nav a:hover,
.ev-main-nav .current-menu-item > a,
.ev-main-nav .current_page_item > a {
    color: var(--ev-red);
    background: var(--ev-bg-soft);
}

.ev-main-nav li:last-child a,
.ev-main-nav .menu-item-tickets > a {
    background: var(--ev-red);
    color: #fff;
    padding: 0.6rem 1.4rem;
    margin-left: 0.5rem;
    font-weight: 600;
}

.ev-main-nav li:last-child a:hover,
.ev-main-nav .menu-item-tickets > a:hover {
    background: var(--ev-red-deep);
    color: #fff;
    transform: translateY(-1px);
}

.ev-main-nav ul ul {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 240px;
    background: var(--ev-bg-card);
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-radius);
    padding: 0.5rem;
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.3);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s var(--ev-ease);
    flex-direction: column;
}

.ev-main-nav li:hover > ul,
.ev-main-nav li:focus-within > ul {
    opacity: 1; visibility: visible;
    transform: translateY(0);
}

.ev-main-nav ul ul a {
    padding: 0.55rem 0.85rem;
    font-size: 0.88rem;
}

.ev-mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--ev-line-strong);
    color: var(--ev-ink);
    padding: 0.5rem 0.9rem;
    font-family: var(--ev-font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: var(--ev-radius);
}

/* ═══════════════════════════════════════════════════════════
   HERO SLIDER – Cinematic mit Ken-Burns + Pfeile
   ═══════════════════════════════════════════════════════════ */

.ev-hero {
    position: relative;
    min-height: min(92vh, 880px);
    background: var(--ev-bg-dark);
    color: #fafafa;
    overflow: hidden;
    isolation: isolate;
}

/* Slider Container */
.ev-slider {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.ev-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s var(--ev-ease), visibility 1.5s;
    overflow: hidden;
}

.ev-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Ken-Burns Effekt nur auf aktivem Slide */
.ev-slide-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 8s linear;
}

.ev-slide.is-active .ev-slide-image {
    animation: ev-kenburns 12s ease-out forwards;
}

@keyframes ev-kenburns {
    0%   { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.18) translate(-2%, -2%); }
}

/* Dunkler Overlay über dem Bild */
.ev-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10, 10, 10, 0.4) 0%,
            rgba(10, 10, 10, 0.55) 50%,
            rgba(10, 10, 10, 0.85) 100%),
        linear-gradient(90deg,
            rgba(10, 10, 10, 0.7) 0%,
            rgba(10, 10, 10, 0.2) 60%,
            transparent 100%);
}

/* Roter Glanz-Akzent */
.ev-slide::before {
    content: "";
    position: absolute;
    top: 20%; right: 5%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(196, 30, 30, 0.18) 0%, transparent 60%);
    border-radius: 50%;
    filter: blur(40px);
    z-index: 1;
    animation: ev-glow 18s ease-in-out infinite;
}

@keyframes ev-glow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.2); }
}

/* CSS-Slide Backgrounds (Platzhalter wenn keine Fotos da sind) */
.ev-slide-bg-1 .ev-slide-image {
    background:
        radial-gradient(ellipse 800px 400px at 20% 60%, rgba(255, 255, 255, 0.08), transparent 50%),
        linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 70%, #000 100%);
}

.ev-slide-bg-2 .ev-slide-image {
    background:
        radial-gradient(ellipse 600px 500px at 80% 30%, rgba(196, 30, 30, 0.15), transparent 60%),
        radial-gradient(ellipse 700px 400px at 30% 70%, rgba(255, 255, 255, 0.06), transparent 50%),
        linear-gradient(180deg, #0a0a0a 0%, #1f1414 60%, #0a0a0a 100%);
}

.ev-slide-bg-3 .ev-slide-image {
    background:
        radial-gradient(ellipse 900px 500px at 50% 50%, rgba(196, 30, 30, 0.1), transparent 60%),
        repeating-linear-gradient(90deg,
            transparent 0 80px,
            rgba(255, 255, 255, 0.015) 80px 81px),
        linear-gradient(180deg, #1a1a1a, #0a0a0a);
}

.ev-slide-bg-4 .ev-slide-image {
    background:
        radial-gradient(ellipse 700px 700px at 70% 80%, rgba(255, 255, 255, 0.08), transparent 60%),
        radial-gradient(ellipse 600px 400px at 30% 30%, rgba(196, 30, 30, 0.12), transparent 60%),
        linear-gradient(180deg, #0f0f0f 0%, #0a0a0a 100%);
}

/* Slide Content Position - Hero Inner */
.ev-hero-inner {
    max-width: var(--ev-maxw);
    margin: 0 auto;
    padding: 9rem var(--ev-gutter) 14rem;
    position: relative;
    z-index: 5;
}

.ev-hero-content {
    max-width: 760px;
}

.ev-hero .ev-eyebrow {
    color: var(--ev-red-bright);
}

.ev-hero .ev-eyebrow::before {
    background: var(--ev-red-bright);
}

.ev-hero h1 {
    color: #fafafa;
    font-size: clamp(2.5rem, 7vw, 6rem);
    margin-bottom: 1.5rem;
    line-height: 0.98;
    font-weight: 500;
}

.ev-hero h1 .ev-script {
    font-family: var(--ev-font-accent);
    color: var(--ev-red-bright);
    font-size: 1em;
    display: block;
    margin-bottom: -0.2em;
    font-weight: 500;
    letter-spacing: 0;
    transform: rotate(-2deg);
    transform-origin: left bottom;
}

.ev-hero-lead {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.55;
    color: rgba(250, 250, 250, 0.82);
    max-width: 580px;
    margin-bottom: 2.5rem;
}

.ev-hero-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.ev-btn-primary, .ev-btn-secondary, .ev-btn-ticket {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.75rem;
    font-family: var(--ev-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--ev-radius);
    transition: all 0.25s var(--ev-ease);
    text-decoration: none;
    border: none;
}

.ev-btn-ticket {
    background: var(--ev-red);
    color: #fff;
    padding: 1rem 2rem;
}

.ev-btn-ticket:hover {
    background: var(--ev-red-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -10px rgba(196, 30, 30, 0.5);
}

.ev-btn-primary {
    background: #fafafa;
    color: var(--ev-bg-deep);
}

.ev-btn-primary:hover {
    background: #fff;
    color: var(--ev-red);
    transform: translateY(-2px);
}

.ev-btn-secondary {
    background: transparent;
    color: #fafafa;
    border: 1.5px solid rgba(250, 250, 250, 0.3);
    font-weight: 500;
}

.ev-btn-secondary:hover {
    border-color: var(--ev-red-bright);
    color: var(--ev-red-bright);
}

.ev-btn-primary .arrow, .ev-btn-ticket .arrow {
    transition: transform 0.25s var(--ev-ease);
}
.ev-btn-primary:hover .arrow,
.ev-btn-ticket:hover .arrow { transform: translateX(4px); }

/* ─── Slider Controls ─── */

.ev-slider-controls {
    position: absolute;
    bottom: 9rem;
    right: var(--ev-gutter);
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    pointer-events: all;
}

.ev-slider-arrow {
    width: 48px;
    height: 48px;
    border: 1.5px solid rgba(250, 250, 250, 0.25);
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(10px);
    color: #fafafa;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s var(--ev-ease);
    font-size: 1.1rem;
}

.ev-slider-arrow:hover {
    background: var(--ev-red);
    border-color: var(--ev-red);
    color: #fff;
    transform: scale(1.05);
}

/* Pagination Dots */
.ev-slider-dots {
    position: absolute;
    bottom: 9rem;
    left: var(--ev-gutter);
    z-index: 10;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    pointer-events: all;
}

.ev-slider-dot {
    width: 24px;
    height: 3px;
    background: rgba(250, 250, 250, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s var(--ev-ease);
    padding: 0;
    border-radius: 2px;
}

.ev-slider-dot.is-active {
    background: var(--ev-red-bright);
    width: 40px;
}

.ev-slider-dot:hover {
    background: rgba(250, 250, 250, 0.6);
}

/* Slider Counter */
.ev-slider-counter {
    position: absolute;
    bottom: 9rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    font-family: var(--ev-font-mono);
    font-size: 0.85rem;
    color: rgba(250, 250, 250, 0.5);
    letter-spacing: 0.15em;
    font-variant-numeric: tabular-nums;
}

.ev-slider-counter strong {
    color: var(--ev-red-bright);
    font-weight: 600;
}

/* Quick-Info-Bar */
.ev-hero-quickinfo {
    position: absolute;
    bottom: 2rem;
    left: 0; right: 0;
    z-index: 7;
}

.ev-hero-quickinfo-inner {
    max-width: var(--ev-maxw);
    margin: 0 auto;
    padding: 0 var(--ev-gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(196, 30, 30, 0.3);
    border-radius: var(--ev-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6);
}

.ev-quick-item {
    padding: 1.25rem 1.5rem;
    border-right: 1px solid rgba(196, 30, 30, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ev-quick-item:last-child { border-right: none; }

.ev-quick-label {
    font-family: var(--ev-font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(250, 250, 250, 0.55);
    font-weight: 500;
}

.ev-quick-value {
    font-family: var(--ev-font-display);
    font-size: 1.2rem;
    color: #fafafa;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.ev-quick-value.red { color: var(--ev-red-bright); }

/* ═══════════════════════════════════════════════════════════
   AKTUELLES SECTION – Asymmetrisches Layout
   ═══════════════════════════════════════════════════════════ */

.ev-aktuelles {
    background: var(--ev-bg);
    padding: 6rem var(--ev-gutter);
    position: relative;
}

.ev-aktuelles-inner {
    max-width: var(--ev-maxw);
    margin: 0 auto;
}

.ev-aktuelles-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ev-line);
}

.ev-aktuelles-header h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
}

.ev-aktuelles-header h2 .ev-script {
    color: var(--ev-red);
    font-size: 1em;
}

.ev-aktuelles-link {
    font-family: var(--ev-font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ev-ink);
    border-bottom: 2px solid var(--ev-red);
    padding-bottom: 0.2rem;
    font-weight: 600;
    white-space: nowrap;
}

.ev-aktuelles-link:hover { color: var(--ev-red); }

/* Asymmetrisches Grid: 1 großer + 2 kleine */
.ev-aktuelles-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
}

.ev-aktuelles-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* News Card – generell */
.ev-news-card {
    background: var(--ev-bg-card);
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-radius-lg);
    overflow: hidden;
    transition: all 0.3s var(--ev-ease);
    text-decoration: none !important;
    color: var(--ev-ink) !important;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
}

.ev-news-card:hover {
    border-color: var(--ev-red);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.18);
}

/* Featured (großer) Card */
.ev-news-card.is-featured {
    grid-row: span 2;
}

.ev-news-card-visual {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--ev-bg-deep), var(--ev-bg-mid));
    position: relative;
    overflow: hidden;
}

.ev-news-card-visual::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(196, 30, 30, 0.25), transparent 60%),
        radial-gradient(ellipse at 70% 30%, rgba(255, 255, 255, 0.05), transparent 50%);
    transition: transform 0.6s var(--ev-ease);
}

.ev-news-card:hover .ev-news-card-visual::before {
    transform: scale(1.15);
}

.ev-news-card.is-featured .ev-news-card-visual {
    aspect-ratio: 16/9;
}

/* Datum-Badge auf dem Visual */
.ev-news-date-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--ev-radius);
    padding: 0.5rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    border-bottom: 3px solid var(--ev-red);
}

.ev-news-date-day {
    font-family: var(--ev-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ev-ink);
    letter-spacing: -0.02em;
}

.ev-news-date-month {
    font-family: var(--ev-font-mono);
    font-size: 0.68rem;
    color: var(--ev-red);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-top: 0.2rem;
}

/* Kategorie Tag oben rechts */
.ev-news-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background: var(--ev-red);
    color: #fff;
    font-family: var(--ev-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.3rem 0.7rem;
    border-radius: 100px;
    font-weight: 600;
}

.ev-news-tag.tag-news { background: var(--ev-bg-deep); }
.ev-news-tag.tag-fahrt { background: var(--ev-red); }
.ev-news-tag.tag-veranstaltung { background: #5f7a3f; }

/* Card Body */
.ev-news-card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ev-news-card.is-featured .ev-news-card-body {
    padding: 2rem;
}

.ev-news-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ev-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ev-ink-muted);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.ev-news-card-meta .dot {
    width: 4px; height: 4px;
    background: var(--ev-red);
    border-radius: 50%;
}

.ev-news-card-body h3 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
}

.ev-news-card.is-featured .ev-news-card-body h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.ev-news-card-body p {
    color: var(--ev-ink-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0.5rem 0 0;
    flex-grow: 1;
}

.ev-news-card.is-featured .ev-news-card-body p {
    font-size: 1.05rem;
    line-height: 1.65;
}

.ev-news-card-readmore {
    margin-top: 1rem;
    font-family: var(--ev-font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ev-red);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ev-news-card:hover .ev-news-card-readmore {
    color: var(--ev-red-deep);
}

/* Compact Card (kleiner Variante in Sidebar) */
.ev-news-card.is-compact {
    flex-direction: row;
    height: auto;
}

.ev-news-card.is-compact .ev-news-card-visual {
    width: 140px;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.ev-news-card.is-compact .ev-news-card-body {
    padding: 1rem 1.25rem;
}

.ev-news-card.is-compact .ev-news-card-body h3 {
    font-size: 1.05rem;
    line-height: 1.3;
}

.ev-news-card.is-compact .ev-news-card-body p {
    display: none;
}

.ev-news-card.is-compact .ev-news-date-badge {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.35rem 0.55rem;
}

.ev-news-card.is-compact .ev-news-date-day {
    font-size: 1.2rem;
}

.ev-news-card.is-compact .ev-news-tag {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════════════ */

.ev-site-main {
    max-width: var(--ev-maxw);
    margin: 0 auto;
    padding: 5rem var(--ev-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 4rem;
    align-items: start;
}

.home .ev-site-main {
    grid-template-columns: 1fr;
    padding-top: 0;
}

.ev-content-area { min-width: 0; }
.ev-page-section { margin-bottom: 5rem; }

.ev-section-header {
    margin-bottom: 3rem;
    max-width: 720px;
}

.ev-section-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ev-line);
}

.ev-section-header-row h2 { margin: 0 0 0.3em; }

.ev-section-header-row a {
    font-family: var(--ev-font-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ev-ink);
    white-space: nowrap;
    border-bottom: 2px solid var(--ev-red);
    padding-bottom: 0.2rem;
    font-weight: 600;
}

.ev-section-header-row a:hover { color: var(--ev-red); }

/* ═══════════════════════════════════════════════════════════
   MANIFESTO QUOTE – Editorial Statement
   ═══════════════════════════════════════════════════════════ */

.ev-manifesto {
    background: var(--ev-bg-deep);
    color: #fafafa;
    padding: 7rem var(--ev-gutter);
    position: relative;
    overflow: hidden;
    margin: 5rem calc(var(--ev-gutter) * -1);
}

.ev-manifesto::before {
    content: """;
    position: absolute;
    top: -1rem;
    left: 5%;
    font-family: var(--ev-font-display);
    font-size: clamp(15rem, 30vw, 25rem);
    color: rgba(196, 30, 30, 0.08);
    line-height: 1;
    pointer-events: none;
    font-weight: 700;
}

.ev-manifesto-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ev-manifesto blockquote {
    font-family: var(--ev-font-display);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.4;
    color: #fafafa;
    margin: 0 0 2rem;
    padding: 0;
    border: none;
    background: transparent;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.ev-manifesto blockquote em {
    color: var(--ev-red-bright);
    font-style: italic;
}

.ev-manifesto-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--ev-font-mono);
    font-size: 0.85rem;
    color: rgba(250, 250, 250, 0.6);
    letter-spacing: 0.05em;
}

.ev-manifesto-author::before {
    content: "";
    width: 40px;
    height: 1px;
    background: var(--ev-red-bright);
}

.ev-manifesto-author strong {
    color: #fafafa;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ═══════════════════════════════════════════════════════════
   FAHRZEUG-CARDS
   ═══════════════════════════════════════════════════════════ */

.ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Asymmetrisches Lokomotiven-Grid: 2 große + 4 kleine */
.ev-grid-asymmetric {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}

.ev-grid-asymmetric .ev-card:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.ev-grid-asymmetric .ev-card:nth-child(2) { grid-column: span 2; }
.ev-grid-asymmetric .ev-card:nth-child(3) { grid-column: span 2; }
.ev-grid-asymmetric .ev-card:nth-child(4) { grid-column: span 2; }
.ev-grid-asymmetric .ev-card:nth-child(5) { grid-column: span 2; }
.ev-grid-asymmetric .ev-card:nth-child(6) { grid-column: span 2; }

.ev-card {
    background: var(--ev-bg-card);
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-radius-lg);
    padding: 0;
    overflow: hidden;
    transition: all 0.3s var(--ev-ease);
    text-decoration: none !important;
    color: var(--ev-ink) !important;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.ev-card:hover {
    transform: translateY(-6px);
    border-color: var(--ev-red);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.2);
}

.ev-card-visual {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--ev-bg-deep), var(--ev-bg-mid));
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid var(--ev-red);
}

.ev-card-visual::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(196, 30, 30, 0.2), transparent 60%),
        radial-gradient(ellipse at 70% 70%, rgba(196, 30, 30, 0.1), transparent 50%);
    transition: transform 0.6s var(--ev-ease);
}

.ev-card:hover .ev-card-visual::before {
    transform: scale(1.1);
}

.ev-card-visual-num {
    position: relative;
    z-index: 1;
    font-family: var(--ev-font-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 600;
    color: #fafafa;
    letter-spacing: -0.02em;
    text-shadow: 2px 4px 12px rgba(0,0,0,0.4);
}

.ev-grid-asymmetric .ev-card:nth-child(1) .ev-card-visual-num {
    font-size: clamp(4rem, 8vw, 6rem);
}

.ev-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.ev-grid-asymmetric .ev-card:nth-child(1) .ev-card-body {
    padding: 2rem;
}

.ev-card-body h3 {
    margin: 0;
    font-size: 1.3rem;
}

.ev-grid-asymmetric .ev-card:nth-child(1) .ev-card-body h3 {
    font-size: 1.6rem;
}

.ev-card-body small {
    font-family: var(--ev-font-mono);
    font-size: 0.76rem;
    color: var(--ev-red);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.ev-card-body p {
    color: var(--ev-ink-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0.5rem 0 0;
    flex-grow: 1;
}

.ev-card-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.75rem;
    font-family: var(--ev-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 100px;
    align-self: flex-start;
}

.ev-card-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: ev-pulse 2s ease-in-out infinite;
}

.ev-card-status.einsatzbereit  { color: #1d6b3a; background: #e6f4ea; }
.ev-card-status.in-aufarbeitung,
.ev-card-status.aufarbeitung   { color: var(--ev-red); background: var(--ev-red-soft); }
.ev-card-status.abgestellt     { color: var(--ev-ink-muted); background: var(--ev-bg-soft); }

@keyframes ev-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.ev-card-visual .ev-card-status {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.95);
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════
   WERKSTATT-BLOCK (Editorial / Behind the scenes)
   ═══════════════════════════════════════════════════════════ */

.ev-werkstatt {
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: 4rem;
    align-items: center;
    padding: 4rem 0;
    border-top: 1px solid var(--ev-line);
    border-bottom: 1px solid var(--ev-line);
    margin: 4rem 0;
}

.ev-werkstatt-visual {
    aspect-ratio: 4/5;
    background: var(--ev-bg-deep);
    border-radius: var(--ev-radius-lg);
    overflow: hidden;
    position: relative;
}

.ev-werkstatt-visual::before {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg,
            transparent 0 30px,
            rgba(196, 30, 30, 0.05) 30px 31px),
        radial-gradient(ellipse at 70% 30%, rgba(196, 30, 30, 0.2), transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(255, 255, 255, 0.06), transparent 50%);
}

.ev-werkstatt-visual::after {
    content: "1962";
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    font-family: var(--ev-font-display);
    font-size: 5rem;
    font-weight: 600;
    color: var(--ev-red-bright);
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.ev-werkstatt-content {
    padding: 1rem 0;
}

.ev-werkstatt-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

.ev-werkstatt-content p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ev-ink-soft);
    margin-bottom: 1.25rem;
}

/* Highlights-Liste in Werkstatt-Block */
.ev-highlight-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ev-highlight-list li {
    padding: 0.75rem 0 0.75rem 1.5rem;
    border-top: 1px solid var(--ev-line);
    font-family: var(--ev-font-mono);
    font-size: 0.85rem;
    color: var(--ev-ink-soft);
    position: relative;
}

.ev-highlight-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--ev-red);
    font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════
   STATS - Reimagined (asymmetric)
   ═══════════════════════════════════════════════════════════ */

.ev-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--ev-bg-deep);
    color: #fafafa;
    border-radius: var(--ev-radius-lg);
    overflow: hidden;
    margin: 4rem 0;
    position: relative;
}

.ev-stats-strip::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ev-red);
}

.ev-stat-item {
    padding: 2.5rem 2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.ev-stat-item:last-child { border-right: none; }

.ev-stat-num {
    font-family: var(--ev-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: var(--ev-red-bright);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.ev-stat-label {
    font-family: var(--ev-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════════════════ */

.ev-cta-banner {
    background: var(--ev-bg-deep);
    color: #fafafa;
    padding: 5rem var(--ev-gutter);
    text-align: center;
    margin: 5rem calc(var(--ev-gutter) * -1) 0;
    position: relative;
    overflow: hidden;
}

.ev-cta-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--ev-red);
}

.ev-cta-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(196, 30, 30, 0.15), transparent 70%);
    pointer-events: none;
}

.ev-cta-banner > * { position: relative; z-index: 1; }

.ev-cta-banner h2 {
    color: #fafafa;
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

.ev-cta-banner h2 .ev-script {
    color: var(--ev-red-bright);
}

.ev-cta-banner p {
    font-size: 1.1rem;
    color: rgba(250, 250, 250, 0.7);
    max-width: 560px;
    margin: 0 auto 2rem;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */

.ev-sidebar {
    font-size: 0.95rem;
    position: sticky;
    top: 100px;
}

.ev-widget {
    background: var(--ev-bg-card);
    border: 1px solid var(--ev-line);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--ev-radius-lg);
    position: relative;
}

.ev-widget::before {
    content: "";
    position: absolute;
    top: 0; left: 1.5rem; right: 1.5rem;
    height: 3px;
    background: var(--ev-red);
}

.ev-widget h3,
.ev-widget .widget-title {
    font-family: var(--ev-font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ev-ink);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ev-line);
    font-weight: 600;
}

.ev-widget ul { list-style: none; padding: 0; margin: 0; }
.ev-widget li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--ev-line);
}
.ev-widget li:last-child { border-bottom: none; }

.ev-widget a {
    color: var(--ev-ink);
    font-size: 0.92rem;
    display: block;
    transition: all 0.2s var(--ev-ease);
}

.ev-widget a:hover {
    color: var(--ev-red);
    transform: translateX(4px);
}

.ev-widget.ev-shop-widget {
    background: var(--ev-bg-deep);
    color: #fff;
    border-color: var(--ev-bg-deep);
}

.ev-widget.ev-shop-widget::before { background: var(--ev-red-bright); }

.ev-widget.ev-shop-widget h3,
.ev-widget.ev-shop-widget .widget-title {
    color: #fff;
    border-color: rgba(255,255,255,0.15);
}

.ev-widget.ev-shop-widget p {
    color: rgba(255,255,255,0.75);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.ev-widget.ev-shop-widget a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--ev-red);
    color: #fff;
    font-weight: 600;
    border-radius: var(--ev-radius);
}

.ev-widget.ev-shop-widget a:hover {
    background: var(--ev-red-deep);
    transform: translateX(0) translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(196, 30, 30, 0.5);
}

/* News-Widget */
.ev-news-widget-item {
    padding: 0.6rem 0 !important;
    border-bottom: 1px dotted var(--ev-line) !important;
}

.ev-news-widget-item::before { display: none !important; }

.ev-news-widget-date {
    font-family: var(--ev-font-mono);
    font-size: 0.72rem;
    color: var(--ev-red);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 600;
}

.ev-news-widget-title {
    font-family: var(--ev-font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ev-ink);
    line-height: 1.3;
    display: block;
}

.ev-news-widget-link:hover .ev-news-widget-title { color: var(--ev-red); }

/* ═══════════════════════════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════════════════════════ */

.ev-content-area article {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    margin-bottom: 3rem;
}

.ev-entry-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ev-ink-soft);
    max-width: 72ch;
}

.ev-entry-content h2,
.ev-entry-content h3 {
    color: var(--ev-ink);
    margin-top: 2.5em;
}

.ev-entry-content a {
    color: var(--ev-red);
    border-bottom: 1px solid var(--ev-red);
}

.ev-entry-content a:hover {
    color: var(--ev-red-deep);
    border-color: var(--ev-red-deep);
}

.ev-entry-content blockquote {
    border-left: 4px solid var(--ev-red);
    padding: 0.5em 1.5em;
    margin: 2em 0;
    font-style: italic;
    font-family: var(--ev-font-display);
    font-size: 1.25rem;
    color: var(--ev-ink);
    background: var(--ev-bg-soft);
    border-radius: 0 var(--ev-radius) var(--ev-radius) 0;
}

.ev-intro {
    font-family: var(--ev-font-display);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--ev-ink-soft);
    font-style: italic;
    border-left: 3px solid var(--ev-red);
    padding-left: 1.5rem;
    margin: 2rem 0 3rem;
    max-width: 60ch;
}

.ev-partner-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 2rem 0;
}

.ev-partner-list li {
    background: var(--ev-bg-card);
    border: 1px solid var(--ev-line);
    padding: 1rem 1.25rem;
    font-family: var(--ev-font-mono);
    font-size: 0.88rem;
    color: var(--ev-ink);
    border-radius: var(--ev-radius);
    transition: all 0.2s var(--ev-ease);
    border-left: 3px solid var(--ev-red);
}

.ev-partner-list li:hover {
    border-color: var(--ev-red);
    background: var(--ev-bg-soft);
    transform: translateY(-2px);
}

/* Single Fahrzeug */
.ev-fahrzeug-single h1 { margin-top: 1rem; }

.ev-fahrzeug-single .ev-featured-image {
    margin: 2.5rem 0;
    border-radius: var(--ev-radius-lg);
    overflow: hidden;
    aspect-ratio: 16/9;
    border-bottom: 4px solid var(--ev-red);
}

.ev-fahrzeug-single .ev-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-datenblatt {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    background: var(--ev-bg-card);
    padding: 0;
    margin: 2.5rem 0;
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-radius-lg);
    overflow: hidden;
}

.ev-datenblatt-title {
    grid-column: 1 / -1;
    font-family: var(--ev-font-mono);
    font-size: 0.75rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 1rem 1.5rem;
    border-bottom: 3px solid var(--ev-red);
    margin: 0;
    background: var(--ev-bg-deep);
    font-weight: 600;
}

.ev-datenblatt dt {
    font-family: var(--ev-font-mono);
    font-size: 0.7rem;
    color: var(--ev-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 1.25rem 1.5rem 0.3rem;
    border-top: 1px solid var(--ev-line);
    font-weight: 500;
}

.ev-datenblatt dd {
    font-family: var(--ev-font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ev-ink);
    margin: 0;
    padding: 0 1.5rem 1.25rem;
}

.ev-datenblatt dd.ev-number {
    font-family: var(--ev-font-mono);
    color: var(--ev-red);
    font-size: 0.95rem;
    font-weight: 600;
}

.ev-post-nav {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ev-line);
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    font-family: var(--ev-font-mono);
    font-size: 0.85rem;
}

.ev-post-nav a { color: var(--ev-ink-muted); }
.ev-post-nav a:hover { color: var(--ev-red); }

.ev-breadcrumbs {
    font-family: var(--ev-font-mono);
    font-size: 0.78rem;
    color: var(--ev-ink-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ev-breadcrumbs a { color: var(--ev-red); }
.ev-breadcrumbs a:hover { color: var(--ev-red-deep); }
.ev-breadcrumbs .sep { margin: 0 0.5rem; opacity: 0.4; }

/* Footer */
.ev-site-footer {
    background: var(--ev-bg-dark);
    color: rgba(250, 250, 250, 0.7);
    padding: 6rem var(--ev-gutter) 2rem;
    margin-top: 0;
    position: relative;
}

.ev-site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--ev-red);
}

.ev-footer-inner {
    max-width: var(--ev-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}

.ev-footer-col h4 {
    color: var(--ev-red-bright);
    font-family: var(--ev-font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 1.25rem;
    font-weight: 600;
}

.ev-footer-col p {
    color: rgba(250, 250, 250, 0.6);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 1rem;
    max-width: 320px;
}

.ev-footer-col ul { list-style: none; padding: 0; margin: 0; }
.ev-footer-col li { margin-bottom: 0.5rem; }

.ev-footer-col a {
    color: rgba(250, 250, 250, 0.75);
    font-size: 0.92rem;
}

.ev-footer-col a:hover { color: var(--ev-red-bright); }
.ev-footer-col strong { color: #fafafa; }

.ev-footer-bottom {
    max-width: var(--ev-maxw);
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(196, 30, 30, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-family: var(--ev-font-mono);
    font-size: 0.78rem;
    color: rgba(250, 250, 250, 0.4);
    letter-spacing: 0.08em;
}

/* Utils */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

@keyframes ev-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ev-hero-content > * {
    animation: ev-fade-up 0.9s var(--ev-ease) backwards;
}

.ev-hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.ev-hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.ev-hero-content > *:nth-child(3) { animation-delay: 0.4s; }
.ev-hero-content > *:nth-child(4) { animation-delay: 0.55s; }

.ev-hero-quickinfo {
    animation: ev-fade-up 0.9s var(--ev-ease) 0.8s backwards;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .ev-site-main { grid-template-columns: 1fr; gap: 3rem; }
    .ev-sidebar { position: static; }
    .ev-footer-inner { grid-template-columns: 1fr 1fr; }
    .ev-aktuelles-grid { grid-template-columns: 1fr; }
    .ev-aktuelles-side { flex-direction: row; }
    .ev-news-card.is-featured { grid-row: auto; }
    .ev-werkstatt { grid-template-columns: 1fr; gap: 2rem; }
    .ev-werkstatt-visual { aspect-ratio: 16/9; max-height: 400px; }
    .ev-stats-strip { grid-template-columns: repeat(2, 1fr); }
    .ev-stat-item:nth-child(2) { border-right: none; }
    .ev-stat-item:nth-child(1), .ev-stat-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .ev-grid-asymmetric { grid-template-columns: repeat(2, 1fr); }
    .ev-grid-asymmetric .ev-card { grid-column: span 1 !important; grid-row: auto !important; }
    .ev-hero-quickinfo-inner { grid-template-columns: repeat(2, 1fr); }
    .ev-quick-item:nth-child(2) { border-right: none; }
    .ev-quick-item:nth-child(1), .ev-quick-item:nth-child(2) {
        border-bottom: 1px solid rgba(196, 30, 30, 0.15);
    }
}

@media (max-width: 768px) {
    .ev-mobile-toggle { display: inline-flex; }

    /* ── Mobile Nav ── */
    .ev-site-header { position: sticky; } /* sicherstellen */

    .ev-main-nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--ev-bg);
        border-bottom: 2px solid var(--ev-red);
        padding: 1rem var(--ev-gutter) 1.5rem;
        display: none;
        z-index: 200;                          /* über allem anderen */
        box-shadow: 0 10px 30px -5px rgba(0,0,0,.2);
    }

    .ev-main-nav.is-open { display: block; }
    .ev-main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .ev-main-nav a { padding: 0.85rem 1rem; border-bottom: 1px solid var(--ev-line); }
    .ev-main-nav li:last-child a { border-bottom: none; }
    .ev-main-nav ul ul {
        position: static; box-shadow: none; border: none;
        border-top: 1px solid var(--ev-line);
        padding: 0 0 0 1rem;
        opacity: 1; visibility: visible; transform: none;
        background: var(--ev-bg-soft);
    }

    /* ── Hero ── */
    .ev-hero { min-height: auto; }

    /* Quick-Info-Bar auf 2×2 Grid – spart Höhe */
    .ev-hero-quickinfo-inner {
        grid-template-columns: 1fr 1fr !important;
    }

    .ev-quick-item:nth-child(1),
    .ev-quick-item:nth-child(2) {
        border-bottom: 1px solid rgba(196, 30, 30, 0.15);
    }

    .ev-quick-item:nth-child(2) { border-right: none; }
    .ev-quick-item:nth-child(4) { border-right: none; }
    .ev-quick-item { border-right: 1px solid rgba(196, 30, 30, 0.15); }

    /* Genug Bottom-Padding damit 2×2 Bar nicht überlappt */
    /* 2×2 Bar ≈ 2 × 80px = 160px + 2rem Abstand = ~200px → 14rem */
    .ev-hero-inner { padding: 5rem var(--ev-gutter) 14rem; }

    /* Slider-Controls etwas höher setzen */
    .ev-slider-controls { bottom: 10rem; right: 1rem; }
    .ev-slider-dots     { bottom: 10rem; left: 1rem; }
    .ev-slider-counter  { bottom: 10rem; }

    /* ── Layout ── */
    .ev-aktuelles-side { flex-direction: column; }
    .ev-news-card.is-compact { flex-direction: column; }
    .ev-news-card.is-compact .ev-news-card-visual { width: 100%; aspect-ratio: 16/10; }
    .ev-grid-asymmetric { grid-template-columns: 1fr; }
    .ev-stats-strip { grid-template-columns: 1fr 1fr; }
    .ev-footer-inner { grid-template-columns: 1fr; }
    .ev-footer-bottom { flex-direction: column; align-items: flex-start; }
    .ev-werkstatt { grid-template-columns: 1fr; gap: 2rem; }
    .ev-split     { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 480px) {
    body.eurovapor-de { font-size: 16px; }
    .ev-hero-actions { flex-direction: column; align-items: stretch; }
    .ev-btn-primary, .ev-btn-secondary, .ev-btn-ticket { justify-content: center; }
    .ev-datenblatt { grid-template-columns: 1fr; }
    .ev-stats-strip { grid-template-columns: 1fr; }
}

@media print {
    .ev-site-header, .ev-sidebar, .ev-site-footer, .ev-mobile-toggle,
    .ev-hero-actions, .ev-hero-quickinfo, .ev-cta-banner,
    .ev-slider-controls, .ev-slider-dots, .ev-slider-counter { display: none !important; }
    .ev-site-main { grid-template-columns: 1fr; }
    .ev-hero { min-height: auto; background: white; color: black; }
    .ev-hero h1 { color: black; }
    body.eurovapor-de { background: white; color: black; }
}