/* ============================================================
   NEW MONDAY — leistungen-detail.css
   Stili CONDIVISI dalle pagine di dettaglio con la stessa ossatura
   (hero, tre punti su fondo nero, vantaggi, case, FAQ, form):
     /leistungen/   crm-systeme, design-systeme, saas-produkte,
                    ux-ui-design, websites, projektteams,
                    team-verstaerkung, beratung, fuer-unternehmen
     /experten/     le otto pagine dei ruoli
     /zusammenarbeit/
   Il disegno di riferimento è il frame della pagina CRM-Systeme
   (Figma 2017:4977); le pagine V3 (Figma 3193:9552) lo riprendono
   e aggiungono due varianti: le schede senza immagine e i passi.

   Da non confondere con leistungen.css, che è la pagina indice
   /leistungen/. Lo schema è lo stesso di case-study.css: un
   foglio solo per tutte le pagine dello stesso tipo.

   Token, typography, header, footer, sistema icone e bottoni
   stanno in main.css.

   REGOLA DEI CLAMP DIMENSIONALI
   ------------------------------------------------------------
   Come nelle altre pagine: il valore del frame Figma a 1920 è il
   massimo, il minimo è quello a 1280 (Laptop). Dove Mobile ==
   Laptop la formula si riduce a:
     clamp( V*2/3 px , V/19.2 vw , V px )

   BLOCCHI RIPRESI DALLE ALTRE PAGINE
   ------------------------------------------------------------
   case-row (home), portfolio-item-small (projekte) e l'accordion
   della FAQ (leistungen) sono gli stessi componenti già
   codificati altrove: le regole sono ripetute qui perché ogni
   pagina carica solo main.css più il proprio file. Il case-row
   qui è la variante DARK del componente (case-download-dark).
   ============================================================ */

pillar-card,
mehrwert-item,
portfolio-item-small,
accordion-item{ display:block; }

/* ============================================================
   HERO — titolo e sommario centrati (Figma 2017:4979).
   Il contenuto parte SOTTO la barra del menu (148) invece che
   sovrapposto: 148 + 128 di padding = 276 dal bordo pagina.
   ============================================================ */
.hero{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:clamp(184px, 14.375vw, 276px) var(--space-page-margin) var(--space-128);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-32);
  text-align:center;
}
.hero-subhead{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-gray-80);
  /* La larghezza non è più imposta dall'alto: la detta il testo, e
     il bilanciamento lo distribuisce sulle righe invece di riempirne
     una e lasciare l'ultima con due parole.
     L'unico limite serve a mandare a capo: senza, a 1920 quattro
     sottotitoli su cinque stanno su una riga sola lunga 1600px, e
     con una riga sola non c'è niente da bilanciare. 80ch è il valore
     più alto che li manda a capo tutti; da 85 in su ux-ui-design
     resta su una riga, sotto i 65 saas-produkte va a tre.
     In ch e non in px perché così segue il corpo del testo e vale
     a ogni larghezza senza clamp. */
  max-width:80ch;
  text-wrap:balance;
}

/* ============================================================
   GALLERIA — due schermate del prodotto fra hero e fascia scura.
   Sopra la distanzia il padding-bottom dell'hero; sotto serve un
   padding proprio, perché il padding-top di .pillars è già DENTRO
   al nero e senza le immagini toccherebbero la fascia.
   ============================================================ */
.gallery{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding-inline:var(--space-page-margin);
  padding-bottom:var(--space-128);
  box-sizing:border-box;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-16);
}
/* width:100% per lo stesso motivo di .mehrwert-item-media */
.gallery-shot{
  width:100%;
  aspect-ratio:842 / 750;
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-15);
}
.gallery-shot img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   ZIEL · METHODEN · ERGEBNIS — tre card a filo su fondo nero
   (Figma 2017:4983)
   ============================================================ */
/* Lo sfondo sta sulla sezione, che NON è limitata in larghezza: così
   il nero arriva ai bordi anche sopra i 1920. Il limite di 1920 e il
   margine di pagina stanno sul contenuto interno. È lo stesso schema
   di .site-footer/.footer-inner e di .dark-stats/.stats-grid. */
