/* ============================================================
   Modl & Coll. — Design-Komponenten (mc-)
   Wiederverwendbare Bausteine aus dem Layout-Baukasten:
   Hero-Slider, Feature-Splits, Bild/Motiv-Karten, Prozess, Kennzahlen, Zitat.
   Nutzt die Tokens aus ds/styles.css + site.css.
   ============================================================ */

.mc{overflow-x:clip;}
/* Abschnitts-Abstände auf diesen Seiten straffer als der globale --section-y */
.mc .section{padding-block:clamp(2.3rem,4.5vw,3.5rem);}
.mc [id]{scroll-margin-top:90px;}
/* CTA-Band soll direkt in den Footer übergehen – kein Weißraum (nur auf .mc-Seiten) */
main.mc ~ .site-footer{margin-top:0;border-top:1px solid var(--brass-700);}
.mc-bleed{width:100vw;margin-left:calc(50% - 50vw);}
.mc-eyebrow{font:var(--fw-semibold) var(--text-xs)/1 var(--font-body);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--brass-700);margin:0 0 var(--space-3);display:flex;align-items:center;gap:.6rem;}
.mc-eyebrow--light{color:var(--brass-300);}
.mc-eyebrow--light::before{content:"";width:30px;height:2px;background:var(--brass-400);}

/* ---- Hero (Stil 3: Text unten, Foto + Verlauf von unten) ---- */
.mc-hero{position:relative;isolation:isolate;color:var(--paper);min-height:clamp(440px,64vh,660px);
  display:flex;background:radial-gradient(120% 120% at 72% 16%,rgba(120,170,210,.18),transparent 56%),linear-gradient(135deg,#0e2034 0%,#173a59 52%,#2b5d88 100%);}
.mc-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(11,18,28,.55) 0%,rgba(11,18,28,.12) 45%,transparent 70%);}
.mc-hero__in{position:relative;z-index:2;width:100%;max-width:var(--container-max);margin-inline:auto;
  padding:clamp(2.5rem,7vw,5rem) var(--gutter);display:flex;flex-direction:column;justify-content:flex-end;}
.mc-hero h1,.mc-hero .mc-hero__h{font-family:var(--font-display);font-weight:var(--fw-medium);color:var(--paper);
  font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.06;letter-spacing:var(--ls-snug);margin:0 0 .7rem;max-width:20ch;}
.mc-hero p.lead{color:rgba(255,255,255,.92);font-size:var(--text-md);line-height:1.5;max-width:56ch;margin:0 0 1.6rem;}
.mc-hero .btn--primary{background:var(--paper);color:var(--navy-900);box-shadow:var(--shadow-md);}
.mc-hero .btn--primary:hover{background:#fff;color:var(--navy-900);}
.mc-hero .btn--ghostlight{background:transparent;color:var(--paper);border:1px solid rgba(255,255,255,.6);}
.mc-hero .btn--ghostlight:hover{background:rgba(255,255,255,.14);color:var(--paper);}
.mc-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);}

/* ---- Hero als Slider ---- */
.mc-heroslider{position:relative;overflow:hidden;}
.mc-track{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform;}
@media (prefers-reduced-motion: reduce){.mc-track{transition:none;}}
.mc-track > .mc-hero{flex:0 0 100%;}
.mc-dots{position:absolute;left:0;right:0;bottom:1.1rem;z-index:4;display:flex;gap:.5rem;justify-content:center;}
.mc-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0;}
.mc-dots button[aria-current="true"]{background:var(--paper);width:26px;border-radius:99px;}
.mc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;
  border:0;background:rgba(20,32,46,.5);color:var(--paper);cursor:pointer;display:grid;place-items:center;}
.mc-arrow:hover{background:rgba(20,32,46,.8);}
.mc-arrow svg{width:22px;height:22px;}
.mc-arrow.prev{left:clamp(.6rem,2vw,1.4rem);} .mc-arrow.next{right:clamp(.6rem,2vw,1.4rem);}

/* ---- Feature-Split (1/2 Bild/Motiv + 1/2 Text) ---- */
.mc-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,var(--space-8));align-items:center;}
.mc-split--wide-text{grid-template-columns:0.9fr 1.1fr;}
.mc-split__text h2{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-2xl);
  color:var(--text-strong);line-height:var(--lh-snug);letter-spacing:var(--ls-snug);margin:0 0 var(--space-3);}
.mc-split__text h2 .rule,.mc-split__text .h2-rule{display:block;width:44px;height:var(--rule-accent-width);
  background:var(--accent);border-radius:2px;margin-bottom:var(--space-4);}
.mc-split__text p{font-size:var(--text-base);line-height:var(--lh-relaxed);color:var(--text-body);margin:0 0 var(--space-3);}
.mc-split__text ul{padding-left:1.3em;margin:var(--space-3) 0;}
.mc-split__text li{font-size:var(--text-base);line-height:1.55;color:var(--text-body);margin-bottom:.4rem;}
.mc-split__text li::marker{color:var(--brass-500);}

