/* Service-Seiten - gemeinsames CSS aller 8 Leistungsseiten.
   Bis 07.08.2026 stand das hier als Inline-<style> in service-layout.php und wanderte damit
   bei JEDEM Seitenaufruf neu ueber die Leitung: das HTML traegt
   "Cache-Control: no-store" (PHP-Session), war also nie cachebar.
   Reihenfolge in der Kaskade bleibt unveraendert: style.css -> diese Datei
   -> $page_styles (weiterhin inline, seitenspezifisch). */

body{padding-bottom:70px}

/*  has-fade: weicher Verlauf fuer Bild-Sektionen (oben+unten / nur oben / nur unten)  */
.has-fade,.has-fade-top,.has-fade-bottom{position:relative}
.has-fade::before,.has-fade-top::before{content:"";position:absolute;top:0;left:0;right:0;height:160px;background:linear-gradient(to bottom,#191e28 0%,transparent 100%);pointer-events:none;z-index:1}
.has-fade::after,.has-fade-bottom::after{content:"";position:absolute;bottom:0;left:0;right:0;height:160px;background:linear-gradient(to top,#191e28 0%,transparent 100%);pointer-events:none;z-index:1}
.has-fade>.section-inner,.has-fade-top>.section-inner,.has-fade-bottom>.section-inner{position:relative;z-index:2}

/*  FAQ  */
.faq-list{margin-top:2.5rem}
.faq-item{border-bottom:1px solid rgba(197,199,196,.25)}
.faq-item:first-child{border-top:1px solid rgba(197,199,196,.25)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--font-head);font-size:.9rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--white);padding:1.3rem 1.5rem;cursor:pointer;list-style:none;transition:color .25s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary::after{content:'+';flex-shrink:0;color:var(--accent);font-size:1.4rem;font-weight:300;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--text-dim);line-height:1.85;padding:0 1.5rem 1.4rem}

/*  Shared service-page components (DRY partials)  */
/* Breadcrumb */
.bc-list{max-width:1200px;margin:0 auto;padding:.7rem 4vw;display:flex;align-items:center;gap:.5rem;list-style:none;font-family:var(--font-head);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.bc-list a{color:var(--text-dim);transition:color .2s;text-decoration:none}.bc-list a:hover{color:var(--accent)}
.bc-sep{opacity:.4;padding:0 .1rem}
/* Trust bar + Price-Anchor - Homepage-Stil; opacity-Override, da GSAP nur auf Homepage animiert */
.service-hero .hero-trustbar,.service-hero .hero-price-anchor{opacity:1}
.service-hero .hero-price-anchor{font-size:.95rem;margin-top:1.25rem}
/* Price badge */
.price-badge{margin-top:1.25rem;display:inline-flex;align-items:center;gap:.5rem;background:rgba(79,142,247,.1);border:1px solid rgba(79,142,247,.25);border-radius:var(--radius-brand);padding:.55rem 1.2rem;font-size:.8rem;color:rgba(255,255,255,.85)}
.price-badge svg{color:var(--accent);flex-shrink:0;width:16px;height:16px}
/* Facts strip (service-page variant with transparent bg + gap) */
.facts-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:transparent}
.fact-cell{background:rgba(20,24,32,.78);backdrop-filter:blur(8px);padding:2rem 1rem;text-align:center}
.fact-val{font-family:var(--font-head);font-size:1.9rem;font-weight:700;color:var(--white);line-height:1}
.fact-val em{color:var(--accent);font-style:normal}
.fact-lbl{font-family:var(--font-head);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-top:.45rem}
/* Für wen / nicht */
.fuerwen-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
.fuerwen-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-brand);padding:2rem 2.25rem}
.fuerwen-title{font-family:var(--font-head);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem}
.fuerwen-title.yes{color:#4ade80}.fuerwen-title.no{color:#f87171}
.fuerwen-list{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.fuerwen-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--text-dim);font-size:.9rem;line-height:1.6}
.fuerwen-card.yes .fuerwen-list li::before{content:"✓";color:#4ade80;font-weight:700;flex-shrink:0;margin-top:.05rem}
.fuerwen-card.no  .fuerwen-list li::before{content:"✗";color:#f87171;font-weight:700;flex-shrink:0;margin-top:.05rem}
/* Author box */
.author-wrap{max-width:none}
.author-box{display:flex;align-items:flex-start;gap:2rem;background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:2rem 2.5rem;transition:border-color .4s}
.author-box:hover{border-color:#fff}
.author-img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);flex-shrink:0}
.author-name{font-family:var(--font-head);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin-bottom:.2rem}
.author-role{font-family:var(--font-head);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.85rem}
.author-bio{color:var(--text-dim);line-height:1.8;font-size:.9rem}
/* Card title */
h3.card-title{font-family:var(--font-head);font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin:0 0 .6rem}
/* Service intro 2-col */
.service-intro{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.service-checklist{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.service-checklist li{display:flex;align-items:flex-start;gap:.65rem;color:var(--text-dim);line-height:1.6;font-size:.9rem}
.check-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--accent)}
.check-icon svg{width:14px;height:14px;stroke-width:2.5}
/* Related services */
.related-services{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3rem}
.related-card{display:flex;align-items:center;gap:1rem;background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:1.25rem 1.5rem;text-decoration:none;transition:border-color .4s}
.related-card:hover{border-color:#fff;text-decoration:none}
.rc-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--accent)}
.rc-icon svg{width:18px;height:18px}
.rc-title{font-family:var(--font-head);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--white)}
.rc-sub{font-size:.78rem;color:var(--text-dim);margin-top:.15rem}
/* Process steps */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.process-step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-brand);padding:1.75rem}
.ps-num{font-family:var(--font-head);font-size:2rem;font-weight:700;color:rgba(123,168,255,.85);line-height:1;margin-bottom:.5rem}
.ps-title{font-family:var(--font-head);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--white);margin-bottom:.65rem}
.ps-text{color:var(--text-dim);font-size:.875rem;line-height:1.75}
/* Benefits grid - randlos wie /webdesign (Default; einzelne Seiten koennen ueberschreiben) */
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.benefit-card{background:none;border:none;border-radius:0;padding:1.5rem 0;transition:none}
.benefit-card:hover{border-color:transparent}
.benefit-icon-wrap{margin-bottom:1rem;color:var(--accent);width:28px;height:28px;background:none;border-radius:0}
.benefit-title{font-family:var(--font-head);font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--white);margin-bottom:.5rem}
.benefit-text{color:var(--text-dim);font-size:.95rem;line-height:1.75}