.pillars{
  background:var(--color-black);
  padding-block:var(--space-128) var(--space-240);
}
.pillars-row{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding-inline:var(--space-page-margin);
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--space-16);
  align-items:stretch;
}
pillar-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-64);
  padding:var(--space-64);
  border:1px solid var(--color-gray-60);
  border-radius:var(--radius-24);
}
/* la pillola è il badge del titolo: il colore di fondo è
   primary-30, il testo resta nero anche sul fondo scuro */
.pillar-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-20) var(--space-32);
  background:var(--color-primary-30);
  color:var(--color-black);
  border-radius:var(--radius-32);
  text-align:center;
}
.pillar-text{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-gray-40);
  text-align:center;
}

/* ============================================================
   MEHRWERT — galleria di apertura, testata e i tre mehrwert-item
   (Figma 2017:4998)
   ============================================================ */
.mehrwert{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) var(--space-128);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
.mehrwert-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-64);
}
.mehrwert-heading{
  max-width:clamp(838.667px, 65.521vw, 1258px);
  text-align:center;
}

.mehrwert-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-16);
}
/* due colonne uguali: il contenuto si allunga fino all'altezza
   dell'immagine senza doverla dichiarare */
mehrwert-item{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-16);
  align-items:stretch;
}
/* width:100% è obbligatorio, non decorativo: con align-items:stretch
   l'altezza della riga la detta il testo a destra, quindi l'altezza
   del media diventa definita e senza una larghezza esplicita
   aspect-ratio la ricaverebbe DA QUELLA — il blocco si allargherebbe
   oltre la colonna, invadendo quella accanto (a 1024px erano 559px
   dentro a una colonna da 459px). Con la larghezza fissata,
   aspect-ratio resta solo l'altezza minima naturale. */
.mehrwert-item-media{
  width:100%;
  aspect-ratio:842 / 510;
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-20);
}
.mehrwert-item-media img{ width:100%; height:100%; object-fit:cover; }
.mehrwert-item-content{
  display:flex;
  flex-direction:column;
  /* con space-between il gap resta la distanza MINIMA e l'elenco si
     appoggia al fondo della scheda, che è alta quanto l'immagine */
  justify-content:space-between;
  gap:var(--space-80);
  padding:var(--space-64);
  background:var(--color-gray-15);
  border-radius:var(--radius-24);
}
.mehrwert-item-points{
  display:flex;
  flex-direction:column;
  gap:var(--space-20);
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-gray-80);
}

/* variante a schede (Figma 3378:25297, Projektteams): tre colonne,
   niente immagine (la figure resta nell'HTML con hidden).
   Subgrid: ogni scheda occupa DUE righe della griglia della lista,
   una per il titolo e una per l'elenco, e le passa al contenuto.
   Così titoli ed elenchi stanno sulla stessa riga in tutte e tre le
   schede: se un titolo va su due righe, gli elenchi delle altre
   scendono con lui invece di partire più in alto.
   I gap: quello della lista separa le schede (in mobile, una sotto
   l'altra); dentro la scheda il subgrid lo riscrive a 0 e il
   contenuto mette il suo, lo spacing-80 fra titolo ed elenco. */
.mehrwert-list--cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--space-16);
}
.mehrwert-list--cards mehrwert-item{
  display:grid;
  grid-row:span 2;
  /* una colonna sola: la base di mehrwert-item ne ha due (immagine |
     testo), e il contenuto finirebbe largo mezza scheda */
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:subgrid;
  row-gap:0;
}
.mehrwert-list--cards .mehrwert-item-content{
  grid-row:span 2;
  display:grid;
  grid-template-rows:subgrid;
  row-gap:var(--space-80);
}

/* ============================================================
   SO ARBEITEN WIR — quattro passi numerati su fondo nero, due per
   riga (Figma 3199:9912, Zusammenarbeit). È lo stesso componente
   della .process della home (home.css): stessi nomi, regole ripetute
   qui perché ogni pagina carica solo main.css più il proprio foglio.
   ============================================================ */