/* ---- Bild ---- */
.mc-figure{margin:0;}
.mc-img{border-radius:var(--radius-lg);background:var(--navy-100) var(--photo,none) center/cover no-repeat;
  box-shadow:var(--shadow-sm);aspect-ratio:4/3;}
.mc-img--tall{aspect-ratio:3/4;} .mc-img--wide{aspect-ratio:16/10;}
.mc-figure figcaption{font-size:var(--text-sm);color:var(--text-muted);margin-top:.6rem;font-style:italic;}

/* ---- Motiv-Karte (quadratisch, ~80% der Hälfte, Text zentriert darunter) ---- */
.mc-motifcard{width:80%;margin-inline:auto;aspect-ratio:1/1;background:var(--surface-card);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:var(--space-6);}
.mc-motifcard svg{height:108px;width:auto;color:var(--navy-800);margin-bottom:var(--space-3);}
.mc-motifcard h3{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-lg);color:var(--text-strong);margin:0 0 .35rem;}
.mc-motifcard p{font-size:var(--text-sm);color:var(--text-muted);line-height:1.55;margin:0;}

/* ---- Motiv-Box volle Breite: Motiv links, Text rechts ---- */
.mc-motifwide{display:grid;grid-template-columns:auto 1fr;gap:var(--space-7);align-items:center;
  background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:var(--space-6) var(--space-7);}
.mc-motifwide .art{width:190px;height:120px;display:grid;place-items:center;}
.mc-motifwide .art svg{height:108px;width:auto;color:var(--navy-800);}
.mc-motifwide h3{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xl);color:var(--text-strong);margin:0 0 .4rem;}
.mc-motifwide p{font-size:var(--text-base);color:var(--text-body);line-height:1.6;margin:0;max-width:60ch;}

/* ---- Prozess (3/4/5 Schritte) ---- */
.mc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);position:relative;}
.mc-steps--4{grid-template-columns:repeat(4,1fr);}
.mc-steps--5{grid-template-columns:repeat(5,1fr);}
.mc-step{position:relative;}
.mc-step .no{width:42px;height:42px;border-radius:50%;background:var(--brass-500);color:var(--navy-900);
  font-family:var(--font-display);font-size:var(--text-lg);display:grid;place-items:center;margin-bottom:.8rem;}
.mc-step h3{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-lg);color:var(--text-strong);margin:0 0 .3rem;}
.mc-steps--5 .mc-step h3{font-size:var(--text-base);}
.mc-step p{font-size:var(--text-sm);color:var(--text-body);line-height:1.55;margin:0;}
.mc-step:not(:last-child)::after{content:"";position:absolute;top:21px;left:54px;right:-12px;height:2px;
  background:linear-gradient(90deg,var(--brass-300),transparent);}

/* ---- Kennzahlen-Band ---- */
.mc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);
  background:var(--navy-900);border-radius:var(--radius-lg);padding:var(--space-7) var(--space-6);}
.mc-stats .stat{text-align:center;color:var(--paper);}
.mc-stats .num{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);color:var(--brass-300);line-height:1;}
.mc-stats .lab{font-size:var(--text-sm);color:rgba(255,255,255,.82);margin-top:.5rem;}

/* ---- Zitat ---- */
.mc-quote{border-left:4px solid var(--brass-500);padding:var(--space-3) 0 var(--space-3) var(--space-6);
  font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.3;color:var(--text-strong);max-width:62ch;}
.mc-quote cite{display:block;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-muted);font-style:normal;margin-top:var(--space-3);}

/* ---- Abschnittsfarbe (sanft abgesetzt) ---- */
.mc-band--sunken{background:var(--bg-sunken);}

/* ---- Varianten ---- */
/* Hero-Slide: Text zentriert (Modifier .mc-hero--center) */
.mc-hero--center .mc-hero__in{align-items:center;justify-content:center;text-align:center;}
.mc-hero--center .mc-eyebrow{justify-content:center;}
.mc-hero--center .mc-hero__cta{justify-content:center;}
.mc-hero--center h1,.mc-hero--center .mc-hero__h,.mc-hero--center p.lead{margin-inline:auto;}
/* „Auf dieser Seite" 3-spaltig, volle (Navi-)Breite */
.mc .toc ul{grid-template-columns:repeat(3,1fr);max-width:none;}
/* Prose zentriert (Modifier .prose--center) */
.mc .prose--center{max-width:calc(var(--container-max) * 2 / 3);margin-inline:auto;text-align:center;}
.mc .prose--center .h2-rule{margin-inline:auto;}
.mc .prose--center ul,.mc .prose--center ol{list-style:none;padding-left:0;}
/* innere Begrenzungen (82ch) aufheben, damit der zentrierte Text auf den ganzen Block bezogen ist */
.mc .prose--center p,.mc .prose--center ul,.mc .prose--center ol,.mc .prose--center li{max-width:none;}
/* Schlüssel-Liste: Headline zentriert; Liste als zentrierter fit-content-Block, linksbündige Punkte mit edler Brass-Raute, je Punkt eine Zeile (Desktop) */
.mc .prose--keylist{text-align:center;}
.mc .prose--keylist .h2-rule{margin-inline:auto;}
/* Absätze in keylist-Sektionen: zentrierter Block im Blocksatz (nicht ragged-zentriert) */
.mc .prose--keylist p{max-width:64ch;margin-inline:auto;text-align:justify;hyphens:auto;}
.mc .prose--keylist ul{list-style:none;padding:0;margin:var(--space-3) auto 0;width:fit-content;max-width:100%;
  text-align:left;display:grid;gap:.75rem;}
