/* ==========================================================================
   1. HERO & IDENTITY (Headlines & Teasers)
   ========================================================================== */

.hero-section .hero-text { padding-top: 5rem; }

.main-headline {
    font-size: 6rem !important;
    margin-bottom: 0.5rem !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    line-height: 0.9 !important;
    padding-top: 1rem !important;
}

.hero-text h1 {
    font-size: 4.5rem;
    margin-bottom: 0.5rem;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    letter-spacing: -0.02em;
}

.hero-subline {
    font-size: 1.6rem;
    margin-bottom: 0;
    color: var(--white);
    line-height: 1.5;
    font-weight: 400;
    max-width: 800px;
    margin-left: 0;
    margin-right: auto;
    display: inline-block;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.teaser-text {
    font-size: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--white);
    max-width: 600px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Text & Typography */
.landing-text {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.landing-title {
    font-size: 4rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    line-height: 1.2;
    text-align: center;
}

.landing-title .highlight {
    font-size: 5rem;
    display: inline-block;
}

.landing-subtitle {
    font-size: 1.5rem;
    color: var(--gray-dark);
    margin-bottom: 1.5rem;
    font-weight: 400;
    text-align: center;
}

.tip-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px;}
.tip-text h2 {font-size: 1.8rem;margin-bottom: 20px;color: var(--primary);position: relative;text-align: left;margin-left: 0;}
.tip-text h2:after {content: '';position: absolute;bottom: -10px;left: 0;width: 60px;height: 3px;background-color: var(--accent);border-radius: 3px;}
.tip-text p {margin-bottom: 30px;color: var(--gray-text);line-height: 1.6;font-size: 1.05rem;}

/* ==========================================================================
   2. SECTOR GRIDS (Market Areas & Business Areas)
   ========================================================================== */

/* Company Introduction: two-column layout with figures panel */
.company-intro { padding: 8rem 0; }
.company-intro .company-intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center; /* vertically relate to left text */
}
/* Left column: force left alignment, remove center constraints from defaults */
.company-intro .landing-text { max-width: none; margin: 0; text-align: left; }
.company-intro .landing-title { text-align: left; margin-bottom: 1rem; }
.company-intro .landing-subtitle { text-align: left; margin-bottom: 1.25rem; }
.company-intro .landing-description { text-align: left; }
.company-intro .landing-description .cta-button { margin-top: 1rem; }

/* Right column: figures panel */
.company-intro .company-figures {
    background: transparent;
    color: inherit;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.company-intro .company-figures .figures-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 26px;
    justify-items: center;
    align-items: center;
}
.company-intro .company-figures .figure-item { text-align: center; }
.company-intro .company-figures .figure-number { font-size: 3rem; font-weight: 700; margin-bottom: 4px; color: var(--primary); line-height: 1; text-shadow: none; }
.company-intro .company-figures .figure-label { font-size: 0.85rem; font-weight: 500; color: rgba(var(--primary-rgb), 0.7); opacity: 1; }

/* Keep two columns on mobile as required; stack sections vertically */
@media (max-width: 900px) {
    .company-intro .company-intro-grid { grid-template-columns: 1fr; gap: 28px; align-items: start; }
    .company-intro .company-figures { padding: 0; }
    .company-intro .company-figures .figure-number { font-size: 2rem; }
    .company-intro .company-figures .figures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Accessibility utility */
.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; }

/* Market Areas (Icon-based cards) */
.market-areas { padding: 8rem 0; background-color: var(--white); }
.market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

.market-card {
    background-color: var(--white);
    border-radius: var(--radius);
    padding: 30px;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease;
}
.market-card:hover { transform: translateY(-5px); }
.market-card h3 { margin-bottom: 10px; font-size: 1.2rem; }
.market-card p { color: var(--gray-text); }