@media(max-width:1100px){.related-services{grid-template-columns:repeat(2,1fr)}.benefits-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.facts-strip{display:grid!important;grid-template-columns:repeat(3,1fr)}.fuerwen-grid{grid-template-columns:1fr}.author-box{flex-direction:column;align-items:flex-start;text-align:left}.service-intro{grid-template-columns:1fr}}
@media(max-width:600px){.facts-strip{grid-template-columns:repeat(2,1fr)}.fact-cell{padding:1.4rem .75rem}.fact-cell:last-child:nth-child(odd){grid-column:1/-1}.fact-val{font-size:1.5rem}.related-services{grid-template-columns:1fr}.benefits-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}}

/* ===== Referenz-Seiten (/referenzen/<slug>) =====================
   Aus cases/plucci-parkett.php hierher gezogen, damit alle Cases dieselbe
   Quelle nutzen. Die Case-Seiten laufen ueber service-layout.php und laden
   diese Datei ohnehin. */

/* Bildergalerie: zwei Paare aus Rechner- und Handy-Ansicht. Das Handy ueberlappt
   das Rechnerbild, das zweite Paar spiegelverkehrt. Die gelieferten Screenshots
   bringen ihre eigenen Geraeterahmen mit, deshalb hier kein zusaetzlicher Rahmen. */
.case-shots{display:flex;flex-direction:column;gap:5.5rem;margin-top:3rem}
.shot-paar{margin:0;padding-bottom:2rem}
.shot-paar__bilder{position:relative}
.shot-paar__desk{display:block;width:86%;height:auto}
.shot-paar__mob{position:absolute;right:0;bottom:-4.5rem;width:20%;max-width:230px;height:auto;display:block}
.shot-paar--gespiegelt .shot-paar__desk{margin-left:auto}
.shot-paar--gespiegelt .shot-paar__mob{right:auto;left:0}
.shot-paar figcaption{font-size:.85rem;color:var(--text-dim);margin-top:1.25rem;text-align:center}
.shot-paar--gespiegelt figcaption{text-align:center}
/* Platzhalter, solange ein Screenshot fehlt */
div.shot-paar__desk{aspect-ratio:16 / 9}
div.shot-paar__mob{aspect-ratio:9 / 19}
.shot-paar--leer{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed rgba(197,199,196,.35);border-radius:10px;color:var(--text-dim);
  font-family:var(--font-head);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase}

/* Bewegung: an den Scrollfortschritt gekoppelt, ohne JavaScript. Rechnerbild von
   links, Handy von rechts. Bewusst NICHT ueber den Beobachter in main.js: bliebe
   das Skript einmal aus, waeren die Bilder dauerhaft unsichtbar. Browser ohne
   view()-Unterstuetzung zeigen sie schlicht statisch. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .shot-paar__desk,.shot-paar__mob{animation:shot-ein linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .shot-paar__desk{animation-name:shot-ein-links}
    .shot-paar__mob{animation-name:shot-ein-rechts}
  }
}
@keyframes shot-ein{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes shot-ein-links{from{opacity:0;transform:translate(-30px,34px)}to{opacity:1;transform:none}}
@keyframes shot-ein-rechts{from{opacity:0;transform:translate(30px,34px)}to{opacity:1;transform:none}}

@media(max-width:860px){
  .case-shots{gap:4rem}
  .shot-paar__desk{width:100%}
  .shot-paar__mob{width:24%;max-width:130px;bottom:-1rem;right:-.5rem}
  .shot-paar figcaption{margin-top:2.25rem}
  .shot-paar--gespiegelt .shot-paar__mob{left:-.5rem;right:auto}
}

.case-shots-caption{font-size:.95rem;color:var(--text-dim);text-align:center;margin-top:2.5rem}
.case-shots-caption a{color:var(--accent)}

/* Kundenzitat mit Logo: das Logo steht auf heller Flaeche in Originalfarben,
   invertiert wirkt es beliebig. Auf Mobil rutscht es ueber den Text. */