.mc .prose--keylist li{position:relative;padding-left:1.7em;white-space:nowrap;max-width:none;
  font-size:var(--text-base);line-height:1.5;color:var(--text-body);}
.mc .prose--keylist li::before{content:"";position:absolute;left:.1em;top:.55em;width:.5em;height:.5em;
  transform:rotate(45deg);background:var(--brass-500);}
@media (max-width:920px){.mc .prose--keylist li{white-space:normal;}.mc .prose--keylist ul{width:auto;}}
/* Variante für Seiten mit sehr langen Punkten: zentrierte Spalte, lange Punkte dürfen umbrechen (kein Overflow) */
.mc .prose--keylist.is-wrap ul{width:auto;max-width:min(100%,62rem);}
.mc .prose--keylist.is-wrap li{white-space:normal;}
/* Ausklappbarer Text in Feature-Karten („Mehr") */
.feature__expand{margin-top:.25rem;}
.feature__expand summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35em;color:var(--brass-700);font:var(--fw-semibold) var(--text-sm)/1 var(--font-body);}
.feature__expand summary::-webkit-details-marker{display:none;}
.feature__expand summary::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-.15em;transition:transform .2s;}
.feature__expand[open] summary::after{transform:rotate(-135deg);margin-top:.12em;}
.feature__expand p{margin:.55rem 0 0;font-size:var(--text-sm);color:var(--text-body);line-height:1.6;}

/* ---- Anwälte / Team (Über-uns) ---- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3.5vw,var(--space-7));align-items:start;}
.lawyer-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;}
.lawyer-card__photo{position:relative;aspect-ratio:4/3;
  background:var(--navy-900) var(--photo,none) center/cover no-repeat;display:grid;place-items:center;}
/* Platzhalter bis ein Foto vorliegt: edler Navy-Verlauf + Monogramm (Initialen) */
.lawyer-card__photo--placeholder{background:
  radial-gradient(120% 120% at 70% 18%,rgba(120,170,210,.20),transparent 56%),
  linear-gradient(135deg,#0e2034 0%,#173a59 58%,#2b5d88 100%);}
.lawyer-card__mono{display:grid;place-items:center;width:clamp(84px,15vw,108px);height:clamp(84px,15vw,108px);
  border-radius:50%;border:2px solid rgba(203,176,121,.55);background:rgba(11,18,28,.22);
  font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(2.3rem,5.5vw,3.2rem);
  color:var(--brass-300);letter-spacing:.03em;}
.lawyer-card__body{padding:clamp(1.3rem,3vw,var(--space-7));display:flex;flex-direction:column;}
.lawyer-card__role{font:var(--fw-semibold) var(--text-xs)/1 var(--font-body);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--brass-700);margin:0 0 .4rem;}
.lawyer-card__name{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xl);
  color:var(--text-strong);line-height:var(--lh-snug);margin:0 0 var(--space-4);}
.lawyer-card__block{margin-top:var(--space-5);}
.lawyer-card__block:first-of-type{margin-top:0;}
.lawyer-card__label{font:var(--fw-semibold) var(--text-xs)/1 var(--font-body);letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-muted);margin:0 0 .65rem;}
.lawyer-qual{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;}
.lawyer-qual li{position:relative;padding-left:1.45em;font-size:var(--text-sm);line-height:1.5;color:var(--text-body);}
.lawyer-qual li::before{content:"";position:absolute;left:.15em;top:.52em;width:.42em;height:.42em;
  transform:rotate(45deg);background:var(--brass-500);}
.lawyer-tags{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:0;}
.lawyer-tags li{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--navy-800);
  background:rgba(20,32,46,.055);border:1px solid var(--border);border-radius:999px;padding:.32em .85em;}
/* Hinweis: .rating-badge / .stars / .nav-rating / .hero-rating liegen global in site.css (mc_rating-Helfer). */

/* ---- Responsive ---- */
@media (max-width:860px){
  .mc .toc ul{grid-template-columns:1fr 1fr;}
  .team{grid-template-columns:1fr;}
  .mc-split,.mc-split--wide-text{grid-template-columns:1fr;gap:var(--space-6);}
  .mc-steps,.mc-steps--4,.mc-steps--5{grid-template-columns:1fr;}
  .mc-step:not(:last-child)::after{display:none;}
  .mc-stats{grid-template-columns:1fr;gap:var(--space-4);}
  .mc-motifwide{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .mc-motifwide p{margin-inline:auto;}
}
@media (max-width:560px){ .mc .toc ul{grid-template-columns:1fr;} }