.process{
  background:var(--color-black);
  padding:var(--space-240) var(--space-page-margin);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-128);
  text-align:center;
}
.process-intro{
  display:flex;
  flex-direction:column;
  gap:var(--space-24);
  max-width:var(--size-col-6);
}
.process-heading{ color:var(--color-white); }
.process-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:var(--space-24);
  row-gap:var(--space-80);
  width:100%;
  max-width:calc(var(--size-page-max) - 2 * var(--space-page-margin));
}
.process-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-32);
  padding-inline:var(--space-64);
}
.process-step-number{ color:var(--color-primary-40); }
.process-step-title{ color:var(--color-white); }
.process-step-text{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-gray-20);
}

/* ============================================================
   FASCIA IMMAGINE — una banda larga quanto il contenuto, fra i
   mehrwert-item e le case (Figma 2376:8938: 1700x700 dentro a una
   sezione alta 956, cioè 128 sopra e sotto).
   ============================================================ */
.service-band{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-128) var(--space-page-margin);
  box-sizing:border-box;
}
.service-band-media{
  width:100%;
  aspect-ratio:1700 / 700;
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-15);
}
.service-band-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   CASE STUDIES — righe case-download, variante dark
   (Figma 2017:5052)
   ============================================================ */
.cases{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-128) var(--space-page-margin);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
.cases-head{
  display:flex;
  flex-direction:column;
  gap:var(--space-24);
}
.cases-heading{ max-width:clamp(656.667px, 51.302vw, 985px); }
.cases-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-16);
}

.case-row{
  position:relative;
  width:100%;
  height:clamp(184.667px, 14.427vw, 277px);
  border-radius:var(--radius-24);
  overflow:hidden;
  cursor:pointer;
  display:flex;
  align-items:center;
  padding:0 var(--space-24) 0 var(--space-48);
  gap:var(--space-128);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out),
             background-color .3s var(--ease-out);
}
.case-row--dark{
  background:var(--color-black);
  color:var(--color-white);
}
.case-row--dark:hover{ background:var(--color-gray-90); }
.case-row:hover .btn-icon-secondary-s{ opacity:1; }
/* all'hover la thumbnail si sposta a sinistra per liberare lo
   spazio dove compare il button-icon a destra (come nella
   variante hover del componente: left 1287→1211 su 1700). */
.case-row:hover .case-row-thumb{
  transform:translateX(calc((var(--space-24) + var(--btn-width, 52px))*-1));
}
.case-row-client{
  width:clamp(113.333px, 8.854vw, 170px);
  flex-shrink:0;
}
.case-row-title{
  width:clamp(353.333px, 27.604vw, 530px);
  flex-shrink:0;
}
.case-row-industry{
  white-space:nowrap;
  flex-shrink:0;
}
.case-row-thumb{
  margin-left:auto;
  width:clamp(259.333px, 20.26vw, 389px);
  aspect-ratio:389 / 229;
  border-radius:var(--radius-12);
  overflow:hidden;
  background:var(--color-gray-20);
  transition:transform .5s var(--ease-out);
}
.case-row-thumb img{ width:100%; height:100%; object-fit:cover; }
/* l'icona è posizionata assolutamente a destra, sopra lo spazio
   che la thumb libera in hover (non nel flow del flex). */
.case-row-arrow{
  position:absolute;
  right:var(--space-24);
  top:50%;
  transform:translateY(-50%);
  flex-shrink:0;
}
.case-row--dark .btn-icon-secondary-s{ box-shadow:inset 0 0 0 1.6px var(--color-primary-40); }

/* ============================================================
   PROJEKTE — due portfolio-item-small (Figma 2022:3577)
   ============================================================ */
