/* ══════════════════════════════════════════════════════════════════════
   Leistungsseiten auf der aelteren Vorlage (service-legacy)
   ══════════════════════════════════════════════════════════════════════
   Diese Seiten kamen ohne landing.css aus und hatten dadurch rund halb
   so grosse Ueberschriften wie die uebrigen Leistungsseiten. Diese Datei
   hebt sie auf dieselben Groessen, Abstaende und Bausteine.
   Eingebunden von:
     /landingpage-agentur/            /kundenportal-entwicklung/
     /en/services/landing-page-design/  /en/services/customer-portal-development/
   Angelegt am 10.08.2026 - vorher lag derselbe Block inline in der
   Landingpage-Agentur-Seite.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════ Landingpage-Agentur: Detailseite (nur diese Seite) ══════════
   Zweispaltige Sektionen: links Label + Ueberschrift, rechts Inhalt.
   Bewusst seiteneigen, damit case.css/legal.css (Projektseiten) unberuehrt bleiben. */
/* Mehr Luft links und rechts als im Standard-Container: schmalerer
   Satzspiegel und groesserer Innenabstand. Breite und Polster haengen an
   demselben Wert, damit der Block nie ueber das Fenster hinauslaeuft. */
.lg-root .lg-wrap { width:calc(100% - 2*clamp(20px,5vw,56px)); max-width:1320px;
  padding:0 clamp(20px,5vw,56px); }

.lp-hero { margin:clamp(28px,4vh,48px) 0 0; }
.lp-hero img { display:block; width:100%; height:auto; border-radius:8px; }

/* Textsektionen laufen schmaler als die Medien - dasselbe Verhaeltnis wie
   .cs-txt (820px) zu den Vollbild-Figuren auf den Projektseiten. */
.lp-sec { display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(20px,4vw,64px); padding:clamp(38px,5.5vh,64px) 0;
  max-width:1080px;
  border-top:1px solid rgba(11,12,14,.1); }
.lp-sec-body { max-width:820px; }
.lp-sec:first-of-type { border-top:0; padding-top:clamp(30px,4vh,48px); }
.lp-label { margin:0 0 10px; font-size:10px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(11,12,14,.4); }
.lp-sec-head h2 { margin:0; font-family:'Helvetica Now Display','Helvetica Now Text',sans-serif;
  font-weight:700; font-size:clamp(24px,2.6vw,38px); line-height:1.14; letter-spacing:-.025em; }
.lp-sec-body p { margin:0 0 16px; font-size:15.5px; line-height:1.78; color:rgba(11,12,14,.72); }
.lp-sec-body p:last-child { margin-bottom:0; }

/* Hinweiszeile und Leistungsliste: Zeilen mit Haken */
.lp-note, .lp-list li { display:flex; align-items:flex-start; gap:12px;
  background:#FFFFFF; border:1px solid rgba(11,12,14,.09); border-radius:8px;
  padding:14px 18px; font-size:15px; line-height:1.6; color:rgba(11,12,14,.8); }
.lp-note { margin:22px 0 0; }
.lp-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lp-note i, .lp-list li i { flex:0 0 auto; margin-top:3px; font-size:13px; color:var(--acc); }

/* Haeufige Fragen: aufklappbare Zeilen */
.lp-faq { border:1px solid rgba(11,12,14,.09); border-radius:8px; background:#FFFFFF;
  padding:16px 18px; margin:0 0 10px; }
.lp-faq:last-child { margin-bottom:0; }
.lp-faq > summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start;
  justify-content:space-between; gap:20px; font-size:15px; font-weight:600; color:rgba(11,12,14,.9); }
.lp-faq > summary::-webkit-details-marker { display:none; }
.lp-faq > summary::after { content:"+"; flex:0 0 auto; font-weight:400; font-size:18px;
  line-height:1; color:var(--acc); }
.lp-faq[open] > summary::after { content:"\2212"; }
.lp-faq p { margin:12px 0 0; font-size:15px; line-height:1.7; color:rgba(11,12,14,.66); }

/* Bilderstreifen: pannt beim Scrollen von links nach rechts durch die Seiten */
.lp-strip { margin:clamp(6px,1.5vh,16px) 0 clamp(30px,4.5vh,54px); overflow:hidden; }
.lp-strip-row { display:flex; gap:clamp(10px,1.4vw,20px); width:max-content;
  transform:translate3d(var(--lpx,0px),0,0); will-change:transform; }
