/* ============================================================
   GEPRO V3 - Komponenten (Premium-Stil)
   Nav mit Logo-Swap, vollflaechige Tiles mit Hover-Reveal,
   links-buendige Section-Header, Carousel. Weiche Schatten,
   viel Whitespace, keine filigranen Borders.
   ============================================================ */

/* ============================================================
   1) Header / Navigation (transparent ueber Dunkel -> solide weiss)
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h); display: flex; align-items: center;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-nav);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-2) var(--ease);
}
.site-header[data-over-dark]:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.site-header.is-hidden { transform: translateY(-100%); }

.nav { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 1.8rem; }
.nav__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { height: 26px; width: auto; display: block; }
.nav__logo .logo-light { display: none; }
.site-header[data-over-dark]:not(.is-scrolled) .nav__logo .logo-light { display: block; }
.site-header[data-over-dark]:not(.is-scrolled) .nav__logo .logo-dark { display: none; }
.nav__spacer { flex: 1 1 auto; }
.nav__menu { display: flex; align-items: center; gap: .15rem; list-style: none; }
.nav__link { display: inline-flex; align-items: center; gap: .35em; padding: .5rem .85rem; font-size: .95rem; font-weight: 500; color: var(--text); border-radius: var(--r-pill); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav__link:hover, .nav__link[aria-expanded="true"] { background: rgba(15,23,42,.05); }
.nav__link[aria-current="page"] { color: var(--blue); }
.site-header[data-over-dark]:not(.is-scrolled) .nav__link { color: rgba(255,255,255,.92); }
.site-header[data-over-dark]:not(.is-scrolled) .nav__link:hover { background: rgba(255,255,255,.14); }
.site-header[data-over-dark]:not(.is-scrolled) .nav__link[aria-current="page"] { color: #fff; }
.nav__link .chev { width: 11px; height: 11px; opacity: .6; transition: transform var(--dur) var(--ease); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }

/* Mega-Menue */
.megamenu { position: absolute; inset: calc(var(--nav-h) - 2px) 0 auto 0; z-index: var(--z-nav); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); pointer-events: none; }
.megamenu.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.megamenu__inner { max-width: var(--maxw); margin: .5rem auto 0; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 1.8rem; display: grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; gap: .4rem 1.4rem; }
.mega-col__title { font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: .5rem .8rem; }
.mega-item { display: block; padding: .7rem .8rem; border-radius: var(--r); transition: background var(--dur) var(--ease); }
.mega-item:hover { background: var(--bg-soft); }
.mega-item__t { font-weight: 600; font-size: .98rem; }
.mega-item__d { font-size: .82rem; color: var(--text-2); margin-top: .12rem; }
.mega-item.is-flag { background: var(--ink-900); color: #fff; grid-row: span 3; display: flex; flex-direction: column; gap: .5rem; justify-content: flex-end; background-image: var(--grad-tile-dark); padding: 1.4rem; }
.mega-item.is-flag .mega-item__d { color: var(--on-dark-2); }

.nav__burger { display: none; width: 42px; height: 42px; border-radius: var(--r); }
.nav__burger span { display: block; width: 20px; height: 2px; background: var(--text); margin: 4px auto; transition: transform var(--dur), opacity var(--dur), background var(--dur); }
.site-header[data-over-dark]:not(.is-scrolled) .nav__burger span { background: #fff; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   2) Buttons & Textlinks
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-weight: 600; font-size: .95rem; line-height: 1; padding: .85em 1.55em; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-btn); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(18,160,220,.5); }
.btn--dark { background: var(--text); color: #fff; }
.btn--dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.btn--light { background: #fff; color: var(--text); box-shadow: var(--shadow-tile); }
.btn--light:hover { transform: translateY(-2px); }
.btn--ghost-light { background: rgba(255,255,255,.14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--ghost-light:hover { background: rgba(255,255,255,.24); }
.btn--lg { font-size: 1.02rem; padding: .98em 1.85em; }
.btn:active { transform: translateY(0); }

.tlink { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; font-size: 1rem; color: var(--blue); }
.tlink .chev { transition: transform var(--dur) var(--ease); }
.tlink:hover .chev { transform: translateX(3px); }
.tlink--dark { color: var(--text); }
.tlink--light { color: #fff; }
.tlinks { display: flex; flex-wrap: wrap; gap: 1.4rem 1.8rem; }

/* ============================================================
   3) Section-Header (links-buendig, klarer Abstand)
   ============================================================ */
.sec-head { max-width: 72rem; margin: 0 0 var(--space-block); }
.sec-head .eyebrow { display: block; margin-bottom: 1.1rem; }
.sec-head h2 { max-width: 20ch; }
.sec-head .lead { margin-top: 1.3rem; max-width: 54ch; }
.sec-head--center { text-align: center; margin-inline: auto; }
.sec-head--center h2 { max-width: 24ch; margin-inline: auto; }
.sec-head--center .lead { margin-inline: auto; }

/* ============================================================
   4) Bento-Tiles (vollflaechig, Hover-Reveal, Text unten)
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.5rem, 1rem + 1.5vw, 2.4rem); }
.tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-tile-lg); min-height: 460px; isolation: isolate;
  background: var(--bg-soft); box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  grid-column: span 3; color: #fff;
}
a.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hov); }
.tile--wide { grid-column: span 6; min-height: 520px; }
.tile--half { grid-column: span 3; }
.tile--third { grid-column: span 2; min-height: 440px; }
.tile--tall { min-height: 600px; }

.tile__media { position: absolute; inset: 0; z-index: 0; }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-2) var(--ease), transform 1.1s var(--ease); }
.tile__img.is-drama { opacity: 0; }
a.tile:hover .tile__img.is-default { opacity: 0; }
a.tile:hover .tile__img.is-drama { opacity: 1; }
a.tile:hover .tile__img { transform: scale(1.05); }
.tile__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,10,14,0) 36%, rgba(8,10,14,.4) 70%, rgba(8,10,14,.82) 100%); }
.tile__content { position: relative; z-index: 2; margin-top: auto; padding: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); display: flex; flex-direction: column; gap: .6rem; }
.tile__eyebrow { font-size: var(--fs-eyebrow); color: rgba(255,255,255,.78); font-weight: 500; }
.tile__title { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 700; letter-spacing: var(--tr-tighter); line-height: 1.07; color: #fff; text-wrap: balance; }
.tile__sub { font-size: 1.02rem; color: rgba(255,255,255,.85); font-weight: 500; max-width: 42ch; }
.tile__links { margin-top: .6rem; }

/* Helle Tile-Variante (Text dunkel, kein Veil) - optional */
.tile--light .tile__veil { background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%); }
.tile--light .tile__eyebrow { color: var(--text-2); }
.tile--light .tile__title { color: var(--text); }
.tile--light .tile__sub { color: var(--text-2); }

/* Dunkle Stat-Tile (ohne Bild) */
.tile--stat { background: var(--ink-900); background-image: var(--grad-tile-dark); justify-content: flex-end; }
.tile--stat .tile__content { padding: clamp(1.8rem,1.2rem + 2vw,2.8rem); }
.stat-num { font-size: clamp(2.4rem, 1.7rem + 3vw, 4rem); font-weight: 700; letter-spacing: var(--tr-tighter); line-height: 1; color: #fff; }
.stat-num .u { font-size: .4em; color: var(--blue); font-weight: 600; margin-left: .12em; }
.stat-label { font-size: 1rem; color: var(--on-dark-2); margin-top: .7rem; max-width: 28ch; }

/* ============================================================
   5) Industrie-/Branchen-Reihe
   ============================================================ */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,1rem + 1.4vw,2.2rem); }
.ind { position: relative; overflow: hidden; border-radius: var(--r-tile); min-height: 320px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-card); isolation: isolate; }
.ind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s var(--ease); }
.ind::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,10,14,.05), rgba(8,10,14,.7)); }
a.ind:hover img { transform: scale(1.06); }
.ind__body { padding: clamp(1.6rem,1.1rem + 1.2vw,2.2rem); }
.ind__body b { font-size: 1.25rem; font-weight: 700; letter-spacing: var(--tr-tight); }
.ind__body span { display: block; font-size: .88rem; color: rgba(255,255,255,.8); margin-top: .2rem; }

