/* ============ Nur Startseite ============ */
/* ============ Intro-Overlay (Mechanik wie Bersay: zwei Dreieck-Blenden, die diagonal auseinanderfahren) ============ */
#intro{position:fixed;inset:-999px;margin:auto;width:max(100vw,100vh);height:max(100vw,100vh);z-index:100;overflow:hidden;pointer-events:none}
#intro .volet{position:absolute;inset:-1%;margin:auto;width:102%;height:102%;background:var(--ink);will-change:transform}
#intro .volet.d1{clip-path:polygon(100% 0,100% 100%,0 100%)}   /* untere rechte Hälfte */
#intro .volet.d2{clip-path:polygon(0 0,100% 0,101% 1%,1% 101%,0 100%)}         /* obere linke Hälfte */
#intro .word{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-family:var(--serif);font-size:clamp(30px,4.2vw,58px);letter-spacing:.01em;opacity:0;z-index:3}
#intro .word small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;margin-top:14px}


/* Zweispalter */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split > div{padding:96px var(--pad)}
.split .about{background:var(--mist)}
.split .about h2{font-size:clamp(26px,2.6vw,34px);line-height:1.22;max-width:22ch;margin-bottom:34px}
.split .fields{background:var(--paper)}
.field-slider{position:relative;overflow:hidden}
.field-track{display:flex;transition:transform .6s var(--ease);will-change:transform}
.field{flex:0 0 100%;padding-right:8px}
.field h3{font-family:var(--sans);font-weight:400;font-size:clamp(26px,2.5vw,32px);padding-bottom:16px;border-bottom:1px solid var(--ink);margin-bottom:18px}
.field p{font-size:14.5px;color:var(--text-soft);line-height:1.7;max-width:46ch;min-height:6.8em}


/* Qualifikationen */
.quals{background:var(--mist);padding:96px var(--pad) 100px}
.quals h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:44px}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(160px,.32fr) 1fr auto;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);font-size:18px}
.row .k{color:var(--text)}
.row .v{color:var(--text)}
.row .go{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:background .2s,color .2s,transform .3s var(--ease)}
.row:hover .go{background:var(--ink);color:#fff;transform:translateX(4px)}
.quals .cta{display:flex;justify-content:flex-end;margin-top:44px}


.hero h1 em{font-style:italic;font-weight:400}
.hero .card .before{position:absolute;inset:0;z-index:2;border-radius:8px;transform:rotate(180deg);background:linear-gradient(143.92deg,rgba(14,24,34,0) 51.22%,rgba(14,24,34,.31) 69.65%,#0E1822 96.95%)}
.hero .down{margin-top:28px;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:18px;transition:transform .3s var(--ease)}
.hero .down:hover{transform:translateY(4px)}
.about .lead{font-size:15px;color:var(--text-soft);max-width:min(48ch,100%);margin:-14px 0 30px}
.eyebrow .count{font-weight:400;color:var(--text-soft);letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:8px}
.eyebrow .count .ring{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);border-right-color:transparent}
.split-in .w > span{transform:none}
@media (prefers-reduced-motion:reduce){#intro{display:none}.field-track{transition:none}}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.row{grid-template-columns:1fr auto;font-size:16px}
  .row .k{grid-column:1/-1;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:-14px}}

/* Startseite: die Überschrift „Zwei Fachanwaltschaften," braucht etwas mehr
   Breite, sonst steht „Zwei" allein auf einer Zeile. 780 px bleiben innerhalb
   des abgedunkelten Bereichs des Bildes, die Schrift bleibt lesbar. */
@media (min-width:901px){
  .hero .card .txt{max-width:780px}
}