/* ============================================================
   home.css | Startseite (CNC Outlet).
   Aufgerufen in:
     templates/home.php  (via $extraCss = ['home'])  (+ assets/js/home.js)
   Abschnitte: 1) Start-Slider (Bootstrap Carousel, Daten aus home_slides)
   2) USP-Boxen  3) Aussteller-Logo-Slider  u. a.
   Farb-/Font-Variablen stammen aus assets/css/main.css (:root).
   Slide-Hintergrund: Farbe als Inline-Style am .home-slide, Bild als eigene
   Ebene .home-slide-bg (Inline-Style inkl. opacity) – beides aus
   HomeSlideRepository::getForFrontend() (includes/home-slides.php).

   Hintergrundbilder (.home-exhibitors, #partner) liegen in drei
   Breiten vor: -960 / -1440 / -1920. Die Auswahl erfolgt per Media Query
   weiter unten im Abschnitt "Hintergrundbilder". Wird eine dieser Regeln
   geaendert, muessen alle drei Varianten mitgezogen werden.
   ============================================================ */

/* ── 1) START-SLIDER ─────────────────────────────────────────────── */
.home-slider { position: relative; background: var(--c-darker); }
.home-slide { background-color: var(--c-darker); }
.home-slide--light { color: var(--c-white); }
.home-slide--dark  { color: var(--c-darker); }
.home-slide-inner {
    display: flex; align-items: center; gap: 2.5rem;
    min-height: max(33vh, 380px);
    padding-top: 2rem; padding-bottom: 3rem;
}
.home-slide-text  { flex: 1 1 55%; min-width: 0; }
.home-slide-media {
    flex: 1 1 45%; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    align-self: stretch;
}
.home-slide-media img {
    max-width: 90%; max-height: calc((max(33vh, 380px) - 5rem) * .9);
    width: auto; height: auto; object-fit: contain;
}
#main-content .home-slide h2.home-slide-headline {
    font-family: var(--font-head);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    line-height: 1.15; font-weight: 700;
    color: inherit; margin: 0 0 .35rem; padding: 0;
    overflow-wrap: break-word; hyphens: auto;
}
#main-content .home-slide h2.home-slide-headline::before,
#main-content .home-slide h2.home-slide-headline::after { content: none; }
.home-slide-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    margin: 0 0 1rem; opacity: .9;
}
.home-slide-price {
    color: var(--c-accent); font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    line-height: 1.1; margin: 0 0 1.4rem;
}
.btn.home-slide-cta {
    font-size: 1.1rem; padding: .95rem 2.2rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
.btn.home-slide-cta i { margin-left: .4rem; }
.home-slide--centered .home-slide-inner { justify-content: center; text-align: center; }
.home-slide--centered .home-slide-text { flex: 0 1 100%; }
#main-content .home-slide--centered h2.home-slide-headline {
    font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.1; margin-bottom: .8rem;
}
@media (min-width: 992px) {
    #main-content .home-slide h2.home-slide-headline { hyphens: manual; }
}
.home-slide--centered .home-slide-sub { font-size: clamp(1.05rem, 2.2vw, 1.4rem); margin: 0; }
.home-slide-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-position: center; background-size: cover; background-repeat: no-repeat;
}
.home-slide--bgimg .home-slide-inner { position: relative; z-index: 1; }
.home-slide--bgimg.home-slide--light h2.home-slide-headline,
.home-slide--bgimg.home-slide--light .home-slide-sub { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.home-slider .carousel-indicators { margin-bottom: .8rem; }
.home-slider .carousel-control-prev,
.home-slider .carousel-control-next { width: 4.5%; }

.home-usps { background: var(--c-darker); padding: 0; position: relative; z-index: 5; }
.home-usps .row { margin: 0; }
.home-usps .box {
    position: relative;
    text-align: center;
    padding: 0;
    color: var(--c-white);
}
.home-usps .box.box-bg { background: rgba(255, 255, 255, .04); border-radius: var(--radius-lg); }
#main-content .home-usps .box .title { margin: 0; padding: 0; font-size: inherit; }
#main-content .home-usps .box .title::before,
#main-content .home-usps .box .title::after { content: none; }
.usp-toggle {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    width: 100%; padding: 1.35rem 1.6rem 1rem;
    background: none; border: 0; color: var(--c-white); cursor: pointer;
    font: inherit; text-align: center;
    transition: background var(--transition);
    border-radius: var(--radius-lg);
}
.usp-toggle:hover,
.usp-item.is-open .usp-toggle { background: rgba(255, 255, 255, .06); }
.usp-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.usp-toggle > .bi:first-child { font-size: 2rem; color: var(--c-accent); line-height: 1; }
.usp-title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.usp-caret { font-size: .85rem; line-height: 1; margin-top: -.25rem; color: #c9ccd2; transition: transform var(--transition); }
.usp-item.is-open .usp-caret { transform: rotate(180deg); color: var(--c-accent); }
.usp-panel {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    padding: 1.2rem 1.6rem 1.4rem;
    background: var(--c-darker);
    border-top: 3px solid var(--c-accent);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
    text-align: left;
}
.home-usps .usp-panel .description { color: #c9ccd2; font-size: .95rem; line-height: 1.65; margin: 0; }

#main-content .home-section-title,
#main-content .section-header h3 {
    font-family: var(--font-head); font-weight: 700; color: var(--c-darker);
    text-align: center; font-size: 1.65rem;
}
#main-content .home-section-title { margin: 0 0 2rem; }
#main-content .home-section-title::after,
#main-content .section-header h3::after {
    content: ''; display: block; width: 44px; height: 3px; margin: .7rem auto 0;
    background: var(--c-accent); border-radius: 2px;
}

.home-exhibitors {
    position: relative;
    background: url('/assets/img/about-bg-960.webp') center center / cover no-repeat fixed;
    padding: 3.5rem 0;
}
.home-exhibitors::before { content: ""; position: absolute; inset: 0; background: rgba(245, 245, 245, .7); z-index: 0; }
.home-exhibitors .container { position: relative; z-index: 1; }

.home-ex-slider { position: relative; display: flex; align-items: center; gap: .4rem; }
.home-ex-viewport { flex: 1 1 auto; overflow: hidden; }
.home-ex-track { display: flex; gap: 1.2rem; will-change: transform; }
.home-ex-card {
    flex: 0 0 auto; width: 200px; max-width: 200px;
    display: flex; align-items: center; justify-content: center;
    height: 120px; padding: 1rem 1.2rem;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.home-ex-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: #cfd3d8; }
.home-ex-card img {
    max-width: 100%; max-height: 78px;
    object-fit: contain;
    transition: transform .25s ease;
}
.home-ex-card:hover img,
.home-ex-card:focus-visible img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
    .home-ex-card img { transition: none; }
    .home-ex-card:hover img,
    .home-ex-card:focus-visible img { transform: none; }
}
.home-ex-name { font-weight: 700; color: var(--c-mid); text-align: center; }

.home-ex-arrow {
    flex: 0 0 auto; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    color: var(--c-muted); font-size: 1.7rem; line-height: 1;
    transition: color var(--transition);
}
.home-ex-arrow:hover { color: var(--c-mid); }

@media (max-width: 991.98px) {
    .home-slide-inner {
        flex-direction: column; align-items: center; gap: 1rem;
        min-height: 0; padding-top: 1.4rem; padding-bottom: 3.2rem;
        text-align: center;
    }
    .home-slide-text, .home-slide-media { flex: 0 0 auto; width: 100%; }
    .home-slide-media { order: -1; align-self: auto; }
    .home-slide-media img { max-width: 100%; }
    .btn.home-slide-cta { font-size: 1rem; padding: .8rem 1.8rem; }
    .home-slide--centered .home-slide-inner { align-items: center; min-height: max(33vh, 280px); justify-content: center; }
    .home-slide--centered .home-slide-text { flex: 0 0 auto; }
    #main-content .home-slide--centered h2.home-slide-headline { font-size: clamp(1.6rem, 7.5vw, 2.4rem); }
    .home-slide--centered .home-slide-sub { font-size: 1.02rem; }
    .home-slide-media img { max-height: 198px; }
    .home-slider .carousel-control-prev,
    .home-slider .carousel-control-next { display: none; }
}
.home-slider { touch-action: pan-y; }
.home-slide-media img { -webkit-user-drag: none; user-select: none; }

@media (max-width: 768px) {
    .home-ex-card { width: 160px; max-width: 160px; height: 96px; }
    .usp-toggle { flex-direction: row; justify-content: flex-start; gap: .75rem; padding: .8rem 1rem; text-align: left; }
    .usp-toggle > .bi:first-child { font-size: 1.45rem; }
    .usp-caret { margin-top: 0; }
    .usp-title { font-size: 1.05rem; flex: 1 1 auto; }
}

#about {
    position: relative;
    background: var(--c-smoke);
    padding: 4.5rem 0;
}
#about::before { content: none; }
#about .container { position: relative; z-index: 1; }