/* ============================================================
   6) Carousel / Slider (minimalistisch)
   ============================================================ */
.carousel { position: relative; }
.carousel__track { display: flex; gap: clamp(1.3rem,.8rem + 1.3vw,2.1rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: .4rem .4rem 1rem; margin: -.4rem; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { flex: 0 0 auto; width: min(85vw, 420px); scroll-snap-align: start; }
.ccard { position: relative; overflow: hidden; border-radius: var(--r-tile); aspect-ratio: 4/5; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-card); isolation: isolate; }
.ccard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ccard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,10,14,0) 38%, rgba(8,10,14,.86) 100%); }
.ccard__body { padding: clamp(1.7rem,1.2rem + 1vw,2.3rem); }
.ccard__body .eyebrow { color: rgba(255,255,255,.78); }
.ccard__body h3 { color: #fff; font-size: 1.5rem; letter-spacing: var(--tr-tight); margin-top: .3rem; }
.ccard__body p { color: rgba(255,255,255,.85); font-size: .95rem; margin-top: .5rem; }
.carousel__nav { display: flex; gap: .6rem; margin-top: 1.6rem; }
.carousel__btn { width: 46px; height: 46px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-tile); display: grid; place-items: center; color: var(--text); transition: transform var(--dur), box-shadow var(--dur), opacity var(--dur); }
.carousel__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.carousel__btn:disabled { opacity: .35; cursor: default; transform: none; box-shadow: var(--shadow-tile); }

