/* Westküstenkanzlei – gemeinsames Stylesheet (Mehrseiter) */
:root{
  /* Marke */
  --pink:#ce476e; --pink-ink:#b5325b; --pink-dark:#a82a52;
  --pink-text:#e87fa0;                  /* Magenta-Kleintext auf Dunkel (5,99:1) */
  --ink:#1e232b;                        /* Markendunkel = Grundflaeche. NIE als Textfarbe */
  --ink-3:#22272f;                      /* Fast-Schwarz (Altseite) - Zweitflaeche Slider/Cookie */
  --teal:#15779b;
  /* Rollen - dunkle Standardwerte */
  --heading:#ffffff;                    /* ersetzt jedes color:var(--ink) */
  --grey:#c3ccd5;                       /* Fliesstext 9,71:1 */
  --muted:#a7b0bb;                      /* Sekundaertext 7,19:1 */
  --paper:#1e232b; --sand:rgba(255,255,255,.07); --line:rgba(255,255,255,.14);
  --line-section:rgba(255,255,255,.22); /* Sektionskanten 2,06:1 */
  --line-ui:rgba(255,255,255,.42);      /* Rahmen von Bedienelementen 3,95:1 */
  --edge:inset 0 1px 0 rgba(255,255,255,.07);
  --focus:#4fb8dd;                      /* 6,94:1 auf --ink */
  color-scheme:dark;
}
/* Helle Inseln (Kopfleiste, Kontaktformular, Impressum, Datenschutz):
   alte Palette 1:1 zurueck - dadurch wird KEINE Komponentenregel dupliziert. */
header.site,.paper{
  --paper:#fff; --sand:#f6f4f0; --line:#e6e2db; --line-ui:#e6e2db;
  --heading:#1e232b; --grey:#56544e; --muted:#6b6a64;
  --focus:var(--teal); color-scheme:light;
}
.cta-band,.cards .card{--focus:#fff}    /* Fokusring auf Magenta */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:'Aller',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--grey);background:var(--paper);line-height:1.7}
button{font-family:inherit}   /* Buttons erben Schrift NICHT von selbst - sonst laeuft .btn als <button> in Arial, als <a> in Aller (25.08.) */
main{overflow-x:clip}
.paper{background:var(--paper);color:var(--grey);-webkit-font-smoothing:antialiased}   /* helle Insel: Kontaktformular, Impressum, Datenschutz */
h1,h2,h3,h4{font-family:'Doulos SIL',Georgia,'Times New Roman',serif;color:var(--heading);line-height:1.2;font-weight:400;letter-spacing:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.eyebrow{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:1rem}
/* R2: die Basis (0,1,0) verliert gegen .phero p / .head p / section.alt .head p (0,1,1+),
   dadurch fielen 9 von 13 Eyebrows auf die Grautoene des Fliesstexts. Tragende Spezifitaet: */
.hero .eyebrow,.phero .eyebrow,.head .eyebrow,section.alt .head .eyebrow{color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid #4a4a4a}   /* Unterkante: #959595 haette die Insel geheilt und die Team-Fotos verschlechtert (netto 4-4); #4a4a4a bringt alle 21 Messpositionen ueber 3:1 */
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo img{height:48px;width:auto}
.menu{display:flex;gap:20px;align-items:center}
.menu a.link{font-family:'Doulos SIL',Georgia,serif;font-size:1rem;color:var(--grey);font-weight:400;position:relative;padding:4px 0;white-space:nowrap}
.menu a.link:hover,.menu a.link[aria-current]{color:var(--heading)}
.menu a.link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--pink);transition:width .25s}
.menu a.link:hover::after,.menu a.link[aria-current]::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--pink-ink);color:#fff;font-weight:700;padding:12px 22px;border-radius:4px;font-size:1rem;transition:background .2s,transform .15s;min-height:44px;border:0;cursor:pointer}
.btn:hover{background:var(--pink-dark);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--heading);border:1.5px solid var(--line-ui)}
.btn.ghost:hover{background:var(--sand);border-color:var(--pink)}
.btn.block{width:100%;justify-content:center}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer;min-height:44px;min-width:44px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s}