.projects{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-128) var(--space-page-margin);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
.projects-heading{ max-width:clamp(656.667px, 51.302vw, 985px); }
.projects-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-64) var(--space-16);
}
.portfolio-small-link{
  display:flex;
  flex-direction:column;
  gap:var(--space-32);
}
.portfolio-small-media{
  width:100%;
  aspect-ratio:842 / 750;
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-60);
}
.portfolio-small-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease-out);
}
portfolio-item-small:hover .portfolio-small-media img{ transform:scale(1.05); }
.portfolio-small-copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-16);
}
.portfolio-small-client{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-black);
}
.portfolio-small-title{
  color:var(--color-black);
  transition:color .3s var(--ease-out);
}
portfolio-item-small:hover .portfolio-small-title{ color:var(--color-primary); }

/* ============================================================
   FAQ — accordion (Figma 2017:5362). L'icona +/- sta in main.css
   perché è condivisa con le altre pagine.
   ============================================================ */
.faq{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-128) var(--space-page-margin) var(--space-240);
  box-sizing:border-box;
  row-gap:var(--space-128);
}
.faq-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-24);
  text-align:center;
  width:100%;
}
.faq-heading{
  font-family:var(--font-base);
  font-weight:600;
  font-size:var(--font-size-headings-md);
  line-height:1.08;
  letter-spacing:-0.01em;
  overflow-wrap:anywhere;
}
.faq-note{ color:var(--color-gray-80); }
/* 10 colonne su 12, centrata: era max-width:1414px, che sono 10
   colonne solo a 1920 (vedi .page-grid in main.css) */
.faq-list{
  --grid-col: 2 / span 10;
  display:flex;
  flex-direction:column;
  gap:var(--space-12);
}
accordion-item{
  background:var(--color-gray-15);
  border-radius:var(--radius-24);
  overflow:hidden;
}
.accordion-header{
  display:flex;
  align-items:center;
  gap:var(--space-32);
  width:100%;
  padding:var(--space-32);
  text-align:left;
}
.accordion-question{ flex:1 1 auto; color:var(--color-black); }
.accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease-out);
}
accordion-item.is-open .accordion-panel{ grid-template-rows:1fr; }
.accordion-panel-inner{ overflow:hidden; }
.accordion-answer{
  padding:0 var(--space-32) var(--space-48);
  font-family:var(--font-base);
  font-weight:400;
  font-size:var(--font-size-paragraph-md);
  line-height:1.4;
  letter-spacing:-0.01em;
  color:var(--color-gray-60);
}

/* ============================================================
   FORM — CTA scheduler a sinistra, form in un solo step a destra
   (Figma 2017:5060)
   ============================================================ */