.section-header { text-align: center; max-width: 900px; margin: 0 auto 2.6rem; }
#main-content .section-header h3 { margin: 0 0 1rem; }
.section-header p { color: var(--c-mid); font-size: 1rem; line-height: 1.7; margin: 0; }

.about-cols { --gap: 1.5rem; }
.about-col {
    background: var(--c-white); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm); height: 100%;
    display: flex; flex-direction: column;
    transition: box-shadow .3s ease, transform .3s ease;
}
.about-col:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.about-col .img { position: relative; }
.about-col .img img { width: 100%; height: 200px; object-fit: cover; display: block; }
.about-col .icon {
    position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--c-accent); color: var(--c-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
#main-content .about-col .title { text-align: center; font-family: var(--font-head); font-size: 1.18rem; margin: 2.6rem 0 .7rem; }
#main-content .about-col .title::before, #main-content .about-col .title::after { content: none; }
.about-col .title a { color: var(--c-darker); text-decoration: none; }
.about-col .title a:hover { color: var(--c-accent); }
.about-col p { padding: 0 1.3rem; color: var(--c-mid); font-size: .92rem; line-height: 1.6; margin: 0 0 1rem; }
.about-col .content-button {
    position: relative; display: block; margin: auto 1.3rem 1.3rem;
    padding: .7rem 2.4rem .7rem 0;
    color: var(--c-accent); font-family: var(--font-head); font-weight: 600; text-decoration: none;
    border-top: 1px solid var(--c-border);
}
.about-col .content-button:hover { color: var(--c-accent-dark); }
.about-col .content-button .bi { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }

@media (max-width: 768px) { .about-cols > [class*="col-"] { margin-bottom: 2.2rem; } }

#newcomer { background: var(--c-smoke); padding: 3.5rem 0; }

.portfolio-wrap {
    position: relative; margin: 2rem auto 0;
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s ease, transform .3s ease;
}
.portfolio-wrap:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.portfolio-wrap figure { margin: 0; }
.portfolio-wrap figure img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.portfolio-wrap:hover figure img { transform: scale(1.04); }
.portfolio-wrap .portfolio-info {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding: 2rem clamp(1.4rem, 4vw, 3rem);
    background: linear-gradient(90deg, rgba(30,32,34,.78) 0%, rgba(30,32,34,.35) 55%, rgba(30,32,34,.05) 100%);
    color: var(--c-white);
}
#main-content .portfolio-wrap .portfolio-info h4 { font-family: var(--font-head); color: var(--c-white); font-size: 1.6rem; margin: 0 0 .5rem; }
.portfolio-wrap .portfolio-info p { margin: 0; max-width: 520px; color: rgba(255,255,255,.92); }
.portfolio-wrap .link-details { position: absolute; inset: 0; z-index: 2; }
.portfolio-wrap .link-details:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -3px; }

