/* ==========================================================================
   Hejzel theme: fonts and the bridge between WordPress block markup and the
   draft's site.css. site.css stays as in the draft; everything WordPress
   specific lives here.
   ========================================================================== */

@font-face{ font-family:'Source Sans 3'; font-style:normal; font-weight:200 900; font-display:swap;
  src:url("fonts/source-sans-3-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Source Sans 3'; font-style:normal; font-weight:200 900; font-display:swap;
  src:url("fonts/source-sans-3-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Groups and figures: no default spacing from WordPress. */
/* :where() keeps these at zero specificity, so the draft's own margins
   (.shead, .sec-head, .mt-m ...) still win. */
:where(.wp-block-group,figure.wp-block-image,.wp-element-caption,.wp-block-buttons){ margin:0; }

/* Arrow used after links and buttons, same drawing as the draft's .arw. */
:root{
  --arw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12' fill='none'%3E%3Cpath d='M9 1l5 5-5 5M14 6H0' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- buttons */
.wp-block-buttons{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.wp-block-buttons.center{ justify-content:center; }
.wp-block-button{ margin:0; }
.wp-block-button__link{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff); font-size:.95rem; font-weight:600; line-height:1.2;
  padding:.95rem 1.7rem; border-radius:var(--pill); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  background:var(--ink); color:#fff;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.is-style-acc .wp-block-button__link{ background:var(--acc); }
.is-style-acc .wp-block-button__link:hover{ background:#1A6DAB; box-shadow:0 10px 28px rgba(0,25,74,.35); }
.is-style-primary .wp-block-button__link:hover{ background:var(--ink-deep); box-shadow:var(--sh-md); }
.is-style-ghost .wp-block-button__link{ background:transparent; color:var(--ink); border-color:var(--line); }
.is-style-ghost .wp-block-button__link:hover{ border-color:var(--ink); }
.is-style-ghost-ink .wp-block-button__link{ background:transparent; color:#fff; border-color:var(--line-ink); }
.is-style-ghost-ink .wp-block-button__link:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.is-style-tlink .wp-block-button__link{ background:none; padding:0; border:0; border-radius:0; color:var(--acc-deep); gap:.45rem; transition:gap .25s var(--ease); }
.is-style-tlink .wp-block-button__link:hover{ gap:.75rem; }
.on-ink-bg .is-style-tlink .wp-block-button__link{ color:var(--acc-ink); }
.is-style-acc .wp-block-button__link::after,
.is-style-primary .wp-block-button__link::after,
.is-style-tlink .wp-block-button__link::after{
  content:""; width:15px; height:12px; flex:none; background:currentColor;
  -webkit-mask:var(--arw) center/contain no-repeat; mask:var(--arw) center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.wp-block-button__link:hover::after{ transform:translateX(4px); }
.hero .is-style-acc .wp-block-button__link{ box-shadow:0 16px 34px -16px rgba(0,0,0,.8); }
.hero .wp-block-buttons{ gap:.8rem; }

/* ------------------------------------------------------------------- hero */
.hero-shot{ position:relative; }
/* Elbe-Motiv (09.10.2026, 21:9): die Elbphilharmonie steht rechts, beim
   Beschneiden auf die Bildspalte bleibt sie im Bild, links faellt Himmel weg. */
.hero-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:86% 50%; }

/* Variante "Text links" (Teilung wie am 01.10.2026): Text auf Navy links,
   buendig mit der linken Rasterkante, Bild rechts bis an den Fensterrand.
   Einschalten mit der Klasse is-text-left an der Hero-Gruppe. */
@media (min-width:821px){
  .hero.is-text-left .hero-grid{ grid-template-columns:minmax(0,45fr) minmax(0,55fr); }
  .hero.is-text-left .hero-copy{ order:-1; padding-left:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut))); }
  .hero.is-text-left .hero-shot img{ object-position:94% 50%; }
}
@media (min-width:1100px){
  .hero.is-text-left .hero-grid{ grid-template-columns:minmax(0,40fr) minmax(0,60fr); }
}

/* Variante "breit" (Vorlage der Kanzlei, 09.10.2026, Wunsch 12.10.2026): Bild
   ueber die volle Breite, Text in Navy auf dem hellen Himmel links, buendig mit
   dem Raster. Schalter: Option hz_look, hero=wide (inc/setup.php). */
.hz-hero-wide .hero{ background:#E4EEF8; color:var(--text); }
.hz-hero-wide .hero .hero-grid{ display:block; position:relative; min-height:clamp(540px, calc(100vh - var(--hdh) - 74px), 800px); }
.hz-hero-wide .hero .hero-shot{ position:absolute; inset:0; min-height:0; }
.hz-hero-wide .hero .hero-shot img{ object-position:70% 50%; }
.hz-hero-wide .hero .hero-shot::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(232,240,249,.80) 0%, rgba(232,240,249,.55) 30%, rgba(232,240,249,0) 55%); }
.hz-hero-wide .hero .hero-copy{ position:relative; z-index:4; background:none; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3rem,7vh,5rem) var(--gut); }
/* Text block in the vertical middle of the photo (feedback 12.10.2026), not
   pushed up: the grid centres it, equal padding above and below. */
@media (min-width:821px){
  .hz-hero-wide .hero .hero-grid{ display:flex; align-items:center; isolation:isolate; }
  .hz-hero-wide .hero .hero-copy{ width:100%; }
  .hz-hero-wide .hero .hero-shot::after{ z-index:1; }
}
.hz-hero-wide .hero .hero-copy > *{ max-width:36rem; }
.hz-hero-wide .hero h1{ color:var(--ink); font-size:clamp(2.6rem,4.4vw,4rem); }
.hz-hero-wide .hero .lede{ color:var(--text-soft); max-width:46ch; }
.hz-hero-wide .hero .is-style-acc .wp-block-button__link{ box-shadow:0 14px 30px -14px rgba(0,25,74,.45); }
.hz-hero-wide .hero .is-style-ghost-ink .wp-block-button__link{ color:var(--ink); border-color:rgba(0,25,74,.25); background:rgba(255,255,255,.78); }
.hz-hero-wide .hero .is-style-ghost-ink .wp-block-button__link:hover{ border-color:var(--ink); background:#fff; }
@media (max-width:820px){
  .hz-hero-wide .hero .hero-grid{ min-height:0; display:flex; flex-direction:column-reverse; }
  .hz-hero-wide .hero .hero-shot{ position:relative; aspect-ratio:16/10; }
  .hz-hero-wide .hero .hero-shot img{ object-position:82% 50%; }
  .hz-hero-wide .hero .hero-shot::after{ background:linear-gradient(180deg, #E4EEF8 0%, rgba(228,238,248,0) 28%); }
  .hz-hero-wide .hero .hero-copy{ padding:2.4rem var(--gut) 1rem; }
}

/* --------------------------------------------------------- service cards */
/* The heading link stretches over the whole card, so the card is one link
   for the pointer and a plain heading link for screen readers. */
.svc-item h3 a,.lst-item h2 a{ color:inherit; text-decoration:none; }
.svc-item h3 a::after{ content:""; position:absolute; inset:0; z-index:1; }
.svc-item h3 a:focus-visible{ outline:none; }
.svc-item:has(h3 a:focus-visible){ outline:2px solid var(--acc); outline-offset:2px; }
.svc-item .svc-more{ margin-bottom:0; }
.svc-item .svc-more::after{
  content:""; width:15px; height:12px; background:currentColor;
  -webkit-mask:var(--arw) center/contain no-repeat; mask:var(--arw) center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.svc-item:hover .svc-more::after{ transform:translateX(4px); }

/* ------------------------------------------------- Leistungen (08.10.2026) */
/* Before: six equal text blocks in a 2x3 grid, icon, bullets, nothing to
   hold the eye. Now an index on top, then one row per service with its own
   photo, the image side alternating, the tasks as a ruled list. */
.sec-lsx{ padding-block:clamp(1.6rem,3vw,2.4rem) 0; }
.lsx{ display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:760px){ .lsx{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1180px){ .lsx{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.lsx-item{ margin:0; }
.lsx-item a{
  display:flex; flex-direction:column; gap:.5rem; height:100%;
  padding:.95rem 1rem 1rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  text-decoration:none; color:var(--text); position:relative;
  transition:border-color .25s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
}
.lsx-item a:hover{ border-color:transparent; box-shadow:var(--sh-md); transform:translateY(-2px); }
.lsx-num{ font-size:.74rem; font-weight:600; letter-spacing:.12em; color:var(--acc); }
.lsx-t{ font-size:.97rem; font-weight:600; line-height:1.3; padding-right:1.2rem; }
.lsx-item a::after{
  content:""; position:absolute; right:1rem; top:1.05rem; width:12px; height:15px; background:var(--text-faint);
  -webkit-mask:var(--arw) center/contain no-repeat; mask:var(--arw) center/contain no-repeat;
  transform:rotate(90deg); transition:transform .3s var(--ease), background .25s var(--ease);
}
.lsx-item a:hover::after{ background:var(--acc-deep); transform:rotate(90deg) translateX(3px); }
/* Phones: one compact row per service instead of tall two-column tiles. */
@media (max-width:759px){
  .lsx{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .lsx-item a{ flex-direction:row; align-items:baseline; gap:.8rem; padding:.8rem 2.6rem .8rem 1rem; }
  .lsx-item a::after{ top:50%; margin-top:-7px; }
  .lsx-t{ padding-right:0; }
}

.sec-lsr .wrap{ display:grid; gap:clamp(3.5rem,7vw,6.5rem); }
.lsr{ display:grid; gap:clamp(1.6rem,3.5vw,4.5rem); align-items:start;
      scroll-margin-top:calc(var(--hdh) + 1.5rem); }
@media (min-width:900px){
  .lsr{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
  .lsr.is-flip{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }
  .lsr.is-flip > .lsr-media{ order:2; }
  .lsr > .lsr-media{ position:sticky; top:calc(var(--hdh) + 1.5rem); }
}
.lsr-media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); background:var(--paper-3); }
.lsr-media img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
@media (max-width:899px){ .lsr-media img{ aspect-ratio:16/10; } }
.lsr-copy{ padding-top:clamp(0rem,1vw,.6rem); }
.lsr-num{
  display:flex; align-items:center; gap:.8rem; margin:0 0 1rem;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; color:var(--acc);
}
.lsr-num::after{ content:""; width:44px; height:2px; background:var(--acc); }
.lsr-copy h2{ margin-bottom:.9rem; }
.lsr-lede{ font-size:clamp(1.06rem,1.25vw,1.18rem); line-height:1.6; color:var(--text); max-width:46ch; margin:0 0 1.6rem; }
ul.wp-block-list.lsr-tasks{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.lsr-tasks li{
  position:relative; padding:.8rem 0 .8rem 2rem; border-bottom:1px solid var(--line);
  font-size:.98rem; line-height:1.55; color:var(--text-soft);
}
.lsr-tasks li::before{
  content:""; position:absolute; left:.1rem; top:1.08rem; width:15px; height:15px; border-radius:50%;
  background:var(--acc-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M1 3.5l2.3 2.3L8 1' stroke='%2314598F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px 7px no-repeat;
}
.lsr-cta{ margin-top:1.5rem; }
/* Arriving from a service card on the home page: the line next to the number grows. */
.lsr:target .lsr-num::after{ width:96px; transition:width .6s var(--ease); }

/* Rechtsformen as five cards instead of a ruled table. */
.rf-grid{ display:grid; gap:10px; grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){ .rf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .rf-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.rf-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:1.3rem 1.25rem 1.4rem;
          border-top:2px solid var(--acc); }
.rf-card h3{ font-family:var(--ff); font-size:1.02rem; font-weight:600; letter-spacing:0; line-height:1.35; margin-bottom:.45rem; }
.rf-card p{ margin:0; font-size:.94rem; line-height:1.55; color:var(--text-soft); }

/* ------------------------------------------------------------- deflists */
.deflist > .wp-block-group{ display:grid; gap:.35rem 2rem; padding:1.15rem 0; border-bottom:1px solid var(--line); }
@media (min-width:720px){ .deflist > .wp-block-group{ grid-template-columns:minmax(0,.4fr) minmax(0,1fr); } }
.deflist h3{ font-family:var(--ff); font-weight:600; font-size:1rem; letter-spacing:0; line-height:1.5; }
.deflist h3 + p{ margin:0; font-size:.98rem; color:var(--text-soft); line-height:1.6; }

/* ------------------------------------------------------------------ lists */
ul.wp-block-list.ticks{ list-style:none; margin:0; padding:0; }
ul.wp-block-list.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
ul.chips li{ font-size:.87rem; line-height:1; color:var(--text-soft);
             border:1px solid var(--line); border-radius:var(--pill);
             padding:.55rem .9rem; background:#fff; }

/* -------------------------------------------------------------------- faq */
.faq .wp-block-details{ margin:0; }
.faq details > p{ padding:0 3.4rem 0 1.35rem; font-size:1rem; color:var(--text-soft); line-height:1.65; }
.faq details > p:last-child{ padding-bottom:1.35rem; }

/* -------------------------------------------------------------- downloads */
/* Container is .dl-list, not the draft's .dl: its ".dl a" card rule would
   also hit the title link inside each item. */
.dl-list{ display:grid; gap:.7rem; }
.dl-item{
  position:relative; display:grid; align-items:center; gap:.2rem 1.2rem;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"ext t arw" "ext m arw";
  padding:1.05rem 1.3rem; 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-item:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); border-color:transparent; }
.dl-item::before{ content:"PDF"; grid-area:ext; font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--acc-deep);
                  background:var(--acc-soft); border-radius:6px; padding:.55rem .55rem; }
.dl-item::after{ content:""; grid-area:arw; width:15px; height:12px; background:var(--text-faint);
                 -webkit-mask:var(--arw) center/contain no-repeat; mask:var(--arw) center/contain no-repeat;
                 transition:transform .3s var(--ease); }
.dl-item:hover::after{ transform:translateX(4px); background:var(--acc-deep); }
.dl-item .t{ grid-area:t; margin:0; font-size:1rem; font-weight:600; }
.dl-item .t a{ text-decoration:none; color:inherit; }
.dl-item .t a::after{ content:""; position:absolute; inset:0; }
.dl-item .m{ grid-area:m; margin:0; font-size:.86rem; color:var(--text-faint); }
/* Since 12.10.2026 the title is a core file block (the Kanzlei swaps PDFs in the
   editor). A file block added there brings a preview and a button: hidden here,
   the whole card is the link. */
.dl-item .wp-block-file{ grid-area:t; margin:0; font-size:1rem; font-weight:600; }
.dl-item .wp-block-file a:not([download]){ text-decoration:none; color:inherit; }
.dl-item .wp-block-file a:not([download])::after{ content:""; position:absolute; inset:0; }
.dl-item .wp-block-file object,.dl-item .wp-block-file .wp-block-file__button{ display:none; }
/* Home: Downloads section in place of the Mandantenportal (feedback 12.10.2026).
   Same build as the services section: split head, a row of cards, one button.
   The cards share the PDF badge and arrow of the Downloads page list. */
.dl-tiles{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){ .dl-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .dl-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.dl-tile{
  position:relative; display:flex; flex-direction:column; gap:.55rem; height:100%;
  padding:1.35rem 1.35rem 3.2rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  text-decoration:none; color:var(--text);
  transition:box-shadow .3s var(--ease), transform .25s var(--ease), border-color .3s var(--ease);
}
.dl-tile:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); border-color:transparent; }
.dl-tile:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }
.dl-badge{ align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--acc-deep);
           background:var(--acc-soft); border-radius:6px; padding:.4rem .5rem; margin-bottom:.35rem; }
.dl-tile-t{ font-size:1.02rem; font-weight:600; line-height:1.35; color:var(--ink); }
.dl-tile-d{ font-size:.9rem; line-height:1.5; color:var(--text-soft);
            display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.dl-tile-a{ position:absolute; left:1.35rem; bottom:1.2rem; display:inline-flex; color:var(--text-faint);
            transition:transform .3s var(--ease), color .25s var(--ease); }
.dl-tile:hover .dl-tile-a{ transform:translateX(4px); color:var(--acc-deep); }
/* Phones: compact rows (badge, text, arrow) instead of four tall cards. */
@media (max-width:619px){
  .dl-tiles{ gap:8px; }
  .dl-tile{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"b t a" "b d a";
            align-items:center; gap:.15rem .9rem; padding:.9rem 1rem; }
  .dl-badge{ grid-area:b; margin:0; align-self:center; }
  .dl-tile-t{ grid-area:t; font-size:.97rem; }
  .dl-tile-d{ grid-area:d; font-size:.84rem; -webkit-line-clamp:2; }
  .dl-tile-a{ grid-area:a; position:static; }
}

/* ------------------------------------------------------------ split media */
.split-media.wp-block-image img,.imggrid .wp-block-image img{ width:100%; height:auto; }
.about-fig .wp-element-caption{ font-size:.9rem; color:var(--text-soft); margin-top:.85rem; }

/* ----------------------------------------------------------- legal pages */
.legal h2{ font-size:clamp(1.22rem,1.55vw,1.375rem); margin:2.2rem 0 .7rem; }
.legal h2:first-child{ margin-top:0; }
.legal ul{ padding-left:1.2rem; margin:0 0 1.05em; }
.legal a{ color:var(--acc-deep); }
.stats-optout{ background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:.9rem 1.1rem; }
.stats-optout label{ display:inline-flex; gap:.6rem; align-items:center; font-weight:600; cursor:pointer; }
.stats-optout input{ width:1.15rem; height:1.15rem; accent-color:var(--acc-deep); }
.stats-optout-note{ display:block; margin-top:.35rem; font-size:.94rem; color:var(--text-soft); }

/* --------------------------------------------------- form pages (plugin) */
/* The plugin brings scoped form styles; on these pages the draft's colours
   and fonts are already in place, only the outer spacing is set here. */
.anf .hza .form-wrap{ max-width:none; }
.anf-direct .anf-small + .anf-small{ margin-top:.2rem; }

/* WordPress adds this to the admin bar offset */
body.admin-bar .hd{ top:32px; }
@media (max-width:782px){ body.admin-bar .hd{ top:46px; } }

/* ------------------------------------------- client group list (hover) */
/* In the draft the round photo grew from 0 to 40px inside the row on hover.
   That narrowed the text, long names re-wrapped and the row jumped by a
   line. Now hover never changes layout: the photo sits on its own layer,
   the name slides into space that is always reserved for it (transform, no
   re-wrap), and every row keeps its height. */
@media (hover:hover){
  .glist-links.has-thumbs a,
  .glist-links.has-thumbs a:hover{ position:relative; padding-left:.2rem; }
  .glist-links.has-thumbs a > span:not(.gl-thumb){
    flex:1; min-width:0; padding-right:3.2rem; margin-right:-3.2rem;
    transition:transform .35s var(--ease), color .25s var(--ease);
  }
  .glist-links.has-thumbs .gl-arw{ position:relative; z-index:1; }
  .glist-links.has-thumbs .gl-thumb{
    position:absolute; left:.2rem; top:50%; margin:0;
    width:40px; height:40px;
    transform:translateY(-50%) scale(.6); opacity:0;
    transition:opacity .25s var(--ease), transform .35s var(--ease);
  }
  .glist-links.has-thumbs a:hover > span:not(.gl-thumb),
  .glist-links.has-thumbs a:focus-visible > span:not(.gl-thumb){ transform:translateX(3.2rem); }
  .glist-links.has-thumbs a:hover .gl-thumb,
  .glist-links.has-thumbs a:focus-visible .gl-thumb{ width:40px; margin:0; opacity:1; transform:translateY(-50%) scale(1); }
}
@media (hover:hover) and (prefers-reduced-motion: reduce){
  .glist-links.has-thumbs a > span:not(.gl-thumb),.glist-links.has-thumbs .gl-thumb{ transition:none; }
}

/* Related groups below a group page: same idea, the row stays put and
   only its content slides. */
.relcard,.relcard:hover{ padding-left:.2rem; }
.relcard > *{ transition:transform .25s var(--ease); }
.relcard:hover > .relcard-orb,.relcard:hover > .relcard-body{ transform:translateX(.3rem); }
@media (prefers-reduced-motion: reduce){ .relcard > *{ transition:none; } }

/* -------------------------------------------------------- team (pattern) */
.team-grid{ display:grid; gap:clamp(1.6rem,3vw,2.6rem) clamp(1rem,2vw,1.6rem);
            grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); }
.team-member .team-photo{ margin-bottom:1rem; border-radius:var(--r); overflow:hidden; background:var(--paper-3); box-shadow:var(--sh); }
.team-member .team-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.team-member h3{ font-size:1.12rem; margin-bottom:.2rem; hyphens:none; -webkit-hyphens:none; }
.team-member .team-role{ font-size:.76rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--acc-deep); margin-bottom:.6rem; }
.team-member p{ font-size:.96rem; color:var(--text-soft); line-height:1.58; }
.team-member .team-since{ font-size:.9rem; margin-bottom:.15rem; }
.team-member .team-mail{ font-size:.9rem; overflow-wrap:anywhere; }
.team-member .team-mail a{ color:var(--acc-deep); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--acc-deep) 30%,transparent); }
.team-member .team-mail a:hover{ border-bottom-color:currentColor; }
@media (max-width:599px){
  .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem .9rem; }
  .team-member h3{ font-size:1rem; }
  .team-member .team-role{ font-size:.68rem; letter-spacing:.08em; margin-bottom:.4rem; }
  .team-member .team-since,.team-member .team-mail{ font-size:.82rem; }
}

/* ---------------------------------------------------- header, small phones */
/* Below 380px logo, language switch and burger only fit in one row when all
   three move closer: smaller logo, narrower language pills, and the burger's
   touch area reaches into the page margin so its lines end at the gutter. */
@media (max-width:379px){
  .hd-inner, .hd-tools{ gap:.4rem; }
  .hd-logo img{ height:28px; }
  .hd-tools > .lang a{ padding:.4rem .5rem; letter-spacing:.02em; }
  .burger{ margin-right:-10px; }
}

/* ------------------------------------------- hero mark, navy header (12.10.2026) */
/* Logo mark large behind the headline ("Logo im Hintergrund, Idee zum
   Ausprobieren"). Drawn with the traced SVG as a mask, so colour and opacity
   are plain CSS. Only with the wide hero, where the text sits on the sky.

   Desktop: the mark stands in the sky BEHIND the skyline. Layers in .hero-grid:
     photo  <  haze gradient (.hero-shot::after, z1)  <  mark (::before, z2)
     <  skyline cut-out with the same haze (::after, z3)  <  text (z4)
   The cut-out is the photo with the sky made transparent (sky mask from
   Magnific SAM, source in the draft: assets-color/hamburg-elbphilharmonie-
   himmel-maske.png). It is placed exactly like the photo (cover, 70% 50%), so
   it only fits one photo: a new hero photo needs a new cut-out.
   Since 01.11.2026 the image is hamburg-skyline-weit.webp (variant B of
   15.10.2026, skyline from afar, sky mask in build/hero-hamburg-varianten/),
   cut-out hero-skyline-weit-fg-*.webp. Same 2560x1097 frame as before.
   Since 13.11.2026 the image is hamburg-elbphilharmonie-echt.webp, a real
   Adobe Stock photo with a Magnific sky and more water (build/hero-real/,
   compose.py), cut-out hero-elbphilharmonie-echt-fg-*.webp.
   Later on 13.11.2026: hamburg-elbufer.webp (variant C, image from Vadim, Magnific SAM sky
   mask, build/hero-c/compose_c.py), cut-out hero-elbufer-fg-*.webp. */
.hz-hero-wide.hz-hero-mark .hero-grid{ overflow:clip; }
@media (min-width:821px){
  .hz-hero-wide.hz-hero-mark .hero-grid::before{
    --mk:clamp(400px,42vw,660px);
    content:""; position:absolute; z-index:2; pointer-events:none;
    width:var(--mk); aspect-ratio:1; top:50%;
    left:calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gut));
    transform:translate(-16%,-50%);
    background:var(--acc-deep); opacity:.075;
    -webkit-mask:url("img/mark.svg") center/contain no-repeat; mask:url("img/mark.svg") center/contain no-repeat;
  }
  .hz-hero-wide.hz-hero-mark .hero-grid::after{
    --fg:url("img/hero-elbufer-fg-2560.webp");
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(232,240,249,.80) 0%, rgba(232,240,249,.55) 30%, rgba(232,240,249,0) 55%),
      var(--fg) 70% 50% / cover no-repeat;
    -webkit-mask:var(--fg) 70% 50% / cover no-repeat; mask:var(--fg) 70% 50% / cover no-repeat;
  }
}
@media (min-width:821px) and (max-width:1600px){
  .hz-hero-wide.hz-hero-mark .hero-grid::after{ --fg:url("img/hero-elbufer-fg-1600.webp"); }
}
/* Phones: photo under the text, the mark sits on the plain blue above it. */
@media (max-width:820px){
  .hz-hero-wide .hero-copy{ isolation:isolate; }
  .hz-hero-wide.hz-hero-mark .hero-copy::before{
    content:""; position:absolute; z-index:-1; pointer-events:none; width:300px; aspect-ratio:1;
    right:-60px; top:1rem; background:var(--acc-deep); opacity:.06;
    -webkit-mask:url("img/mark.svg") center/contain no-repeat; mask:url("img/mark.svg") center/contain no-repeat;
  }
}

