/* ==========================================================================
   Steuerberatung Marek Hejzel - Entwurf
   Ruhiges Navy, helle Flaechen, Source Sans 3. Akzent ist ein gedaempftes
   Stahlblau zwischen #00194A und #007AC1. Das Logo-Cyan #00BFF3 bleibt dem Logo
   selbst vorbehalten, damit die Seite ruhig bleibt.
   ========================================================================== */

:root{
  --ink:        #00194A;
  --ink-2:      #052B5E;
  --ink-deep:   #00112F;

  /* Warmes Weiss statt kaltem Grau-Blau seit 03.10.2026. Die Flaechen tragen
     die Ruhe, das Blau der Kanzlei bleibt Akzent. */
  --paper:      #FCFBF8;
  --paper-2:    #F4F1EB;
  --paper-3:    #E9E4DA;

  --acc:       #14598F;
  --acc-deep:  #0C3F6C;
  --acc-ink:   #7FB0D8;
  --acc-soft:  rgba(20,89,143,.09);

  --text:       #10233F;
  --text-soft:  #4D6076;
  --text-faint: #8291A3;
  --on-ink:     #FFFFFF;
  --on-ink-soft:rgba(255,255,255,.74);

  --line:       rgba(16,35,63,.12);
  --line-soft:  rgba(16,35,63,.07);
  --line-ink:   rgba(255,255,255,.16);

  --hdh:        72px;
  --gut:        clamp(20px, 5vw, 56px);
  --maxw:       1220px;

  /* Rundungen eine Stufe kleiner als vorher (24/16/12). Eine Steuerkanzlei
     darf etwas formeller aussehen, und das Leistungsraster wirkte mit 24 Pixeln
     an den Aussenecken weicher als sein Inhalt. */
  --r:          12px;
  --r-sm:       8px;
  --r-lg:       16px;
  --r-xs:       6px;
  --pill:       999px;

  --sh:         0 1px 12px rgba(0,0,0,.06);
  --sh-md:      0 8px 30px rgba(0,0,0,.07);
  --sh-lg:      0 28px 64px rgba(0,0,0,.12);

  /* Eine Schrift fuer die ganze Seite. Source Sans 3 in 600 fuer Ueberschriften,
     400 im Fliesstext. --ff-d ist der Hebel fuer die Anzeigenschrift: er zeigt
     auf dieselbe Familie, solange <html> nicht .serif-display traegt. */
  --ff:         "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-d:       var(--ff);
  --wd:         600;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* Rueckfallvariante fuer den traditionelleren Charakter: die grossen
   Ueberschriften in Newsreader, alles Kleinteilige bleibt in Source Sans 3.
   Eingeschaltet ueber build.py --serif. */
.serif-display{
  --ff-d: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --wd:   500;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  /* Die Kopfzeile liegt fest oben und ist deckend. Der Seiteninhalt faengt
     darunter an, damit die Aufnahme im Hero nicht unter der Leiste liegt. */
  padding-top:var(--hdh);
  background:var(--paper);
  color:var(--text);
  font-family:var(--ff);
  /* 17px statt 16. Source Sans 3 hat eine kleinere Mittellaenge als Poppins,
     bei gleicher Pixelzahl liest es sich also kleiner. */
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--acc); color:#fff; }

:focus-visible{ outline:2px solid var(--acc-ink); outline-offset:3px; border-radius:4px; }

.skip{
  position:fixed; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.9rem 1.3rem; font-size:.92rem;
  border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; top:0; }

/* --------------------------------------------------------------- typography */

/* Eine Schrift ueber die ganze Seite. Der Wechsel zwischen Serife in den
   Ueberschriften und Grotesk im Text zog den Auftritt in zwei Richtungen:
   die Serife editorial und traditionell, die Pillen und der Text zeitgenoessisch.
   Source Sans 3 traegt beides, Halbfett oben, Regular unten.

   Groessen auf dem Schirm: Hero 56 bis 64, Abschnittstitel 36 bis 44,
   Fliesstext 16 bis 18. Die Werte darunter sind genau darauf gerechnet, bei
   16px Wurzelgroesse und 1440px Fensterbreite. */
h1,h2,h3,h4{
  font-family:var(--ff-d);
  font-weight:var(--wd);
  letter-spacing:-.01em;
  line-height:1.18;
  margin:0;
  text-wrap:balance;
  /* Deutsche und polnische Komposita sind lang. Sie duerfen umbrechen, statt
     aus der Karte zu laufen. */
  overflow-wrap:break-word;
  hyphens:auto;
}

.d-xl{ font-size:clamp(2.25rem, 4.6vw, 4rem);     line-height:1.06; letter-spacing:-.021em; }
.d-l { font-size:clamp(1.8rem, 3.1vw, 2.75rem);   line-height:1.13; letter-spacing:-.017em; }
.d-m { font-size:clamp(1.5rem, 2.2vw, 2rem);      line-height:1.2;  letter-spacing:-.013em; }
.d-s { font-size:clamp(1.22rem, 1.55vw, 1.375rem);line-height:1.3;  letter-spacing:-.008em; }

/* Kleinere Ueberschriften stehen eine Spur leichter, damit die Halbfett-Stufe
   den grossen Titeln vorbehalten bleibt. */
.card h3,.svc-item h3,.step h3,.callout h2,.callout h3,legend,.pak h3,
.dl .t,.ft-h,.faq summary,.frail .lbl,.opt .t{
  font-family:var(--ff-d); font-weight:600; letter-spacing:-.006em;
}
.dl .t,.ft-h,.frail .lbl,.opt .t{ font-family:var(--ff); letter-spacing:0; }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.0625rem, 1.2vw, 1.175rem);
  line-height:1.66;
  color:var(--text-soft);
  max-width:62ch;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.76rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--acc-deep);
  margin:0 0 1rem;
}
/* Keine Zierstriche und keine Zaehler mehr vor den Augenbrauen. Schrift und
   Abstand tragen die Gliederung allein. */
.eyebrow.on-ink{ color:var(--acc-ink); }

.num{
  font-family:var(--ff); font-weight:600;
  font-size:clamp(1.5rem,2.2vw,2rem); line-height:1;
  color:var(--acc-deep); letter-spacing:-.02em;
}
.num.on-ink{ color:var(--acc-ink); }
.tnum{ font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------ layout */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:840px; }

.sec{ padding-block:clamp(3.5rem, 7vw, 6.5rem); }
.sec-tight{ padding-block:clamp(2.5rem, 4vw, 3.5rem); }

.on-ink-bg{ background:var(--ink); color:var(--on-ink); }
.on-ink-bg h1,.on-ink-bg h2,.on-ink-bg h3{ color:var(--on-ink); }
.on-ink-bg .lede,.on-ink-bg p{ color:var(--on-ink-soft); }
.on-paper2{ background:var(--paper-2); }

.sec-head{ margin-bottom:clamp(2rem,3.5vw,3.25rem); }

/* Abschnittskopf als Zeitungskopf: Haarlinie ueber die ganze Breite, links
   Zaehler, Augenbraue und Titel, rechts der Vorspann. Das gibt der Seite ein
   Raster statt einer Folge zentrierter Bloecke. */
.shead{
  display:grid; gap:1.1rem clamp(1.5rem,4vw,4.5rem);
  padding-top:clamp(1.1rem,1.8vw,1.6rem);
  border-top:1px solid var(--line);
  margin-bottom:clamp(2.2rem,4vw,3.4rem);
}
@media (min-width:900px){
  .shead{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:end; }
}
.shead.on-ink{ border-top-color:var(--line-ink); }
.shead .lede{ margin-bottom:0; }
.shead.on-ink .lede{ color:var(--on-ink-soft); }
.sec-head.split{ display:grid; gap:clamp(1rem,2.5vw,3rem); align-items:end; }
@media (min-width:900px){ .sec-head.split{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } }
.sec-head.center{ text-align:center; max-width:720px; margin-inline:auto; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-head.center .lede{ margin-inline:auto; }

/* ----------------------------------------------------------------- buttons */

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff); font-size:.95rem; font-weight:600;
  padding:.95rem 1.7rem;
  border-radius:var(--pill);
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn .arw{ transition:transform .3s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--ink-deep); box-shadow:var(--sh-md); }

