/* Global styles extracted from Variant A */

/* Global CTA section used across multiple pages */
.a-cta{padding:120px 0;background:var(--gw-ink);color:#fff;position:relative;overflow:hidden}
.a-cta::before{content:"";position:absolute;right:-200px;top:-200px;width:600px;height:600px;
  background:var(--gw-red);mix-blend-mode:normal;clip-path:polygon(30% 0,100% 0,100% 70%,0 100%);opacity:.95}
.a-cta .inner{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end}
.a-cta h2{color:#fff;max-width:16ch}
.a-cta p{color:rgba(255,255,255,.75);font-size:18px;max-width:48ch;margin-top:24px}
.a-cta .row{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* Global Footer */
.a-foot{background:#111;color:rgba(255,255,255,.75);padding:72px 0 24px;font-size:14px}
.a-foot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.a-foot h4{font-family:var(--gw-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 18px}
.a-foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.a-foot .legal{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;font-family:var(--gw-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* Standard Section Header (used on subpages) */
.page-header {
  padding: 160px 0 80px;
  background: var(--gw-paper);
  border-bottom: 1px solid var(--gw-line);
}
.page-header .grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: end;
}
.page-header .eyebrow {
  margin-bottom: 24px;
}
.page-header h1 {
  font-family: var(--gw-font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.96;
  font-size: clamp(48px, 6.4vw, 84px);
  margin: 0;
  max-width: 14ch;
}
.page-header h1 u {
  text-decoration: none;
  background: linear-gradient(180deg, transparent 65%, rgba(229,56,36,.25) 65%);
}
.page-header p {
  font-size: 20px;
  line-height: 1.55;
  color: var(--gw-ink);
  max-width: 56ch;
  margin: 0;
}
.page-header .kpi-row {
  display: flex;
  gap: 40px;
  margin-top: 32px;
  align-items: flex-start;
}
.page-header .kpi-row > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-header .kpi-row b {
  font-family: var(--gw-font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  display: block;
}
.page-header .kpi-row b sup {
  font-size: 16px;
  color: var(--gw-red);
  font-weight: 500;
  vertical-align: super;
}
.page-header .kpi-row .gw-mono {
  margin-top: 0;
}

/* ===== Service detail subpage (leistung-*.html) ===== */
.svc-banner{position:relative;overflow:hidden;background:var(--gw-paper);border-bottom:1px solid var(--gw-line)}
.svc-banner img{width:100%;height:clamp(220px,40vw,460px);object-fit:cover;display:block}
.svc{padding:48px 0 110px;background:#fff}
.svc-back{display:inline-flex;align-items:center;gap:10px;font-family:var(--gw-font-body);font-weight:500;font-size:14px;letter-spacing:.02em;padding:12px 18px;border:1px solid var(--gw-line);border-radius:2px;background:#fff;color:var(--gw-ink);margin-bottom:48px;transition:border-color .2s,color .2s}
.svc-back .arr{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.svc-back:hover{border-color:var(--gw-red);color:var(--gw-red)}
.svc-back:hover .arr{transform:translateX(-5px)}
.svc-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:64px;align-items:start}
.svc-main .lead{font-family:var(--gw-font-display);font-weight:500;font-size:clamp(19px,1.5vw,23px);line-height:1.5;letter-spacing:-.01em;color:var(--gw-ink);max-width:60ch;margin:0 0 28px}
.svc-main p{font-size:17px;line-height:1.65;color:var(--gw-ink);max-width:64ch;margin:0 0 20px}
.svc-main p:last-child{margin-bottom:0}
.svc-label{font-family:var(--gw-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gw-red);margin:44px 0 22px;display:flex;align-items:center;gap:12px}
.svc-label::before{content:"";width:24px;height:1px;background:var(--gw-red)}
.svc-aside{position:sticky;top:96px;border:1px solid var(--gw-line);background:var(--gw-paper);padding:32px}
.svc-aside h3{font-family:var(--gw-font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 22px}
.svc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.svc-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.4}
.svc-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--gw-red);border-radius:1px}
.svc-aside .gw-btn{width:100%;justify-content:center;margin-top:28px}
@media(max-width:900px){
  .svc{padding:48px 0 72px}
  .svc-grid{grid-template-columns:1fr;gap:36px}
  .svc-aside{position:static}
  .svc-back{margin-bottom:28px}
}

/* Base utility for filter bar */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px dashed var(--gw-line);
}
.filter-bar .chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-bar .chip {
  border: 1px solid var(--gw-line);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.15s;
}
.filter-bar .chip:hover {
  background: rgba(0,0,0,.03);
}
.filter-bar .chip.on {
  background: var(--gw-ink);
  border-color: var(--gw-ink);
  color: #fff;
}

/* ===== Mobile responsive (shared sections) ===== */
@media(max-width:767px){
  /* CTA */
  .a-cta{padding:64px 0}
  .a-cta .inner{grid-template-columns:1fr;gap:36px}

  /* Footer */
  .a-foot{padding:48px 0 20px}
  .a-foot .grid{grid-template-columns:1fr 1fr;gap:28px}
  .a-foot .legal{flex-direction:column;gap:8px;text-align:center;margin-top:36px}

  /* Page header (subpages) */
  .page-header{padding:90px 0 44px}
  .page-header .grid{grid-template-columns:1fr;gap:24px}
  .page-header p{font-size:17px}
  .page-header .kpi-row{gap:16px 24px;flex-wrap:wrap}
  .page-header .kpi-row > div{flex:0 0 auto}
  .page-header .kpi-row b{font-size:26px}
}
@media(max-width:480px){
  .a-foot .grid{grid-template-columns:1fr;gap:24px}
  .page-header h1{font-size:clamp(38px,10vw,56px)}
}