/* =============================================
   CROSS-BROWSER COMPATIBILITY
   Supports: Chrome 90+, Firefox 90+, Safari 14+, Edge 90+
   ============================================= */

/* Fallback colors for browsers without color-mix() support */
:root {
    /* Fallback values - will be overridden by @supports */
    --brand-mix-80: #e8f5f4;
    --brand-mix-65: #d5edec;
    --brand-mix-55: #c8e6e5;
    --brand-mix-35: #a8d9d7;
    --brand-mix-25: #98d1cf;
    --brand-mix-20: #8fccc9;
    --brand-border-35: rgba(61, 170, 109, 0.35);
    --brand-border-18: rgba(61, 170, 109, 0.18);
    --brand-border-20: rgba(61, 170, 109, 0.20);
}

/* Theme-specific fallbacks */
body.theme-training {
    --brand-mix-80: #eaf3fb;
    --brand-mix-65: #d5e7f7;
    --brand-mix-35: #aacfee;
    --brand-border-35: rgba(74, 144, 217, 0.35);
}

body.theme-meals {
    --brand-mix-80: #fdeaea;
    --brand-mix-65: #fad5d5;
    --brand-mix-35: #f5aaaa;
    --brand-border-35: rgba(232, 90, 90, 0.35);
}

body.theme-learning {
    --brand-mix-80: #fef9e8;
    --brand-mix-65: #fdf3d1;
    --brand-mix-35: #fbe7a3;
    --brand-border-35: rgba(245, 200, 66, 0.35);
}

/* =============================================
   Landing Page Layout
   ============================================= */

.hero-section {
    position: relative;

    display: grid;
    place-items: center;
    min-height: calc(100vh - var(--header-height));
    padding: clamp(4rem, 8vw, 6.5rem) 1.5rem clamp(3rem, 6vw, 4rem);
    overflow: hidden;
    isolation: isolate;
    color: #f8fafc;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    z-index: -2;
    -webkit-filter: saturate(0.88) contrast(1.08);
    filter: saturate(0.88) contrast(1.08);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            120deg,
            rgba(3, 7, 18, 0.92) 0%,
            rgba(6, 12, 23, 0.68) 55%,
            rgba(3, 7, 18, 0.9) 100%
    );
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: -1;
}

.hero-content {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1.3rem;
    justify-items: center;
    text-align: center;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f8fafc;
}

.hero-title {
    margin: 0 0 0.2rem;
    font-size: clamp(3rem, 6vw, 4.5rem);
    letter-spacing: -0.02em;
}

.hero-subtitle,
.hero-description {
    margin: 0;
    max-width: 46rem;
    line-height: 1.6;
    color: rgba(248, 250, 252, 0.85);
}

.hero-subtitle {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 600;
}

.hero-description {
    font-size: 1.05rem;
}

.hero-cta {
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    margin-top: 0.6rem;
}

.hero-floating-card {
    width: min(440px, 100%);
    margin-top: 1.6rem;
    padding: 1.9rem;
    border-radius: 1.35rem;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 60px rgba(2, 6, 23, 0.42);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.hero-floating-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: rgba(248, 250, 252, 0.85);
}

.hero-floating-badge {
    align-self: flex-start;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.hero-floating-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    color: rgba(248, 250, 252, 0.9);
}

.hero-floating-list li {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.section-shell {
    width: min(var(--container), 100% - 2rem);
    margin: 0 auto;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    background: color-mix(in oklab, var(--brand-weak) 80%, #ffffff);
    border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0.75rem 0 0;
    color: var(--text);
    letter-spacing: -0.01em;
}

.section-title--center {
    text-align: center;
    display: block;
}

.section-intro {
    margin: 0.65rem 0 0;
    max-width: 36rem;
    color: var(--muted);
    line-height: 1.6;
}

.section-title--center + .section-intro {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.stats-section {
    padding: clamp(2.6rem, 6vw, 3.6rem) 0;
    background: linear-gradient(
            180deg,
            rgba(233, 246, 246, 0.45) 0%,
            rgba(255, 255, 255, 0.96) 100%
    );
}

.stats-header {
    text-align: center;
    margin-bottom: 2.4rem;
}

.stats-header .section-intro {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.stats-container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.stat-item {
    padding: 1.8rem 1.4rem;
    border-radius: 1.2rem;
    background: var(--surface);
    border: 1px solid rgba(11, 18, 32, 0.08);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.stat-number {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--text);
}

.stat-label {
    margin: 0.45rem 0 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--muted);
}

.about-section {
    padding: clamp(2.8rem, 6vw, 3.8rem) 0;
    background: #ffffff;
}

.about-grid {
    display: grid;
    gap: 2rem;
    text-align: center;
}

.about-copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.about-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--text);
}

.about-highlight {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 1.2rem;
    padding: 2rem;
    border: 1px solid rgba(11, 18, 32, 0.08);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.about-highlight-header {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.about-highlight-badge {
    align-self: flex-start;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--brand-weak);
    color: var(--text);
    border: 1px solid rgba(11, 18, 32, 0.08);
}

.about-highlight-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text);
}

.about-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.about-highlight-metric {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
}

.about-highlight-label {
    margin: 0.2rem 0 0;
    color: var(--muted);
}

.about-highlight-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.features-section {
    position: relative;
    padding: clamp(2.6rem, 6vw, 3.6rem) 0;
    background: linear-gradient(
            180deg,
            rgba(237, 249, 249, 0.85) 0%,
            #ffffff 100%
    );
    overflow: hidden;
}

.features-section .section-shell {
    overflow: visible;
}

.features-section::before,
.features-section::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(
            circle at center,
            rgba(var(--primary-rgb), 0.18),
            transparent 70%
    );
}

.features-section::before {
    top: -220px;
    left: -160px;
}

.features-section::after {
    bottom: -240px;
    right: -140px;
}

.feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    margin-top: clamp(1rem, 3vw, 1.6rem);
    margin-bottom: clamp(1.8rem, 4vw, 2.4rem);
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1000px) {
    .feature-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 650px) {
    .feature-list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.feature-card {
    --feature-accent: var(--brand);
    --feature-bg: #f0f8f7;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.5rem;
    border-radius: 1.35rem;
    background: var(--feature-bg);
    text-decoration: none;
    color: var(--text);
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -30%;
    right: -30%;
    height: 240px;
    background: radial-gradient(
            circle at top,
            color-mix(in srgb, var(--feature-accent, var(--brand)) 35%, transparent) 0%,
            transparent 68%
    );
    opacity: 0.45;
    transition: opacity 0.18s ease,
    transform 0.22s ease;
    z-index: -1;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(11, 18, 32, 0.18);
}

.feature-card:hover::before {
    opacity: 0.65;
    transform: translateY(-6px);
}

.block--training {
    --feature-accent: var(--blue);
    --feature-bg: var(--blue-weak);
}

.block--meals {
    --feature-accent: var(--red);
    --feature-bg: var(--red-weak);
}

.block--learning {
    --feature-accent: var(--yellow);
    --feature-bg: var(--yellow-weak);
}

.block--general {
    --feature-accent: var(--green);
    --feature-bg: var(--green-weak);
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    background: color-mix(in srgb, var(--feature-accent, var(--brand)) 15%, transparent);
    color: var(--text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feature-accent, var(--brand)) 35%, transparent);
    align-self: flex-start;
    transition: transform 0.2s ease,
    box-shadow 0.2s ease;
}

.feature-card:hover .feature-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feature-accent, var(--brand)) 45%, transparent),
    0 10px 22px rgba(11, 18, 32, 0.12);
}

.feature-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
}

.feature-copy {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--muted);
}

.feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--feature-accent, var(--brand));
    transition: color 0.18s ease;
}

.feature-link::after {
    content: "→";
    transition: transform 0.2s ease;
}

.feature-card:hover .feature-link {
    color: var(--text);
}

.feature-card:hover .feature-link::after {
    transform: translateX(6px);
}

.learning-page {
    position: relative;
    isolation: isolate;
    background: linear-gradient(
            180deg,
            color-mix(in oklab, var(--brand-weak) 25%, #ffffff) 0%,
            #ffffff 90%
    );
    padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(3rem, 6vw, 5rem);
}

.learning-hero {
    width: min(var(--container), 100% - 2rem);
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.22), transparent 55%),
    color-mix(in oklab, var(--brand-weak) 65%, #ffffff);
    border: 1px solid rgba(11, 18, 32, 0.06);
    box-shadow: var(--shadow-md);
}

.learning-hero-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 720px;
}

.learning-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(11, 18, 32, 0.08);
}

.learning-hero-title {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    letter-spacing: -0.01em;
}

.learning-hero-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--muted);
}

.learning-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.learning-section {
    width: min(var(--container), 100% - 2rem);
    margin: 0 auto clamp(2.4rem, 5vw, 3.4rem);
}

.learning-section-header {
    max-width: 720px;
    margin-bottom: 1.6rem;
}

.learning-info-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.learning-info-card {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    box-shadow: var(--shadow-sm);
}

.learning-info-card h3 {
    margin-top: 0;
    margin-bottom: 0.4rem;
}

.learning-info-card p {
    margin: 0;
    color: var(--muted);
}

.learning-module-grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
    .learning-module-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .learning-module-grid {
        grid-template-columns: 1fr;
    }
}

.learning-topic-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.learning-topic-card h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.learning-topic-card h3 {
    margin: 0.6rem 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.learning-topic-card > p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--muted);
}

.learning-topic-card pre {
    margin: 0.3rem 0;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--brand-weak) 55%, #ffffff);
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: hidden;
}

.learning-topic-card ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
}

.learning-topic-card li + li {
    margin-top: 0.25rem;
}

.learning-meta {
    margin-top: 1.5rem;
}

.learning-meta-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.learning-meta-item {
    padding: 1rem;
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--brand-weak) 35%, #ffffff);
    border: 1px solid rgba(11, 18, 32, 0.08);
}

.learning-meta-label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.learning-meta-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.learning-note {
    margin-top: 1.5rem;
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius);
    border: 1px dashed rgba(11, 18, 32, 0.2);
    background: #fff;
}

.experience-section {
    position: relative;
    overflow: hidden;
    padding: clamp(2.4rem, 6vw, 3.2rem) 0;
    background: #f9fcfb;
}

