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

    /* ══════════════════════════════════════════
       PAGE HERO — Immersive, full-width dark.
       Service pages get their own identity.
       ══════════════════════════════════════════ */
    .nav {
      max-width: var(--page-width);
      left: 0;
      
      padding: 28px var(--pad);
    }
    .nav-logo img {
      
    }

    .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: 0.35;
    }
    .page-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(26,25,23,0.2) 0%,
        rgba(26,25,23,0.5) 70%,
        rgba(26,25,23,0.85) 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: 0.95;
      letter-spacing: -3px;
      color: var(--white);
      text-transform: uppercase;
      max-width: 900px;
    }
    .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,0.55);
      max-width: 520px;
      margin-top: 20px;
    }
    /* Decorative */
    .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,0.03);
      letter-spacing: -8px;
      text-transform: uppercase;
      line-height: 1;
    }


    /* ══════════════════════════════════════════
       INTRO — Big editorial text block.
       Sets the tone for the page.
       ══════════════════════════════════════════ */
    .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-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .intro-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: var(--sand);
      border-radius: var(--radius-pill);
      font-size: 13px;
      font-weight: 500;
      color: var(--warm-700);
    }
    .intro-pill .pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange);
    }


    /* ══════════════════════════════════════════
       SERVICE SHOWCASE — Each service as a
       full-width atmospheric section.
       Alternating layouts, not a simple grid.
       ══════════════════════════════════════════ */

    /* --- Layout A: Big image left, content right --- */
    .svc-showcase {
      padding: 0 var(--pad);
      margin-bottom: 24px;
    }
    .svc-a {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 0;
      border-radius: var(--radius-xl);
      overflow: hidden;
      min-height: 520px;
    }
    .svc-a .svc-img {
      position: relative;
      overflow: hidden;
    }
    .svc-a .svc-body {
      background: var(--sand);
      padding: 72px 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* --- Layout B: Content left, big image right --- */
    .svc-b {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 0;
      border-radius: var(--radius-xl);
      overflow: hidden;
      min-height: 520px;
    }
    .svc-b .svc-body {
      background: var(--warm-900);
      padding: 72px 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .svc-b .svc-body .svc-num { color: var(--orange); }
    .svc-b .svc-body .svc-title { color: var(--white); }
    .svc-b .svc-body .svc-desc { color: var(--warm-400); }
    .svc-b .svc-body .svc-features li { color: var(--warm-300); }
    .svc-b .svc-body .svc-features li::before { background: var(--orange); }
    .svc-b .svc-body .btn-primary { background: var(--white); color: var(--warm-900); }
    .svc-b .svc-body .btn-primary:hover { background: var(--orange); color: var(--white); }
    .svc-b .svc-img {
      position: relative;
      overflow: hidden;
    }

    /* --- Layout C: Full-width image with floating card --- */
    .svc-c {
      display: block;
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      height: 480px;
    }
    .svc-c img {
      filter: brightness(0.85) contrast(1.05);
    }
    .svc-c::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(26,25,23,0.6) 0%, rgba(26,25,23,0.1) 60%);
    }
    .svc-c .svc-body {
      position: absolute;
      bottom: 48px;
      left: 48px;
      z-index: 5;
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 40px 44px;
      max-width: 440px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.15);
    }

    /* --- Layout D: Two-column pair --- */
    .svc-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      padding: 0 var(--pad);
      margin-bottom: 24px;
    }
    .svc-d {
      border-radius: var(--radius-xl);
      overflow: hidden;
      background: var(--sand);
    }
    .svc-d .svc-img {
      height: 300px;
      overflow: hidden;
    }
    .svc-d .svc-body {
      padding: 40px 40px 48px;
    }

    .svc-a .svc-img, .svc-b .svc-img { min-height: 520px; }
    .svc-a .svc-img img, .svc-b .svc-img img { position: absolute; inset: 0; }

    /* Shared content styles */
    .svc-num {
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 16px;
    }
    .svc-title {
      font-family: var(--font-display);
      font-size: 36px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.5px;
      color: var(--warm-900);
      margin-bottom: 16px;
    }
    .svc-desc {
      font-size: 15px;
      line-height: 1.8;
      color: var(--warm-500);
      margin-bottom: 28px;
      max-width: 400px;
    }
    .svc-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 32px;
    }
    .svc-features li {
      font-size: 14px;
      color: var(--warm-600);
      padding-left: 20px;
      position: relative;
      line-height: 1.6;
    }
    .svc-features li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange);
    }

    /* Number badge floating on images */
    .svc-badge {
      position: absolute;
      top: 28px;
      left: 28px;
      z-index: 3;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 800;
      color: var(--blue);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }


    /* ══════════════════════════════════════════
       PROCESS — How we work, big numbered steps.
       ══════════════════════════════════════════ */
    .process {
      padding: 160px 80px;
      background: var(--sand);
      margin: 80px 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(--warm-200);
      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;
    }
    /* Connector line between steps */
    .process-step + .process-step::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 32px;
      width: 1px;
      height: 40px;
      background: var(--warm-200);
    }


    /* ══════════════════════════════════════════
       CTA SECTION
       ══════════════════════════════════════════ */
    .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;
    }

  