.lp-strip figure { margin:0; flex:0 0 auto; }
.lp-strip img { display:block; height:clamp(190px,25vw,360px); width:auto; max-width:none;
  border-radius:8px; border:1px solid rgba(11,12,14,.08); background:#FFFFFF; }
.lp-strip-note { margin:14px 0 0; font-size:12px; letter-spacing:.02em; color:rgba(11,12,14,.45); }

.cs-cta-btn i { margin-left:8px; font-size:12px; }

@media (max-width:860px) {
  .lp-sec { grid-template-columns:1fr; gap:16px; }
  .lp-strip-row { transform:none; }
  .lp-strip { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .lp-strip::-webkit-scrollbar { display:none; }
}
@media (prefers-reduced-motion: reduce) { .lp-strip-row { transform:none; } }

/* ══════════ Angleichung an die uebrigen Leistungsseiten (10.08.2026) ══════════
   Diese Seite kam aus einer aelteren Vorlage: Ueberschriften in einer
   schmalen 260px-Spalte und rund halb so gross wie auf /workflow-
   automatisierung/ & Co. Sektionen laufen jetzt einspaltig mit der
   Ueberschrift oben, in denselben Groessen wie .ld-sec-head. */
.lp-sec { display:block; max-width:none; padding:clamp(44px,6.5vh,76px) 0; border-top:0; }
.lp-sec-head { max-width:1040px; margin:0 0 clamp(22px,3vh,34px); }
.lp-label { margin:0 0 4px; font-size:12px; letter-spacing:.18em; color:rgba(11,12,14,.45); }
/* 22px Luft zwischen Label und Ueberschrift - derselbe Abstand wie
   zwischen .ld-eyebrow und .ld-sec h2 auf den uebrigen Leistungsseiten. */
.lp-sec-head h2 { margin:22px 0 0; font-size:clamp(30px,4.44vw,64px); line-height:1.02; letter-spacing:-.035em; }

/* Titelzeile auf die Groesse der uebrigen Leistungsseiten (.ld-hero h1).
   Nur hier - .cs-head teilen sich 29 Seiten, auch alle Projektseiten. */
.cs-head h1 { font-size:clamp(38px,5.14vw,74px); line-height:1.0; letter-spacing:-.035em; }

/* Aufmacherbild schmaler: fluchtet jetzt mit den Textspalten. */
/* Volle Containerbreite wie die Bilder auf den Projektseiten (12.08.2026);
   die fruehere 1040px-Begrenzung ist auf Wunsch wieder raus. */
.lp-hero { max-width:none; }
.lp-hero img { border-radius:14px; }
/* Mobil ist das Panoramabild (2752x985) nur 120px hoch und wirkt wie ein
   Streifen - dort auf 3:2 zuschneiden statt es flach zu quetschen. */
@media (max-width:720px) {
  .lp-hero img { aspect-ratio:3/2; height:auto; object-fit:cover; object-position:center; }
}
.lp-sec-body { max-width:1040px; }
.lp-sec-body > p:not(.lp-note) { font-size:clamp(16px,1.4vw,20px); line-height:1.6;
  color:rgba(11,12,14,.66); margin:0 0 18px; }

/* Haeufige Fragen wie .ld-faq: Trennlinien statt Kaesten, groessere Zeile */
.lp-faq { border:0; border-top:1px solid rgba(11,12,14,.1); border-radius:0;
  background:transparent; padding:0; margin:0; }
.lp-faq:last-of-type { border-bottom:1px solid rgba(11,12,14,.1); }
.lp-faq > summary { padding:22px 4px; font-size:clamp(17px,1.5vw,21px);
  font-weight:600; letter-spacing:-.015em; color:#0B0C0E; align-items:center; }
.lp-faq > summary::after { content:"+"; margin-left:auto; font-size:18px;
  font-weight:400; color:rgba(11,12,14,.45); transition:transform .3s; }
.lp-faq[open] > summary::after { content:"+"; transform:rotate(45deg); color:#1a663f; }
.lp-faq p { margin:0; padding:0 4px 18px; font-size:14.5px; line-height:1.7;
  color:rgba(11,12,14,.66); max-width:720px; }