.experience-section::before,
.experience-section::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    background: radial-gradient(
            circle at center,
            rgba(var(--primary-rgb), 0.12),
            transparent 70%
    );
    z-index: 0;
    pointer-events: none;
}

.experience-section::before {
    top: -140px;
    right: -180px;
}

.experience-section::after {
    bottom: -160px;
    left: -160px;
}

.experience-wrapper {
    position: relative;
    z-index: 1;
}

.experience-header {
    margin-bottom: 2.8rem;
}

.experience-intro {
    color: var(--muted);
    margin: 0.6rem auto 0;
}

.experience-grid {
    display: grid;
    gap: 1.8rem;
}

.experience-card {
    background: var(--surface);
    padding: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.experience-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(var(--primary-rgb), 0.12);
    font-size: 1.6rem;
}

.experience-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.experience-tags span {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(233, 246, 246, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
}

.benefits-section {
    position: relative;
    padding: clamp(2.4rem, 6vw, 3.2rem) 0;
    background: #f7fbfa;
    overflow: hidden;
}

.benefits-section::before,
.benefits-section::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    background: radial-gradient(
            circle at center,
            rgba(var(--primary-rgb), 0.18),
            transparent 68%
    );
    pointer-events: none;
}

.benefits-section::before {
    top: -200px;
    right: -140px;
}

.benefits-section::after {
    bottom: -200px;
    left: -160px;
}

.benefits-wrapper {
    position: relative;
    z-index: 1;
}

.benefits-header {
    margin-bottom: 2.5rem;
}

.benefits-intro {
    color: var(--muted);
    margin: 0.8rem auto 0;
}

.benefits-body {
    display: grid;
    gap: 2.4rem;
}

.benefits-summary {
    background: rgba(255, 255, 255, 0.86);
    border-radius: 1.2rem;
    padding: 1.9rem;
    border: 1px solid rgba(11, 18, 32, 0.08);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.benefits-figure {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.benefits-figure-value {
    font-size: clamp(2.6rem, 4vw, 3.1rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.benefits-figure-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--text);
    font-weight: 600;
    line-height: 1.6;
}

.benefits-list li span {
    font-size: 1.25rem;
}

.benefits-grid {
    display: grid;
    gap: 1.6rem;
}

.cta-section {
    padding: clamp(2.5rem, 6vw, 3.5rem) 0;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%);
    border-top: 1px solid rgba(11, 18, 32, 0.05);
}

.cta-shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--text);
}

.btn-link::after {
    content: "↗";
    font-size: 0.9rem;
    transition: transform 0.18s ease;
}

.btn-link:hover::after {
    transform: translateX(4px);
}

.benefits-card {
    position: relative;
    background: var(--surface);
    padding: 1.9rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

.benefits-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(var(--primary-rgb), 0.16);
    font-size: 1.6rem;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.benefits-card h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.benefits-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.testimonials-section {
    background: linear-gradient(
            180deg,
            rgba(9, 14, 24, 0.92) 0%,
            rgba(8, 11, 18, 0.97) 68%,
            rgba(6, 8, 14, 0.98) 100%
    );
    position: relative;
    overflow: hidden;
    padding: clamp(2.6rem, 6vw, 3.4rem) 0;
}

.testimonials-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
            circle at top left,
            rgba(var(--primary-rgb), 0.15),
            transparent 55%
    );
    pointer-events: none;
}

.testimonials-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.testimonials-header .section-kicker {
    margin-left: auto;
    margin-right: auto;
}

.testimonials-section .section-title,
.testimonials-section .section-kicker,
.testimonials-intro {
    color: #f8fafc;
}

.testimonials-section .section-kicker {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(148, 163, 184, 0.4);
}

.testimonials-intro {
    margin: 0.6rem auto 0;
    max-width: 34rem;
    color: rgba(226, 232, 240, 0.75);
}

.testimonials-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.8rem;
}

.testimonial-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1.1rem;
    padding: 1.8rem;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.4);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    height: 100%;
}

.testimonial-quote {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(248, 250, 252, 0.92);
}

.testimonial-meta {
    color: rgba(226, 232, 240, 0.75);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.testimonial-name {
    font-weight: 700;
    color: #f8fafc;
}

.testimonial-role {
    opacity: 0.7;
}

/* ---------------------------------------------
   So funktioniert's – Intro Hero
   --------------------------------------------- */

.how-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.8rem, 7vw, 4.5rem) 0;
    background-color: #ffffff;
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.9) 55%,
            #ffffff 100%
        ),
            linear-gradient(120deg, rgba(2, 6, 23, 0.6), rgba(11, 18, 32, 0.1)),
            url("/img/training-plan-hero.png");
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center top;
    background-repeat: no-repeat, no-repeat, no-repeat;
}

.how-hero::before,
.how-hero::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(45px);
    opacity: 0.35;
}

.how-hero::before {
    top: -180px;
    left: -80px;
    background: radial-gradient(
            circle at center,
            rgba(var(--primary-rgb), 0.35),
            transparent 70%
    );
}

.how-hero::after {
    bottom: -220px;
    right: -120px;
    background: radial-gradient(
            circle at center,
            rgba(74, 144, 217, 0.4),
            transparent 70%
    );
}

.how-hero-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
    align-items: stretch;
}

.how-hero-content {
    background: var(--surface);
    border-radius: 1.4rem;
    padding: clamp(1.8rem, 4vw, 2.6rem);
    border: 1px solid rgba(11, 18, 32, 0.08);
    box-shadow: var(--shadow-md);
    color: var(--text);
}