.case-quote{display:grid;grid-template-columns:auto 1fr;gap:2.25rem;align-items:center;padding:2.5rem 2.75rem;margin-top:2.5rem}
.case-quote__logo{background:#fff;border-radius:var(--radius-brand);padding:1.1rem 1.35rem;width:160px;flex-shrink:0}
.case-quote__logo img{width:100%;height:auto;display:block}
.case-quote blockquote{margin:0;font-size:1.12rem;line-height:1.75;color:var(--text)}
.case-quote cite{display:block;margin-top:1.15rem;font-style:normal;font-family:var(--font-head);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
@media(max-width:768px){
  .case-quote{grid-template-columns:1fr;gap:1.5rem;padding:2rem 1.75rem}
  .case-quote__logo{width:140px}
  .case-quote blockquote{font-size:1.02rem}
}

/* Kachel-Raster der Bauentscheidungen */
.case-build{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
@media(max-width:768px){.case-build{grid-template-columns:1fr}}
.case-build .kachel{padding:2rem 2.25rem}
.case-build h3{font-family:var(--font-head);font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin-bottom:.75rem}
.case-build p{color:var(--text-dim);line-height:1.75;font-size:.95rem;margin:0}
.case-build .ci{color:var(--accent);font-size:1.15rem;margin-bottom:1rem;display:block}

/* Eckdaten unter der Ueberschrift, Muster der hero-trustbar */
.case-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.25rem 0 1.5rem}
/* Josefin Sans setzt die Versalien nicht mittig in die Schriftbox. Im gerenderten
   Bild ausgemessen: Rahmen bei 356 und 386, Versalien bei 366 bis 373, also 10 px
   Luft oben gegen 13 px unten. Der Ausgleich von 1,5 px steckt im Innenabstand,
   oben mehr, unten weniger - die Pillenhoehe bleibt dieselbe. Rechts eine Spur
   weniger Abstand, weil die Sperrung hinter dem letzten Buchstaben mitzaehlt. */
.case-meta li{display:inline-flex;align-items:center;line-height:1;font-family:var(--font-head);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.66rem .85rem .44rem .95rem;border-radius:100px;border:1px solid rgba(197,199,196,.35);color:var(--text-dim);list-style:none}

/* Sektionskopf zweispaltig: Ueberschrift links, Einordnung rechts. Sonst steht
   neben der Ueberschrift die halbe Breite leer, weil .section-sub auf 520px
   begrenzt ist. Muster wie .service-intro auf den Leistungsseiten. */
.case-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end}
.case-head .section-sub{max-width:46ch;margin:0}
.case-head .section-title{margin-bottom:0}
@media(max-width:860px){.case-head{grid-template-columns:1fr;gap:1.25rem;align-items:start}}

/* Dank an den Kunden: als Kachel mit Gesicht, sonst verliert sich der Block
   in der dunklen Flaeche. Bild links, Text rechts, auf Mobil untereinander. */
.case-thanks{display:grid;grid-template-columns:auto 1fr;gap:2.25rem;align-items:center;padding:2.5rem 2.75rem}
.case-thanks img{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block}
.case-thanks h2{font-family:var(--font-head);font-size:1.35rem;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;color:var(--white);margin:0 0 .75rem}
.case-thanks p{color:var(--text);line-height:1.85;font-size:1.02rem;margin:0}
.case-thanks a{color:var(--accent)}
@media(max-width:768px){
  .case-thanks{grid-template-columns:1fr;text-align:center;justify-items:center;padding:2rem 1.75rem;gap:1.25rem}
}

/* Vorher/Nachher, gleiches Muster wie die Case-Study auf /webdesign */
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
.cs-col{padding:1.75rem 2rem}
.cs-title{font-family:var(--font-head);font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin-bottom:.65rem}
.cs-text{color:var(--text-dim);line-height:1.75;font-size:.95rem}
.cs-kpis{margin-top:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.cs-kpi{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;color:var(--white);line-height:1.5}
.cs-kpi::before{content:"\2713";color:#4ade80;font-weight:700;flex-shrink:0}
@media(max-width:768px){.cs-grid{grid-template-columns:1fr}}

/* Einzelne Verlaufskanten abschalten, wenn der Nachbar sie nicht braucht. */
.has-fade--ohne-oben::before{display:none}
.has-fade--ohne-unten::after{display:none}

/* Listenpunkte der Branchenseite Veranstaltung: Haekchen und Textblock sind
   die beiden Flex-Elemente, der Text selbst laeuft normal um. */
.vt-vergleich li span{display:block}