@media (max-width: 768px) { .portfolio-wrap figure img { height: 200px; } }

#facts { background: var(--c-white); padding: 4.5rem 0 0; }
#facts .counters { margin: 0 0 2.5rem; }
#facts .counters [class*="col-"] { padding: 1rem .5rem; }
#facts .counters span {
    display: block; font-family: var(--font-head); font-weight: 800;
    font-size: clamp(2rem, 5vw, 3rem); color: var(--c-accent); line-height: 1.1;
}
#main-content #facts .counters p { margin: .4rem 0 0; color: var(--c-mid); font-size: .95rem; font-weight: 600; }
.facts-img { margin-top: 1rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.facts-img img { width: 100%; height: auto; display: block; }

#partner {
    background: url('/assets/img/call-to-action-bg2-960.webp') center center / cover no-repeat fixed;
    padding: 4.5rem 0;
}
#partner .container { max-width: 820px; }
#main-content #partner h3 {
    font-family: var(--font-head); font-weight: 700; color: var(--c-white);
    text-align: center; font-size: 1.65rem; margin: 0 0 .3rem;
}
#main-content #partner h3::after {
    content: ''; display: block; width: 44px; height: 3px; margin: .7rem auto 1.2rem;
    background: var(--c-white); border-radius: 2px;
}
#partner p { color: var(--c-white); font-size: 1rem; line-height: 1.7; margin: 0 auto 1.8rem; text-align: center; }
.cta-btn {
    display: inline-block; background: var(--c-accent); color: var(--c-white);
    font-family: var(--font-head); font-weight: 700; text-decoration: none;
    padding: .85rem 2rem; border-radius: var(--radius); transition: background var(--transition);
}
.cta-btn:hover { background: var(--c-accent-dark); color: var(--c-white); }

/* ── Service-Bereich (#services) ── */
#services { background: var(--c-white); padding: 4.5rem 0; }
#services .box { text-align: center; padding: 1.5rem 1.2rem; }
#services .box .icon { font-size: 2.4rem; color: var(--c-accent); margin-bottom: .8rem; line-height: 1; }
#main-content #services .box .title { font-family: var(--font-head); font-size: 1.15rem; margin: 0 0 .6rem; }
#main-content #services .box .title::before, #main-content #services .box .title::after { content: none; }
#services .box .description { color: var(--c-mid); font-size: .95rem; line-height: 1.65; margin: 0; }

/* ── Hintergrundbilder: groessere Varianten ab groesseren Viewports ──────
   Basis oben ist bewusst die 960er Variante (mobile first). Beide Motive
   liegen hinter einem Overlay (.home-exhibitors::before bzw. #partner),
   deshalb ist eine reduzierte Qualitaet hier nicht sichtbar.
   Dateien: assets/img/{about-bg|call-to-action-bg2}-{960|1440|1920}.webp     */
@media (min-width: 961px) {
    .home-exhibitors{ background-image: url('/assets/img/about-bg-1440.webp'); }
    #partner        { background-image: url('/assets/img/call-to-action-bg2-1440.webp'); }
}
@media (min-width: 1441px) {
    .home-exhibitors{ background-image: url('/assets/img/about-bg-1920.webp'); }
    #partner        { background-image: url('/assets/img/call-to-action-bg2-1920.webp'); }
}