/* CTA-Band (geteilt, grosszuegiger Innenabstand) */
.cta-band { background: var(--ink-900); background-image: var(--grad-hero-dark); border-radius: var(--r-tile-lg); padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); color: var(--on-dark); box-shadow: var(--shadow-card); }
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band .lead { color: var(--on-dark-2); margin-top: 1.4rem; max-width: 52ch; }
.cta-band .cta { display: flex; gap: .9rem; margin-top: 2.4rem; flex-wrap: wrap; }

/* ============================================================
   7) Footer (hell, gross, ohne Borders)
   ============================================================ */
.site-footer { background: var(--bg-soft); color: var(--text-2); padding-block: clamp(4rem,3rem + 3vw,6.5rem) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 3rem 2rem; }
.footer-brand img { height: 26px; width: auto; }
.footer-brand p { margin-top: 1.2rem; font-size: .9rem; max-width: 32ch; color: var(--text-3); }
.footer-col h4 { font-size: .82rem; font-weight: 600; color: var(--text-3); margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.footer-col a { color: var(--text); font-size: .92rem; font-weight: 500; transition: color var(--dur); }
.footer-col a:hover { color: var(--blue); }
.footer-col li.plain { color: var(--text-2); font-size: .92rem; }
.footer-bottom { margin-top: 3.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--text-3); }
.footer-bottom a { color: var(--text-2); }
.footer-bottom a:hover { color: var(--blue); }

/* ============================================================
   8) Mobile-Panel
   ============================================================ */
.mobile-panel { position: fixed; inset: var(--nav-h) 0 0 0; z-index: var(--z-overlay); background: #fff; padding: 1.6rem var(--gutter) 3rem; overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-2) var(--ease); visibility: hidden; }
.mobile-panel.is-open { transform: none; visibility: visible; }
.mobile-panel ul { list-style: none; }
.mobile-panel .m-link { display: flex; justify-content: space-between; align-items: center; padding: 1.05rem .15rem; font-size: 1.45rem; font-weight: 600; letter-spacing: var(--tr-tight); }
.mobile-panel li + li { box-shadow: inset 0 1px 0 rgba(15,23,42,.06); }
.mobile-panel .m-sub { display: grid; gap: .1rem; padding: .2rem 0 1rem; }
.mobile-panel .m-sub a { padding: .55rem .15rem; color: var(--text-2); font-size: 1.02rem; }
.mobile-panel [data-m-toggle] { color: var(--text-3); }

@media (max-width: 1024px) {
  .nav__menu, .nav__actions .btn:not(.btn--primary) { display: none; }
  .nav__burger { display: block; }
  .megamenu { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile--wide, .tile--third, .tile--half { grid-column: span 2; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1025px) { .mobile-panel { display: none; } }
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; gap: 1.2rem; }
  .tile, .tile--wide, .tile--third, .tile--half { grid-column: span 1; min-height: 420px; }
  .ind-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}