.how-hero-title {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

.how-hero-subtitle {
    margin: 0.8rem 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.how-hero-highlights {
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.how-hero-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.how-hero-highlights span {
    font-size: 1.3rem;
    line-height: 1;
}

.how-hero-card {
    background: var(--surface);
    border-radius: 1.4rem;
    padding: clamp(1.8rem, 4vw, 2.4rem);
    border: 1px solid rgba(11, 18, 32, 0.08);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.how-hero-card-header p {
    margin: 0.4rem 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.how-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    color: var(--text);
}

.how-hero-metrics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.how-hero-metrics li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(11, 18, 32, 0.08);
}

.how-hero-metrics li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.how-hero-metrics strong {
    font-size: 1rem;
    color: var(--text);
}

.how-hero-metrics span {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (min-width: 960px) {
    .how-hero-shell {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
    }

    .how-hero-content {
        padding: clamp(2.2rem, 4vw, 3rem);
    }

    .how-hero-card {
        align-self: stretch;
    }
}

/* ---------------------------------------------
   So funktioniert's – Markenfarben Overrides
   --------------------------------------------- */

.sofunktionierts-page .journey-section {
    background: linear-gradient(
            180deg,
            color-mix(in oklab, var(--brand-weak) 60%, #ffffff) 0%,
            #ffffff 100%
    );
    padding: clamp(2.8rem, 6vw, 4rem) 0;
}

.sofunktionierts-page .journey-header {
    text-align: center;
}

.sofunktionierts-page .journey-header .section-title {
    color: var(--text);
    text-shadow: none;
}

.sofunktionierts-page .journey-intro {
    color: var(--muted);
    max-width: 38rem;
}

.sofunktionierts-page .journey-timeline {
    gap: 2rem;
}

.sofunktionierts-page .journey-marker {
    background: linear-gradient(
            135deg,
            var(--brand),
            color-mix(in oklab, var(--brand) 65%, #ffffff)
    );
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(var(--primary-rgb), 0.25);
}

.sofunktionierts-page .journey-card {
    background: var(--surface);
    border: 1px solid rgba(11, 18, 32, 0.08);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.sofunktionierts-page .journey-card p {
    color: var(--muted);
}

.sofunktionierts-page .journey-meta span {
    border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent);
    background: color-mix(in oklab, var(--brand-weak) 70%, #ffffff);
    color: var(--text);
}

.sofunktionierts-page .testimonials-section {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
    color: var(--text);
}

.sofunktionierts-page .testimonials-section::before {
    background: radial-gradient(
            circle at top left,
            color-mix(in oklab, var(--brand) 30%, transparent),
            transparent 60%
    );
}

.sofunktionierts-page .testimonials-section .section-title,
.sofunktionierts-page .testimonials-section .section-kicker,
.sofunktionierts-page .testimonials-intro {
    color: var(--text);
}

.sofunktionierts-page .testimonials-section .section-kicker {
    background: color-mix(in oklab, var(--brand-weak) 80%, #ffffff);
    border-color: color-mix(in oklab, var(--brand) 35%, transparent);
}

.sofunktionierts-page .testimonials-intro {
    color: var(--muted);
}

.sofunktionierts-page .testimonial-card {
    background: #f8fafc;
    border: 1px solid rgba(11, 18, 32, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.sofunktionierts-page .testimonial-quote {
    color: #1e293b;
}

.sofunktionierts-page .testimonial-meta {
    color: #64748b;
}

.sofunktionierts-page .testimonial-name {
    color: #0f172a;
}

.sofunktionierts-page .testimonial-role {
    color: #64748b;
    opacity: 1;
}

.sofunktionierts-page .testimonials-section {
    padding-bottom: clamp(3rem, 7vw, 4.5rem);
    margin-bottom: 0;
}

.journey-section {
    position: relative;
    overflow: hidden;
    padding: clamp(2.6rem, 6vw, 3.4rem) 0;
    background: linear-gradient(
            180deg,
            rgba(10, 18, 28, 0.9) 0%,
            rgba(10, 14, 24, 0.95) 62%,
            rgba(7, 11, 20, 0.97) 100%
    );
}

.journey-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
            circle at top right,
            rgba(var(--primary-rgb), 0.25),
            transparent 65%
    );
    pointer-events: none;
    mix-blend-mode: screen;
}

.journey-wrapper {
    position: relative;
    z-index: 1;
}

.journey-header {
    margin-bottom: 2.8rem;
}

.journey-header .section-title {
    color: #f8fafc;
    text-shadow: 0 10px 30px rgba(2, 6, 23, 0.65);
}

.journey-header .section-kicker {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    color: #f8fafc;
}

.journey-intro {
    color: rgba(226, 232, 240, 0.78);
    margin: 0.6rem auto 0;
    max-width: 34rem;
}

.journey-timeline {
    position: relative;
    display: grid;
    gap: 1.9rem;
}

.journey-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 1.2rem;
}

.journey-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 58px;
    bottom: -1.8rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.6), transparent 70%);
}

.journey-marker {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
            135deg,
            rgba(var(--primary-rgb), 0.95),
            rgba(var(--primary-rgb), 0.72)
    );
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 16px 36px rgba(var(--primary-rgb), 0.25);
}

.journey-marker span {
    font-size: 1.1rem;
}

.journey-card {
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1.1rem;
    padding: 1.7rem 1.8rem;
    box-shadow: 0 26px 60px rgba(2, 6, 23, 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    color: #f8fafc;
    position: relative;
}

.journey-card h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.journey-card p {
    margin: 0;
    color: rgba(226, 232, 240, 0.78);
    line-height: 1.6;
}

.journey-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.3rem;
}

.journey-meta span {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--primary-rgb), 0.45);
    background: rgba(8, 11, 18, 0.65);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

@media (min-width: 640px) {
    .hero-floating-card {
        padding: 2.2rem;
    }

    .stats-container {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr 0.8fr;
        text-align: left;
        align-items: center;
    }

    .about-list li {
        justify-content: flex-start;
    }

    .experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .benefits-body {
        grid-template-columns: 0.92fr 1.08fr;
        align-items: stretch;
    }

    .benefits-summary {
        padding: 2.2rem;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journey-item {
        grid-template-columns: 70px 1fr;
    }

    .journey-item:not(:last-child)::after {
        left: 35px;
    }

    .journey-marker {
        width: 60px;
        height: 60px;
        border-radius: 20px;
    }
}

@media (min-width: 900px) {
    .hero-content {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
        align-items: center;
        text-align: left;
        justify-items: stretch;
    }

    .hero-cta {
        justify-content: flex-start;
    }

    .hero-floating-card {
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .experience-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .testimonials-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .journey-timeline {
        gap: 2.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }

    .hero-video {
        display: none;
    }

    .hero-section {
        background: linear-gradient(135deg, var(--brand-weak), #ffffff);
    }

}

@media (prefers-contrast: more) {
    :root {
        --surface: #ffffff;
        --surface-2: #f7faff;
    }

    body {
        background-image: none;
        background-color: #ffffff;
    }

    .feature-card,
    .experience-card,
    .benefits-card,
    .testimonial-card,
    .stat-item,
    .tip-card,
    .plan-card,
    .step-card {
        box-shadow: none;
    }
}
@media (forced-colors: active) {
    body {
        background: Canvas;
        color: CanvasText;
    }
    a,
    .btn,
    .btn-primary,
    .header-cta,
    .feature-card,
    .plan-card,
    .tip-card,
    .step-card,
    .card .label {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .skip-link {
        background: Highlight;
        color: HighlightText;
    }

    :is(
        a,
        button,
        .btn,
        .feature-card,
        .header-cta
    ):focus-visible {
        outline-color: Highlight;
    }
}

/* =============================================
   LiftED – Global Styles (Light, Themed)
   Farbwelt: Blau (Training) • Rot/Coral (Meals) • Gelb (Learning) • Grün (General)
   ============================================= */

/* ---------- Design Tokens (Light) ---------- */
:root {
    /* Core palette */
    --white: #ffffff;
    --bg: #fafbff; /* sehr helles Grundweiß */
    --surface: #ffffff;
    --surface-2: #f3f6ff; /* zarte Kartenfläche */
    --text: #0b1220; /* sehr dunkles Blau‑Grau */
    --muted: #5b6785; /* sekundärer Text */

    /* Brand buckets - NEU: Blau, Rot, Gelb, Grün */
    --blue: #4a90d9;        /* Training - kräftiges Blau */
    --blue-weak: #e3f0fc;   /* Training - Soft BG */
    --red: #e85a5a;         /* Meals - warmes Coral-Rot */
    --red-weak: #fce8e8;    /* Meals - Soft BG */
    --yellow: #f5c842;      /* Learning - kräftiges Gelb */
    --yellow-weak: #fef8e3; /* Learning - Soft BG */
    --green: #3daa6d;       /* General - frisches Grün */
    --green-weak: #e5f5ec;  /* General - Soft BG */

    --brand: var(--green); /* Default – General/Info Theme */
    --brand-weak: var(--green-weak);
    --primary: var(
            --brand
    ); /* Alias für ältere Komponenten (Buttons, Karten etc.) */

    /* Layout */
    --container: 1200px;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 18px;
    --gap: 16px;
    --section-gap: clamp(2.5rem, 5vw, 4.2rem);
    --space-xs: 0.35rem;
    --space-sm: 0.7rem;
    --space-md: 1.1rem;
    --space-lg: 1.8rem;

    /* Shadows (hell) */
    --shadow-sm: 0 6px 18px rgba(11, 18, 32, 0.06);
    --shadow-md: 0 12px 26px rgba(11, 18, 32, 0.1);
    --shadow-lg: 0 24px 60px rgba(11, 18, 32, 0.14);
    --card-border: rgba(11, 18, 32, 0.08);
    --transition-base: 0.18s ease;

    /* Header */
    --header-height: 60px;
    --submenu-height: 320px;
    --primary-rgb: 14, 165, 164; /* Türkis passend zu var(--primary) */
}

/* Themes per Bereich */
body.theme-training {
    --brand: var(--blue);
    --brand-weak: var(--blue-weak);
    --primary: var(--blue);
    --primary-rgb: 74, 144, 217; /* Blau RGB */
}

body.theme-meals {
    --brand: var(--red);
    --brand-weak: var(--red-weak);
    --primary: var(--red);
    --primary-rgb: 232, 90, 90; /* Rot RGB */
}

body.theme-learning {
    --brand: var(--yellow);
    --brand-weak: var(--yellow-weak);
    --primary: var(--yellow);
    --primary-rgb: 245, 200, 66; /* Gelb RGB */
}

/* Allgemeines LiftED-Theme – Grün für Info/Service/Landing */
body.theme-general,
body.theme-lifted {
    --brand: var(--green);
    --brand-weak: var(--green-weak);
    --primary: var(--green);
    --primary-rgb: 61, 170, 109; /* Grün RGB */
}

/* ---------- Base ---------- */
html,
body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Quicksand",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    "Helvetica Neue",
    Arial,
    sans-serif;
    color: var(--text);
    position: relative;
    background-color: var(--bg);
    background-image: linear-gradient(
            180deg,
            #f3f9fa 0%,
            #ffffff 70%,
            #ffffff 100%
    );
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--header-height);
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: -1000px;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: var(--text);
    color: #ffffff;
    font-weight: 700;
    z-index: 10000;
    opacity: 0;
    transition: top 0.2s ease,
    opacity 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0.75rem;
    opacity: 1;
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

:is(
    a,
    button,
    .btn,
    .feature-card,
    .header-cta
):focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

.feature-card:focus-visible,
.testimonial-card:focus-visible,
.experience-card:focus-visible,
.benefits-card:focus-visible,
.plan-card:focus-visible,
.tip-card:focus-visible,
.step-card:focus-visible,
.card:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35),
    var(--shadow-md);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
            40% 42% at 18% 28%,
            rgba(74, 144, 217, 0.18),
            transparent 72%
    ),
    radial-gradient(
            38% 40% at 76% 24%,
            rgba(245, 200, 66, 0.18),
            transparent 70%
    ),
    radial-gradient(
            36% 38% at 58% 86%,
            rgba(61, 170, 109, 0.18),
            transparent 70%
    );
    opacity: 0.9;
    filter: blur(120px);
    transform: translateZ(0) scale(1.08);
    mix-blend-mode: screen;
}

body::after {
    content: "";
    position: fixed;
    inset: -12% -8%;
    pointer-events: none;
    z-index: -2;
    background: radial-gradient(
            48% 52% at 24% 72%,
            rgba(232, 90, 90, 0.14),
            transparent 70%
    ),
    radial-gradient(
            42% 44% at 74% 32%,
            rgba(74, 144, 217, 0.12),
            transparent 72%
    ),
    radial-gradient(
            36% 42% at 54% 18%,
            rgba(61, 170, 109, 0.14),
            transparent 75%
    );
    opacity: 0.6;
    filter: blur(160px);
    mix-blend-mode: soft-light;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.page-dim {
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 32, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1500;
}

.page-dim.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    background: var(--brand-weak);
    border: 1px solid rgba(11, 18, 32, 0.12);
    border: 1px solid color-mix(in oklab, var(--brand) 18%, #0000);
}

:is(
    .experience-card,
    .benefits-card,
    .tip-card,
    .step-card,
    .plan-card,
    .plan-faq,
    .support-options,
    .support-grid article,
    .info-card
) {
    border-radius: var(--radius-lg);
}

/* ---------- Header & Navigation ---------- */
.main-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-height);
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.88),
            rgba(255, 255, 255, 0.58)
    );
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 44px rgba(11, 18, 32, 0.12);
    z-index: 2000;
}

.header-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 1.5rem;
}

.logo-container img {
    height: 34px;
    width: auto;
    display: block;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease,
    box-shadow 0.18s ease;
}

.header-cta::after {
    content: "→";
    font-size: 0.8rem;
    transition: transform 0.18s ease;
}

.header-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.header-cta:hover::after {
    transform: translateX(4px);
}

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

/* Über LiftED als erstes nach dem Logo */
nav li:has(#nav-about) {
    order: -1;
}

nav li {
    position: relative;
}

.nav-link,
nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.2px;
    position: relative;
    padding: 10px 0;
    display: inline-block;
}

.nav-link::after,
nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 3px;
    width: 0;
    background: linear-gradient(
            90deg,
            var(--brand),
            color-mix(in oklab, var(--brand) 40%, #ffffff)
    );
    border-radius: 3px;
    transition: width 0.25s ease;
}

.nav-link:hover::after,
nav a:hover::after {
    width: 100%;
}

/* Submenu */
.nav-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -8px);
    background: var(--surface);
    border: 1px solid rgba(11, 18, 32, 0.08);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 240px;
    padding: 0.5rem;
    max-height: var(--submenu-height);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease,
    transform 0.18s ease;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav-submenu li {
    margin: 0;
}

/* Erstes Element fett */
.nav-submenu li:first-child a {
    font-weight: 700;
    color: var(--text);
}