/* === Figma-Abgleich (11.07.) — Mockup-CSS an die Figma angleichen === */
/* Sterne (Deko) blau statt orange */
.deco-star, .intro-left .deco-star, .process-header .deco-star, .page-cta .deco-star { color: var(--blue) !important; }
/* Nummern-Labels der Leistungen blau statt orange */
.svc-num, .svc-a .svc-body .svc-num, .svc-b .svc-body .svc-num { color: var(--blue) !important; }
/* Buttons kompakt: im Flex-Column-Body nicht auf volle Breite strecken */
.svc-body .btn { align-self: flex-start; }
/* Nav-Pille mittig (Logo links · Links mittig · CTA rechts) — ENTFERNT 16.07.
   Stand hier ohne Media Query und mit !important und zwang die Nav auch MOBIL
   in ein 3-Spalten-Grid: der Hamburger aus _shared-responsive.css
   (@media max-width:900px, .nav{flex-wrap:wrap}) kam dagegen nicht an, darum war
   der Header nur auf DIESER Seite kaputt (die Gewerke-Seiten haben die Regel nie
   gehabt). Die Desktop-Ausrichtung macht _shared-responsive.css ohnehin schon
   selbst, sauber gekapselt in @media (min-width: 901px) — die Regel war doppelt. */

/* Hero-Deko-Zahl entfernen — Figma-Hero hat keine Zahl */
.page-hero-deco { display: none; }


/* ── Leistungs-Übersicht: Feinschliff (Jakob 16.07.) ──
   Nummernzeile („01 — Heizung") ist raus — steht im Figma nicht über den
   Überschriften. Die Ziffer lebt nur noch im runden Badge, dort blau.
   Bei den Vollbild-Karten (svc-c: Photovoltaik, Blechnerei) liegt die weiße
   Textbox links und verdeckte das Badge — dort gehört es nach rechts. */
.svc-c .svc-badge, .svc-d .svc-badge { left: auto; right: 28px; }

/* Die Paar-Karten brauchen einen Positionierungs-Kontext, sonst bezieht sich
   das absolute Badge auf den Viewport und landet oben rechts am Seitenrand. */
