/* Startseite. Baut auf web-entwicklung.css auf (gleiche Farben und Bausteine unter .wd). */

/* Zwei Bereiche: Webseiten & Apps gross und dunkel, Computer Atelier ruhiger daneben */
.wd .paths{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:stretch}
.wd .path{position:relative;overflow:hidden;border-radius:26px;padding:clamp(30px,3.4vw,46px);display:flex;flex-direction:column}
.wd .path > *{position:relative;z-index:1}
.wd .path .ico{width:62px;height:62px;border-radius:17px;display:grid;place-items:center;font-size:30px;margin-bottom:22px}
.wd .path h3{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.03em}
.wd .path > p{margin-top:12px;font-size:16.5px;max-width:520px}
.wd .path .links{display:grid;gap:10px;margin-top:28px}
.wd .path .links a{display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:14px;font-weight:650;font-size:16px;
  transition:background .16s,transform .16s}
.wd .path .links a span{flex:1}
.wd .path .links a svg{font-size:20px}
.wd .path .links a svg:last-child{font-size:18px;transition:transform .16s}
.wd .path .links a:hover svg:last-child{transform:translateX(4px)}

.wd .path.digital{background:var(--ink);color:#fff;box-shadow:0 28px 70px rgba(11,37,48,.22)}
.wd .path.digital:after{content:"";position:absolute;right:-110px;top:-110px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,69,0,.28),transparent 68%);pointer-events:none}
.wd .path.digital .ico{background:rgba(255,69,0,.18);color:#ff8355}
.wd .path.digital > p{color:#a9c3cd}
.wd .path.digital .links a{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.wd .path.digital .links a:hover{background:rgba(255,255,255,.13)}
.wd .path.digital .links a svg{color:var(--orange)}
.wd .path .pp{margin-top:auto;padding-top:26px;font-size:clamp(30px,3.2vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1}
.wd .path .pp small{display:block;font-size:14px;font-weight:450;color:#8fb0bd;letter-spacing:0;margin-top:8px}

.wd .path.pc{background:var(--g50);border:1px solid var(--g200)}
.wd .path.pc .ico{background:var(--teal-t);color:var(--teal-d)}
.wd .path.pc > p{color:var(--g500)}
.wd .path.pc .links a{background:#fff;border:1px solid var(--g200)}
.wd .path.pc .links a:hover{border-color:#cfdbe1;transform:translateX(2px)}
.wd .path.pc .links a svg{color:var(--teal)}

/* Referenzen: App-Bilder sind quadratisch, Telefone sitzen in der Mitte */
.wd .pf a.app img{object-position:50% 62%}
.wd .pf a.app.wide img{object-position:0 50%}
.wd .more{margin-top:32px;text-align:center}


@media(max-width:980px){
 .wd .paths{grid-template-columns:1fr}
 .wd .pf a.app img{object-position:50% 74%}
 .wd .pf a.app.wide img{object-position:0 50%}
}

.wd .nowrap{white-space:nowrap}

/* Computer Atelier: Leistungskarten mit Foto */
.wd .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wd .svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--g200);border-radius:20px;overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.wd .svc-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(11,37,48,.12);border-color:#cfdbe1}
.wd .svc-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--g100)}
.wd .svc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.wd .svc-card:hover .svc-img img{transform:scale(1.04)}
.wd .svc-body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1}
.wd .svc-body h3{font-size:19px;margin-bottom:12px}
.wd .svc-list{list-style:none;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--g700);margin-bottom:18px}
.wd .svc-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.wd .svc-list svg{width:18px;height:18px;flex:none;margin-top:1px;padding:3px;border-radius:50%;background:var(--teal-t);color:var(--teal-d)}
.wd .svc-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--orange)}
.wd .svc-more svg{transition:transform .16s}
.wd .svc-more:hover svg{transform:translateX(4px)}

@media(max-width:980px){ .wd .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .wd .svc-grid{grid-template-columns:1fr} }
/* Ungerade Kartenzahl: letzte Reihe mittig (6er-Raster, jede Karte 2 Spalten breit) */
@media(min-width:981px){
 .wd .svc-grid{grid-template-columns:repeat(6,1fr)}
 .wd .svc-card{grid-column:span 2}
 .wd .svc-card:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
 .wd .svc-card:nth-child(3n+1):last-child{grid-column:3 / span 2}
}
@media(min-width:621px) and (max-width:980px){
 .wd .svc-card:nth-child(odd):last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 10px)}
}

/* Partner-Teaser: Logo-Reihe und Kachel "+N weitere" (Partnerseite: partner.css) */
.wd .partner-teaser{background:#fff;border-top:1px solid var(--g200)}
.wd .pt-logos{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;max-width:1040px;margin:0 auto}
.wd .pt-logos > *{aspect-ratio:1/1;background:#fff;border:1px solid var(--g200);border-radius:16px;padding:8px;display:grid;place-items:center}
.wd .pt-logos img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.wd .pt-logos span:hover img{filter:none;opacity:1}
.wd .pt-logos a{align-content:center;gap:2px;text-align:center;background:var(--tint);border-color:var(--tint2);transition:transform .16s}
.wd .pt-logos a:hover{transform:translateY(-2px)}
.wd .pt-logos a b{font-size:24px;font-weight:800;color:var(--orange);line-height:1}
.wd .pt-logos a small{font-size:13px;color:var(--g700);font-weight:600}
.wd .partner-teaser .more{text-align:center;margin-top:28px}
@media(max-width:980px){ .wd .pt-logos{grid-template-columns:repeat(4,1fr)} }
@media(max-width:480px){ .wd .pt-logos{grid-template-columns:repeat(3,1fr);gap:10px} }