/* Icon Logic & Color Variants */
.market-icon { margin-bottom: 20px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin-left: auto; margin-right: auto; }
.market-icon[src*="kfz.svg"] { color: #006ab4; }
.market-icon[src*="nfz.svg"] { color: #298dcd; }
.market-icon[src*="industrie.svg"] { color: #42aeda; }
.market-icon[src*="agrar.svg"] { color: #44bdd2; }

.market-card.agrar h3, .market-card.agrar p { color: #44bdd2; }
.market-card.industrie h3, .market-card.industrie p { color: #42aeda; }
.market-card.nutzfahrzeuge h3, .market-card.nutzfahrzeuge p { color: #298dcd; }
.market-card.kraftfahrzeuge h3, .market-card.kraftfahrzeuge p { color: #006ab4; }

/* Business Areas (Image-based cards) */
.business-areas { padding: 8rem 0; background-color: var(--white); }

/* Headline block overrides: left-aligned, constrained width */
.business-areas .section-kicker { text-align: left; color: rgba(var(--primary-rgb), 0.6); font-size: 12px; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 8px; }
.business-areas .section-title { text-align: left; max-width: 900px; margin-left: 0; }
.business-areas .section-subtitle { text-align: left; max-width: 900px; margin-left: 0; color: rgba(var(--primary-rgb), 0.8); }
/* Limit the intro block height to at most half the viewport */
.business-areas .business-intro { max-height: 50vh; overflow: hidden; }

.business-areas .business-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.business-areas .business-card { position: relative; border-radius: 24px; overflow: hidden; height: 420px; background: var(--white); box-shadow: var(--card-shadow); }
/* Background image behaves like CSS background */
.business-areas .business-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); opacity: 1; }

/* Dark gradient overlay from bottom to top (for readability) */
.business-areas .business-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%); z-index: 1; pointer-events: none; transition: opacity var(--dur-med) var(--ease-out); opacity: 1; }
.business-areas .business-card:hover .business-image { transform: scale(1.03); }

/* Inactive = compact, white, no image/gradient */
.business-areas .business-card:not(.is-active) .business-image { opacity: 0; }
.business-areas .business-card:not(.is-active)::after { opacity: 0; }

/* Top controls */
.business-areas .business-arrow { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.9); color: #111; display: grid; place-items: center; font-size: 18px; z-index: 3; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.business-areas .business-arrow:hover { background: #fff; }

/* Decorative big numbers on cards (inactive focus) */
.business-areas .business-card::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: rgba(var(--primary-rgb), 0.08);
  z-index: 0;
}
.business-areas .business-grid > a:nth-child(1) .business-card::before { content: "01"; }
.business-areas .business-grid > a:nth-child(2) .business-card::before { content: "02"; }
.business-areas .business-grid > a:nth-child(3) .business-card::before { content: "03"; }
/* Hide or soften number on active */
.business-areas .business-card.is-active::before { color: rgba(255,255,255,0.08); }

/* Bottom-left text overlay pinned to bottom third */
.business-areas .business-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; z-index: 2; background: transparent; display: grid; grid-auto-flow: row; gap: 6px; align-content: end; }
/* Inactive text style: primary on white */
.business-areas .business-card:not(.is-active) .business-overlay h3 { color: var(--primary); }
.business-areas .business-card:not(.is-active) .business-overlay p { color: rgba(var(--primary-rgb), 0.8); }

.business-areas .business-overlay h3 { margin: 0 0 2px; font-weight: 700; color: #fff; }
.business-areas .business-overlay p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.9); }

/* Optional hints via pseudo-elements */
.business-areas .business-card:not(.is-active) .business-overlay::after { content: "Mehr anzeigen"; display: block; margin-top: 6px; font-size: 12px; color: rgba(var(--primary-rgb), 0.7); }
.business-areas .business-card.is-active .business-overlay::after { content: "Mehr erfahren →"; display: inline-block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.9); }