.svc-d .svc-img { position: relative; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE (Jakob 16.07.) — diese Datei hatte KEINE Media Query,
   die Übersicht brach darum unter ~900px auseinander: die 2-Spalten-
   Grids (.svc-a/.svc-b) konnten nicht schrumpfen, weil .svc-body mit
   padding:72px 56px eine Mindestbreite erzwang -> die Bildspalte fiel
   auf 0px und der Body sprengte den Container.

   Breakpoints wie im Rest des Projekts: 900px (Tablet) / 640px (Handy).
   Seitenrand kommt aus --pad (zentral in _shared-responsive.css).
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	/* Hero: 80px-Titel und 80px-Innenabstand sind mobil zu gross.
	   clamp() skaliert fliessend statt in Stufen zu springen. */
	.page-hero { min-height: 60vh; }
	.page-hero-content { padding: 0 var(--pad); bottom: 48px; }
	.page-hero-title { font-size: clamp(34px, 8vw, 64px); letter-spacing: -1.5px; }
	.page-hero-desc { max-width: 100%; }
	.page-hero-deco { right: var(--pad); font-size: 120px; }
	.t-xl { font-size: clamp(32px, 6.5vw, 48px); letter-spacing: -1px; }

	/* Intro: 2 Spalten + 80px Innenabstand + 80px gap lassen bei 390px
	   nur ~75px je Spalte uebrig -> einspaltig. */
	.intro { padding: 80px var(--pad) 64px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.intro-left .t-xl { max-width: 100%; }
	.intro-right { padding-top: 0; }

	/* Prozess: 160px/80px Innenabstand PLUS Aussenabstand = zu schmal. */
	.process { padding: 80px var(--pad); margin: 64px var(--pad); }

	/* Alle Gewerk-Karten einspaltig: erst Bild, dann Text. */
	.svc-a, .svc-b { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.svc-a .svc-img, .svc-b .svc-img { min-height: 280px; }
	/* svc-b zeigt das Bild im Desktop rechts (DOM: Body zuerst) —
	   mobil soll es wie ueberall oben stehen. */
	.svc-b .svc-img { order: -1; }
	.svc-a .svc-body, .svc-b .svc-body { padding: 48px 32px; }
	.svc-desc { max-width: 100%; }

	/* Vollbild-Karte: feste Hoehe + absolute Textbox funktionieren mobil
	   nicht — Bild oben, Text darunter im normalen Fluss. */
	.svc-c { height: auto; }
	.svc-c img { position: relative; height: 280px; }
	.svc-c::after { display: none; }
	/* Sand statt Weiss (Jakob 17.07.): Die Karte ist im Desktop bewusst weiss,
	   weil sie dort ueber dem abgedunkelten Bild schwebt und sich davon absetzt.
	   Mobil steht sie im normalen Fluss auf dem weissen Seitenhintergrund und
	   war dadurch unsichtbar — als einzige Karte, denn svc-a/b/d nutzen bereits
	   var(--sand). Damit sehen jetzt alle vier Kartentypen mobil gleich aus. */
	.svc-c .svc-body {
		position: static; max-width: 100%; box-shadow: none;
		border-radius: 0; padding: 40px 32px;
		background: var(--sand);
	}

	/* Kompaktes Paar untereinander. */
	.svc-pair { grid-template-columns: minmax(0, 1fr); }

	.process-steps { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
	.process-step + .process-step::before { display: none; }
	.process-step p { max-width: 100%; }
}

@media (max-width: 640px) {
	/* Skaliert mit statt fixer 36px (Jakob 17.07.): deutsche Komposita wie
	   "Wärmepumpe" sind in Syne breit und wurden unter 390px stumm gekappt. */
	.svc-title { font-size: clamp(26px, 9vw, 36px); }
	.page-hero { min-height: 56vh; }
	.page-hero-title { font-size: clamp(30px, 8.5vw, 40px); letter-spacing: -1px; }
	.page-hero-deco { display: none; }
	.intro { padding: 56px var(--pad) 48px; }
	.process { padding: 64px var(--pad); margin: 48px var(--pad); }

	.svc-a .svc-img, .svc-b .svc-img { min-height: 220px; }
	.svc-a .svc-body, .svc-b .svc-body { padding: 36px 24px; }
	.svc-c img { height: 220px; }
	.svc-c .svc-body { padding: 32px 24px; }
	.svc-badge { width: 44px; height: 44px; font-size: 15px; top: 16px; left: 16px; }
	.svc-c .svc-badge, .svc-d .svc-badge { right: 16px; }
	.process-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* Grid-Kinder duerfen schrumpfen — siehe Kommentar in gewerk.css. */
@media (max-width: 900px) {
	.svc-a > *, .svc-b > *, .svc-pair > *, .intro > *, .process-steps > * { min-width: 0; }
}