/* laroche.de */
:root{
  --ink:#111111;
  --paper:#f4f1ea;
  --red:#ef2b2f;
  --blue:#1f5fbf;
  --muted:#6b6b6b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Kopf */
.home{min-height:100vh;display:flex;flex-direction:column}
.top{padding:clamp(28px,5vw,64px) clamp(20px,5vw,72px) clamp(20px,3vw,36px)}
.eyebrow{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.name{margin:0 0 0 -.07em;font-size:clamp(64px,15vw,200px);line-height:.85;font-weight:800;letter-spacing:-.05em}
.dot{color:var(--red)}
.claim{margin:14px 0 0;font-size:clamp(17px,2vw,22px);color:#333;max-width:36ch}

/* Kacheln */
.tiles{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);padding:0 clamp(12px,1.6vw,20px)}
.tile{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(360px,52vh,620px);border-radius:28px;text-decoration:none;isolation:isolate}
.tile-bg{position:absolute;inset:0;z-index:-1;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile-no{position:absolute;top:22px;right:28px;font-size:clamp(64px,9vw,128px);font-weight:800;letter-spacing:-.04em;line-height:1;opacity:.14}
.tile-body{padding:clamp(24px,3.5vw,52px);max-width:720px}
.tile h2{margin:0 0 12px;font-size:clamp(30px,2.6vw,60px);white-space:nowrap;line-height:.95;letter-spacing:-.035em;font-weight:800}
.tile p{margin:0 0 26px;font-size:clamp(16px,1.5vw,19px);line-height:1.5;max-width:40ch}
.tile-cta{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:17px;padding:14px 24px;border-radius:999px}
.arrow{display:inline-block;transition:transform .3s}

/* DTP-Service */
.tile-dtp{color:#fff}
.tile-dtp .tile-bg{background:
  radial-gradient(120% 80% at 100% 0%,rgba(239,43,47,.55) 0,rgba(239,43,47,0) 55%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 22px),
  #141414}
.with-signet{display:flex;align-items:center;gap:.22em}
.signet{height:.78em;width:auto;flex:none;transform:translateY(.04em)}
.tile-dtp .tile-cta{background:var(--red);color:#fff}
.tile-dtp:hover .tile-bg,.tile-dtp:focus-visible .tile-bg{transform:scale(1.04)}
.tile-dtp:hover .arrow,.tile-dtp:focus-visible .arrow{transform:translateX(6px)}
.tile-dtp:focus-visible{outline:4px solid var(--red);outline-offset:4px}

/* Training */
.tile-training{color:var(--ink);cursor:default}
.tile-training .tile-bg{background:
  radial-gradient(90% 70% at 0% 100%,rgba(31,95,191,.28) 0,rgba(31,95,191,0) 60%),
  radial-gradient(circle at 1px 1px,rgba(17,17,17,.13) 1.2px,transparent 0) 0 0/22px 22px,
  #e3ddd0}
.badge{display:inline-block;margin:0 0 22px;padding:7px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tile-cta.muted{border:2px dashed rgba(17,17,17,.35);color:#444}

/* Judo */
.tile-judo{color:#fff}
.tile-judo .tile-bg{background:
  radial-gradient(110% 80% at 100% 100%,rgba(222,68,56,.45) 0,rgba(222,68,56,0) 55%),
  linear-gradient(rgba(255,255,255,.06) 2px,transparent 2px) 0 0/100% 64px,
  linear-gradient(90deg,rgba(255,255,255,.06) 2px,transparent 2px) 0 0/128px 100%,
  #1F4E78}
.tile-judo .tile-cta{background:#fff;color:#1F4E78}
.tile-judo:hover .tile-bg,.tile-judo:focus-visible .tile-bg{transform:scale(1.04)}
.tile-judo:hover .arrow,.tile-judo:focus-visible .arrow{transform:translateX(6px)}
.tile-judo:focus-visible{outline:4px solid #1F4E78;outline-offset:4px}

/* Fuß */
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px clamp(20px,5vw,72px) 28px;font-size:14px;color:var(--muted)}
.foot nav{display:flex;gap:22px}
.foot a{text-decoration:none;font-weight:600;color:#333}
.foot a:hover{color:var(--red)}

/* Rechtliche Seiten */
.legal{max-width:760px;margin:0 auto;padding:clamp(28px,5vw,64px) 20px 64px;line-height:1.65;color:#2b2b2b}
.legal .back{display:inline-block;margin-bottom:28px;font-weight:700;text-decoration:none}
.legal .back:hover{color:var(--red)}
.legal h1{font-size:clamp(34px,6vw,56px);letter-spacing:-.03em;margin:0 0 24px;line-height:1}
.legal h2{font-size:21px;margin:34px 0 8px}
.legal a{text-decoration-color:var(--red);text-underline-offset:3px}

@media (max-width:1099px){
  .tiles{grid-template-columns:1fr 1fr}
  .tile-judo{grid-column:1/-1;min-height:clamp(300px,40vh,460px)}
  .tile h2{font-size:clamp(34px,4.6vw,72px)}
}
@media (max-width:760px){
  .tile-judo{min-height:340px}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:340px;border-radius:22px}
  .tile-no{top:16px;right:20px}
}
@media (prefers-reduced-motion:reduce){
  .tile-bg,.arrow{transition:none}
}