@media (max-width: 1023px){
  /* stessa regola dell'hero di leistungen: sotto i 1023 il titolo
     scala con la viewport invece di spezzarsi a metà parola */
  .hero{ padding-top:30px; }
  .hero h1{ font-size:clamp(32px, 10.5vw, 64px); overflow-wrap:break-word; hyphens:auto; }

  .pillars{ padding-top:80px; padding-bottom:120px; }
  .pillars-row{ grid-template-columns:1fr; }
  pillar-card{ padding:32px; gap:32px; }

  .gallery{ padding-bottom:80px; }
  .gallery-grid{ grid-template-columns:1fr; }

  /* --- fascia immagine: sotto i 1024 NON è la panoramica
     rimpicciolita ma un'immagine disegnata apposta
     (<slug>-6-mobile.webp, 1024×768), che riorganizza lo stesso
     contenuto invece di mostrarne un pezzo ingrandito. Lo scambio
     del file lo fa il <picture> in ogni pagina: il media lì e questo
     DEVONO restare allineati, altrimenti si apre una fascia di
     larghezze in cui il contenitore ha un rapporto e l'immagine
     dentro ne ha un altro, e object-fit:cover ritaglia. */
  .service-band-media{ aspect-ratio:4 / 3; }
  /* La fascia non è più un blocco a sé con la sua aria intorno: si
     legge come la continuazione dell'elenco qui sopra. Quindi sotto
     a .mehrwert resta lo stesso spazio che c'è FRA i suoi item — il
     gap della lista — e la fascia non ne aggiunge altro sopra.
     var(--space-16) e non 16px: il token è un clamp e in mobile vale
     una decina di pixel, esattamente quanto il gap. */
  .mehrwert{ padding-top:120px; gap:64px; padding-bottom:var(--space-16); }
  .service-band{ padding-top:0; }
  .mehrwert-head{ gap:32px; }
  .mehrwert-head .btn-secondary{ justify-content:center; width:100%; }
  mehrwert-item{ grid-template-columns:1fr; }
  .mehrwert-list--cards{ grid-template-columns:1fr; }
  .mehrwert-list--cards .mehrwert-item-content{ row-gap:32px; }

  .process{ padding-block:120px; gap:64px; }
  .process-grid{ grid-template-columns:1fr; row-gap:48px; }
  .process-step{ padding-inline:0; gap:16px; }
  .mehrwert-item-content{ padding:32px; gap:32px; }

  .cases{ padding-top:80px; padding-bottom:80px; gap:64px; }
  /* --- case-download in mobile (Figma 2034:4058)
     La riga non diventa una colonna: resta riga di due colonne. A
     sinistra il testo e SOTTO di esso la thumbnail a piena larghezza,
     a destra la freccia, centrata sull'intera altezza. Il settore
     sparisce, e la freccia è sempre visibile perché senza mouse non
     esiste un hover che la accenda.
     Le tre distanze interne sono diverse (8 fra cliente e titolo, 14
     sopra la thumbnail), quindi row-gap resta 0 e le detta il margine. */
  .case-row{
    display:grid;
    grid-template-columns:1fr auto;
    /* le righe vanno dichiarate: senza, la griglia è tutta implicita e
       un grid-row che punta alla fine non ha una fine a cui puntare */
    grid-template-rows:auto auto auto;
    align-items:center;
    height:auto;
    padding:var(--space-24);
    column-gap:var(--space-24);
    /* Le distanze verticali sono due, 8 fra cliente e titolo e 14
       prima della thumbnail, e row-gap ne accetta una sola: il gap
       fa gli 8 e i 6 che mancano stanno SOTTO al titolo. Sotto e non
       sopra alla thumbnail perché un margine appartiene alla riga
       dell'elemento che lo porta: messo sulla thumbnail finirebbe
       nella riga della freccia e la scentrerebbe di mezzo margine. */
    row-gap:var(--space-12);
  }
  .case-row-client{ grid-column:1; grid-row:1; width:auto; }
  .case-row-title{
    grid-column:1;
    grid-row:2;
    width:auto;
    max-width:none;
    margin-bottom:calc(var(--space-24) - var(--space-12));
  }
  .case-row-industry{ display:none; }
  .case-row-thumb{
    grid-column:1;
    grid-row:3;
    width:100%;
    margin-left:0;
    aspect-ratio:389 / 229;
  }
  /* La freccia sta nella RIGA della thumbnail, non in tutte e tre:
     così align-items la centra sull'altezza della thumbnail e la sua
     posizione non dipende da quante righe prende il titolo. */
  .case-row-arrow{
    grid-column:2;
    grid-row:3;
    position:static;
    transform:none;
    opacity:1;
    /* Il pulsante resta della misura del desktop (52px: 16 di padding
       per lato più 20 di icona). I token qui sotto sono clamp che in
       mobile scenderebbero a 12 e 14, e il pulsante diventerebbe 38.
       Figma lo dà a 52 anche nel frame mobile (2034:4058). */
    padding:16px;
  }
  .case-row-arrow .icon{ width:20px; height:20px; }
  /* niente scorrimento della thumbnail: lo spazio della freccia c'è già */
  .case-row:hover .case-row-thumb{ transform:none; }

  .projects{ padding-top:80px; padding-bottom:80px; gap:64px; }
  .projects-grid{ grid-template-columns:1fr; }

  .faq{ padding-top:80px; padding-bottom:120px; row-gap:64px; }

}

@media (max-width: 560px){
  .btn-scheduler{ padding-right:var(--space-24); }
  .btn-scheduler-label{ white-space:normal; }
}