/* ==================================================================
   Startseite
   ================================================================== */

/* ---------- Hero: Fliesstext endet zwischen H1 und Lead ---------- */
.hero{min-height:600px;--bgh:360px}
.hero .bglog{top:0;left:0;right:0;bottom:auto;height:var(--bgh)}
.hero .veil{top:0;left:0;right:0;bottom:auto;height:var(--bgh)}
.hero .inner{padding:40px 44px 40px}
.kick{font-weight:400;font-size:16px;color:var(--g500);margin-bottom:24px}
.kick b{color:var(--red);font-weight:700}
.hero h1{font-size:clamp(44px,7vw,100px);line-height:1.06;margin:0 0 0 -.03em}
.hero h1 .inv{color:var(--red)}
.hero .lead{max-width:580px;margin-top:28px}
.annot{display:flex;gap:24px;margin-top:20px;font-size:15px;color:var(--g500)}
.annot span b{color:var(--ink);font-weight:700}
.annot .x{color:var(--red)}
@media(prefers-reduced-motion:reduce){.qgrid:hover .q{opacity:1}.qgrid .q:hover{transform:none}}

/* ---------- Was wir machen ---------- */
.svc-h{font-weight:700;font-size:15px;color:var(--g500);padding:70px 44px 10px;max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;border:0}
.svc-h .c{color:var(--g400);font-weight:400}
.svc{max-width:1240px;margin:0 auto;padding:0 44px}
.svc .top{border-top:2px solid var(--ink)}
details.srow{border-bottom:1px solid var(--g200)}
details.srow summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:20px;padding:26px 0}
details.srow summary::-webkit-details-marker{display:none}
details.srow summary h3{flex:1;min-width:0;font-weight:900;font-size:clamp(21px,2.8vw,32px);letter-spacing:-.02em;line-height:1.12;hyphens:auto;overflow-wrap:break-word;transition:color .15s}
details.srow summary:hover h3,details.srow[open] summary h3{color:var(--red)}
details.srow summary .pm{position:relative;width:20px;height:20px;flex-shrink:0;margin-top:8px}
details.srow summary .pm::before,details.srow summary .pm::after{content:"";position:absolute;background:var(--red);transition:transform .2s,opacity .2s}
details.srow summary .pm::before{top:9px;left:0;width:20px;height:2px}
details.srow summary .pm::after{top:0;left:9px;width:2px;height:20px}
details.srow[open] summary .pm::after{transform:scaleY(0);opacity:0}
.svc .sa{padding:0 40px 30px 0}
.svc .sa p{font-weight:300;font-size:17px;line-height:1.65;color:var(--g700);max-width:660px}
.svc .ex{margin-top:14px;font-size:14px;color:var(--g500)}
.svc .ex b{color:var(--red);font-weight:700}

/* ---------- Wer sind wir ---------- */
.about{background:var(--g50);margin-top:80px;border-top:1px solid var(--g200);border-bottom:1px solid var(--g200)}
.about .in{max-width:1240px;margin:0 auto;padding:88px 44px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about h2{font-weight:900;font-size:clamp(34px,4.4vw,54px);line-height:1.04;letter-spacing:-.02em;color:var(--red);margin-top:14px}
.about p{font-size:18px;line-height:1.62;color:var(--g700);max-width:620px}
.about .p2{margin-top:18px}
.about .kv{margin-top:30px;display:flex;gap:40px}
.about .kv .n{font-weight:900;font-size:40px;color:var(--ink);line-height:1;letter-spacing:-.02em}
.about .kv .l{font-size:14px;color:var(--g500);margin-top:8px}

/* ---------- Was Kunden sagen ---------- */
.quotes{max-width:1240px;margin:0 auto;padding:88px 44px}
.quotes .qh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:44px}
.quotes .qh h2{font-weight:900;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;color:var(--red)}
.quotes .stars{font-size:15px;color:var(--g500)}
.quotes .stars b{color:var(--red)}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 44px}
.q{position:relative;padding:0;transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.qgrid:hover .q{opacity:.4}
.qgrid .q:hover{opacity:1;transform:scale(1.045);z-index:2}
.q .mark{font-family:var(--ultra);font-size:44px;color:var(--red);line-height:.6}
.q p{font-size:16px;line-height:1.55;color:var(--ink);margin:14px 0 18px;padding-left:2px}
.q .who{font-weight:700;font-size:15px;color:var(--g700)}
.q .who span{color:var(--g400);font-weight:400}

@media(max-width:900px){
  details.srow summary{gap:14px;padding:22px 0}
  .svc .sa{padding-right:0}
  .svc .sa p{font-size:16px}
  .svc-h,.svc{padding-left:24px;padding-right:24px}
  .about .in{grid-template-columns:1fr;gap:32px;padding:56px 24px}
  .qgrid{grid-template-columns:1fr}
  .quotes{padding-left:24px;padding-right:24px}
  .quotes .qh{flex-direction:column;align-items:flex-start;gap:10px}
}