/* Typography sizing: state-based (active vs inactive) for consistency */
.business-areas .business-overlay h3 { font-size: 22px; line-height: 1.15; letter-spacing: 0.2px; transition: font-size var(--dur-med) var(--ease-out), line-height var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.business-areas .business-card.is-active .business-overlay h3 { font-size: 36px; line-height: 1.02; letter-spacing: 0.2px; }

/* Old small numbers before title: disable to avoid duplication */
.business-areas .business-overlay h3::before { display: none !important; }

.business-areas a { text-decoration: none; color: inherit; }

/* ==========================================================================
   3. ACTION AREA & CTA OVERRIDES
   ========================================================================== */

.action-area { position: relative; background: url('assets/images/startseite/background_valvoline.jpg') center/cover no-repeat, #0c3b6f; background-position: center; background-size: cover; background-repeat: no-repeat; }
.action-area::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.action-area .action-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 120px 0; }
.action-content { display: flex; align-items: center; gap: 40px; }

.action-text { flex: 1; color: var(--white); }
.action-text h2 { text-align: left; margin-bottom: 20px; color: var(--primary); }
.action-text ul { margin-bottom: 30px; padding-left: 20px; }
.action-text li { margin-bottom: 10px; list-style-type: disc; color: var(--white); }
.action-area .action-headline { margin: 0 0 16px; font-weight: 800; text-transform: uppercase; line-height: 1.05; font-size: 2.5rem; }
.action-area .action-headline .line { display: block; }
.action-area .action-headline .line-1 { color: #088cc7; }
.action-area .action-headline .line-2 { color: #e51c24; }
.action-area .action-headline .line-3 { color: #ffffff; }
.action-area .action-body { color: #ffffff; max-width: 60ch; }
.action-area .action-image img { width: 100%; max-width: 520px; height: auto; display: block; }

.action-image { flex: 1; }
.winter-image { width: 100%; border-radius: var(--radius); }

/* CTA Buttons */
.cta-button { background-color: var(--accent); color: var(--white); padding: 12px 24px; border-radius: var(--radius); font-weight: 500; transition: background-color 0.3s ease; display: inline-block; }
.cta-button:hover { background-color: var(--accent-hover); }

/* Specific override for Home Action Area */
.action-area .cta-button { transition: none; }
.action-area .cta-button:hover { background-color: var(--accent); transform: none; box-shadow: none; }

/* Action Area: spacing under paragraph */
.action-area .action-body { margin-bottom: 24px; }

/* Action Area: red CTA variant */
.action-area .cta-button--red { background-color: #e51c24; color: #fff; padding: 10px 18px; font-size: 0.95rem; border-radius: 8px; }
.action-area .cta-button--red:hover { background-color: #c61e26; }
/* Keep touch-friendly size on small screens */
@media (max-width: 768px) {
  .action-area .cta-button--red { padding: 12px 20px; font-size: 1rem; }
}

/* ==========================================================================
   4. DATA & GROWTH (Key Figures)
   ========================================================================== */

.key-figures {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--primary), #004080);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.figures-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.figure-item { padding: 20px; transition: transform 0.3s ease; }
.figure-item:hover { transform: translateY(-5px); }

.figure-number { font-size: 3.5rem; font-weight: 700; margin-bottom: 10px; color: var(--white); text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.figure-label { font-size: 1.2rem; font-weight: 500; letter-spacing: 0.5px; }

/* ==========================================================================
   5. SERVICE COMPONENTS (Products, Tips, Holiday Hours)
   ========================================================================== */

/* Product Slider */
.product-slider { padding: 8rem 0; background: var(--gray-light); }
.slider-container { position: relative; overflow: hidden; }
.product-slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.product-slider-track:focus { outline: none; }

.product-card { background: var(--white); border-radius: var(--radius-card); box-shadow: var(--card-shadow); overflow: hidden; scroll-snap-align: start; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-image { width: 100%; height: 200px; object-fit: contain; background: #fff; padding: 20px; }
.product-content { padding: 16px; }
.product-content h3 { color: var(--primary); margin-bottom: 8px; font-size: 1.1rem; }
.product-content p { color: var(--gray-text); margin-bottom: 10px; }
.product-link { color: var(--accent); font-weight: 600; }

/* Expert Tip */
.expert-tip { padding: 8rem 0; background: var(--white); }
.tip-card { background: transparent; }
.tip-content { display: flex; gap: 40px; align-items: stretch; }
.tip-image { flex: 1; position: relative; }
.image-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
.expert-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.tip-text { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Home Spacing Overrides */
body.home .product-slider + .expert-tip { padding: 8rem 0 8rem; }


/* ==========================================================================
   6. GLOBAL RESPONSIVE REFINEMENTS
   ========================================================================== */

@media (max-width: 1200px) {
    .container { padding: 0 15px; }
    .nav-container { padding: 15px 20px; }
}

@media (max-width: 1024px) {
    .action-content { flex-direction: column; }
    /* keep desktop 4-col for >=901px; override below in 900px breakpoint */
    .footer-content { flex-direction: column; gap: 30px; }
    .footer-left, .footer-right { flex: 0 0 100%; }
    body.home .opening-hours-holidays__grid { grid-template-columns: 1fr; }
    body.home .opening-hours-holidays__right { text-align: left; }
}

/* Business Areas: responsive carousel below ~900px */
@media (max-width: 900px) {
    .business-areas .business-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        grid-template-columns: unset; /* override generic mobile rules */
        overflow-x: auto;
        gap: 14px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px 10px; /* left/right padding so first/last don't stick */
    }
    .business-areas .business-card { scroll-snap-align: start; height: auto; min-height: 360px; }
    /* State-based mobile sizing: active larger, inactive compact */
    .business-areas .business-card.is-active .business-overlay h3 { font-size: 28px; }
    .business-areas .business-card:not(.is-active) .business-overlay h3 { font-size: 20px; }
}

@media (max-width: 768px) {
    .nav-menu { display: none; }
    .mobile-menu-toggle { display: block; }
    .hero-section { min-height: 560px; height: 85vh; }
    .product-image { height: 160px; }
    .business-card { height: 200px; }
    .figure-number { font-size: 2.8rem; }
    .figure-label { font-size: 1rem; }

    /* Action Area mobile adjustments */
    .action-area { padding: 64px 0; }
    .action-area .action-content { flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 0; }
    .action-area .action-image { order: -1; }
    .action-area .action-headline { font-size: 26px; }
}
/* ==========================================================================
   2b. BUSINESS AREAS INTERACTIVE STATES
   ========================================================================== */

/* Smooth transitions for size and emphasis */
.business-areas .business-card { 
  transition: transform var(--dur-med) var(--ease-out), 
              min-height var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

/* Show only headings by default; reveal description on active */
.business-areas .business-card .business-overlay p {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--dur-med) var(--ease-out), max-height var(--dur-med) ease;
}
.business-areas .business-card.is-active .business-overlay p {
  opacity: 1;
  max-height: 200px; /* enough for 2–3 lines */
}

/* Desktop/tablet expansion behavior */
@media (min-width: 901px) {
  .business-areas .business-card:not(.is-active) {
    transform: none;
  }
  .business-areas .business-card.is-active {
    transform: none;
    box-shadow: var(--shadow-md);
  }
  /* Grid width distribution based on active index */
  .business-areas .business-grid.state-1 { grid-template-columns: 2fr 1fr 1fr; }
  .business-areas .business-grid.state-2 { grid-template-columns: 1fr 2fr 1fr; }
  .business-areas .business-grid.state-3 { grid-template-columns: 1fr 1fr 2fr; }
}


/* Business Areas: 12-column container; intro spans 6 columns */
.business-areas .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 24px;
}

/* Intro may only take 6 columns; grid takes full width */
.business-areas .business-intro { grid-column: span 6; }
.business-areas .business-grid { grid-column: 1 / -1; }

/* On small screens, allow intro to take full width for readability */
@media (max-width: 900px) {
  .business-areas .business-intro { grid-column: 1 / -1; }
}



/* Hide the arrow icon on Business cards (home page) per request */
.business-areas .business-arrow { display: none !important; }

/* Hide "Mehr erfahren" button for Schmierstoffe active card */
.business-areas .business-grid > a:nth-child(1) .business-card.is-active .business-overlay::after {
    display: none !important;
}

/* Business Areas: hide “Mehr erfahren” label when wide and active for AdBlue and Agrar */
/* Applies only to the 2nd and 3rd cards when they have both .business-card--wide and .is-active */
.business-areas .business-grid > a:nth-child(2) .business-card.business-card--wide.is-active .business-overlay::after,
.business-areas .business-grid > a:nth-child(3) .business-card.business-card--wide.is-active .business-overlay::after {
  content: none !important; /* remove the pseudo-element */
  display: none !important;
}




/* Hide active “Mehr erfahren” label on desktop for AdBlue (2nd) and Agrar (3rd) only when they are the large (active) tiles */
@media (min-width: 901px) {
  .business-areas .business-grid.state-2 > a:nth-child(2) .business-card.is-active .business-overlay::after,
  .business-areas .business-grid.state-3 > a:nth-child(3) .business-card.is-active .business-overlay::after {
    content: none !important;
    display: none !important;
  }
}