.btn-acc{ background:var(--acc); color:#fff; font-weight:600; }
.btn-acc:hover{ background:#1A6DAB; box-shadow:0 10px 28px rgba(0,25,74,.35); }

.btn-white{ background:#fff; color:var(--ink); }
.btn-white:hover{ box-shadow:var(--sh-md); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }

.btn-ghost-ink{ background:transparent; color:#fff; border-color:var(--line-ink); }
.btn-ghost-ink:hover{ border-color:#fff; background:rgba(255,255,255,.06); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }

.tlink{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.95rem; font-weight:600; text-decoration:none; color:var(--acc-deep);
  transition:gap .25s var(--ease);
}
.tlink:hover{ gap:.75rem; }
.tlink.on-ink{ color:var(--acc-ink); }

/* ------------------------------------------------------------------ header */

/* Immer weiss und deckend, nicht mehr durchsichtig ueber dem Bild. Die Hoehe
   bleibt konstant, .solid setzt beim Scrollen nur den Schatten. */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.hd-inner{ display:flex; align-items:center; gap:clamp(.8rem,2vw,2rem); min-height:var(--hdh); }
.hd.solid{ box-shadow:var(--sh); }

.hd-logo{ display:flex; align-items:center; flex:none; text-decoration:none; }
.hd-logo img{ height:32px; width:auto; }
.hd-logo img.l-white{ display:none; }

.hd-nav{ display:none; margin-left:auto; align-items:center; gap:clamp(.7rem,1.5vw,1.6rem); }
@media (min-width:1080px){ .hd-nav{ display:flex; } }
.hd-nav a{
  font-size:.95rem; font-weight:500; text-decoration:none;
  color:var(--text); opacity:.9; padding:.45rem .2rem; position:relative;
  transition:opacity .2s var(--ease), color .2s var(--ease);
}
.hd-nav a::after{
  content:""; position:absolute; left:.2rem; right:.2rem; bottom:.15rem; height:2px;
  border-radius:2px; background:var(--acc);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.hd-nav a:hover{ opacity:1; }
.hd-nav a[aria-current="page"]{ opacity:1; color:var(--acc-deep); font-weight:600; }
.hd-nav a:hover::after,.hd-nav a[aria-current="page"]::after{ transform:scaleX(1); }

.hd-tools{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
@media (min-width:1080px){ .hd-tools{ margin-left:0; } }

/* Die Sprachwahl ist das zweitwichtigste Bedienelement dieser Seite, nach dem
   Handlungsaufruf. In 11 Pixeln Versalien war sie das kleinste. Jetzt steht sie
   lesbar da und traegt ab 1240 Pixeln die vollen Sprachnamen. Darunter bleibt
   das Kuerzel, der volle Name steht dann fuer Vorlesegeraete im Titel. */
.lang{ display:flex; align-items:center; gap:2px; border-radius:var(--pill); padding:3px;
       background:var(--paper-2); }
.lang a{
  display:block; font-size:.85rem; font-weight:600; letter-spacing:.05em;
  text-decoration:none; color:var(--text-soft); opacity:.85; line-height:1.2;
  padding:.4rem .68rem; border-radius:var(--pill);
  transition:background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.lang a:hover{ opacity:1; color:var(--ink); }
.lang a[aria-current="true"]{ background:var(--acc); color:#fff; opacity:1; }
.lang .l-short{ text-transform:uppercase; }
.lang .l-full{ display:none; letter-spacing:.01em; }
@media (min-width:1240px){
  .lang a{ padding:.4rem .85rem; letter-spacing:.01em; }
  .lang .l-short{ display:none; }
  .lang .l-full{ display:block; }
}
/* Im Mobilmenue steht die Sprachwahl in voller Breite und mit vollem Namen. */
.drawer .lang{ background:rgba(255,255,255,.08); margin:1.4rem 0 .4rem; }
.drawer .lang a{ flex:1; text-align:center; color:rgba(255,255,255,.75);
                 font-size:.9rem; border:0; padding:.6rem .5rem; }
.drawer .lang a:hover{ color:#fff; }
.drawer .lang a[aria-current="true"]{ background:var(--acc); color:#fff; }
.drawer .lang .l-short{ display:none; }
.drawer .lang .l-full{ display:block; }

.hd-cta{ display:none; }
@media (min-width:820px){ .hd-cta{ display:inline-flex; } }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; background:none; border:0; cursor:pointer;
}
@media (min-width:1080px){ .burger{ display:none; } }
.burger span{ display:block; height:2px; border-radius:2px; background:var(--ink);
              transition:transform .3s var(--ease), opacity .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--hdh) 0 0 0; z-index:99;
  background:var(--ink); color:#fff;
  padding:2rem var(--gut) 3rem; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.drawer.open{ opacity:1; visibility:visible; transform:none; }
.drawer a{
  display:block; text-decoration:none; color:#fff;
  font-size:1.35rem; font-weight:500; line-height:1.3;
  padding:.65rem 0; border-bottom:1px solid var(--line-ink);
}
.drawer a.drawer-util{ font-size:1rem; font-weight:400; opacity:.75; }
.drawer .sub{ padding:.8rem 0 1rem; }
.drawer .sub a{ font-size:1rem; font-weight:400; opacity:.7; padding:.4rem 0; border:0; }

/* -------------------------------------------------------------------- hero */

/* Zweigeteilt: links das Bild bis an den Fensterrand, rechts der Text auf
   ruhigem Navy, buendig mit der rechten Kante des 1220er Rasters.
   Bis 30.09.2026 lag der Text links auf einem Verlauf ueber einer
   vollflaechigen Speicherstadt-Aufnahme, wie beim Wettbewerber. Am 01.10. kam
   die Teilung mit Text links, seit 03.10. steht der Text rechts, damit auch die
   Position der Ueberschrift sich klar unterscheidet. Das Motiv waehlt
   build.py --hero. */
.hero{ color:#fff; background:var(--ink-deep); --tg:10px; }
/* Bild zwei Drittel, Text ein Drittel (03.10.2026). Der Text haengt damit nicht
   mehr an der rechten Rasterkante, sonst bliebe in der schmalen Spalte zu wenig
   Platz fuer "Hamburg-Wandsbek" in einer Zeile. Zwischen 821 und 1099 Pixeln
   waere ein Drittel zu schmal, dort 55 zu 45. */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  min-height:clamp(500px, 70vh, 680px);
}
@media (min-width:1100px){
  .hero-grid{ grid-template-columns:minmax(0,66fr) minmax(0,34fr); }
}
.hero-copy{
  align-self:center; background:var(--ink-deep);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.8rem,3vw,3.25rem);
}
.hero-shot{ margin:0; position:relative; min-height:100%; overflow:hidden; }
.hero-shot picture{ position:absolute; inset:0; display:block; }
.hero-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero h1{ color:#fff; margin-bottom:1.15rem; max-width:none;
          font-size:clamp(2rem, 2.85vw, 3.1rem); }
.nw{ white-space:nowrap; }
.hero .lede{ color:rgba(255,255,255,.84); margin-bottom:2rem; max-width:46ch;
             font-size:clamp(1rem, 1.15vw, 1.1rem); }
.hero .lede span{ display:block; }
.hero .btn-row{ gap:.8rem; }
.hero .btn-acc{ box-shadow:0 16px 34px -16px rgba(0,0,0,.8); }
/* Markenzeile als eigenes Band unter beiden Spalten. */
.hero-band{ background:var(--ink); border-top:1px solid rgba(255,255,255,.08); }
.hero-band .hero-mem{ border-top:0; padding-block:clamp(1rem,1.8vw,1.35rem); }

/* Test: einzelne Flaechen mit schmaler Fuge auf warmweissem Grund. Der Text
   fuellt seine Flaeche in voller Hoehe, die Markenzeile wird zur dritten Flaeche. */
.hero.is-tiles{ background:var(--paper); padding:var(--tg) var(--tg) 0; }
.hero.is-tiles .hero-grid{ gap:var(--tg); }
.hero.is-tiles .hero-shot,
.hero.is-tiles .hero-copy,
.hero.is-tiles .hero-band{ border-radius:var(--r); }
.hero.is-tiles .hero-copy{ align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.hero.is-tiles .hero-band{ margin-top:var(--tg); border-top:0; }

@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; min-height:0; }
  .hero-copy{ padding:clamp(2rem,7vw,2.6rem) var(--gut); }
  .hero-shot{ aspect-ratio:16/10; min-height:0; }
  .hero h1{ font-size:clamp(1.9rem, 7.4vw, 2.4rem); }
}


/* Markenzeile auf dem Bild: weisse Fassungen, damit sie auf der Aufnahme
   ueberhaupt tragen. Jede Marke ist ein Link zur Kammer beziehungsweise zum
   Verband. Bei Beruehrung legt sich eine helle Platte darunter und die weisse
   Fassung wechselt zur farbigen. Ohne diese Platte traegt keine der drei
   Farbfassungen auf der dunklen Aufnahme: das Blau des Bundes und die graue
   Schrift der Kammer verschwinden im Navy. */
.hero-mem{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(1.2rem,3.5vw,3rem);
  padding-top:clamp(1.1rem,2vw,1.5rem);
  border-top:1px solid rgba(255,255,255,.2);
}
.hero-mem-label{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.6); flex:none;
}
.hero-mem-logos{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(1.5rem,3.5vw,3rem);
}
/* Die Platte sitzt im negativen Aussenabstand, damit der Abstand zwischen den
   Marken derselbe bleibt wie vorher. */
.mem-lnk{
  display:inline-flex; align-items:center;
  padding:.4rem .5rem; margin:-.4rem -.5rem;
  border-radius:9px; text-decoration:none;
  transition:background-color .3s var(--ease);
}
.mem-sw{ position:relative; display:block; }
.hero-mem-logos img{
  display:block;
  height:clamp(25px,2.4vw,31px); width:auto; opacity:.88;
  transition:opacity .3s var(--ease);
}
.hero-mem-logos .sbv img{ height:clamp(35px,3.4vw,43px); }
.hero-mem-logos .mem-on{ position:absolute; top:0; left:0; opacity:0; }
.mem-lnk:hover,.mem-lnk:focus-visible{ background:rgba(255,255,255,.96); }
.mem-lnk:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.mem-lnk:hover img,.mem-lnk:focus-visible img{ opacity:0; }
.mem-lnk:hover .mem-on,.mem-lnk:focus-visible .mem-on{ opacity:1; }
@media (max-width:760px){
  .hero-mem{ gap:.9rem; }
  .hero-mem-logos{ gap:1.4rem; }
  .mem-lnk{ padding:.3rem .35rem; margin:-.3rem -.35rem; }
  .hero-mem-logos img{ height:19px; }
  .hero-mem-logos .sbv img{ height:26px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-mem-logos img,.mem-lnk{ transition:none; }
}

/* Die Innenseiten behalten die ruhige Vollfarbe. */
.phero{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.phero::before{
  content:""; position:absolute; right:-10%; top:-60%;
  width:52vw; height:52vw; max-width:700px; max-height:700px;
  border:1px solid rgba(255,255,255,.08); border-radius:50%;
}
.phero .wrap{ position:relative; z-index:1; }
.phero-in{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.phero h1{ color:#fff; max-width:22ch; }
.phero .lede{ color:var(--on-ink-soft); margin-top:1.1rem; }

/* Knapper heller Kopf fuer Verzeichnisseiten (seit 04.10.2026): Pfad, Titel,
   ein Satz, dann sofort der Inhalt. Kein Navy, kein Zierring. */
.phero.is-compact{ background:transparent; color:var(--text); border-bottom:1px solid var(--line-soft); }
.phero.is-compact::before{ display:none; }
.phero.is-compact .phero-in{ padding-block:clamp(1.6rem,3vw,2.6rem) clamp(1.4rem,2.6vw,2.2rem); }
.phero.is-compact h1{ color:var(--ink); max-width:none; font-size:clamp(2rem,3.4vw,2.9rem); }
.phero.is-compact .lede{ color:var(--text-soft); margin-top:.7rem; max-width:62ch; }
.phero.is-compact .crumbs{ color:var(--text-faint); margin-bottom:.9rem; }
.phero.is-compact .crumbs a:hover{ color:var(--acc-deep); }
.phero.is-compact + main > .sec:first-child{ padding-top:clamp(1.8rem,3.4vw,3rem); }

/* ------------------------------------------------- Feldbild im Gruppenkopf */

/* Vorher lag unter dem Text ein Bildstreifen im Format 21:8, gut 400 Pixel
   hoch. Er kostete den ganzen ersten Bildschirm und sagte nichts, was die
   Ueberschrift nicht schon gesagt hatte.

   Das Bild hat hier eine einzige Aufgabe: dem Besucher in einer halben
   Sekunde bestaetigen, dass die Kanzlei in seinem Fach arbeitet. Dafuer
   reicht ein Kreis neben dem Text. Der Text bleibt die Hauptsache und
   behaelt die linke Haelfte.

   Der Kreis stand erst vollstaendig im Abschnitt, mit gleichem Abstand oben
   und unten. Das war brav und leblos: eine Scheibe, die brav in ihrem Kasten
   sitzt. Jetzt ist er deutlich groesser als der Abschnitt hoch ist und laeuft
   oben und rechts aus dem Bild. Die Schnittkanten sind die Unterkante der
   Kopfzeile und der Fensterrand, also zwei Linien, die sowieso da sind. Damit
   liest sich der Anschnitt als Absicht und nicht als Unfall.

   --orb traegt den Durchmesser, --orb-top und --orb-off die Verschiebung.
   Alles andere rechnet daraus, damit Zierring und Abschnittshoehe
   automatisch mitgehen. */
.phero.has-orb{ --orb:clamp(96px,26vw,132px); }
.phero-orb{
  position:relative; margin:0 0 1.5rem;
  width:var(--orb); aspect-ratio:1;
  border-radius:50%; overflow:hidden; flex:none;
  background:var(--ink-2);
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
.phero-orb img{ width:100%; height:100%; object-fit:cover; }

@media (min-width:860px){
  .phero.has-orb{
    --orb:     clamp(320px,38vw,580px);
    /* Nach rechts aus dem Fenster. */
    --orb-off: clamp(-190px,-7vw,-56px);
    /* Nach oben unter die Kopfzeile. 27 Prozent des Durchmessers, also ein
       gutes Viertel der Scheibe, verschwindet hinter der Oberkante. */
    --orb-top: calc(var(--orb) * -.27);
    --ring:    56px;
  }
  /* static, damit der Kreis gegen den Abschnitt rechnet und am Fensterrand
     auslaufen darf statt am 1220er Raster. Die Textspalte bekommt dafuer
     ihre eigene Ebene. */
  .phero.has-orb .phero-in{
    position:static;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    /* Nur der sichtbare Teil der Scheibe zaehlt fuer die Hoehe: 73 Prozent
       des Durchmessers plus Luft darunter. Der Abschnitt richtet sich also
       nach dem, was man sieht, nicht nach dem, was angeschnitten ist. */
    min-height:calc(var(--orb) * .73 + clamp(2.5rem,4vw,4.5rem));
  }
  .phero.has-orb .crumbs,
  .phero.has-orb .phero-copy{ position:relative; z-index:2; max-width:min(56%,620px); }
  .phero.has-orb .crumbs{ width:100%; }
  .phero.has-orb .phero-orb{
    position:absolute; z-index:1; margin:0;
    top:var(--orb-top); right:var(--orb-off); transform:none;
    box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 34px 80px rgba(0,0,0,.42);
  }
  /* Der Zierring sass oben rechts im Nichts. Jetzt liegt er konzentrisch um
     das Feldbild und laeuft mit ihm aus dem Bild. Unten bleibt ein Bogen im
     Navy stehen, der den Anschnitt aufnimmt. */
  .phero.has-orb::before{
    width:calc(var(--orb) + var(--ring) * 2); height:calc(var(--orb) + var(--ring) * 2);
    max-width:none; max-height:none;
    top:calc(var(--orb-top) - var(--ring)); right:calc(var(--orb-off) - var(--ring));
    transform:none;
  }
}

.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
         font-size:.85rem; color:var(--on-ink-soft); margin-bottom:1.25rem; }
.crumbs a{ text-decoration:none; opacity:.85; }
.crumbs a:hover{ opacity:1; color:var(--acc-ink); }
.crumbs span{ opacity:.45; }

/* ------------------------------------------------------------------ service */

/* Sechs Felder, eigene Strichzeichnungen, ein Satz statt Textwand. Ruhe
   entsteht hier durch Haarlinien und Weissraum, nicht durch Schatten.

   Jedes Feld ist ein Verweis auf seinen Abschnitt auf der Leistungsseite.
   Vorher trugen die Felder ein Verhalten bei Beruehrung, ohne anklickbar zu
   sein: die Seite versprach etwas, das sie nicht einloeste.

   Alle sechs stehen auf demselben Grund. Das dunkle Feld fuer die
   grenzueberschreitende Beratung beherrschte das Raster und setzte damit eine
   Prioritaet, die die Kanzlei so nicht bestaetigt hat. */
.svc{ display:grid; gap:1px;
      border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
      background:var(--line);
      grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){ .svc{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:940px){ .svc{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Test: einzelne Karten mit 10 Pixeln Fuge, jede mit eigener Haarlinie und
   Rundung. Der Akzentstrich bei Beruehrung bleibt in der Karte (overflow). */
.svc.is-split{ gap:10px; border:0; border-radius:0; overflow:visible; background:none; }
.svc.is-split .svc-item{ border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.svc-item{
  position:relative; background:#fff; color:inherit; text-decoration:none;
  padding:clamp(1.7rem,2.6vw,2.4rem);
  display:flex; flex-direction:column;
  transition:background .35s var(--ease);
}
.svc-item:hover{ background:var(--paper-2); }
.svc-item::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--acc); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.svc-item:hover::before{ transform:scaleX(1); }
.svc-ic{ color:var(--acc); margin-bottom:1.4rem; width:44px; height:44px;
         transition:color .35s var(--ease); }
.svc-item:hover .svc-ic{ color:var(--acc-deep); }
.svc-item h3{ margin-bottom:.5rem; font-size:1.22rem; }
.svc-item p{ font-size:1rem; color:var(--text-soft); line-height:1.58; margin:0 0 1.2rem; }
/* Sichtbarer Hinweis darauf, wohin das Feld fuehrt. margin-top:auto legt die
   Haarlinie in allen sechs Feldern auf dieselbe Hoehe, egal wie lang der Satz
   in der jeweiligen Sprache ausfaellt. */
.svc-item .svc-more{
  margin-top:auto; padding-top:.95rem; border-top:1px solid var(--line-soft);
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.85rem; font-weight:600; letter-spacing:.01em;
  color:var(--acc-deep);
}
.svc-item .svc-more .arw{ transition:transform .3s var(--ease); }
.svc-item:hover .svc-more .arw{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .svc-item::before,.svc-item .svc-more .arw{ transition:none; }
}

/* ------------------------------------------------------------------ DATEV */

/* Mandantenportal (seit 04.10.2026, vorher "Wir arbeiten mit DATEV"). Der
   Abschnitt ist ein Weg fuer bestehende Mandanten, keine Werbung: links Titel
   und ein Satz, rechts die beiden Anmeldungen, darunter DATEV als Fussnote mit
   kleinem Logo. Steht nach den Mandantengruppen, vor dem Kanzleiabschnitt. */
.sec-portal{ padding-bottom:0; }
.portal{
  display:grid; gap:clamp(1.3rem,2.6vw,2.2rem) clamp(1.5rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.6rem);
}
@media (min-width:900px){
  .portal{ grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); align-items:center; }
  .portal-note{ grid-column:1 / -1; }
}
.portal-copy h2{ margin:.2rem 0 .6rem; }
.portal-lede{ color:var(--text-soft); max-width:46ch; margin:0; }
.portal-links{ display:grid; gap:.6rem; }

.portal-go{ width:100%; justify-content:space-between; padding-block:1.05rem; font-size:1.02rem; }
.portal-go.is-soon{
  display:flex; flex-direction:column; align-items:flex-start; gap:.2rem;
  padding:.95rem 1.15rem; border:1px dashed var(--line); border-radius:var(--r-sm);
  color:var(--text-soft);
}
.portal-go-t{ font-weight:600; color:var(--text); opacity:.55; }
.portal-go-d{ font-size:.9rem; }

.portal-ano{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.15rem; border:1px solid var(--line); border-radius:var(--r-sm);
  text-decoration:none; color:var(--text);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.portal-ano:hover{ border-color:var(--acc); background:var(--acc-soft); }
.portal-ano:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }
.portal-ano-t{ display:block; font-weight:600; }
.portal-ano-d{ display:block; font-size:.9rem; color:var(--text-soft); margin-top:.15rem; }
.portal-ano-a{ flex:none; display:inline-flex; align-items:center; gap:.45rem;
               font-weight:600; font-size:.95rem; color:var(--acc-deep); }
.portal-ano-a .arw{ transition:transform .3s var(--ease); }
.portal-ano:hover .arw{ transform:translateX(4px); }

.portal-note{
  display:flex; align-items:center; gap:.8rem; margin:0;
  padding-top:1.1rem; border-top:1px solid var(--line-soft);
  font-size:.88rem; color:var(--text-soft);
}
.portal-note img{ flex:none; width:34px; height:auto; }
@media (prefers-reduced-motion: reduce){
  .portal-ano,.portal-ano-a .arw{ transition:none; }
}

/* --------------------------------------------- Leistungsseite, sechs Bloecke */

.lst{ display:grid; gap:clamp(2rem,3.4vw,3.2rem) clamp(2rem,4vw,4.5rem); }
@media (min-width:860px){ .lst{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Jeder Block traegt seinen Anker, weil die Felder auf der Startseite direkt
   hierher fuehren. Der Abstand nach oben haelt die Ueberschrift frei von der
   fest stehenden Kopfzeile. */
.lst-item{ padding-top:1.6rem; border-top:1px solid var(--line); position:relative;
           scroll-margin-top:calc(var(--hdh) + 2rem); }
.lst-item::before{
  content:""; position:absolute; left:0; top:-1px; width:44px; height:2px;
  background:var(--acc);
}
.lst-num{ font-size:.76rem; font-weight:600; letter-spacing:.12em;
          color:var(--text-faint); display:block; margin-bottom:1.1rem; }
.lst-item .svc-ic{ margin-bottom:1rem; }
.lst-item h2{ margin-bottom:.55rem; }
.lst-teaser{ font-size:1rem; color:var(--text-soft); line-height:1.6;
             margin:0 0 .9rem; max-width:48ch; }
.lst-item .ticks li{ font-size:.94rem; padding-block:.42rem; }
/* Kurz aufleuchten, wenn man ueber ein Feld der Startseite hier gelandet ist. */
.lst-item:target::before{ width:100%; transition:width .5s var(--ease); }

/* ------------------------------------------------- Mandanten als Aufzaehlung */

/* Die Vorlage listet die Mandantschaft schlicht neben einem Absatz Text. Die
   Idee bleibt, nur die Zeilen sind hier Verweise auf die jeweilige Seite.

   Statt der Haken steht jetzt in jeder Zeile ein Pfeil, und zwar dauerhaft
   sichtbar. Ein Haken sagt "trifft zu", ein Pfeil sagt "hier geht es weiter".
   Zehn Zeilen mit Haken sahen aus wie eine Aufzaehlung von Eigenschaften,
   obwohl jede davon eine eigene Seite oeffnet. */
.glist{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:start; }
@media (min-width:940px){
  .glist{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
}
.glist-copy p{ color:var(--on-ink-soft); }
.glist-links{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0 clamp(1rem,2.5vw,2.5rem);
  border-top:1px solid var(--line-ink);
}
@media (min-width:560px){ .glist-links{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.glist-links li{ border-bottom:1px solid var(--line-ink); }
.glist-links a{
  display:flex; align-items:center; gap:1rem;
  padding:.9rem .2rem; text-decoration:none;
  font-size:1rem; color:rgba(255,255,255,.9);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.glist-links a:hover{ color:#fff; padding-left:.55rem; }
.glist-links .gl-arw{
  flex:none; margin-left:auto; color:var(--acc-ink); opacity:.8;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.glist-links a:hover .gl-arw{ opacity:1; transform:translateX(3px); }
/* Test --glist-thumbs: das runde Gruppenfoto gleitet bei Beruehrung vor den
   Namen. Breite 0 im Ruhezustand, der negative Rand gleicht die Luecke der
   Flexbox aus, damit die Zeile ohne Foto exakt so steht wie vorher. Nur bei
   echter Maus, auf Telefonen bleibt die Liste unveraendert. */
.gl-thumb{ display:none; }
@media (hover:hover){
  .glist-links.has-thumbs .gl-thumb{
    display:block; flex:none; width:0; height:40px; margin:-.5rem -1rem -.5rem 0;
    border-radius:50%; overflow:hidden; opacity:0; transform:scale(.6);
    box-shadow:0 0 0 2px rgba(255,255,255,.14);
    transition:width .3s var(--ease), margin .3s var(--ease),
               opacity .25s var(--ease), transform .3s var(--ease);
  }
  .glist-links.has-thumbs .gl-thumb img{ width:40px; height:40px; object-fit:cover; display:block; }
  .glist-links.has-thumbs a:hover .gl-thumb,
  .glist-links.has-thumbs a:focus-visible .gl-thumb{
    width:40px; margin-right:0; opacity:1; transform:none;
  }
  /* Das Foto bringt die Bewegung, der Einzug entfaellt. */
  .glist-links.has-thumbs a:hover{ padding-left:.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .glist-links a:hover{ padding-left:.2rem; }
  .glist-links.has-thumbs .gl-thumb{ transition:none; }
  .glist-links .gl-arw{ transition:none; }
}

/* -------------------------------------------------------------- group cards */

.grid-cards{ display:grid; gap:clamp(1rem,1.8vw,1.5rem);
             grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.grid-cards.is-groups{ grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .grid-cards.is-groups{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){
  .grid-cards.is-groups{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* 10 Gruppen in drei Spalten lassen eine Karte allein stehen. Die letzte
     (Privatpersonen) laeuft deshalb quer ueber die ganze Zeile. */
  .grid-cards.is-groups > .card:last-child:nth-child(3n+1){
    grid-column:1 / -1; flex-direction:row; }
  .grid-cards.is-groups > .card:last-child:nth-child(3n+1) .card-media{ flex:0 0 calc((100% - 2 * clamp(1rem,1.8vw,1.5rem)) / 3); }
  .grid-cards.is-groups > .card:last-child:nth-child(3n+1) .card-media img{ height:100%; aspect-ratio:auto; min-height:260px; }
  .grid-cards.is-groups > .card:last-child:nth-child(3n+1) .card-body{ justify-content:center; padding:2rem 2.2rem; }
  .grid-cards.is-groups > .card:last-child:nth-child(3n+1) .go{ margin-top:.4rem; }
}
.card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  text-decoration:none;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .3s var(--ease);
}
.card:hover{ box-shadow:var(--sh-lg); transform:translateY(-4px); border-color:transparent; }
.card-media{ overflow:hidden; background:var(--paper-3); }
.card-media img{ width:100%; aspect-ratio:3/2; object-fit:cover;
                 transition:transform .6s var(--ease); }
.card:hover .card-media img{ transform:scale(1.045); }
.card-body{ padding:1.25rem 1.35rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.card-kicker{ font-size:.73rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
              color:var(--acc-deep); margin-bottom:.55rem; }
.card h3{ font-size:1.16rem; margin-bottom:.5rem; line-height:1.28; }
.card p{ font-size:.96rem; color:var(--text-soft); line-height:1.55; margin-bottom:1.1rem; }
.card .go{ margin-top:auto; display:inline-flex; align-items:center; gap:.4rem;
           font-size:.9rem; font-weight:600; color:var(--acc-deep); }
.card .go .arw{ transition:transform .3s var(--ease); }
.card:hover .go .arw{ transform:translateX(4px); }

/* ------------------------------------------- weiterfuehrende Gruppen, kompakt */

/* Am Ende einer Gruppenseite sind die anderen Gruppen ein Nebenweg. Vorher
   standen dort drei Fotokacheln im Format 3:2, also der zweitgroesste
   Bildblock der Seite fuer den unwichtigsten Inhalt. Jetzt tragen die Zeilen
   dasselbe Kreisbild wie der Seitenkopf, nur klein. */
/* Der Block ist jetzt so flach, dass die volle Abschnittshoehe darunter eine
   Luecke reisst. Den Abstand zum Handlungsaufruf setzt dessen eigener
   Innenabstand. */
.sec-rel{ padding-bottom:0; }
.relgrid{ display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:820px){
  .relgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(1.5rem,3vw,3rem); }
}
.relcard{
  display:flex; align-items:flex-start; gap:1.1rem;
  padding:1.35rem .2rem; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--line);
  transition:padding-left .25s var(--ease);
}
.relcard:hover{ padding-left:.5rem; }
.relcard-orb{
  flex:none; width:58px; height:58px; border-radius:50%; overflow:hidden;
  background:var(--paper-3);
}
.relcard-orb img{ width:100%; height:100%; object-fit:cover;
                  transition:transform .5s var(--ease); }
.relcard:hover .relcard-orb img{ transform:scale(1.06); }
.relcard-body{ display:block; min-width:0; }
.relcard-t{ display:block; font-weight:600; font-size:1.02rem; line-height:1.35;
            letter-spacing:-.006em; margin-bottom:.2rem; }
.relcard-d{ display:block; font-size:.93rem; color:var(--text-soft); line-height:1.5; }
.relcard .arw{ flex:none; margin-top:.55rem; color:var(--acc-deep); opacity:.75;
               transition:transform .3s var(--ease), opacity .25s var(--ease); }
.relcard:hover .arw{ transform:translateX(4px); opacity:1; }
@media (prefers-reduced-motion: reduce){
  .relcard,.relcard-orb img,.relcard .arw{ transition:none; }
  .relcard:hover{ padding-left:.2rem; }
}

.card-cta{ background:var(--ink); border-color:var(--ink); }
.card-cta .card-body{ justify-content:center; padding:clamp(1.6rem,2.4vw,2.1rem) 1.4rem;
                      min-height:220px; }
.card-cta .card-kicker{ color:var(--acc-ink); }
.card-cta h3{ color:#fff; font-size:1.35rem; margin-bottom:.6rem; }
.card-cta p{ color:var(--on-ink-soft); }
.card-cta .go{ color:var(--acc-ink); }

/* ------------------------------------------------------------------ process */

/* Drei Schritte als Raster aus Haarlinien statt als Kaesten. Vorher waren es
   vier, und der dritte hiess "Entscheidung": die Seite erklaerte dem Besucher
   erst einmal, dass die Kanzlei ueber ihn befindet. Anfrage, Erstgespraech,
   Zusammenarbeit sagt dasselbe, ohne wie ein Bewerbungsverfahren zu klingen. */
.steps{ display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:880px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.step{
  position:relative; padding:clamp(1.5rem,2.4vw,2rem) 0 clamp(1.6rem,2.6vw,2.2rem);
  border-bottom:1px solid var(--line);
}
@media (min-width:880px){
  .step{ border-bottom:0; padding-inline:clamp(1.1rem,2.2vw,2rem) clamp(1.1rem,2.2vw,2.4rem); }
  .step:first-child{ padding-left:0; }
  .step + .step{ border-left:1px solid var(--line); }
}
/* kurzer Akzentstrich auf der Oberkante, waechst bei Beruehrung */
.step::before{
  content:""; position:absolute; left:0; top:-1px; width:34px; height:2px;
  background:var(--acc); transition:width .4s var(--ease);
}
@media (min-width:880px){ .step:not(:first-child)::before{ left:clamp(1.1rem,2.2vw,2rem); } }
.step:hover::before{ width:64px; }
.step .num{
  display:block; font-family:var(--ff); font-weight:600;
  font-size:clamp(1.6rem,2.4vw,2rem); line-height:1;
  color:var(--acc); margin-bottom:.9rem; font-variant-numeric:tabular-nums;
}
.step h3{ font-size:1.16rem; margin-bottom:.5rem; }
.step p{ font-size:1rem; color:var(--text-soft); line-height:1.58; max-width:42ch; }
.on-ink-bg .step{ border-color:var(--line-ink); }
.on-ink-bg .step h3{ color:#fff; }
.on-ink-bg .step .num{ color:var(--acc-ink); }
@media (prefers-reduced-motion: reduce){ .step::before{ transition:none; } }

/* --------------------------------------------------------------- split band */

.split{ display:grid; gap:clamp(1.8rem,3.5vw,4rem); align-items:center; }
@media (min-width:920px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split.wide-media{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .split.media-first > .split-media{ order:-1; }
}
.split.top{ align-items:start; }
.split-media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); }
.split-media img{ width:100%; object-fit:cover; }
.figcap{ font-size:.82rem; color:var(--text-faint); margin-top:.7rem; }
/* Kanzleiabschnitt der Startseite: echtes Foto mit sachlicher Bildzeile darunter.
   Rundung und Schatten sitzen am Bild, damit die Zeile frei darunter steht. */
.split-media.about-fig{ margin:0; border-radius:0; overflow:visible; box-shadow:none; }
.about-fig img{ display:block; border-radius:var(--r-lg); box-shadow:var(--sh-md); }
.about-fig figcaption{ font-size:.9rem; color:var(--text-soft); margin-top:.85rem; }

.darkcard{
  background:var(--ink); color:#fff; border-radius:var(--r-lg); overflow:hidden;
  display:grid; align-items:center;
}
@media (min-width:920px){ .darkcard{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr); } }
.darkcard-copy{ padding:clamp(1.8rem,3.5vw,3.2rem); }
.darkcard h2{ color:#fff; margin-bottom:1rem; }
.darkcard p{ color:var(--on-ink-soft); }
.darkcard-media{ padding:clamp(0px,2vw,1.6rem); }
.darkcard-media img{ width:100%; border-radius:var(--r); object-fit:cover; }
@media (max-width:919px){ .darkcard-media{ padding:0 1.2rem 1.2rem; } }

/* ------------------------------------------------------------------- quote */

.quote{ background:var(--paper-2); border-radius:var(--r-lg);
        padding:clamp(1.8rem,3.5vw,3rem); }
.on-paper2 .quote{ background:#fff; box-shadow:var(--sh); }
.quote blockquote{ margin:0; font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.5;
                   font-weight:500; letter-spacing:-.01em; }
.quote .attr{ margin-top:1.2rem; font-size:.87rem; color:var(--text-faint); }
.on-ink-bg .quote{ background:var(--ink-2); }
.on-ink-bg .quote blockquote{ color:#fff; }
.on-ink-bg .quote .attr{ color:var(--on-ink-soft); }

/* -------------------------------------------------------------------- lists */

.deflist{ margin:0; border-top:1px solid var(--line); }
.deflist > div{ display:grid; gap:.35rem 2rem; padding:1.15rem 0;
                border-bottom:1px solid var(--line); grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){ .deflist > div{ grid-template-columns:minmax(0,.4fr) minmax(0,1fr); } }
.deflist dt{ font-weight:600; font-size:1rem; }
.deflist dd{ margin:0; font-size:.98rem; color:var(--text-soft); line-height:1.6; }
.deflist.on-ink{ border-color:var(--line-ink); }
.deflist.on-ink > div{ border-color:var(--line-ink); }
.deflist.on-ink dt{ color:#fff; }
.deflist.on-ink dd{ color:var(--on-ink-soft); }

.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{ position:relative; padding:.6rem 0 .6rem 1.9rem; font-size:1rem;
           line-height:1.6; color:var(--text-soft); }
.ticks li strong{ display:block; color:var(--text); font-weight:600; margin-bottom:.05rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.95em; width:11px; height:11px;
  border-radius:50%; background:var(--acc-soft);
  box-shadow:inset 0 0 0 2px var(--acc);
}
.ticks.on-ink li{ color:var(--on-ink-soft); }

/* Unterlagen je Mandantengruppe (seit 07.10.2026): zweispaltige Checkliste */
.sec-docs{ padding-top:0; }
.sec-docs .wrap{ border-top:1px solid var(--line); padding-top:clamp(2.6rem,5vw,4rem); }
.docs-list{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:clamp(2rem,4vw,3.5rem); margin-top:1.6rem; }
@media (min-width:860px){ .docs-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ticks.on-ink li strong{ color:#fff; }

/* --------------------------------------------------------------------- faq */

.faq{ display:grid; gap:.7rem; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
              transition:box-shadow .3s var(--ease), border-color .3s var(--ease); }
.faq details[open]{ box-shadow:var(--sh-md); border-color:transparent; }
.faq summary{
  list-style:none; cursor:pointer; padding:1.15rem 3.4rem 1.15rem 1.35rem;
  position:relative; font-size:1.06rem; font-weight:600; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:1.1rem; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; background:var(--paper-2);
  transition:background .25s var(--ease);
}
.faq summary::before{
  content:""; position:absolute; right:1.1rem; top:50%; z-index:1;
  width:28px; height:28px;
  background-image:
    linear-gradient(var(--acc-deep),var(--acc-deep)),
    linear-gradient(var(--acc-deep),var(--acc-deep));
  background-size:11px 1.5px, 1.5px 11px;
  background-position:center, center;
  background-repeat:no-repeat;
  transform:translateY(-50%);
  transition:background-size .25s var(--ease);
}
.faq details[open] summary::before{ background-size:11px 1.5px, 1.5px 0; }
.faq details[open] summary::after{ background:var(--acc-soft); }
.faq .faq-body{ padding:0 3.4rem 1.35rem 1.35rem; font-size:1rem; color:var(--text-soft);
                line-height:1.7; max-width:70ch; }

/* ---------------------------------------------------------------- downloads */

.dl{ display:grid; gap:.7rem; }
.dl a{
  display:grid; align-items:center; gap:.2rem 1.2rem;
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:1.05rem 1.3rem; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:box-shadow .3s var(--ease), transform .25s var(--ease), border-color .3s var(--ease);
}
.dl a:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); border-color:transparent; }
.dl .ext{ font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--acc-deep);
          background:var(--acc-soft); border-radius:6px; padding:.32rem .5rem; }
.dl .t{ font-size:1rem; font-weight:600; }
.dl .m{ font-size:.86rem; color:var(--text-faint); }
.dl .arw{ color:var(--text-faint); transition:transform .3s var(--ease); }
.dl a:hover .arw{ transform:translateX(4px); color:var(--acc-deep); }

/* ----------------------------------------------------------------- members */

.members{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
          gap:clamp(2rem,4.5vw,4rem); }
/* Grau in Farbe bei Beruehrung, so wie es die Kanzlei auf ihrer Seite hat.
   Die Marken bleiben unveraendert, nur die Saettigung wird zurueckgenommen. */
.members a{ display:inline-flex; align-items:center; border-radius:6px; }
.members a:focus-visible{ outline:2px solid var(--acc-deep); outline-offset:4px; }
.members img{
  display:block;
  height:clamp(28px,3vw,36px); width:auto;
  filter:grayscale(1) contrast(.85) opacity(.78);
  transition:filter .35s var(--ease), transform .35s var(--ease);
}
.mem-head{ justify-content:center; display:flex; margin-bottom:1.6rem; }
.members img:hover,.members a:hover img,.members a:focus-visible img{
  filter:none; transform:translateY(-2px);
}
.members .sbv{ height:clamp(40px,4.2vw,50px); }
@media (prefers-reduced-motion: reduce){ .members img{ transition:none; } }

/* --------------------------------------------------------------------- CTA */

.cta{ background:var(--ink); color:#fff; border-radius:var(--r-lg); overflow:hidden;
      display:grid; align-items:center; }
@media (min-width:940px){ .cta{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.cta-copy{ padding:clamp(2rem,3.5vw,3.4rem); }
.cta-copy h2{ color:#fff; margin-bottom:.9rem; }
.cta-copy p{ color:var(--on-ink-soft); max-width:46ch; }
.cta-media{ position:relative; min-height:240px; align-self:stretch; }
.cta-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:939px){ .cta-media{ min-height:220px; } }

/* -------------------------------------------------------------------- form */

.form-wrap{ max-width:820px; }

/* Anfrageseite seit 03.10.2026: kein blauer Kopf mehr. Links eine kurze,
   freundliche Einleitung und der direkte Weg ueber Telefon und E-Mail, rechts
   sofort der Fragebogen. Die Hinweise stehen als kleine Notiz darunter. */
.anf{ padding-top:clamp(2.2rem,4.5vw,4rem); }
.anf-grid{ display:grid; gap:clamp(2rem,4vw,4.5rem); align-items:start; }
@media (min-width:960px){
  .anf-grid{ grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr); }
  .anf-side{ position:sticky; top:calc(var(--hdh) + 2rem); }
}
.anf-side h1{ margin-bottom:.9rem; text-wrap:balance; }
.anf-lede{ color:var(--text-soft); font-size:1.06rem; line-height:1.6; margin:0 0 2rem; max-width:36ch; }
.anf-direct{ border-top:1px solid var(--line); padding-top:1.4rem; }
.anf-direct-t{ font-weight:600; font-size:1.05rem; margin:0 0 .25rem; }
.anf-direct-b{ color:var(--text-soft); font-size:.95rem; margin:0 0 1rem; }
.anf-ch{
  display:flex; gap:.9rem; align-items:center; text-decoration:none; color:inherit;
  padding:.8rem .95rem; margin-bottom:.55rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.anf-ch:hover{ border-color:var(--acc); background:var(--paper-2); }
.anf-ch:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.anf-ch .ic{ flex:none; display:grid; place-items:center; width:38px; height:38px;
             border-radius:50%; background:var(--acc-soft); color:var(--acc-deep); }
.anf-ch .k{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.anf-ch .v{ display:block; font-size:1.02rem; font-weight:600; overflow-wrap:anywhere; }
.anf-main .frail{ margin-top:0; }

/* --- Verzweigter Fragebogen (03.10.2026) ---------------------------------
   Schritt 1 als ruhige Liste. Unter der gewaehlten Art klappt eine kleine
   Nachfrage auf, ohne neuen Schritt. */
.tlist{ display:grid; gap:.5rem; }
.tpick .opt{ width:100%; }
.tpop{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .35s var(--ease), opacity .25s var(--ease), margin .35s var(--ease);
}
.tpop-in{ min-height:0; overflow:hidden; }
.tpop{ margin:0 0 0 2.2rem; }
.tpick:has(input[name="type"]:checked) .tpop{
  grid-template-rows:1fr; opacity:1; margin:.6rem 0 .5rem 2.2rem;
}
.tpop-q{ font-size:.9rem; font-weight:600; margin:0 0 .5rem; }
@media (prefers-reduced-motion: reduce){ .tpop{ transition:none; } }

/* Kleine Auswahl als Pillen: Rechtsform, Umsatz, Zeitpunkt. */
.fchips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.fchip{ position:relative; cursor:pointer; }
.fchip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.fchip span{
  display:inline-block; padding:.55rem .95rem; border-radius:var(--pill);
  border:1px solid var(--line); background:#fff; font-size:.92rem; line-height:1.2;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.fchip:hover span{ border-color:rgba(16,35,63,.35); }
.fchip input:checked + span{ background:var(--ink); border-color:var(--ink); color:#fff; }
.fchip input:focus-visible + span{ outline:2px solid var(--acc); outline-offset:2px; }

/* Schritt 2 zeigt nur die Gruppen der gewaehlten Art. Ohne JavaScript fehlt
   data-type, dann bleibt alles sichtbar. */
form[data-type] [data-for]{ display:none; }
form[data-type="unternehmen"] [data-for~="unternehmen"],
form[data-type="selbst"] [data-for~="selbst"],
form[data-type="frei"] [data-for~="frei"],
form[data-type="privat"] [data-for~="privat"],
form[data-type="gruendung"] [data-for~="gruendung"]{ display:block; }

.ferr{ margin:0 0 .6rem; min-height:1.2em; font-size:.9rem; font-weight:500; color:#A3322A; }
.fstep.has-err .fnav .btn-primary,.fstep.has-err .fnav .btn-acc{ animation:fshake .35s var(--ease); }
@keyframes fshake{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
@media (prefers-reduced-motion: reduce){ .fstep.has-err .fnav .btn{ animation:none; } }

.anf-ch.is-static{ cursor:default; }
.anf-ch.is-static:hover{ border-color:var(--line); background:#fff; }
.anf-small{ font-size:.86rem; color:var(--text-soft); line-height:1.55; margin:.6rem 0 0; }
/* In der schmaleren Formularspalte paarweise statt drei nebeneinander, sonst
   steht bei vier Optionen eine allein in der zweiten Reihe. */
@media (min-width:560px){ .anf .opts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.anf-note{
  max-width:820px; margin-top:clamp(2rem,3.5vw,2.8rem);
  background:var(--paper-2); border-radius:var(--r-sm);
  padding:1rem 1.2rem;
}
.anf-note p{ margin:0; font-size:.88rem; line-height:1.6; color:var(--text-soft); }
.anf-note strong{ color:var(--text); font-weight:600; }
@media (max-width:959px){
  .anf-lede{ margin-bottom:1.4rem; }
  .anf-direct{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
  .anf-direct-t,.anf-direct-b{ grid-column:1 / -1; }
  .anf-direct-b{ margin-bottom:.45rem; }
  .anf-ch{ margin:0; }
}
@media (max-width:520px){ .anf-direct{ grid-template-columns:1fr; } }
.fstep{ display:none; }
.fstep.active{ display:block; animation:fade .4s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .fstep.active{ animation:none; } }

.frail{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
        margin:0 0 clamp(1.8rem,3vw,2.6rem); padding:0; }
.frail li{ list-style:none; }
.frail .bar{ display:block; height:3px; border-radius:3px; background:var(--paper-3);
             position:relative; overflow:hidden; }
.frail .bar::after{ content:""; position:absolute; inset:0; background:var(--acc);
                    transform:scaleX(0); transform-origin:left;
                    transition:transform .5s var(--ease); }
.frail li.done .bar::after,.frail li.now .bar::after{ transform:scaleX(1); }
.frail .lbl{ display:block; margin-top:.55rem; font-size:.78rem; color:var(--text-faint);
             min-height:2.6em; line-height:1.35; }
.frail li.now .lbl{ color:var(--ink); font-weight:500; }

fieldset{ border:0; margin:0 0 2rem; padding:0; }
legend{ font-size:clamp(1.3rem,1.9vw,1.65rem); font-weight:600; line-height:1.25;
        margin-bottom:.45rem; padding:0; }
.fhint{ font-size:.98rem; color:var(--text-soft); margin-bottom:1.5rem; max-width:56ch; }

.fgroup{ margin-bottom:1.4rem; }
.fgroup > .flabel{ display:block; font-size:.88rem; font-weight:600; margin-bottom:.55rem; }
.fgroup .fsub{ font-size:.84rem; color:var(--text-faint); font-weight:400; }

.frow{ display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .frow.two{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.85rem 1rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230C3F6C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem;
}
textarea{ min-height:130px; resize:vertical; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(20,89,143,.16);
}

.opts{ display:grid; gap:.55rem;
       grid-template-columns:repeat(auto-fit,minmax(min(100%,195px),1fr)); }
.opt{
  position:relative; display:flex; align-items:flex-start; gap:.65rem;
  padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; cursor:pointer; font-size:.97rem; line-height:1.4;
  transition:border-color .2s var(--ease), background .2s var(--ease),
             box-shadow .2s var(--ease);
}
.opt:hover{ border-color:rgba(16,35,63,.3); box-shadow:var(--sh); }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.opt .box{
  flex:none; width:18px; height:18px; margin-top:.1rem;
  border:1.5px solid rgba(16,35,63,.3); border-radius:5px;
  display:grid; place-items:center;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.opt.radio .box{ border-radius:50%; }
.opt .box::after{ content:""; width:9px; height:9px; border-radius:2px; background:var(--acc);
                  transform:scale(0); transition:transform .18s var(--ease); }
.opt.radio .box::after{ border-radius:50%; width:8px; height:8px; }
.opt input:checked ~ .box{ border-color:var(--acc-deep); }
.opt input:checked ~ .box::after{ transform:scale(1); }
.opt:has(input:checked){ border-color:var(--acc-deep); background:var(--acc-soft); }
.opt input:focus-visible ~ .box{ outline:2px solid var(--acc); outline-offset:2px; }
.opt .t{ display:block; }
.opt .d{ display:block; font-size:.84rem; color:var(--text-faint); margin-top:.1rem; }

.consent{ display:flex; gap:.75rem; align-items:flex-start; font-size:.92rem;
          color:var(--text-soft); line-height:1.6; padding:1.1rem;
          border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-2); }
.consent a{ color:var(--acc-deep); }

.fnav{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
       padding-top:1.5rem; border-top:1px solid var(--line); }
.fnav .spacer{ margin-left:auto; }
.fnote{ font-size:.87rem; color:var(--text-faint); }

.fdone{ display:none; }
.fdone.show{ display:block; animation:fade .45s var(--ease); }
.fdone .tick{ width:56px; height:56px; border-radius:50%; background:var(--acc);
              display:grid; place-items:center; margin-bottom:1.5rem; }

/* ------------------------------------------------------------------ callout */

.callout{ border:1px solid var(--line); border-radius:var(--r);
          background:var(--paper-2); padding:clamp(1.3rem,2.2vw,1.9rem); }
.callout h2,.callout h3{ font-size:1.14rem; margin-bottom:.7rem; }
.callout p,.callout li{ font-size:.97rem; color:var(--text-soft); line-height:1.6; }
.callout ul{ margin:0; padding:0; list-style:none; }
.callout li{ position:relative; padding-left:1.5rem; margin-bottom:.55rem; }
.callout li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
                     border-radius:50%; background:var(--acc); }
.callout.on-ink{ background:var(--ink-2); border-color:var(--line-ink); }
.callout.on-ink h2,.callout.on-ink h3{ color:#fff; }
.callout.on-ink p,.callout.on-ink li{ color:var(--on-ink-soft); }

/* ------------------------------------------------------------------ contact */

.ccard{ display:grid; gap:clamp(1.6rem,3vw,3rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:860px){ .ccard{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cline{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0;
        border-bottom:1px solid var(--line); }
.cline .ic{ flex:none; display:grid; place-items:center; width:40px; height:40px;
            border-radius:50%; background:var(--acc-soft); color:var(--acc-deep); }
.cline > span:last-child{ display:block; min-width:0; padding-top:.15rem; }
.cline .k{ display:block; font-size:.77rem; letter-spacing:.1em; text-transform:uppercase;
           color:var(--text-faint); margin-bottom:.2rem; }
.cline .v{ display:block; font-size:1.06rem; line-height:1.4; overflow-wrap:anywhere; }
.cline a{ text-decoration:none; border-bottom:1px solid var(--line); }
.cline a:hover{ border-color:var(--acc); color:var(--acc-deep); }

/* -------------------------------------------------------------------- chips */

.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{ font-size:.87rem; line-height:1; color:var(--text-soft);
       border:1px solid var(--line); border-radius:var(--pill);
       padding:.55rem .9rem; background:#fff; }

.imggrid{ display:grid; gap:clamp(1rem,2vw,1.5rem);
          grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); align-items:start; }
.imggrid .split-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ------------------------------------------------------------------- footer */

.ft{ background:var(--ink-deep); color:#fff; padding-block:clamp(3rem,5vw,4.5rem) 0; }
.ft-top{ display:grid; gap:clamp(2rem,3.5vw,3rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .ft-top{ grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); } }
.ft .ft-h{ font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
           color:var(--on-ink-soft); margin-bottom:1rem; line-height:1.4; }
.ft ul{ list-style:none; margin:0; padding:0; }
.ft li{ margin-bottom:.5rem; }
.ft a{ text-decoration:none; font-size:.95rem; opacity:.8;
       transition:opacity .2s var(--ease), color .2s var(--ease); }
.ft a:hover{ opacity:1; color:var(--acc-ink); }
.ft-brand img{ height:36px; margin-bottom:1.2rem; }
.ft-brand p{ font-size:.95rem; color:var(--on-ink-soft); max-width:34ch; }
.ft-bot{ margin-top:clamp(2.2rem,3.5vw,3rem); padding-block:1.5rem;
         border-top:1px solid var(--line-ink);
         display:flex; flex-wrap:wrap; gap:.9rem 2rem; align-items:center;
         font-size:.85rem; color:var(--on-ink-soft); }
.ft-bot .spacer{ margin-left:auto; }
.ft-bot a{ font-size:.85rem; }
.sr-spacer{ display:none; }
@media (min-width:900px){ .sr-spacer{ display:block; height:1rem; margin-bottom:1rem; } }

.mockbar{ background:var(--ink-2); color:rgba(255,255,255,.88); font-size:.82rem; padding:.55rem 0;
          text-align:center; }
.mockbar strong{ font-weight:600; }

/* ---------------------------------------------------------------- reveal fx */

.js .rv{ opacity:0; transform:translateY(16px);
         transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .rv{ opacity:1; transform:none; transition:none; }
  .card,.card-media img,.btn,.step,.dl a{ transition:none; }
}

/* ------------------------------------------------------------------ helpers */

.mt-s{ margin-top:1rem; } .mt-m{ margin-top:1.75rem; } .mt-l{ margin-top:clamp(2.2rem,3.5vw,3rem); }
.mb-m{ margin-bottom:1.75rem; }
.center{ text-align:center; }
.maxw-60{ max-width:60ch; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }