/* gewerk.css — seiten-spezifisches Sektions-Layout.
   Tokens, Typografie, Buttons, Nav und Footer kommen zentral aus base.css (eine Wahrheit). */

    .deco-star { color: var(--blue); }  /* seiten-spezifisch: blau statt base-orange */

    /* ══════════════════════════════════════════
       PAGE HERO
       ══════════════════════════════════════════ */
    .page-hero{position:relative;min-height:80vh;background:var(--warm-900);overflow:hidden}
    .page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
    .page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.2) 0%,rgba(26,25,23,.75) 100%)}
    .page-hero-content{position:absolute;bottom:72px;left:0;right:0;padding:0 80px;z-index:5}
    .page-hero-content .label{color:var(--orange);margin-bottom:16px}
    .page-hero-title{font-family:var(--font-display);font-size:80px;font-weight:800;line-height:.95;letter-spacing:-3px;color:var(--white);text-transform:uppercase}
    .page-hero-title span{color:var(--warm-400);font-weight:600}
    .page-hero-desc{font-size:17px;line-height:1.7;color:rgba(255,255,255,.55);max-width:500px;margin-top:20px}
    .page-hero-deco{position:absolute;top:50%;right:80px;transform:translateY(-50%);z-index:5;font-family:var(--font-display);font-size:200px;font-weight:800;color:rgba(255,255,255,.03);letter-spacing:-8px;text-transform:uppercase;line-height:1}

    /* ══════════════════════════════════════════
       INTRO — Editorial 2-col
       ══════════════════════════════════════════ */
    .intro{padding:140px 80px 100px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
    .intro-left .t-xl{max-width:500px;margin-bottom:24px}
    .intro-left .deco-star{margin-bottom:20px;display:block}
    .intro-right{padding-top:12px}
    .intro-right .t-editorial{margin-bottom:32px}
    .intro-right p{font-size:16px;line-height:1.8;color:var(--warm-500)}

    /* ══════════════════════════════════════════
       FEATURES — Service highlights grid
       ══════════════════════════════════════════ */
    .features{padding:0 var(--pad) 120px}
    .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .feature-card{background:var(--sand);border-radius:var(--radius-lg);padding:48px 40px;transition:transform .3s}
    .feature-card:hover{transform:translateY(-4px)}
    .feature-num{font-family:var(--font-display);font-size:48px;font-weight:800;color:var(--orange);line-height:1;margin-bottom:20px}
    .feature-card h4{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--warm-900);margin-bottom:12px}
    .feature-card p{font-size:14px;line-height:1.8;color:var(--warm-500)}

    /* ══════════════════════════════════════════
       IMAGE + CONTENT — Big atmospheric split
       ══════════════════════════════════════════ */
    .split{margin:0 var(--pad) 120px;display:grid;grid-template-columns:1.3fr 1fr;gap:0;border-radius:var(--radius-xl);overflow:hidden;min-height:480px}
    .split-img{position:relative;overflow:hidden}
    .split-body{background:var(--warm-900);padding:72px 56px;display:flex;flex-direction:column;justify-content:center}
    .split-body .label{color:var(--orange);margin-bottom:16px}
    .split-body h3{font-family:var(--font-display);font-size:36px;font-weight:700;line-height:1.1;color:var(--white);margin-bottom:20px}
    .split-body p{font-size:15px;line-height:1.8;color:var(--warm-400);margin-bottom:28px;max-width:400px}
    .split-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
    .split-list li{font-size:14px;color:var(--warm-300);padding-left:20px;position:relative;line-height:1.6}
    .split-list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--orange)}

    /* ══════════════════════════════════════════
       GALERIE (optional, ACF — aktuell Bad)
       Feste aspect-ratio statt fixer Pixelhoehe: der Bildausschnitt bleibt so
       ueber alle Breiten gleich, statt je nach Aufloesung anders zu schneiden.
       ══════════════════════════════════════════ */
    .gw-gallery{padding:0 var(--pad) 120px}
    .gw-gallery-header{text-align:center;margin-bottom:56px}
    .gw-gallery-header .label{margin-bottom:12px}
    .gw-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
    .gw-gal-item{margin:0;min-width:0;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--warm-100)}
    .gw-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
    .gw-gal-item:hover img{transform:scale(1.04)}
    @media (prefers-reduced-motion:reduce){
      .gw-gal-item img{transition:none}
      .gw-gal-item:hover img{transform:none}
    }

    /* ══════════════════════════════════════════
       PROCESS
       ══════════════════════════════════════════ */
    .process{padding:120px 80px;background:var(--sand);margin:0 var(--pad);border-radius:var(--radius-xl)}
    .process-header{text-align:center;margin-bottom:80px}
    .process-header .label{margin-bottom:12px}
    .process-header .t-xl{margin-bottom:16px}
    .process-header .text-lg{max-width:540px;margin:0 auto}
    .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
    .process-step{text-align:center;position:relative}
    .process-step-num{font-family:var(--font-display);font-size:64px;font-weight:800;color:var(--blue);line-height:1;margin-bottom:20px}
    .process-step h4{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--warm-900);margin-bottom:10px}
    .process-step p{font-size:14px;line-height:1.7;color:var(--warm-500);max-width:240px;margin:0 auto}
    .process-step+.process-step::before{content:'';position:absolute;left:-20px;top:32px;width:1px;height:40px;background:var(--warm-200)}

    /* ══════════════════════════════════════════
       CTA
       ══════════════════════════════════════════ */
    .page-cta{padding:160px var(--pad);text-align:center}
    .page-cta .deco-star{margin-bottom:24px}
    .page-cta .t-xl{margin-bottom:16px}
    .page-cta .text-lg{max-width:480px;margin:0 auto 40px}
    .page-cta-actions{display:flex;gap:12px;justify-content:center}

    /* ══════════════════════════════════════════
       RESPONSIVE — Tablet & Mobil (Desktop unveraendert; Nav global in _shared-responsive.css)
       ══════════════════════════════════════════ */
    @media (max-width:900px){
      .t-xl{font-size:48px;letter-spacing:-1.5px}
      .page-hero{min-height:60vh}
      .page-hero-content{padding:0 40px;bottom:48px}
      .page-hero-title{font-size:clamp(34px,8vw,64px);letter-spacing:-1.5px}
      .page-hero-desc{max-width:100%}
      .page-hero-deco{font-size:120px;right:32px}
      .intro{padding:80px 40px 64px;grid-template-columns:1fr;gap:32px}
      .features{padding:0 24px 80px}
      .features-grid{grid-template-columns:repeat(2,1fr);gap:20px}
      .feature-card{padding:36px 28px}
      .split{margin:0 24px 80px;grid-template-columns:minmax(0,1fr);min-height:0}
      .split-img{min-height:320px}
      .split-body{padding:48px 36px}
      .split-body p{max-width:100%}
      .gw-gallery{padding:0 24px 80px}
      .gw-gallery-header{margin-bottom:40px}
      .gw-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
      .process{padding:80px 40px;margin:0 24px}
      .process-header{margin-bottom:56px}
      .process-steps{grid-template-columns:repeat(2,1fr);gap:48px 32px}
      .process-step+.process-step::before{display:none}
      .page-cta{padding:100px 24px}
      .footer{padding:64px 40px 32px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:40px;margin-bottom:56px}
    }
    @media (max-width:640px){
      /* 30px statt 38px (Jakob 17.07.): "Planungsgespraech" (Gewerbe) belegte
         373px, der Kasten bietet 310px — der Rest wurde stumm abgeschnitten. */
      .t-xl{font-size:clamp(22px,7.8vw,30px);letter-spacing:-1px}
      .page-hero{min-height:56vh}
      .page-hero-content{padding:0 24px;bottom:36px}
      .page-hero-title{font-size:clamp(30px,8.5vw,40px);letter-spacing:-1px}
      /* Bisher ohne Mobil-Regel, blieb also bei 36px: "Heizungstechnik."
         belegte 329px bei 306px Kasten (Jakob 17.07.). */
      .split-body h3{font-size:30px}
      .page-hero-deco{display:none}
      .intro{padding:56px 24px 48px}
      .features{padding:0 16px 64px}
      .features-grid{grid-template-columns:1fr}
      .split{margin:0 16px 64px}
      .split-img{min-height:240px}
      .split-body{padding:40px 26px}
      .gw-gallery{padding:0 16px 64px}
      .gw-gallery-grid{grid-template-columns:minmax(0,1fr)}
      .process{padding:64px 24px;margin:0 16px}
      .process-steps{grid-template-columns:1fr;gap:44px}
      .page-cta{padding:80px 20px}
      .page-cta-actions{flex-direction:column;align-items:stretch}
      .page-cta-actions .btn{justify-content:center}
      .footer{padding:48px 26px 28px}
      .footer-grid{grid-template-columns:1fr;gap:32px;margin-bottom:44px}
      .footer-bottom{flex-direction:column;gap:14px;align-items:flex-start}
    }

