/* Logo-Schalter G ⇄ MK (Vorschau 14.10.2026) */
.ls{--ls-h:var(--feld-h,40px);--ls-pad:3px;--ls-z:calc(var(--ls-h) - 2*var(--ls-pad));
  position:relative;display:inline-flex;align-items:center;gap:0;height:var(--ls-h);padding:var(--ls-pad);
  box-sizing:border-box;border-radius:calc(var(--ls-h)/2);border:1px solid var(--kante,rgba(0,0,0,.12));
  background:var(--feld-bg,#f1f1f3);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);outline:none;text-decoration:none}
.ls:focus-visible{box-shadow:0 0 0 3px rgba(80,120,255,.45)}
.ls-knopf{position:absolute;top:var(--ls-pad);left:var(--ls-pad);width:var(--ls-z);height:var(--ls-z);border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
  transition:transform .34s cubic-bezier(.5,1.6,.4,1),background .34s;z-index:0}
.ls[data-seite="mk"] .ls-knopf{transform:translateX(var(--ls-z))}
.ls.ls-wechsel[data-seite="g"] .ls-knopf{transform:translateX(var(--ls-z))}
.ls.ls-wechsel[data-seite="mk"] .ls-knopf{transform:translateX(0)}
.ls-seg{position:relative;z-index:1;width:var(--ls-z);height:var(--ls-z);display:flex;align-items:center;justify-content:center;
  transition:opacity .3s,transform .34s cubic-bezier(.5,1.6,.4,1),filter .3s}
.ls-seg svg,.ls-seg img{width:72%;height:72%;display:block;object-fit:contain}
.ls-seg.aus{opacity:.38;filter:grayscale(1);transform:scale(.82)}
.ls:hover .ls-seg.aus{opacity:.7;transform:scale(.9)}
.ls.ls-wechsel .ls-seg{opacity:.38;filter:grayscale(1);transform:scale(.82)}
.ls.ls-wechsel .ls-seg.aus{opacity:1;filter:none;transform:scale(1.08)}
@media (prefers-color-scheme:dark){.ls{background:#1c1c22;border-color:#34343c}.ls-knopf{background:#3a3a44}
  .ls-seg svg path{fill:#f2f2f5;stroke:none}.ls-seg img{filter:brightness(0) invert(1)}}
@media (prefers-reduced-motion:reduce){.ls-knopf,.ls-seg{transition:none}}
@media print{.ls{display:none}}

/* ═════ Sanfter Seitenwechsel G ⇄ MK (Vorschau 14.10.2026, v2) ═════════════════════════
   1) Hintergrund früh setzen (diese Datei steht ganz oben im <head>): kein weißer/schwarzer Blitz.
   2) Cross-Document View Transitions (Chrome/Edge 126+, Safari 18.2+): Kopfleiste und Schalter
      bleiben stehen, nur der Inhalt blendet über. Gilt nur für Navigationen innerhalb gtools.me.
   3) Rückfall ohne View Transitions: Inhalt (main, footer) blendet in 150 ms aus, Zielseite blendet ein. */
html{background:#07070c}
@media (prefers-color-scheme:light){html{background:#f6f6f9}}
@view-transition{navigation:auto}
header.topbar{view-transition-name:g-kopf}
.ls{view-transition-name:g-schalter}
::view-transition-group(root){animation-duration:.22s}
::view-transition-old(root){animation:ls-vt-aus .16s ease-in both}
::view-transition-new(root){animation:ls-vt-rein .24s ease-out .04s both}
::view-transition-group(g-kopf),::view-transition-group(g-schalter){animation-duration:.22s}
@keyframes ls-vt-aus{to{opacity:0}}
@keyframes ls-vt-rein{from{opacity:0;transform:translateY(6px)}}
html.ls-raus main,html.ls-raus footer{opacity:0;transition:opacity .15s ease-in}
html.ls-rein main,html.ls-rein footer{opacity:0}
html.ls-rein-los main,html.ls-rein-los footer{transition:opacity .22s ease-out}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.ls-raus main,html.ls-raus footer,html.ls-rein main,html.ls-rein footer{opacity:1;transition:none}
}

/* ═════ v3: / und /mk/ deckungsgleich (Robin 14.10.2026) ═══════════════════════════════
   Maßstab ist G-Tools Public: Kopfleiste 64 px (Handy 62 px) inkl. 12/10 px Innenabstand,
   16 px Luft darunter, erste Rubrik-Überschrift direkt am Anfang von #tools.
   data-g-seite setzt logo-schalter.js synchron im <head>. */
html[data-g-seite="mk"] header.topbar{margin-bottom:16px}
html[data-g-seite="mk"] header.topbar .topbar-in{padding-top:12px;padding-bottom:10px;height:auto;min-height:0;box-sizing:border-box}
html[data-g-seite="mk"] main .hero{margin-bottom:2px}
@media (max-width:600px){html[data-g-seite="mk"] main .hero{margin-bottom:30px}}
html[data-g-seite="mk"] #tools>section.toolsec:not([hidden]):first-of-type>.sec-head,
html[data-g-seite="mk"] #tools>#sec-favoriten[hidden]+section.toolsec>.sec-head,
html[data-g-seite="mk"] #sec-favoriten>.sec-head{margin-top:0}
/* Schnellzugriff: gleiche Kachelhöhe auf beiden Seiten (keine Reservierung mehr, 14.10.2026 Robin) */
#sec-schnell .card,#sec-favoriten .card{height:62px;min-height:62px;max-height:62px;box-sizing:border-box}
/* Schnellzugriff-Block der Kanzlei-Seite mit denselben Abständen wie #sec-schnell (Public .favsec) */
html[data-g-seite="mk"] #sec-favoriten{padding-bottom:4px;margin-bottom:clamp(30px,3.2vw,36px)}
html[data-g-seite="mk"] #sec-favoriten+section.toolsec>.sec-head{margin-top:0}
/* Konto-Knopf oben rechts: gleiche Schriftgröße und gleicher Randabstand wie auf Public (Inhalt ist auf beiden Seiten die Initialen aus gauth.js) */
html[data-g-seite="mk"] #auth{font-size:14px}
@media (max-width:600px){html[data-g-seite="mk"] header.topbar .topbar-in{padding-left:16px;padding-right:16px}}

/* ═════ v4: Kopfbereich und Schnellzugriff der Kanzlei-Seite exakt wie Public (Robin 14.10.2026, 13:57) ═════
   Maßstab: berechnete Werte von gtools.me/ (Desktop 1280/1600, Handy 390). Ausgenommen: Logo-Zustand und h1-Text. */
html[data-g-seite="mk"] header.topbar{box-shadow:none;min-height:0;
  background-color:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6)}
html[data-g-seite="mk"] header.topbar .topbar-in{position:relative;gap:12px}
html[data-g-seite="mk"] .topbar #kat{max-width:none;background-color:var(--surface);box-shadow:none;line-height:1.5}
html[data-g-seite="mk"] .topbar #q{background-color:var(--surface);box-shadow:none;line-height:22.08px}
/* Rubrikwahl auf beiden Seiten gleich breit (Public 150 px wäre für „ESt-Grenzgänger · 8“ zu schmal) */
@media (min-width:601px){html body .topbar .kat-wrap{width:180px;flex:0 0 180px}html body .topbar #kat{width:180px}}
html[data-g-seite="mk"] #auth{background-color:var(--surface);gap:0}
html[data-g-seite="mk"] #sec-favoriten .sec-sub{display:block}
html[data-g-seite="mk"] #tools #sec-favoriten .card .fav-btn{width:24px;height:24px;top:4px;right:4px}
@media (max-width:600px){
  html[data-g-seite="mk"] header.topbar .topbar-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
  html[data-g-seite="mk"] .topbar #kat{width:100%;display:inline-block;font-size:13.6px;font-weight:550;line-height:1.5;min-height:0}
  html[data-g-seite="mk"] .topbar #q{display:inline-block;font-weight:400;line-height:24px;min-height:0}
  html[data-g-seite="mk"] .topbar .kat-wrap{height:auto}
  html[data-g-seite="mk"] .topbar .kat-pfeil{width:12px;height:12px;right:9px}
  html[data-g-seite="mk"] .topbar .kopf-titel{position:static!important}
  html[data-g-seite="mk"] #tools #sec-favoriten .card .fav-btn{width:32px;height:32px;top:3px;right:3px}
}