/* Dark blue top bar ("Obere Leiste soll wahrscheinlich in dunkelblau"). */
.hz-hd-navy .hd{ background:rgba(0,25,74,.97); border-bottom-color:rgba(255,255,255,.08); }
.hz-hd-navy .hd-logo img.l-ink{ display:none; }
.hz-hd-navy .hd-logo img.l-white{ display:block; }
.hz-hd-navy .hd-nav a{ color:rgba(255,255,255,.86); opacity:1; }
.hz-hd-navy .hd-nav a:hover{ color:#fff; }
.hz-hd-navy .hd-nav a[aria-current="page"]{ color:#fff; }
.hz-hd-navy .hd-nav a::after{ background:#6FA8DC; }
.hz-hd-navy .hd .lang{ background:rgba(255,255,255,.08); }
.hz-hd-navy .hd .lang a{ color:rgba(255,255,255,.72); }
.hz-hd-navy .hd .lang a:hover{ color:#fff; }
.hz-hd-navy .hd .lang a[aria-current="true"]{ background:var(--acc); color:#fff; }
.hz-hd-navy .burger span{ background:#fff; }
.hz-hd-navy .hd.solid{ box-shadow:0 10px 30px -18px rgba(0,17,47,.7); }

/* ------------------------------------------ user journeys, 01.11.2026 */
/* Group pages: enquiry and phone right under the lede. On phones the two
   buttons share the row. */
.phero-act{ margin-top:1.6rem; }
@media (max-width:559px){
  .phero-act .btn{ flex:1 1 auto; justify-content:center; padding-inline:1.1rem; }
}

/* Phone bar at the bottom of small screens, see assets/mbar.js. Below the
   drawer (z 99), so the open menu covers it. */
.mbar{ display:none; }
@media (max-width:819px){
  .mbar{
    display:flex; gap:.6rem; position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
    box-shadow:0 -6px 24px rgba(0,25,74,.12);
    transform:translateY(110%); transition:transform .3s var(--ease);
  }
  .mbar.show{ transform:none; }
  .mbar .btn{ flex:1; justify-content:center; padding:.85rem 1rem; }
  .mbar .btn-ghost{ flex:.8; background:#fff; }
}
@media (max-width:819px) and (prefers-reduced-motion: reduce){ .mbar{ transition:none; } }

/* Home hero: where the office is. Wandsbek was nowhere on the home page,
   though "steuerberater wandsbek" is the strongest local search. */
.hero-loc{ display:inline-flex; align-items:flex-start; gap:.5rem; margin-top:1.4rem; max-width:31rem;
           font-size:.92rem; line-height:1.45; color:var(--text); padding:.55rem .95rem .6rem .8rem;
           background:rgba(255,255,255,.88); border-radius:var(--r-md, 12px);
           -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 4px 18px rgba(0,25,74,.08); }
.hero-loc::before{ content:""; flex:none; width:16px; height:16px; margin-top:.2rem;
  background:var(--acc); -webkit-mask:var(--pin) center/contain no-repeat; mask:var(--pin) center/contain no-repeat;
  --pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a6.7 6.7 0 00-6.7 6.7c0 5 6.7 10.3 6.7 10.3s6.7-5.3 6.7-10.3A6.7 6.7 0 0010 1.5zm0 9a2.3 2.3 0 110-4.6 2.3 2.3 0 010 4.6z'/%3E%3C/svg%3E"); }

/* English labels ("Who we serve", "The practice") broke into two lines next
   to the full language names. One line each, a little tighter on mid widths. */
.hd-nav a{ white-space:nowrap; }
@media (min-width:1080px) and (max-width:1399px){ .hd-nav{ gap:clamp(.5rem,1.1vw,1.1rem); } }

/* Downloads: "Passend dazu", from the form to the service behind it. */
.dl-bridge{ display:grid; gap:1rem; margin-top:.8rem; }
@media (min-width:700px){ .dl-bridge{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.dl-bridge-item{ background:var(--paper-2); border-radius:var(--r-lg); padding:1.4rem 1.5rem; }
.dl-bridge-item h3{ font-size:1.08rem; margin:0 0 .45rem; }
.dl-bridge-item p{ color:var(--text-soft); font-size:.97rem; line-height:1.55; margin:0 0 .8rem; }
.dl-bridge-item p:last-child{ margin:0; }

/* Group head on phones (01.11.2026): the field image had a row of its own
   (about 170px) and pushed headline and lede down. Now it sits small next to
   the breadcrumb trail, which takes two lines here anyway. */
@media (max-width:859px){
  .phero.has-orb{ --orb:72px; }
  .phero.has-orb .phero-in{
    display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem; align-items:center;
    padding-top:1.6rem;
  }
  .phero.has-orb .crumbs{ grid-column:1; grid-row:1; margin-bottom:0; }
  .phero.has-orb .phero-orb{ grid-column:2; grid-row:1; margin:0; }
  .phero.has-orb .phero-copy{ grid-column:1 / -1; grid-row:2; margin-top:1.5rem; }
}
@media (max-width:859px){ .phero.has-orb::before{ display:none; } }
/* Tablets: room enough for a larger circle beside the text column. */
@media (min-width:600px) and (max-width:859px){
  .phero.has-orb{ --orb:150px; }
  .phero.has-orb .phero-orb{ grid-row:1 / span 2; align-self:start; }
  .phero.has-orb .phero-copy{ grid-column:1; }
}

/* ------------------------------------- Auswahl der Kanzlei 05.11.2026 */
/* Downloads page: theme headings between the files */
.dl-list .dl-theme{ font-size:1.05rem; letter-spacing:.01em; margin:1.6rem 0 .2rem; color:var(--ink); }
.dl-list .dl-theme:first-child{ margin-top:0; }
/* Home: downloads by theme, one column each */
.dl-themes{ display:grid; gap:clamp(1.2rem,2.5vw,2rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.dl-th-col h3{ font-size:1.05rem; padding-bottom:.7rem; margin-bottom:.4rem; border-bottom:2px solid var(--ink); }
.dl-th-col ul{ list-style:none; margin:0; padding:0; }
.dl-th-col li{ border-bottom:1px solid var(--line); }
.dl-th-col a{ display:block; position:relative; padding:.85rem 2rem .85rem 0; text-decoration:none; color:inherit; }
.dl-th-col a::after{ content:"PDF"; position:absolute; right:0; top:.95rem; font-size:.66rem; font-weight:700; letter-spacing:.08em; color:var(--acc-deep); }
.dl-th-t{ display:block; font-weight:600; color:var(--ink); line-height:1.35; }
.dl-th-d{ display:block; font-size:.88rem; color:var(--text-soft); line-height:1.45; margin-top:.2rem; }
.dl-th-col a:hover .dl-th-t{ color:var(--acc-deep); text-decoration:underline; text-underline-offset:3px; }
/* Home: Anfahrt */
.visit .visit-fig img{ aspect-ratio:4/5; object-fit:cover; }
.visit-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin-top:1.6rem; }
.visit-tile{ background:var(--paper-2,#F4F1EB); border-radius:var(--r); padding:1rem .95rem; }
.visit-tile p{ margin:0; font-size:.9rem; color:var(--text-soft); line-height:1.4; }
.visit-tile strong{ display:block; font-size:1.05rem; color:var(--ink); margin-bottom:.25rem; line-height:1.2; }
.visit-hours{ margin-top:1rem; font-size:.92rem; color:var(--text-soft); }
@media (max-width:599px){ .visit-tiles{ grid-template-columns:1fr; } }
/* Phone hours under the number */
.anf-ch .n{ display:block; font-size:.82rem; color:var(--text-soft); margin-top:.15rem; }
.ft-hours{ font-size:.86em; opacity:.75; }
/* Silbentrennung in titles (13.11.2026): break only at the soft hyphens from
   inc/hyphenation, the same in every browser, not by the browser's own dictionary */
h1,h2,h3,h4,h5,h6,summary,legend,.lede,.lsx-t,.dl-th-t{ -webkit-hyphens:manual; hyphens:manual; }
/* Hero variant D (13.11.2026): the photo hamburg-elbufer-logo.webp carries the logo mark itself
   (left third of the image), so hz_look has no "mark". Centre crop on wide screens: from 1280 px
   the whole mark and the whole Elbphilharmonie are in view (1100 px: mark 85%, Elbphilharmonie 99%).
   Phones: Elbphilharmonie whole, about three quarters of the mark. Measured 13.11.2026.
   Only without .hz-hero-mark, so the other variants are untouched. */
.hz-hero-wide:not(.hz-hero-mark) .hero .hero-shot img{ object-position:50% 50%; }
@media (max-width:820px){
  .hz-hero-wide:not(.hz-hero-mark) .hero .hero-shot img{ object-position:58% 50%; }
}
/* Hero variant D+ (13.11.2026, hz_look mark="desk"): phones as D. From 821 px the D photo
   without the mark (hero-elbufer-desk-*.webp via <picture>, hz_hero_desk_photo()) and the mark
   as CSS, sized and placed in units of the h1 size (--h1 = the h1 font-size), so it follows the
   headline: about 1.4x the width of "Steuerberater", centred on headline to buttons. The address
   line does not count (Vadim, 13.11.2026: the mark was too big with it). Behind the skyline cut-out of the same
   photo (build/hero-d-desk/compose.py), both placed at 50% 50% like D on desktop.
   --mk-a tunes the strength, --mk the size. */
@media (min-width:821px){
  .hz-hero-wide.hz-hero-markdesk .hero .hero-shot img{ object-position:50% 50%; }
  .hz-hero-wide.hz-hero-markdesk .hero-grid{ overflow:clip; }
  .hz-hero-wide.hz-hero-markdesk .hero-grid::before{
    --h1:clamp(2.6rem,4.4vw,4rem); --mk:calc(var(--h1) * 8.2); --mk-a:.11;
    content:""; position:absolute; z-index:2; pointer-events:none;
    width:var(--mk); aspect-ratio:1; top:calc(50% - var(--h1) * .85);
    left:calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gut) + var(--h1) * 2.9);
    transform:translate(-50%,-50%);
    background:var(--acc-deep); opacity:var(--mk-a);
    -webkit-mask:url("img/mark.svg") center/contain no-repeat; mask:url("img/mark.svg") center/contain no-repeat;
  }
  .hz-hero-wide.hz-hero-markdesk .hero-grid::after{
    --fg:url("img/hero-elbufer-desk-fg-1881.webp");
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(232,240,249,.80) 0%, rgba(232,240,249,.55) 30%, rgba(232,240,249,0) 55%),
      var(--fg) 50% 50% / cover no-repeat;
    -webkit-mask:var(--fg) 50% 50% / cover no-repeat; mask:var(--fg) 50% 50% / cover no-repeat;
  }
}
@media (min-width:821px) and (max-width:1200px){
  .hz-hero-wide.hz-hero-markdesk .hero-grid::after{ --fg:url("img/hero-elbufer-desk-fg-1200.webp"); }
}

/* Kontakt, "So finden Sie uns" (13.11.2026): the house photo runs the full
   height of the text column, so its bottom edge meets the yard plan's.
   Keyed on the yard figure, so other split bands stay as they are. */
@media (min-width:920px){
  .split.top:has(.yard-fig){ align-items:stretch; }
  .split.top:has(.yard-fig) > .split-media{ display:flex; margin:0; }
  .split.top:has(.yard-fig) > .split-media img{ height:100%; min-height:0; object-fit:cover; object-position:50% 70%; }
  .split.top:has(.yard-fig) .yard,
  .split.top:has(.yard-fig) .yard-fig{ margin-bottom:0; }
}

/* Map of the Kanzlei, home and Kontakt (13.11.2026, hz_map_html()).
   Content width and low (later on 13.11.2026, was full width and up to 380 px),
   the pin stays in view: object-position follows its spot in the image
   (54% / 55%). The Google credit must stay visible (bottom right). */
/* Since 14:30: home = one card with the "Mandat anfragen" band above (shared outer corners),
   Kontakt = under "So finden Sie uns", same corners as the photos there. */
.cta.has-map{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.map-band.map-band-cta{ border-radius:0 0 var(--r-lg) var(--r-lg); }
.map-band.map-band-cta a:focus-visible{ border-radius:0 0 var(--r-lg) var(--r-lg); }
.map-band.map-band-page{ border-radius:var(--r-lg); margin-top:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--sh-md); }
.map-band{ position:relative; margin:0; background:var(--paper2, #f1eee8); border-radius:14px; overflow:hidden; }
.map-band a{ display:block; position:relative; }
.map-band img{ display:block; width:100%; height:clamp(130px,11vw,160px); object-fit:cover; object-position:54% 55%; }
.map-band-go{ position:absolute; left:1rem; bottom:.8rem;
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:999px;
  background:var(--ink); color:#fff; font-weight:600; font-size:.95rem; box-shadow:0 10px 26px -12px rgba(0,25,74,.6); }
.map-band a:hover .map-band-go{ background:var(--acc); }
.map-band a:focus-visible{ outline:3px solid var(--acc); outline-offset:-3px; border-radius:14px; }
@media (max-width:600px){ .map-band-go{ left:.6rem; bottom:.6rem; padding:.45rem .85rem; font-size:.85rem; } }
.map-band figcaption{ position:absolute; right:.6rem; bottom:.5rem; padding:.1rem .45rem; border-radius:4px;
  background:rgba(255,255,255,.85); color:#3c4043; font-size:.72rem; pointer-events:none; }