/* ════ VARIANTEN ════ */

/* Button nicht ueber die ganze Boxbreite ziehen. .split-body ist ein
   flex-column-Container; dessen align-items:stretch macht aus dem inline-flex
   Button sonst einen 584px breiten Balken. Figma: 220px. */
.split-body .btn { align-self: flex-start; }

/* Split-Bild absolut stellen — sonst blaeht es die Sektion auf.
   Grund: die globale Regel img{height:100%} trifft auf .split-img, das selbst
   keine Hoehe hat -> Zirkelbezug -> der Browser nimmt die INTRINSISCHE Bildhoehe.
   Bei den Hochformat-Fotos (1067x1600) wurde die Sektion so 1356px statt ~650px
   (Figma) hoch, und zwar erst NACH dem lazy-load (Layout-Shift). Absolut
   positioniert traegt das Bild nichts zur Zeilenhoehe bei -> die .split-body
   bestimmt sie, das Bild fuellt per object-fit:cover. Gleiches Muster wie
   .page-hero img. Der Fehler stammt aus dem Original-Mockup. */
.split-img img { position: absolute; inset: 0; }

/* Sand-Variante: helle Box statt dunkler. Bild-rechts macht die DOM-Reihenfolge. */
.split.is-sand .split-body { background: var(--sand); }
.split.is-sand .split-body h3 { color: var(--warm-900); }
.split.is-sand .split-body p { color: var(--warm-500); }
.split.is-sand .split-list li { color: var(--warm-600); }

/* Nur Desktop: mobil bleibt .split einspaltig (max-width:900px oben).
   Ohne diese Klammer wuerde die hoehere Spezifitaet die Mobil-Regel aushebeln. */
@media (min-width: 901px) {
	.split.is-sand { grid-template-columns: 1fr 1.3fr; }
}


/* Grid-Kinder duerfen unter ihre min-content-Breite schrumpfen.
   Ohne minmax(0,1fr) bzw. min-width:0 wird eine 1fr-Spalte so breit wie ihr
   laengster unteilbarer Inhalt — die Spalte war dadurch 381px breit in einem
   354px-Container und ragte auf 390px-Geraeten heraus. */
@media (max-width: 900px) {
	.split > *, .features-grid > *, .process-steps > * { min-width: 0; }
}