/* Unterseiten - normale Links */
.nav-submenu a {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 400;
    font-size: 0.92rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-submenu a:hover {
    background: var(--brand-weak);
    color: var(--text);
}

/* Hauptlink wird beim Hover fett */
.has-submenu:hover > .nav-link,
.has-submenu:focus-within > .nav-link {
    font-weight: 800;
}

.has-submenu:hover .nav-submenu,
.has-submenu:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

nav:hover .has-submenu:not(:hover) .nav-submenu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px);
    transition-delay: 0s;
}

@media (max-width: 1100px) {
    .header-left {
        gap: 1.5rem;
    }

    nav ul {
        gap: 1rem;
    }
    
    .nav-link,
    nav a {
        font-size: 0.85rem;
    }
}

@media (max-width: 900px) {
    .header-actions {
        display: none;
    }

    .header-content {
        padding: 0 1rem;
    }
    
    .header-left {
        gap: 0.8rem;
    }

    nav ul {
        gap: 0.6rem;
    }
    
    .nav-link,
    nav a {
        font-size: 0.8rem;
        padding: 6px 0;
    }
    
    .nav-submenu {
        min-width: 200px;
    }
}

@media (max-width: 700px) {
    .header-left {
        gap: 0.5rem;
    }

    nav ul {
        gap: 0.4rem;
    }
    
    .nav-link,
    nav a {
        font-size: 0.7rem;
        padding: 4px 0;
    }
    
    .logo-container img {
        height: 28px;
    }
    
    .nav-submenu {
        min-width: 160px;
        padding: 0.3rem;
    }
    
    .nav-submenu a {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 550px) {
    .header-left {
        gap: 0.3rem;
    }

    nav ul {
        gap: 0.2rem;
    }
    
    .nav-link,
    nav a {
        font-size: 0.6rem;
        padding: 3px 0;
    }
    
    .logo-container img {
        height: 24px;
    }
    
    .nav-submenu {
        min-width: 140px;
    }
    
    .nav-submenu a {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
    }
}

/* Sehr kleine Screens: Kompakte Navigation */
@media (max-width: 420px) {
    .header-content {
        padding: 0 0.5rem;
    }
    
    .header-left {
        gap: 0.2rem;
        width: 100%;
    }
    
    .logo-container img {
        height: 22px;
    }
    
    nav {
        flex: 1;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    nav::-webkit-scrollbar {
        display: none;
    }
    
    nav ul {
        gap: 0.15rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    
    .nav-link,
    nav a {
        font-size: 0.55rem;
        padding: 2px 0;
        white-space: nowrap;
    }
    
    .nav-submenu {
        position: fixed;
        left: 50%;
        top: var(--header-height);
        transform: translateX(-50%) translateY(-8px);
        min-width: min(260px, 90vw);
        max-height: calc(100vh - var(--header-height) - 20px);
    }
    
    .has-submenu:hover .nav-submenu,
    .has-submenu:focus-within .nav-submenu {
        transform: translateX(-50%) translateY(0);
    }
    
    .nav-submenu a {
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
    }
}

main {
    margin-top: 0;
    padding-top: 0;
}

main > h1:first-child,
main > header:first-child h1:first-child {
    margin-top: 0;
}

.footer {
    width: min(100%, var(--container));
    margin: clamp(3rem, 6vw, 5rem) auto 2rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--radius);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--shadow-sm);
}

.footer p {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.footer-grid {
    display: grid;
    gap: 1.1rem;
    text-align: left;
}

.footer-grid > div,
.footer-grid > nav {
    display: flex;
    flex-direction: column;
}

.footer-grid > div > p:first-child,
.footer-grid > nav > p:first-child {
    margin-bottom: 0.4rem;
}

.footer-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.footer-grid a {
    color: inherit;
    text-decoration: none;
}

.footer-grid a:hover {
    text-decoration: underline;
}

.footer-note {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
}

@media (min-width: 640px) {
    .footer {
        text-align: left;
        padding: 2.5rem 2rem;
    }

    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==== Trainingsplan-Seite ==== */
.page-plan {
    background: linear-gradient(
            135deg,
            color-mix(in oklab, var(--brand-weak) 70%, #ffffff),
            #ffffff
    );
    color: var(--text);
    padding: 0 0 5.5rem;
}

.page-plan .page-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.plan-hero {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    padding: 4rem 2rem;
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.7) 100%),
        url('../../img/image.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* Volle Breite über den Container hinaus */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
    min-height: 400px;
    justify-content: center;
}

.plan-title {
    font-size: clamp(2.4rem, 3.3vw, 3rem);
    font-weight: 700;
}

.plan-intro {
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.7;
    opacity: 0.95;
}

.btn {
    display: inline-block;
    padding: 0.9rem 2.2rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    letter-spacing: 0.02em;
    transition: transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
    opacity: 0.96;
}

.section-heading {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    position: relative;
}

.section-heading::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    border-radius: 999px;
    margin-top: 0.5rem;
    background: linear-gradient(90deg, var(--primary), transparent);
}

.section-text {
    max-width: 720px;
    line-height: 1.7;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.text-accent {
    color: var(--brand);
    font-weight: 600;
}

.card-grid {
    display: grid;
    gap: 1.7rem;
}

.step-card {
    position: relative;
    background: var(--surface);
    padding: 1.9rem 1.9rem 1.7rem;
    overflow: hidden;
}

.step-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--primary), rgba(15, 23, 42, 0.4));
    opacity: 0.9;
}

.plan-steps .card-grid .step-card::before {
    content: attr(data-step);
    position: absolute;
    top: 1.1rem;
    right: 1.4rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: rgba(248, 250, 252, 0.9);
    background: rgba(15, 23, 42, 0.9);
}

.plan-steps .card-grid .step-card:nth-child(1)::before {
    content: "1";
}

.plan-steps .card-grid .step-card:nth-child(2)::before {
    content: "2";
}

.plan-steps .card-grid .step-card:nth-child(3)::before {
    content: "3";
}

.step-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.55rem;
}

.step-text {
    line-height: 1.7;
    opacity: 0.96;
}

/* entfernt leeres .tips-grid Regelset (vorher leer) */
.tip-card {
    position: relative;
    background: var(--surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1.7rem 1.9rem 1.7rem 1.9rem;
    overflow: hidden;
}

.tip-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
            circle at top left,
            rgba(255, 255, 255, 0.16),
            transparent 60%
    );
    pointer-events: none;
}

.tip-card::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(
            180deg,
            var(--primary),
            rgba(229, 231, 245, 0.85)
    );
    background: linear-gradient(
            180deg,
            var(--primary),
            color-mix(in oklab, var(--primary) 20%, #e5e7f5)
    );
    opacity: 0.9;
}

.tip-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.tip-text {
    line-height: 1.7;
    opacity: 0.95;
}

.plan-note {
    margin-top: 2.5rem;
}

.note-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
}

.plan-faq {
    margin-top: 3rem;
    background: var(--surface);
    padding: 2rem;
}

.faq-list {
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.faq-list div {
    background: color-mix(in oklab, var(--brand-weak) 35%, #ffffff);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(11, 18, 32, 0.06);
}

.faq-list dt {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.faq-list dd {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

/* Service Page */
.service-page {
    padding-top: 2rem;
}

.service-hero {
    text-align: center;
    padding: 3rem 1.5rem 2.5rem;
    background: linear-gradient(180deg, color-mix(in oklab, var(--brand-weak) 25%, #ffffff) 0%, #ffffff 100%);
}

.service-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.service-hero p {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 540px;
    margin: 0 auto;
}

.support-options {
    margin: 2.5rem auto;
    width: min(960px, 100% - 2rem);
    padding: 2rem 1.5rem;
    background: var(--surface);
    border-radius: 1rem;
    border: 1px solid rgba(11, 18, 32, 0.06);
}

.support-options h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.support-options > p {
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.support-grid {
    margin-top: 1.25rem;
    display: grid;
    gap: 1rem;
}

.support-grid article {
    padding: 1.5rem;
    background: color-mix(in oklab, var(--brand-weak) 30%, #ffffff);
    border-radius: 0.875rem;
    border: 1px solid rgba(11, 18, 32, 0.05);
}

.support-grid article h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.support-grid article p {
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.support-grid article a {
    color: var(--primary);
    font-weight: 500;
}

@media (min-width: 720px) {
    .support-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .plan-hero {
        text-align: left;
        align-items: flex-start;
    }

    .plan-intro {
        margin-left: 0;
    }

    /* Steps: 3 Spalten */
    .plan-steps .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Tipps: 2 Spalten */
    .plan-tips .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.plan-title {
    position: relative;
    display: inline-block;
    padding-bottom: 0.4rem;
}

.plan-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 12px;
    background: radial-gradient(
            ellipse at center,
            rgba(var(--primary-rgb), 0.35),
            transparent 70%
    );
    filter: blur(8px);
    opacity: 0.6;
    pointer-events: none;
}

/* Planselector */
.page-plan-selector {
    background: linear-gradient(
            135deg,
            #ffffff,
            color-mix(in oklab, var(--brand-weak) 60%, #ffffff)
    );
    color: var(--text);
}

.planselector-hero {
    padding-top: 4rem;
    padding-bottom: 2.5rem;
    text-align: left;
}

.planselector-title {
    font-size: clamp(2.1rem, 3vw, 2.6rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.planselector-intro {
    max-width: 640px;
    line-height: 1.7;
    opacity: 0.95;
}

.planselector-grid {
    margin-bottom: 3.5rem;
}

.planselector-cards {
    display: grid;
    gap: 1.8rem;
}

.plan-card {
    position: relative;
    display: block;
    background: var(--surface);
    padding: 1.7rem 1.8rem 1.6rem 1.9rem;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

a.plan-card {
    cursor: pointer;
}

.plan-card::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(
            180deg,
            var(--primary),
            rgba(229, 231, 245, 0.85)
    );
    background: linear-gradient(
            180deg,
            var(--primary),
            color-mix(in oklab, var(--primary) 18%, #e5e7f5)
    );
}

.plan-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
            circle at top left,
            rgba(255, 255, 255, 0.22),
            transparent 60%
    );
    pointer-events: none;
}

.plan-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}

.plan-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--text);
    background: var(--brand-weak);
    margin-bottom: 0.5rem;
}

.plan-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.plan-card-subtitle {
    font-size: 0.95rem;
    color: var(--muted);
    margin-bottom: 0.6rem;
}

.plan-card-text {
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 1.2rem;
}

.planselector-info {
    margin-bottom: 4rem;
}

.planselector-hints {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.planselector-hints li {
    line-height: 1.7;
}

.planselector-hints strong {
    font-weight: 600;
}

@media (min-width: 768px) {
    .planselector-hero {
        padding-top: 4.5rem;
        padding-bottom: 3rem;
    }

    .planselector-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.planselector-hints strong {
    font-weight: 600;
    color: var(--primary);
}

.glow-title {
    position: relative;
    display: inline-block;
    padding-bottom: 0.4rem;
}

.glow-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 14px;
    background: radial-gradient(
            ellipse at center,
            rgba(var(--primary-rgb), 0.4),
            transparent 70%
    );
    filter: blur(10px);
    opacity: 0.55;
    pointer-events: none;
}

/* =========================================
   Meals – Übersicht (Cards nach Kategorien)
   ========================================= */

/* Meals Page Container */
.meals-page {
    background: linear-gradient(180deg, color-mix(in oklab, var(--brand-weak) 20%, #ffffff) 0%, #ffffff 100%);
    padding-bottom: 3rem;
}

/* Hero-Bereich über den Kategorien */
.hero {
    width: min(var(--container), 100% - 2rem);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(11, 18, 32, 0.06);
    background: radial-gradient(circle at top right, color-mix(in oklab, var(--brand) 15%, #ffffff), transparent 60%),
                var(--surface);
    box-shadow: var(--shadow-sm);
}

.hero h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    letter-spacing: -0.01em;
}

.hero p {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 600px;
}

/* Quick Info unter Hero */
.meals-quick-info {
    width: min(var(--container), 100% - 2rem);
    margin: 1.2rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 700px) {
    .meals-quick-info {
        grid-template-columns: 1fr;
    }
}

.meals-quick-info .info-card {
    background: var(--surface);
    border: 1px solid rgba(11, 18, 32, 0.06);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    box-shadow: var(--shadow-sm);
}

.meals-quick-info .info-card h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.meals-quick-info .info-card p {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}

/* Kategorie-Tabs */
.meals-tabs {
    width: min(var(--container), 100% - 2rem);
    margin: 2rem auto 0;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.meals-tab {
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    border: 1px solid rgba(11, 18, 32, 0.1);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none;
}

.meals-tab:hover,
.meals-tab.active {
    background: var(--brand-weak);
    color: var(--text);
    border-color: color-mix(in oklab, var(--brand) 30%, transparent);
}

/* Kategorie-Sektionen */
.meals-category {
    width: min(var(--container), 100% - 2rem);
    margin: 1.5rem auto 0;
}

.meals-category-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid color-mix(in oklab, var(--brand) 25%, transparent);
}

.meals-category-header h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.meals-category-header .emoji {
    font-size: 1.4rem;
}

/* Intro-/Info-Section (Legacy Support) */
.info-section {
    width: min(var(--container), 100% - 2rem);
    margin: 1.5rem auto 0;
    padding: 1.5rem 1.6rem;
    border-radius: var(--radius);
    border: 1px solid rgba(11, 18, 32, 0.06);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.info-section .section-heading {
    margin-bottom: 0.3rem;
    font-size: 1.2rem;
}

.info-section .section-text {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.info-section .card-grid {
    margin-top: 0.6rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

@media (max-width: 700px) {
    .info-section .card-grid {
        grid-template-columns: 1fr;
    }
}

/* Info-Karten kompakter */
.info-card {
    background: color-mix(in oklab, var(--brand-weak) 25%, #ffffff);
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.info-card h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.info-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 0.88rem;
}

/* Accordion-Kategorien kompakter */
.accordion {
    width: min(var(--container), 100% - 2rem);
    margin: 1.5rem auto 0;
    display: grid;
    gap: 1rem;
}

details.acc-item {
    border: 1px solid rgba(11, 18, 32, 0.06);
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

details.acc-item[open] {
    box-shadow: var(--shadow-md);
}

details.acc-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.2rem;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: color-mix(in oklab, var(--brand-weak) 30%, #ffffff);
}

details.acc-item > summary::-webkit-details-marker {
    display: none;
}

.acc-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.chev {
    transition: transform 0.2s ease;
    font-size: 0.85rem;
    opacity: 0.6;
}

details[open] .chev {
    transform: rotate(90deg);
}

/* Grid mit Bildkarten je Kategorie */
/* Grid mit Bildkarten je Kategorie */
.grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 1.2rem;
}

/* auf schmalen Bildschirmen weniger Karten pro Zeile */
@media (max-width: 1100px) {
    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* Einzelne Meal-Karte – Bild im Hintergrund, Titel als Button */
/* Link um die gesamte Card – macht das ganze Bild klickbar */
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Einzelne Meal-Karte – Bild im Hintergrund, Titel zentriert */
.card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* kompakteres Verhältnis */
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(11, 18, 32, 0.08);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
    cursor: pointer;
}

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.75)
    );
    opacity: 0;
    transition: opacity 0.2s ease;
}


/* Titel-Button über dem Bild */
/* Titel-Badge über dem Bild, zentriert */
.card .label {
    position: absolute;
    left: 50%;
    bottom: 0.8rem;
    transform: translateX(-50%);
    z-index: 1;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 0.82rem;
    color: var(--text);
    background: var(--brand-mix-65);
    background: color-mix(in oklab, var(--brand-weak) 60%, #ffffff);
    border: 1px solid var(--brand-border-20);
    border: 1px solid color-mix(in oklab, var(--brand) 22%, #0000);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    white-space: nowrap;
}

/* Hover-Effekt: Card hebt sich, Button wirkt klickbar */
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(11, 18, 32, 0.16);
}

.card:hover::after {
    opacity: 1;
}

.card:hover .label {
    background: var(--brand-mix-20);
    background: color-mix(in oklab, var(--brand) 18%, #ffffff);
}

/* =========================================
   Trainingspläne – Detailseiten (UL, FB, PPL)
   ========================================= */

.tp-page {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0;

    /* Basisfläche – warmes Orange, an deine Palette angelehnt */
    background: color-mix(in oklab, var(--blue-weak) 85%, var(--blue-weak) 15%);
}

/* große „Bogenform“ rechts unten */
.tp-page::before {
    content: "";
    position: absolute;
    width: 1200px;
    height: 1200px;
    right: -350px;
    bottom: -700px;

    background: #e67bb2;
    border-radius: 50%;
    z-index: 0;
}

/* zweite, kleinere Welle davor – gibt den Doppelbogen-Effekt */
.tp-page::after {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    right: 100px;
    bottom: -550px;

    background: #ffa9d5;
    border-radius: 50%;
    z-index: 0;
}

.tp-container {
    position: relative;
    z-index: 1; /* über den Bögen */

    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 2.2rem;

    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--shadow-md);
}

/* HERO / INTRO */

.tp-hero {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.tp-badge {
    margin-bottom: 0.3rem;
}

.tp-title {
    font-size: clamp(2.1rem, 3vw, 2.7rem);
    font-weight: 700;
}

.tp-subtitle {
    max-width: 680px;
    line-height: 1.7;
    opacity: 0.95;
}

/* META INFOS */

.tp-meta {
    margin-bottom: 3rem;
}

.tp-meta-grid {
    display: grid;
    gap: 1rem;
}

.tp-meta-item {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(11, 18, 32, 0.06);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.tp-meta-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 0.15rem;
}

.tp-meta-value {
    font-size: 0.95rem;
    font-weight: 600;
}

/* TRAININGSWOCHE */

.tp-week {
    margin-bottom: 3rem;
}

.tp-week-header {
    margin-bottom: 1.7rem;
}

.tp-week-title {
    margin-bottom: 0.5rem;
}

.tp-week-text {
    margin-bottom: 0;
}

.tp-week-grid {
    display: grid;
    gap: 1.5rem;
}

/* DAY CARDS */

.tp-day-card {
    position: relative;
    background: var(--surface);
    border-radius: 1.1rem;
    padding: 1.6rem 1.7rem 1.5rem 1.7rem;
    border: 1px solid rgba(11, 18, 32, 0.08);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.tp-day-card::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(
            180deg,
            var(--primary),
            color-mix(in oklab, var(--primary) 20%, #e5e7f5)
    );
    opacity: 0.9;
}

.tp-day-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
}

.tp-day-tagline {
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
    color: var(--muted);
}

/* ÜBUNGSLISTE */

.tp-exercise-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tp-exercise-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.tp-ex-name {
    font-weight: 500;
}

.tp-ex-sets {
    font-size: 0.9rem;
    color: var(--muted);
    white-space: nowrap;
}

/* HINWEISE */

.tp-hints {
    margin-top: 3.5rem;
}

.tp-hints-title {
    margin-bottom: 0.5rem;
}

.tp-hints-text {
    margin: 0.75rem auto 2rem;
    max-width: 720px;
    color: var(--muted);
    text-align: center;
}

/* RESPONSIVE */

@media (min-width: 640px) {
    .tp-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .tp-meta-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tp-week-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tp-hint-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.tp-hint-item {
    position: relative;
    padding-left: 1.2rem;
}

.tp-hint-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
}

/* =========================================
   FB ergänzung 
   ========================================= */

.tp-week--fb .tp-week-grid {
    display: grid;
    gap: 1.6rem;
}

@media (min-width: 700px) {
    .tp-week--fb .tp-week-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .tp-week--fb .tp-week-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tp-day-card--fb {
    position: relative;
    background: var(--surface);
    border-radius: 1rem;
    padding: 1.6rem 1.4rem 1.4rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

/* Farbige Akzentkante links – je nach Karte in anderer Brand-Farbe */
.tp-week--fb .tp-day-card--fb::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--brand);
    opacity: 0.9;
}

.tp-week--fb .tp-day-card--fb:nth-child(2)::before {
    background: var(--red);
}

.tp-week--fb .tp-day-card--fb:nth-child(3)::before {
    background: var(--yellow);
}

.tp-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

.tp-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--brand-weak);
    color: var(--text);
}

/* 2. & 3. Badge farblich anpassen */
.tp-week--fb .tp-day-card--fb:nth-child(2) .tp-day-badge {
    background: var(--red-weak);
}

.tp-week--fb .tp-day-card--fb:nth-child(3) .tp-day-badge {
    background: var(--yellow-weak);
}

.tp-week--fb .tp-day-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.tp-week--fb .tp-day-tagline {
    margin: 0.3rem 0 0.8rem;
    font-size: 0.95rem;
    color: var(--muted);
}

.tp-exercise-list--compact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-exercise-list--compact .tp-exercise-item {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.92rem;
    padding: 0.2rem 0;
}

.tp-exercise-list--compact .tp-ex-name {
    font-weight: 500;
}

.tp-exercise-list--compact .tp-ex-sets {
    opacity: 0.8;
    font-size: 0.9rem;
}

/* =========================================
   PPL – 3 Tage Layout
   ========================================= */

.tp-week--ppl .tp-week-grid {
    display: grid;
    gap: 1.6rem;
}

@media (min-width: 700px) {
    .tp-week--ppl .tp-week-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .tp-week--ppl .tp-week-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Card-Style für PPL */
.tp-day-card--ppl {
    position: relative;
    background: var(--surface);
    border-radius: 1rem;
    padding: 1.6rem 1.4rem 1.4rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

/* farbige Akzentkante links – je Tag andere Farbe */
.tp-week--ppl .tp-day-card--ppl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--blue); /* Tag 1: Push */
    opacity: 0.9;
}

/* Tag 2 – Pull: Blauton */
.tp-week--ppl .tp-day-card--ppl:nth-child(2)::before {
    background: #e67bb2;
}

/* Tag 3 – Legs: Rot */
.tp-week--ppl .tp-day-card--ppl:nth-child(3)::before {
    background: var(--red);
}

/* =========================================
   Breadcrumb-Navigation für Trainingspläne
   ========================================= */

.tp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;

    margin-bottom: 1.8rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.tp-breadcrumb a {
    text-decoration: none;
    font-weight: 600;
    color: var(--muted);
    position: relative;
}

.tp-breadcrumb a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.1rem;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
            90deg,
            var(--brand),
            color-mix(in oklab, var(--brand) 40%, #ffffff)
    );
    transition: width 0.18s ease;
}

.tp-breadcrumb a:hover::after {
    width: 100%;
}

.tp-breadcrumb-separator {
    opacity: 0.7;
}

.tp-breadcrumb-current {
    font-weight: 700;
    color: var(--text);
}

/* Bottom Back Button (oval) */

.tp-back-bottom-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.tp-back-bottom {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 0.6rem 1.6rem;
    border-radius: 999px;

    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    background: var(--brand-weak);
    color: var(--text);
    border: 1px solid color-mix(in oklab, var(--brand) 22%, #0000);

    box-shadow: 0 6px 18px rgba(11, 18, 32, 0.08);
    transition: all 0.18s ease;
}

.tp-back-bottom:hover {
    background: color-mix(in oklab, var(--brand-weak) 40%, var(--brand) 25%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* =========================================
   Meal Detail Pages (Recipes)
   ========================================= */

.recipe-hero {
    width: min(var(--container), 100% - 2rem);
    margin: 1.5rem auto;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
    background: var(--surface);
}

.recipe-hero img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.recipe-hero-content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.2rem 1.4rem;
    color: #ffffff;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0),
            color-mix(in oklab, var(--brand-weak) 70%, rgba(0, 0, 0, 0.85))
    );
}

.recipe-hero .badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.recipe-hero h1 {
    margin: 0.6rem 0 0;
    color: inherit;
}

.recipe-meta {
    width: min(var(--container), 100% - 2rem);
    margin: 1rem auto 2rem;
}

.recipe-meta-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    background: color-mix(in oklab, var(--brand-weak) 18%, #ffffff);
    padding: 1.4rem;
    border-radius: 12px;
    border: 1px solid rgba(11, 18, 32, 0.08);
}

.recipe-meta .meta-item {
    background: color-mix(in oklab, var(--brand-weak) 25%, #ffffff);
    border: 1px solid rgba(11, 18, 32, 0.06);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.recipe-meta .label {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.recipe-meta .value {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.recipe-section {
    width: min(var(--container), 100% - 2rem);
    margin: 1rem auto;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid rgba(11, 18, 32, 0.08);
    box-shadow: var(--shadow-sm);
}

.recipe-section h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.recipe-section p {
    line-height: 1.7;
}

.recipe-section ul,
.recipe-section ol {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
    line-height: 1.7;
}

.recipe-section li + li {
    margin-top: 0.4rem;
}

@media (max-width: 640px) {
    .recipe-hero img {
        height: 240px;
    }

    .recipe-section {
        padding: 1.25rem 1.4rem;
    }
}

/* =============================================
   COMPREHENSIVE MOBILE OPTIMIZATIONS
   ============================================= */

/* -------- Extra Small Devices (< 480px) -------- */
@media (max-width: 480px) {
    /* Hero Section */
    .hero-section {
        min-height: auto;
        padding: 2.5rem 1rem 2rem;
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 1.15;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-description {
        font-size: 0.95rem;
    }
    
    .hero-cta {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-cta .btn,
    .hero-cta .btn-primary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    .hero-badges {
        gap: 0.4rem;
    }
    
    .hero-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.65rem;
    }
    
    .hero-floating-card {
        padding: 1.3rem;
        gap: 0.8rem;
    }
    
    .hero-floating-list li {
        font-size: 0.9rem;
    }
    
    /* Stats Section */
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    
    .stat-item {
        padding: 1.2rem 0.9rem;
    }
    
    .stat-number {
        font-size: 1.6rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    /* About Section */
    .about-highlight-grid {
        grid-template-columns: 1fr;
    }
    
    .about-highlight {
        padding: 1.4rem;
    }
    
    /* Section Titles */
    .section-title {
        font-size: 1.6rem;
    }
    
    .section-intro {
        font-size: 0.95rem;
    }
    
    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .testimonial-card {
        padding: 1.3rem;
    }
    
    .testimonial-quote {
        font-size: 0.95rem;
    }
    
    /* Experience/Benefits Grid */
    .experience-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .experience-card,
    .benefits-card {
        padding: 1.4rem;
    }
    
    /* Journey Timeline */
    .journey-item {
        grid-template-columns: auto 1fr;
        gap: 0.8rem;
    }
    
    .journey-marker {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }
    
    .journey-marker span {
        font-size: 0.9rem;
    }
    
    .journey-card {
        padding: 1.2rem 1.3rem;
    }
    
    .journey-item:not(:last-child)::after {
        left: 21px;
    }
    
    /* How Hero */
    .how-hero-title {
        font-size: 1.8rem;
    }
    
    .how-hero-content,
    .how-hero-card {
        padding: 1.4rem;
    }
    
    /* CTA Section */
    .cta-actions {
        flex-direction: column;
    }
    
    .cta-actions .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Feature Cards */
    .feature-card {
        padding: 1.2rem;
    }
    
    .feature-icon {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }
    
    .feature-title {
        font-size: 1.15rem;
    }
    
    /* Footer */
    .footer {
        padding: 1.5rem 1rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    /* Plan Selector */
    .planselector-cards {
        gap: 1.2rem;
    }
    
    .plan-card {
        padding: 1.3rem 1.4rem;
    }
    
    .planselector-title {
        font-size: 1.7rem;
    }
    
    /* Meals Page */
    .meals-tabs {
        gap: 0.4rem;
    }
    
    .meals-tab {
        padding: 0.55rem 1rem;
        font-size: 0.82rem;
    }
    
    .hero h1 {
        font-size: 1.5rem;
    }
    
    .hero p {
        font-size: 0.95rem;
    }
    
    .hero {
        padding: 1.5rem 1.2rem;
    }
    
    /* Meal Cards Grid */
    .grid {
        gap: 0.9rem;
        padding: 0.9rem;
    }
    
    .card {
        aspect-ratio: 16 / 10;
    }
    
    .card .label {
        font-size: 0.75rem;
        padding: 0.35rem 0.8rem;
    }
    
    /* Training Plan Pages */
    .tp-container {
        padding: 1.5rem 1.2rem;
        border-radius: 14px;
    }
    
    .tp-title {
        font-size: 1.7rem;
    }
    
    .tp-day-card,
    .tp-day-card--fb,
    .tp-day-card--ppl {
        padding: 1.3rem 1.2rem;
    }
    
    .tp-day-title {
        font-size: 1rem;
    }
    
    .tp-exercise-item {
        font-size: 0.88rem;
        flex-wrap: wrap;
    }
    
    .tp-ex-sets {
        font-size: 0.82rem;
    }
    
    /* Learning Page */
    .learning-hero {
        padding: 1.5rem 1.2rem;
    }
    
    .learning-hero-title {
        font-size: 1.7rem;
    }
    
    .learning-info-grid {
        grid-template-columns: 1fr;
    }
    
    .learning-info-card {
        padding: 1.2rem;
    }
    
    .learning-topic-card {
        padding: 1.2rem;
    }
    
    .learning-topic-card pre {
        font-size: 0.75rem;
        padding: 0.6rem 0.7rem;
    }
    
    /* Service Page */
    .service-hero {
        padding: 2rem 1rem 1.5rem;
    }
    
    .service-hero h1 {
        font-size: 1.5rem;
    }
    
    .support-options {
        padding: 1.4rem 1.2rem;
    }
    
    .support-grid article {
        padding: 1.2rem;
    }
    
    /* Recipe Pages */
    .recipe-hero img {
        height: 200px;
    }
    
    .recipe-hero-content {
        padding: 1rem;
    }
    
    .recipe-hero h1 {
        font-size: 1.3rem;
    }
    
    .recipe-meta-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem;
        gap: 0.7rem;
    }
    
    .recipe-meta .meta-item {
        padding: 0.7rem 0.8rem;
    }
    
    .recipe-meta .value {
        font-size: 1rem;
    }
    
    /* Step/Tip Cards */
    .step-card,
    .tip-card {
        padding: 1.3rem;
    }
    
    .step-title,
    .tip-title {
        font-size: 1rem;
    }
    
    /* FAQs */
    .plan-faq {
        padding: 1.4rem 1.2rem;
    }
    
    .faq-list div {
        padding: 1rem 1.1rem;
    }
    
    /* Accordion */
    details.acc-item > summary {
        padding: 0.85rem 1rem;
        font-size: 0.95rem;
    }
    
    /* Learning Module Grid */
    .learning-module-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Benefits Body - Stack vertically */
    .benefits-body {
        grid-template-columns: 1fr;
    }
    
    .benefits-summary {
        padding: 1.4rem;
    }
    
    .benefits-figure-value {
        font-size: 2.2rem;
    }
    
    /* Training Plan Page Background */
    .tp-page::before,
    .tp-page::after {
        display: none;
    }
    
    .tp-page {
        padding: 2.5rem 0;
    }
    
    /* Planselector */
    .planselector-hero {
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }
    
    .planselector-intro {
        font-size: 0.95rem;
    }
    
    /* About Grid - Stack vertically */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .about-list li {
        font-size: 0.95rem;
    }
    
    /* How Hero Shell */
    .how-hero-shell {
        grid-template-columns: 1fr;
    }
    
    /* Section Shell padding */
    .section-shell {
        width: min(var(--container), 100% - 1.5rem);
    }
    
    /* Learning Hero Actions */
    .learning-hero-actions {
        flex-direction: column;
        gap: 0.6rem;
    }
    
    .learning-hero-actions .btn,
    .learning-hero-actions .btn-primary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    /* TP Meta */
    .tp-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* TP Week Grid - single column on very small */
    .tp-week-grid,
    .tp-week--fb .tp-week-grid,
    .tp-week--ppl .tp-week-grid {
        grid-template-columns: 1fr;
    }
    
    /* Back Button */
    .tp-back-bottom {
        font-size: 0.85rem;
        padding: 0.5rem 1.2rem;
    }
}

/* -------- Small Devices (481px - 640px) -------- */
@media (min-width: 481px) and (max-width: 640px) {
    .hero-title {
        font-size: 2.4rem;
    }
    
    .hero-cta {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .experience-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Learning Module Grid */
    .learning-module-grid {
        grid-template-columns: 1fr;
    }
    
    /* About Grid */
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    /* Benefits Body */
    .benefits-body {
        grid-template-columns: 1fr;
    }
    
    /* Plan Selector Cards */
    .planselector-cards {
        grid-template-columns: 1fr;
    }
    
    /* TP Week Grid */
    .tp-week-grid,
    .tp-week--fb .tp-week-grid,
    .tp-week--ppl .tp-week-grid {
        grid-template-columns: 1fr;
    }
    
    /* How Hero */
    .how-hero-shell {
        grid-template-columns: 1fr;
    }
}

/* -------- Medium Devices (641px - 900px) -------- */
@media (min-width: 641px) and (max-width: 900px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-floating-card {
        max-width: 400px;
        margin: 1.5rem auto 0;
    }
    
    /* Experience Grid */
    .experience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Benefits Body */
    .benefits-body {
        grid-template-columns: 1fr;
    }
    
    /* Benefits Grid */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Learning Module Grid */
    .learning-module-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Plan Selector Cards - 2 columns */
    .planselector-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* TP Week Grid - 2 columns */
    .tp-week-grid,
    .tp-week--fb .tp-week-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* PPL stays at 2 columns */
    .tp-week--ppl .tp-week-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -------- Touch Device Optimizations -------- */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-link,
    nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .btn,
    .btn-primary,
    .header-cta,
    .meals-tab {
        min-height: 44px;
    }
    
    /* Remove hover effects that don't work on touch */
    .experience-card:hover,
    .benefits-card:hover,
    .testimonial-card:hover,
    .plan-card:hover,
    .tip-card:hover,
    .step-card:hover {
        transform: none;
    }
    
    /* Submenu behavior for touch */
    .has-submenu:active .nav-submenu,
    .has-submenu:focus-within .nav-submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}

/* -------- Landscape Mode on Small Devices -------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 1.5rem 1rem;
    }
    
    .hero-floating-card {
        display: none;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
}

/* -------- Safe Area Insets (Notch devices) -------- */
@supports (padding: max(0px)) {
    .main-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    .footer {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }
    
    .hero-section {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
}

/* -------- Print Styles -------- */
@media print {
    .main-header,
    .footer,
    .hero-video,
    .hero-overlay,
    .skip-link {
        display: none !important;
    }
    
    body {
        padding-top: 0;
        background: white;
    }
    
    .hero-section {
        background: white;
        color: black;
        min-height: auto;
        padding: 1rem;
    }
    
    .hero-title,
    .hero-subtitle,
    .hero-description {
        color: black;
    }
}

/* =============================================
   END MOBILE OPTIMIZATIONS
   ============================================= */

/* =============================================
   CROSS-BROWSER COMPATIBILITY ENHANCEMENTS
   ============================================= */

/* ----- Flexbox Fallbacks (IE11, older browsers) ----- */
.hero-cta,
.hero-badges,
.learning-hero-actions,
.cta-actions,
.journey-meta,
.experience-tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* ----- Grid Fallbacks ----- */
@supports not (display: grid) {
    .feature-list,
    .stats-container,
    .testimonials-grid,
    .experience-grid,
    .benefits-grid,
    .grid,
    .planselector-cards {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .feature-list > *,
    .stats-container > *,
    .testimonials-grid > *,
    .experience-grid > *,
    .benefits-grid > *,
    .grid > *,
    .planselector-cards > * {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 300px;
        flex: 1 1 300px;
        margin: 0.5rem;
    }
}

/* ----- Transform Vendor Prefixes ----- */
.btn-primary:hover,
.header-cta:hover,
.tp-back-bottom:hover {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
}

/* ----- Transition Vendor Prefixes ----- */
.btn,
.btn-primary,
.header-cta,
.nav-link,
.nav-submenu {
    -webkit-transition: all 0.18s ease;
    -o-transition: all 0.18s ease;
    transition: all 0.18s ease;
}

/* ----- Box-sizing Reset (Universal) ----- */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ----- Aspect Ratio Fallback ----- */
@supports not (aspect-ratio: 1) {
    .card {
        position: relative;
        padding-bottom: 75%; /* 4:3 ratio */
        height: 0;
    }
    
    .card > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ----- min() / max() / clamp() Fallbacks ----- */
@supports not (width: min(100px, 50%)) {
    .section-shell {
        max-width: var(--container);
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .hero-content {
        max-width: 1120px;
        width: 100%;
    }
    
    .hero-floating-card {
        max-width: 440px;
        width: 100%;
    }
}

/* ----- Backdrop Filter Fallback ----- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .main-header {
        background: rgba(255, 255, 255, 0.95);
    }
    
    .hero-overlay {
        background: linear-gradient(
            120deg,
            rgba(3, 7, 18, 0.95) 0%,
            rgba(6, 12, 23, 0.85) 55%,
            rgba(3, 7, 18, 0.95) 100%
        );
    }
    
    .benefits-summary {
        background: rgba(255, 255, 255, 0.98);
    }
    
    .tip-card {
        background: var(--surface);
    }
    
    .card .label {
        background: var(--brand-weak);
    }
    
    .recipe-hero .badge {
        background: rgba(0, 0, 0, 0.5);
    }
}

/* ----- Gap Property Fallback (older Flexbox) ----- */
@supports not (gap: 1rem) {
    .hero-cta > * {
        margin: 0.45rem;
    }
    
    .hero-badges > * {
        margin: 0.275rem;
    }
    
    .learning-hero-actions > * {
        margin: 0.4rem;
    }
    
    .cta-actions > * {
        margin: 0.45rem;
    }
    
    .nav-submenu > * {
        margin-bottom: 0;
    }
    
    nav ul > * {
        margin-right: 2rem;
    }
    
    nav ul > *:last-child {
        margin-right: 0;
    }
}

/* ----- Inset Property Fallback ----- */
@supports not (inset: 0) {
    .hero-video,
    .hero-overlay,
    .page-dim {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

/* ----- Smooth Scroll Fallback ----- */
@supports not (scroll-behavior: smooth) {
    /* Smooth scroll requires JavaScript polyfill for older browsers */
    html {
        scroll-behavior: auto;
    }
}

/* ----- Safari-specific Fixes ----- */
@supports (-webkit-touch-callout: none) {
    /* Fix for Safari input zoom */
    input, select, textarea {
        font-size: 16px;
    }
    
    /* Fix for Safari flexbox bugs */
    .hero-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
    }
}

/* ----- Firefox-specific Fixes ----- */
@-moz-document url-prefix() {
    /* Firefox scrollbar styling */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--brand) var(--surface);
    }
}

/* ----- High DPI / Retina Display Optimization ----- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-video {
        image-rendering: -webkit-optimize-contrast;
    }
    
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ----- Webkit Scrollbar Styling ----- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface-2);
}

::-webkit-scrollbar-thumb {
    background: var(--brand);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text);
}

/* ----- Selection Styling ----- */
::-moz-selection {
    background: var(--brand);
    color: white;
}

::selection {
    background: var(--brand);
    color: white;
}

/* ----- Focus Visible Polyfill Support ----- */
.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

/* ----- Older Edge/IE Flexbox Fixes ----- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .feature-list {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .feature-card {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        margin: 1%;
    }
}

/* =============================================
   END CROSS-BROWSER COMPATIBILITY
   ============================================= */

/* =============================================
   ACCESSIBILITY ENHANCEMENTS (WCAG 2.1 AA/AAA)
   ============================================= */

/* ----- Screen Reader Only Utility ----- */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ----- Enhanced Focus Indicators (WCAG 2.4.7 AAA) ----- */
:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--brand) !important;
    outline-offset: 3px !important;
}

/* Enhanced focus for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--brand) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.2);
}

/* Navigation focus enhancement */
.nav-link:focus-visible,
.nav-submenu a:focus-visible,
.header-cta:focus-visible {
    outline: 3px solid var(--brand) !important;
    outline-offset: 4px !important;
    border-radius: var(--radius-sm);
}

/* Card focus states */
.feature-card:focus-visible,
.meal-card:focus-visible,
.recipe-card:focus-visible,
.plan-card:focus-visible,
.learning-card:focus-visible,
.experience-card:focus-visible,
.benefits-card:focus-visible,
.testimonial-card:focus-visible,
.tip-card:focus-visible,
.step-card:focus-visible {
    outline: 3px solid var(--brand) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.25),
                var(--shadow-md);
}

/* Button focus enhancement */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 3px solid var(--text) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.3);
}

/* ----- High Contrast Mode Support (WCAG 1.4.11) ----- */
@media (prefers-contrast: more) {
    :root {
        --text: #000000;
        --muted: #333333;
        --surface: #ffffff;
        --surface-2: #f5f5f5;
        --card-border: rgba(0, 0, 0, 0.3);
    }
    
    body {
        background: #ffffff;
    }
    
    /* Stronger borders for cards */
    .feature-card,
    .meal-card,
    .recipe-card,
    .plan-card,
    .experience-card,
    .benefits-card,
    .testimonial-card,
    .tip-card,
    .step-card {
        border: 2px solid var(--text) !important;
    }
    
    /* Enhanced link visibility */
    a {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    
    a:hover,
    a:focus {
        text-decoration-thickness: 3px;
    }
    
    /* Button contrast */
    .btn,
    .btn-primary {
        border: 2px solid var(--text) !important;
    }
    
    /* Focus indicator high contrast */
    :focus-visible {
        outline: 4px solid #000000 !important;
        outline-offset: 2px !important;
    }
    
    /* Navigation contrast */
    .nav-link,
    .nav-submenu a {
        text-decoration: underline;
    }
    
    /* Badge contrast */
    .hero-badge,
    .hero-floating-badge {
        border: 2px solid currentColor;
    }
}

/* ----- Forced Colors / Windows High Contrast Mode ----- */
@media (forced-colors: active) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .header-cta {
        border: 2px solid currentColor !important;
    }
    
    a {
        text-decoration: underline;
    }
    
    :focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }
    
    .feature-card,
    .meal-card,
    .recipe-card,
    .plan-card {
        border: 2px solid CanvasText !important;
    }
    
    .skip-link:focus {
        background: Highlight;
        color: HighlightText;
    }
}

/* ----- Enhanced Reduced Motion (WCAG 2.3.3 AAA) ----- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
    
    html {
        scroll-behavior: auto !important;
    }
    
    /* Hide decorative animations */
    .hero-video,
    video,
    [autoplay] {
        display: none !important;
    }
    
    /* Provide static alternative */
    .hero-section {
        background: linear-gradient(135deg, var(--brand-weak) 0%, var(--surface) 100%);
    }
    
    /* Disable transform animations */
    .feature-card,
    .meal-card,
    .recipe-card,
    .plan-card,
    .btn {
        transform: none !important;
    }
}

/* ----- Target Size (WCAG 2.5.5 AAA - 44x44px minimum) ----- */
@media (pointer: coarse) {
    /* Touch targets for mobile/touch devices */
    a,
    button,
    .btn,
    .nav-link,
    .header-cta,
    input[type="checkbox"],
    input[type="radio"],
    input[type="submit"],
    input[type="button"],
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Navigation link spacing */
    .nav-link {
        padding: 0.75rem 1rem;
    }
    
    .nav-submenu a {
        padding: 0.85rem 1.25rem;
        min-height: 48px;
    }
    
    /* Button padding */
    .btn,
    .btn-primary,
    .btn-secondary {
        padding: 0.875rem 1.5rem;
        min-height: 48px;
    }
}

/* ----- Text Spacing Support (WCAG 1.4.12 AA) ----- */
/* Ensures content remains usable with increased text spacing */
body {
    line-height: 1.5;
    letter-spacing: normal;
    word-spacing: normal;
}

p, li, dd {
    line-height: 1.6;
}

/* Prevent text overflow with increased spacing */
.hero-title,
.section-title,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* ----- Color Independence (WCAG 1.4.1 A) ----- */
/* Links are distinguished by color, context, and hover/focus states */
/* Underlines only shown for users who need them (high contrast mode) */

/* Remove underline from navigation and buttons */
.nav-link,
.header-cta,
.btn,
.btn-primary,
.btn-secondary,
.feature-card a,
.meal-card a,
.recipe-card a,
.plan-card a {
    text-decoration: none;
}

/* ----- Focus Within for Complex Components ----- */
.has-submenu:focus-within > .nav-submenu {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* ----- Print Accessibility ----- */
@media print {
    /* Ensure focus styles don't print */
    *:focus {
        outline: none !important;
    }
    
    /* Show URLs for links */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #333;
    }
    
    /* Ensure sufficient contrast */
    body {
        color: #000 !important;
        background: #fff !important;
    }
    
    /* Hide navigation elements */
    .skip-link,
    nav,
    .header-actions {
        display: none !important;
    }
}

/* ----- Dark Mode Support (User Preference) ----- */
@media (prefers-color-scheme: dark) {
    /* Optional: Add dark mode styles if desired */
    /* Currently keeping light theme for consistency */
}

/* ----- Minimum Font Size Safety ----- */
@media screen {
    body {
        font-size: max(1rem, 16px);
    }
    
    /* Ensure readable minimum sizes */
    small,
    .small,
    figcaption,
    .muted {
        font-size: max(0.875rem, 14px);
    }
}

/* ----- Link Purpose Enhancement ----- */
/* Make link purpose clear in context */
a[target="_blank"]::after {
    content: " (öffnet in neuem Tab)";
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Visual indicator for external links */
a[href^="http"]:not([href*="lifted"]):not(.btn)::after {
    content: " ↗";
    font-size: 0.75em;
    vertical-align: super;
}

/* =============================================
   END ACCESSIBILITY ENHANCEMENTS
   ============================================= */

/* =============================================
   WCAG 2.1 AAA ENHANCEMENTS
   Zusätzliche Verbesserungen für Level AAA
   ============================================= */

/* ----- AAA Visual Presentation (WCAG 1.4.8) ----- */
/* Optimale Zeilenbreite für Lesbarkeit (max 80 Zeichen) */
p,
.section-intro,
.hero-description,
.journey-card p,
.benefits-figure-note,
.recipe-section p,
.learning-hero-text,
.about-copy p,
.experience-card p {
    max-width: 75ch;
    line-height: 1.7;
}

/* Absatzabstand mindestens 1.5x Zeilenhöhe */
p + p,
.section-intro + p {
    margin-top: 1.5em;
}

/* ----- AAA Enhanced Contrast Mode (WCAG 1.4.6 - 7:1) ----- */
@media (prefers-contrast: more) {
    :root {
        --text: #000000;
        --muted: #2d2d2d; /* 7:1 auf weiß */
    }
    
    /* Sekundäre Texte mit höherem Kontrast */
    .muted,
    .stat-label,
    .testimonial-role,
    .recipe-meta .label,
    .tp-meta-label,
    .footer-note,
    .about-highlight-note,
    .section-kicker {
        color: #2d2d2d !important;
    }
    
    /* Platzhalter-Text */
    ::placeholder {
        color: #4a4a4a !important;
        opacity: 1;
    }
}

/* ----- AAA Reflow at 400% Zoom (WCAG 1.4.10) ----- */
@media (max-width: 320px) {
    body {
        overflow-x: hidden;
    }
    
    .section-shell,
    .hero-content,
    .tp-container,
    .footer-grid,
    .learning-hero-content {
        width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .section-title {
        font-size: 1.25rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .btn,
    .btn-primary {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }
    
    .nav-submenu {
        min-width: 100vw;
        left: 0;
    }
    
    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* Tabellen horizontal scrollbar */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Lange Wörter umbrechen */
    h1, h2, h3, h4, h5, h6,
    p, li, td, th, a {
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }
}

/* ----- AAA Section Headings Hierarchy (WCAG 2.4.10) ----- */
/* Klare visuelle Hierarchie */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 600; }
h5 { font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 600; }
h6 { font-size: clamp(0.9rem, 1.5vw, 1rem); font-weight: 600; }

/* Sektionen visuell trennen */
section + section {
    margin-top: clamp(2rem, 5vw, 4rem);
}

/* ----- AAA Animation Safety (WCAG 2.3.2, 2.3.3) ----- */
/* Keine Blink-Animationen erlauben */
@keyframes blink { /* Leer - deaktiviert */ }
@keyframes flash { /* Leer - deaktiviert */ }

*[class*="blink"],
*[class*="flash"],
*[class*="pulse"] {
    animation: none !important;
}

/* Sichere Animationen (unter 3 Blitze pro Sekunde) */
@media (prefers-reduced-motion: no-preference) {
    .feature-card,
    .meal-card,
    .recipe-card,
    .btn {
        transition-duration: 0.3s; /* Mindestens 333ms = max 3 pro Sekunde */
    }
}

/* ----- AAA Link Purpose (WCAG 2.4.9) ----- */
/* Download-Links kennzeichnen */
a[download]::after {
    content: " ⬇";
    font-size: 0.8em;
}

/* PDF-Links kennzeichnen */
a[href$=".pdf"]::after {
    content: " (PDF)";
    font-size: 0.75em;
    font-weight: normal;
    opacity: 0.8;
}

/* E-Mail-Links kennzeichnen */
a[href^="mailto:"]::before {
    content: "✉ ";
    font-size: 0.9em;
}

/* Telefon-Links kennzeichnen */
a[href^="tel:"]::before {
    content: "📞 ";
    font-size: 0.9em;
}

/* ----- AAA Focus Enhancement (WCAG 2.4.7, 2.4.11, 2.4.12) ----- */
/* Focus Not Obscured - Focus immer sichtbar */
:focus {
    z-index: 1;
    position: relative;
}

/* Focus Appearance - Mindestens 2px und ausreichend Kontrast */
:focus-visible {
    outline: 3px solid var(--brand) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.15),
                0 0 0 2px #ffffff;
}

/* ----- AAA Pointer Gestures Alternative (WCAG 2.5.1) ----- */
/* Alle Drag-Aktionen haben Click-Alternative */
[draggable="true"] {
    cursor: grab;
}

[draggable="true"]:active {
    cursor: grabbing;
}

/* ----- AAA Target Spacing (WCAG 2.5.8) ----- */
/* Mindestabstand zwischen Touch-Zielen */
.nav-link + .nav-link,
.btn + .btn,
.footer-grid a + a {
    margin-left: 0.5rem;
}

.nav-submenu li + li {
    margin-top: 0.25rem;
}

/* ----- AAA Consistent Help (WCAG 3.2.6) ----- */
/* Hilfe-Links immer an gleicher Stelle */
.footer [href*="service"],
.footer [href*="help"],
.footer [href*="faq"] {
    order: -1; /* Immer zuerst in der Liste */
}

/* =============================================
   END WCAG 2.1 AAA ENHANCEMENTS
   ============================================= */