/* Page hero (Unterseiten) – dezenter 14%-Duoton (Marcels Effekt), höher damit Köpfe nicht abgeschnitten sind */
.phero{position:relative;overflow:hidden;min-height:460px;padding:150px 0 96px;text-align:center;color:#e9edf1;background:linear-gradient(155deg,#1b222c,#26333f);display:flex;flex-direction:column;justify-content:center}
.phero::before{content:"";position:absolute;inset:0;background:url(../img/rechtsanwaelte-notar.webp) center 28% / cover;opacity:.14;mix-blend-mode:luminosity}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 10%,rgba(206,71,110,.24),transparent 58%)}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.6rem;color:#f4b3c8;text-shadow:0 0 .3em rgba(0,0,0,.4)}  /* N1: var(--pink) haelt auf den Foto-Heroes die 3:1 nicht (2,0-2,5) */
.phero p{color:#c3ccd5;font-size:1.1rem;max-width:640px;margin:0 auto}
.phero p:not(.eyebrow){text-wrap:balance}   /* O3: Einzelwort-Waisen in den Buehnen-Untertiteln bei 320px (404, Anwaelte, Downloads, Kontakt - ein Defekt, vier Symptome). :not(.eyebrow), damit die Kicker-Zeile ihren Umbruch behaelt. */

/* CTA-Band – Pink (wie Altseite → schöner Übergang zum dunklen Footer) */
section.cta-band{text-align:center;padding:0 24px;color:#fff;background:var(--ink)}
.cta-band .wrap{position:relative;overflow:hidden;border-radius:8px;padding:70px 24px 76px;background:linear-gradient(160deg,#b5325b 0%,#a82a52 100%)}
.cta-band .wrap::after{content:"";position:absolute;inset:0;background:url(../img/footer-bg.webp) center/cover;opacity:.13;mix-blend-mode:luminosity;pointer-events:none}
.cta-band .wrap>*{position:relative;z-index:1}
@media(max-width:640px){section.cta-band{padding:0 12px}.cta-band .wrap{padding:48px 18px 52px}}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.3rem);margin-bottom:.7rem}
.cta-band p{color:rgba(255,255,255,.92);margin-bottom:26px}
.cta-band .btn{background:#fff;color:var(--pink-ink)}
.cta-band .btn:hover{background:#f7edf1;color:var(--pink-dark)}
.cta-band .btn:focus-visible{outline-color:var(--ink);outline-offset:0}
.cta-photo{margin:40px auto 0;max-width:840px}
.cta-photo img{width:100%;height:auto;border-radius:8px;border:6px solid rgba(255,255,255,.9);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}

/* Start-Hero – dunkel (Marken-Ink + Pink) */
.hero{padding:128px 0 90px;position:relative;overflow:hidden;color:#e9edf1;background:linear-gradient(155deg,#1b222c 0%,#26333f 55%,#1b222c 100%)}
.hero::before{content:"";position:absolute;inset:0;background:url(../img/hero.jpg) center/cover;opacity:.28;mix-blend-mode:luminosity}
@media(max-width:640px){.hero::before{display:none}}   /* E4: bei 320px waren nur 9% der Bildbreite sichtbar, 1,8x hochgezogen - bei opacity .28 + luminosity traegt der Verlauf die Sektion allein, spart am Handy das groesste Bild der Seite */
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 12%,rgba(206,71,110,.28),transparent 55%)}
.hero .wrap{position:relative;z-index:1}
.hero-intro{max-width:740px;margin:0 auto 56px;text-align:center}
.hero-intro h1,.hero-intro .lead{text-wrap:balance}   /* kein einzelnes Wort in der letzten Zeile */
.hero-intro .lead{max-width:640px;margin:0 auto 2rem}
.hero-intro .hero-actions{justify-content:center;margin-bottom:0}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);margin-bottom:1.1rem;color:#fff}
.hero h1 .accent{color:#f4b3c8}   /* R1: var(--pink) auf dem Foto-Hero 2,25-2,30:1 */
.hero .lead{font-size:1.18rem;max-width:520px;margin-bottom:2rem;color:#c3ccd5}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:2.2rem}
.trust{display:flex;flex-wrap:wrap;gap:10px}
.trust span{font-size:.82rem;font-weight:600;color:#eef1f4;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:7px 13px;border-radius:40px}
/* Hero-Personen: beide gleichzeitig sichtbar statt Auto-Rotation (Wunsch Marlena 19.08.2026) */
.hero-people{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;max-width:940px;margin:0 auto}
.hp{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:8px;overflow:hidden;box-shadow:0 28px 60px -32px rgba(0,0,0,.55)}
.hp img{display:block;width:100%;height:340px;object-fit:cover;object-position:center 20%}
.hp-body{padding:22px 24px 26px}
.hp-body strong{display:block;font-size:1.3rem;color:#fff;line-height:1.25}
.hp-role{display:block;color:#f4b3c8;font-weight:600;font-size:.95rem;margin:4px 0 16px}

/* Sections */
section{padding:84px 0}
main>section+section{border-top:1px solid var(--line-section)}   /* Trennung dunkel-auf-dunkel; auf .paper wirkungslos */
/* Dunkle Papier-Sektion (wie Footer/Altseite) statt Beige */
section.alt{background:linear-gradient(rgba(20,23,28,.93),rgba(20,23,28,.95)),url(../img/paper-texture.jpg) center/cover;color:#c3ccd5}
section.alt .head h2{color:#fff}
section.alt .head p{color:#c3ccd5}
section.alt .staff figcaption strong{color:#fff}
section.alt .staff figcaption span{color:#c3ccd5}
section.alt .tagrow{color:#c3ccd5}
.head{max-width:660px;margin:0 auto 52px;text-align:center}
.head.left{margin-left:0;text-align:left}
.head h2{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:.8rem;color:var(--pink)}
.paper .head h2{color:var(--heading)}
.head p{color:var(--muted);font-size:1.06rem}

/* Karten (Rechtsgebiete) */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}   /* R7: min-content sprengt sonst unter Textabstand-Override */
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border-radius:6px;transition:transform .25s,box-shadow .25s,border-color .25s}
/* Magenta-Kachel wie Altseite: EIN Verlaufsrezept ueber Papiertextur (kein nth-child-Zebra).
   Fussstop .94 statt Alt-.90, sonst haelt Weiss darauf keine 4,5:1 (4,14). Textur fest auf
   540px skaliert - mit cover bekaeme jede Kachel einen anderen Ausschnitt. */
.cards .card{background:linear-gradient(180deg,rgba(37,10,17,.72) 0%,rgba(150,40,75,.75) 55%,rgba(181,50,91,.82) 100%),linear-gradient(rgba(0,0,0,.40),rgba(0,0,0,.40)),var(--kb,url(../img/paper-texture.jpg)) center/cover;border:1px solid rgba(255,255,255,.14);box-shadow:var(--edge);padding:56px 30px 46px;color:#fff}
.cards .card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.4);box-shadow:var(--edge),0 18px 40px -30px rgba(0,0,0,.9)}
.cards .card h3,.cards .card p,.cards .card ul{color:#fff}
.cards .card p,.cards .card ul{font-weight:600}
.cards .card .bar{background:rgba(255,255,255,.55)}
.cards .card::after{background:#fff}   /* Hover-Oberkante: Pink auf Magenta waere 1,28:1 */
.cards .card .ico{width:34px;height:34px;display:block;margin-bottom:18px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.28rem;margin:0 0 10px}
.card p{font-size:.97rem;color:var(--muted)}
.card ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:.95rem}
.card ul li{margin-bottom:4px}
.card .bar{width:34px;height:3px;background:var(--pink);border-radius:3px;margin-top:16px}
.tagrow{margin:36px auto 0;text-align:center;color:var(--muted)}
.tagrow .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tagrow .tags b{font-size:.9rem;color:var(--heading);background:var(--sand);border:1px solid var(--line);padding:7px 15px;border-radius:40px;font-weight:600}

/* Prosa (Kanzlei-Text) */
.prose{max-width:51ch;margin:0 auto;font-size:1.08rem}   /* R6: 760px ergab bis 99 Zeichen/Zeile; 51ch gemessen 67-68 (Soll 75 hell, 68 dunkel) */
.prose p{margin-bottom:18px}
.prose-just p{hyphens:auto}   /* Blocksatz nur im Kanzlei-Fliesstext (Wunsch Marlena 27.08.); Rechtstexte bleiben linksbuendig */
@media(min-width:480px){.prose-just p{text-align:justify}}   /* E: unter 480px riss der Blocksatz Loecher (bis 119px Wortabstand, 21-22% der Zeilen ueber dem 2,5-fachen) - darunter Flatterrand. Die weichen Trennzeichen im Text bleiben unberuehrt. */
.prose .sign{color:var(--heading);font-weight:600}

/* Anwälte (2 Partner + Bürogemeinschaft) */
.leads{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:900px;margin:0 auto}
.leads.solo{grid-template-columns:1fr;max-width:435px}/* Hein steht allein: gleiche Kartenbreite wie in der Zweierreihe */
.member{background:transparent;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:var(--edge)}
.member .body{padding:26px 28px 30px}
.member h3{font-size:1.45rem;margin-bottom:4px}
.member .role{color:var(--pink-text);font-weight:600;font-size:.95rem;margin-bottom:14px}
.member ul.quals{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.member ul.quals li{font-size:.82rem;color:var(--grey);border:1px solid var(--line);padding:5px 12px;border-radius:40px}

/* Mitarbeiterinnen – kompakte runde Avatare */
.staff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 26px;max-width:660px;margin:0 auto}
/* O2: ab 1100px dreispaltig - darunter blieb das Raster auf 660px stehen und stand bei 1280px als schmale Saeule
   mit je 310px Leerflaeche im Fenster. Breakpoint bewusst 1100 und NICHT 1024: bei 1024px Viewport waeren drei
   Spalten (976-52)/3 = 308px und damit SCHMALER als die heutigen 317px - iPad-Querformat wuerde schlechter. */
@media(min-width:1100px){.staff{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1020px}}
.staff figure{text-align:center}
.staff img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 18%;border-radius:8px;margin:0 auto 14px;box-shadow:0 18px 38px -20px rgba(0,0,0,.6)}
.staff figcaption strong{display:block;color:var(--heading);font-size:1.05rem}
.staff figcaption span{font-size:.85rem;color:var(--muted);hyphens:auto;overflow-wrap:break-word}

/* Kontakt / Info-Panels */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.info-block{display:grid;gap:16px}
.info-block .row{display:flex;flex-wrap:wrap;gap:14px}   /* wrap: passt der Wert nicht mehr neben sein Label, rutscht er darunter statt zerschnitten zu werden. Greift nur bei den beiden Mailzeilen und nur unter 414px; Adresse/Telefon knicken nie. */
.info-block .k{color:var(--pink-ink);font-weight:600;min-width:110px;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;padding-top:3px}
.info-block .v{color:var(--heading);font-size:1.02rem;overflow-wrap:break-word}   /* nicht `anywhere`: das bot dem Umbruch eine spaetere Stelle als die <wbr> im Mail-Link und zerschnitt die Adresse mitten im Wort ("nkanzlei.de", 320px). break-word laesst die Box auf ihre min-content-Breite und greift nur, wenn wirklich keine Trennstelle bleibt. */
.info-block a:hover{color:var(--pink-ink)}
.hours{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 26px;margin-top:8px;box-shadow:0 14px 34px -26px rgba(30,35,43,.45)}
.hours h2{font-size:1.15rem;margin-bottom:12px}
.hours table{width:100%;border-collapse:collapse}
.hours td{padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.hours td:last-child{text-align:right;color:var(--muted)}
.hours tr:last-child td{border-bottom:0}
.hours + .hours{margin-top:16px}

/* Formular */
form.kf{display:grid;gap:16px}
form.kf label{font-weight:600;color:var(--heading);font-size:.92rem;display:block;margin-bottom:6px}
form.kf input,form.kf textarea{width:100%;border:1.5px solid #8d867c;border-radius:4px;padding:12px 14px;font:inherit;color:var(--heading);background:#fff}
form.kf input:focus,form.kf textarea:focus{border-color:var(--pink)}
form.kf textarea{min-height:140px;resize:vertical}
form.kf ::placeholder{color:#6b6a64;opacity:1}   /* Firefox dimmt den Default sonst weg */
form.kf .check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--grey);font-weight:400;cursor:pointer}
form.kf .check input{width:auto;margin-top:4px;flex:0 0 auto;accent-color:var(--pink)}
form.kf .hp{display:none}
.note{padding:14px 16px;border-radius:4px;font-size:.95rem}
.note.err{background:#fdecef;border:1px solid #f3b6c6;color:#8a1f3d}
.note.err::before{content:"\26A0";margin-right:8px}
.note.ok{background:#e9f5ee;border:1px solid #b6ddc4;color:#1f6b3d}

/* Footer */
footer.site{border-top:1px solid var(--line-section);background:linear-gradient(rgba(18,21,26,.9),rgba(18,21,26,.92)),url(../img/paper-texture.jpg) center/cover;color:#8b9098;padding:52px 0 30px;font-size:.9rem}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.16)}
.foot img{height:78px;width:auto;margin-bottom:14px}
.foot h3{color:#fff;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;font-weight:400}
.foot a{display:block;padding:3px 0}
.foot a:hover{color:#f0a9c0}
.foot .v{color:#b7bcc2;font-size:.86rem}
.foot .small{font-size:.82rem;line-height:1.6}
.copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:.85rem}
.copy a:hover{color:#f0a9c0}
/* MB-COMPUTERS-Credit (kanonisch: Text + 3 Social-Badges, EINE Zeile, kein inline-flex) */
.credit{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:.85rem}
.credit-txt a{color:#f0a9c0;font-weight:600}
.credit-txt a:hover{color:#fff}
.socials{display:flex;gap:10px}
.sbadge{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center;color:#c3ccd5;transition:background .2s,color .2s,border-color .2s}
.sbadge:hover{background:var(--pink-ink);color:#fff;border-color:var(--pink-ink)}
@media(max-width:720px){.credit{flex-direction:column;gap:12px}
  .hero-people{grid-template-columns:1fr;max-width:420px}}

/* Responsive */
@media(max-width:960px){
  .cards,.cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact{grid-template-columns:1fr;gap:38px}
  .leads{grid-template-columns:1fr;max-width:440px}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  .menu{position:fixed;top:72px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid #959595;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility 0s linear .3s}
  .menu.open{max-height:calc(100dvh - 72px);overflow-y:auto;visibility:visible;transition:max-height .3s ease,visibility 0s}
  .menu a.link{padding:16px 24px;width:100%;border-top:1px solid #959595;white-space:normal}  /* I-4: --line #e6e2db war 1,29:1 auf Weiss */
  .menu .btn{margin:14px 24px}
  .burger{display:flex}
}
@media(max-width:640px){
  section,.phero{padding:56px 0}
  .phero{padding:104px 0 52px}
  .cards,.cards.c3{grid-template-columns:minmax(0,1fr)}
  .cards .card{padding:34px 22px 30px}
  .hp img{height:260px}
  .staff{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .foot{grid-template-columns:1fr}
}

/* ============================================================
   MOTION-EBENE (nur unter html.motion aktiv; ohne JS/reduced-motion sichtbar)
   ============================================================ */
:root{--ease-calm:cubic-bezier(.22,.61,.36,1)}

/* Scroll-Reveal */
.motion .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-calm),transform .7s var(--ease-calm)}
.motion .reveal.in{opacity:1;transform:none}
.motion .reveal[data-rev="left"]{transform:translateX(-42px)}
.motion .reveal[data-rev="right"]{transform:translateX(42px)}
.motion .reveal[data-rev="scale"]{transform:scale(.96)}
.motion .reveal.in[data-rev]{transform:none}
/* Stagger: --i pro Kind */
.motion .reveal[style*="--i"]{transition-delay:calc(var(--i,0) * .09s)}

/* Scroll-Progress-Bar */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--pink),var(--teal));z-index:120;transition:transform .1s linear;pointer-events:none}

/* Sticky-Header verdichtet beim Scrollen */
header.site{transition:box-shadow .3s ease,background .3s ease}
header.site.scrolled{box-shadow:0 6px 24px -16px rgba(30,35,43,.5);background:rgba(255,255,255,.98)}

/* Karten-Hover: Oberkante wächst ein */
.card{position:relative}
.card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--pink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease-calm);border-radius:6px 6px 0 0}
.card:hover::after{transform:scaleX(1)}

/* Team-/Anwaltsfotos: dezent entsättigt → Farbe bei Hover */
.motion .staff img{filter:grayscale(.35) contrast(1.02);transition:filter .5s ease,transform .5s ease}
.motion .staff figure:hover img{filter:none;transform:scale(1.04)}

/* Kennzahlen-Band */
.stats{background:linear-gradient(155deg,#1b222c,#26333f);color:#fff;position:relative;overflow:hidden}
.stats::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0,rgba(206,71,110,.22),transparent 55%);pointer-events:none}
.stats .wrap{position:relative;z-index:1}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.stat .num{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.stat .lbl{margin-top:8px;color:#c3ccd5;font-size:.95rem}
.stat .num .u{color:var(--pink)}

/* Leitbild-Slider */
.slider{position:relative;max-width:820px;margin:0 auto}
.sl-viewport{overflow:hidden;border-radius:8px}
.sl-track{display:flex;transition:transform .5s var(--ease-calm)}
.sl-slide{flex:0 0 100%;min-width:0;padding:44px 48px;background:var(--ink-3);border:1px solid var(--line);box-shadow:var(--edge)}
.sl-slide p{font-size:1.25rem;color:var(--heading);line-height:1.6;font-weight:600}
.sl-slide .who{margin-top:16px;color:var(--pink-text);font-weight:600;font-size:.95rem}
.sl-ctrls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.sl-dots{display:flex;gap:14px}
.sl-dots button{position:relative;width:10px;height:10px;border-radius:50%;border:2px solid var(--line-ui);background:transparent;cursor:pointer;padding:0;transition:background .2s,transform .2s}
.sl-dots button.is-active{background:var(--pink);border-color:var(--pink);transform:scale(1.25)}
/* Trefferflaeche 24x24 (WCAG 2.5.8), ohne den Punkt selbst zu vergroessern. inset = gap/2;
   das scale(.8) haelt sie beim aktiven Punkt trotz scale(1.25) bei exakt 24px. */
.sl-dots button::before{content:"";position:absolute;inset:-7px;transition:transform .2s}
.sl-dots button.is-active::before{transform:scale(.8)}
.sl-prev,.sl-next,.sl-toggle{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-ui);background:rgba(255,255,255,.06);color:var(--heading);cursor:pointer;font-size:1rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.sl-prev:hover,.sl-next:hover,.sl-toggle:hover{border-color:var(--pink);background:var(--sand)}
.sl-toggle{font-size:.8rem}

/* CTA-Button: einmaliger Licht-Sweep bei Hover */
.motion .cta-band .btn{position:relative;overflow:hidden}
.motion .cta-band .btn::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s ease}
.motion .cta-band .btn:hover::before{left:140%}

/* Hero-Eintritt (gestaffelt) */
.motion .hero .eyebrow,.motion .hero h1,.motion .hero .lead,.motion .hero .hero-actions,.motion .hero .hero-people{
  opacity:0;transform:translateY(22px);animation:heroIn .8s var(--ease-calm) forwards}
.motion .hero h1{animation-delay:.12s}
.motion .hero .lead{animation-delay:.24s}
.motion .hero .hero-actions{animation-delay:.36s}
.motion .hero .hero-people{animation-delay:.48s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* Formular-Erfolg: gezeichneter Haken */
.okcheck{width:26px;height:26px;flex:0 0 auto;color:#1f6b3d;vertical-align:middle;margin-right:8px;display:inline-block}
.motion .okcheck path{stroke-dasharray:30;stroke-dashoffset:30;animation:drawCheck .5s ease forwards .05s}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.note.ok{align-items:center}

@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:32px 16px}.stats-grid .stat:last-child{grid-column:1/-1}}

/* ---- Bewegungsreduktion: Funktion bleibt, Bewegung raus ---- */
@media(prefers-reduced-motion:reduce){
  .reveal,.motion .reveal{opacity:1!important;transform:none!important}
  .progress{display:none}
  .motion .staff img{filter:none}
  .motion .hero .eyebrow,.motion .hero h1,.motion .hero .lead,.motion .hero .hero-actions,.motion .hero .hero-people{opacity:1;transform:none;animation:none}
  .sl-track{transition:none}
  .okcheck path{animation:none;stroke-dashoffset:0}
}

/* Kombinierte Anwalts-Profile: Foto + Qualifikationen + Werdegang in einem Block */
.profiles{display:grid;gap:30px;max-width:1000px;margin:0 auto}
.profile{display:grid;grid-template-columns:290px 1fr;gap:36px;align-items:start;background:transparent;border:1px solid var(--line);border-radius:8px;padding:30px;box-shadow:var(--edge)}
.profile .side img{width:100%;height:360px;object-fit:cover;object-position:center 18%;border-radius:6px;margin-bottom:16px;box-shadow:0 16px 34px -22px rgba(30,35,43,.5)}
.profile .side h3{font-size:1.35rem;margin-bottom:2px}
.profile .side .role{color:var(--pink-text);font-weight:600;font-size:.9rem;margin-bottom:14px}
.profile .side ul.quals{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.profile .side ul.quals li{font-size:.8rem;color:var(--grey);border:1px solid var(--line);padding:5px 11px;border-radius:40px}
.profile .work{padding-top:4px}
.profile .work .wlabel{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-text);font-weight:600;margin-bottom:18px}
.profile .work ol{list-style:none;border-left:2px solid rgba(255,255,255,.24);padding-left:20px}
.profile .work ol li{position:relative;padding-bottom:13px;font-size:.95rem;color:var(--grey)}
.profile .work ol li::before{content:"";position:absolute;left:-27px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px var(--ink)}
.profile .work .langs{margin-top:10px;font-size:.88rem;color:var(--muted)}
@media(max-width:820px){.profile{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px}.profile .side img{height:340px;max-width:300px;margin-left:auto;margin-right:auto}}

.staff img,.profile .side img,.member img{border:1px solid rgba(255,255,255,.10)}

/* Kanzlei-Duo-Bild (Brüggmann + Witt) */
.kanzlei-duo{max-width:840px;margin:0 auto 44px}
.kanzlei-duo img{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:var(--sand)}
/* Ab voller .wrap-Breite: Bild ueber zweispaltigem Text - beide fluchten auf 1072px.
   Spalte 508px: gemessen 60 Zeichen/Zeile im Schnitt, max 67 (R6-Soll dunkel: 68;
   die bisherige 529px-Kolonne liegt bei 62/67) - Texthoehe 1224 -> 685px.
   1120px ist genau der Punkt, ab dem .wrap seine max-width erreicht; darunter UND im
   Druck (Chrome rechnet ~816px) faellt alles auf die bisherige 51ch-Kolonne zurueck. */
@media(min-width:1120px){
  .kanzlei-duo{max-width:none;margin-bottom:40px}
  .prose-2col{max-width:none;columns:2;column-gap:56px}
  .prose-2col p{break-inside:avoid}
  .prose-2col .sign{column-span:all;margin-top:14px;text-align:center}
}

/* Pro-Seite-Header-Bild (jeweils im dezenten 14%-Duoton) */
.phero-kanzlei::before{background-image:url(../img/kanzlei-header.webp)}
/* Gruppenbild sichtbar statt angedeutet (Wunsch Marlena 28.08.): volle Farbe statt Luminanz-Schleier.
   Der Text steht dafuer auf einem Verlauf, der nach unten abdunkelt — gemessen, nicht geschaetzt:
   schlechtester Pixelkontrast 1280px 4,55:1 (h1, Soll 3) und 7,19:1 (Fliesstext, Soll 4,5). */
.phero-team::before{background-image:url(../img/kanzlei-team.webp);background-position:center bottom;opacity:.75;mix-blend-mode:normal}
.phero-team::after{background:linear-gradient(to bottom,rgba(20,23,28,.15) 40%,rgba(20,23,28,.82) 100%),radial-gradient(circle at 78% 10%,rgba(206,71,110,.18),transparent 58%)}
.phero-downloads::before{background-image:url(../img/header-downloads.webp);opacity:.09}  /* N8: Bildruhe, sonst grauer Balken (Luma-Mittel 56,9) */
/* Team: Ausschnitt „roter Rahmen" — Deckenzeile oben abgeschnitten, Wandbilder + Gruppe + Boden bleiben → Text unten */
.phero-team{aspect-ratio:5/3;min-height:0;justify-content:flex-end;padding:0 0 40px}
/* Schmal sitzt der Text ueber einem helleren Bildausschnitt (background-position 40% statt bottom),
   deshalb hier ein kraeftigerer Verlauf: gemessen 375/414px 4,41:1 (h1) und 6,90:1 (Fliesstext). */
@media(max-width:640px){.phero-team{aspect-ratio:auto;min-height:420px}.phero-team::before{background-position:center 40%}
  .phero-team::after{background:linear-gradient(to bottom,rgba(20,23,28,.30) 12%,rgba(20,23,28,.93) 100%),radial-gradient(circle at 78% 10%,rgba(206,71,110,.16),transparent 58%)}}
.phero-kontakt::before{background-image:url(../img/paper-texture.jpg)}

/* Download-Karten mit Hintergrundfoto (wie Altseite) */
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
.dlcard{position:relative;overflow:hidden;border-radius:8px;min-height:260px;display:flex;align-items:center;justify-content:center;background-color:#26333f;background-position:center 28%;background-size:cover;background-blend-mode:luminosity;border:1px solid var(--line-section);transition:transform .25s ease}
.dlcard::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(22,27,34,.84),rgba(22,27,34,.88)),radial-gradient(circle at 50% 0,rgba(206,71,110,.24),transparent 62%);transition:background .3s}
.dlcard:hover{transform:translateY(-4px)}
.dlcard:hover::before{background:linear-gradient(rgba(22,27,34,.74),rgba(22,27,34,.80)),radial-gradient(circle at 50% 0,rgba(206,71,110,.28),transparent 62%)}
.dlcard-body{position:relative;z-index:1;padding:30px 26px;text-align:center;width:100%}
/* Traegt eine Kachel mehrere Formulare (Vollmacht: Brueggmann & Witt / Hein), stehen die Knoepfe
   nebeneinander und brechen erst um, wenn die Kachel zu schmal wird. */
.dl-btns{display:flex;flex-direction:column;align-items:center;gap:14px}
.dl-btns .btn{min-width:240px;justify-content:center}
.dlcard-body h2{color:#f4b3c8;font-size:1.4rem;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.dlcard-body p{color:#e6eaee;font-size:.88rem;margin-bottom:20px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media(max-width:640px){.dl-grid{grid-template-columns:1fr}}

/* Cookie-Hinweis */
.cookie-note{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 16px 16px;pointer-events:none}
.cookie-card{max-width:760px;margin:0 auto;background:var(--ink-3);border:1px solid #5f6e84;border-left:3px solid var(--pink);border-radius:6px;box-shadow:0 -1px 0 rgba(255,255,255,.16),0 -18px 40px -12px rgba(0,0,0,.8);padding:18px 20px;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;pointer-events:auto;opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease-calm),transform .35s var(--ease-calm)}
.cookie-note.in .cookie-card{opacity:1;transform:none}
.cookie-card p{flex:1 1 340px;margin:0;font-size:.88rem;line-height:1.6;color:var(--grey);min-width:0}
.cookie-card p b{color:var(--heading)}
.cookie-card a{color:var(--pink-text);text-decoration:underline}
.cookie-card a:hover{color:#f4b3c8}
.cookie-note:not(.in) .cookie-card{pointer-events:none}
.cookie-card .btn{flex-shrink:0;background:var(--pink-ink)}
.cookie-card .btn:hover{background:var(--pink-dark)}
@media(max-width:640px){.cookie-note{padding:0 10px 10px}.cookie-card{padding:16px;gap:12px}.cookie-card .btn{width:100%;justify-content:center}}

/* ---------- Druckansicht ----------
   Vorher gab es keine einzige Print-Regel. Gemessen am PDF: Navigation, Cookie-Karte
   und CTA-Band druckten mit, weisse Schrift auf farbigen Flaechen kam als #ababab
   heraus (Kontrast 2,3:1 - u.a. der Gesamtbetrag des Notarkosten-Rechners), und die
   KV-Aufschluesselung fehlte komplett, weil sie im zugeklappten <details> steckt.
   .reveal wird hier zurueckgesetzt, weil ein Ausdruck in den ersten 2,5 s nach dem
   Laden sonst leere Abschnitte zeigt (der Fail-Safe in anim.js greift erst danach). */
/* Windows-Kontrastmodus: was seine Bedeutung nur ueber Farbe oder Flaeche traegt,
   verliert sie dort. Wirkt NUR in diesem Modus, normale Darstellung unveraendert. */
@media (forced-colors:active){
  .burger{border:1px solid ButtonText}                        /* war unsichtbar: kein Rahmen ... */
  .burger span{background:ButtonText}                         /* ... und Balken auf Canvas gezwungen */
  .menu a.link[aria-current]::after{forced-color-adjust:none} /* aktive Seite sonst wie jede andere */
  .sl-dots button.is-active{forced-color-adjust:none}         /* aktiver Punkt sonst wie die inaktiven */
  .btn{border:1px solid ButtonText}                           /* Flaechen-Buttons sonst konturlos */
}

@media print{
  .progress,.burger,.menu,.cookie-note,.cta-band,.sl-ctrls,.foot img{display:none!important}
  /* Generisch statt Selektorliste: nach Block D sind 20+ Flaechen dunkel - eine Aufzaehlung
     wuerde bei jeder neuen Komponente wieder loechrig (u.a. die 21 <h2> der Rechtstexte). */
  body,body *,body *::before,body *::after{background:none!important;color:#1e232b!important;box-shadow:none!important;text-shadow:none!important;border-color:#959595!important}
  .hero::before,.hero::after,.phero::before,.phero::after,.stats::after,.dlcard::before,.cta-band .wrap::after{display:none}
  html{background:#fff!important;color-scheme:light!important}                 /* N2: Block-D-html{background} laeuft am body-Reset vorbei */
  body{background:#fff!important;padding-bottom:0!important}
  header.site{position:static}
  .card,.dlcard,.member,.sl-slide,.hours,article.hp{border:1px solid #959595!important;break-inside:avoid}
  .profile{border:1px solid #959595!important;break-inside:auto}       /* N6: atomar kostet die Kopf-Profil-Kette ein Blatt (gemessen 5 statt 7) */
  .btn{border:1px solid #1e232b!important}
  .cards .card .ico{stroke:#1e232b!important}                      /* weisse Linien-Icons waeren sonst unsichtbar */
  .profile .work ol{border-left:2px solid #959595!important}
  .profile .work ol li::before{background:#1e232b!important}        /* Zeitleisten-Punkte tragen Bedeutung */
  mark{outline:2px dashed #1e232b}                                  /* Impressum-Platzhalter muss im Ausdruck STOEREN */
  .staff img{filter:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero,.phero{min-height:0;padding:20px 0;aspect-ratio:auto!important}        /* N4: .phero-team 5/3 sonst 457px Kopfzone */
  section{padding:22px 0}
  h1,h2,h3,.head{break-after:avoid}
  .head{break-inside:avoid}                                         /* N6: Eyebrow+H2 zusammen und am Inhalt halten */
  details::details-content{content-visibility:visible!important}    /* ruhendes Notarkosten-Feature */
}