/* Stannek, Kopfzeile auf allen Seiten: Menüpunkt „Formulare & Tools“ und Button „Fernwartung“ (TeamViewer).
   Ergänzt site.css, ohne sie zu ändern. */

.hdr-remote {
  min-height: 44px; padding: 0.5rem 1rem; gap: 0.45rem;
  background: var(--light); color: var(--blue); border-color: transparent; font-size: 0.98rem;
}
.hdr-remote:hover { background: var(--blue); color: var(--white); }
.hdr-remote svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav a[aria-current="page"] { color: var(--blue); }

/* Mobil: nur das Zeichen, Beschriftung für Screenreader bleibt per title und Menü */
@media (max-width: 719px) {
  .hdr-remote { width: 44px; padding: 0; }
  .hdr-remote span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.nav a, .header-actions .btn { white-space: nowrap; }

/* Sehr schmale Handys: Platz für Logo, Fernwartung und Menü */
@media (max-width: 419px) {
  .header-actions:has(.hdr-remote) .header-cta-mobile { display: none; }
}

/* Schmale Desktops: Menü enger setzen, damit alles in eine Zeile passt */
@media (min-width: 1000px) and (max-width: 1439px) {
  .nav ul { gap: 1.05rem; }
  .nav a { font-size: 0.94rem; }
  .header-inner { gap: 1rem; }
  .hdr-remote span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hdr-remote { width: 44px; padding: 0; }
}
@media (min-width: 1440px) {
  .nav ul { gap: 1.4rem; }
}
/* Kleine Desktops: kurzer Anfrage-Button statt langem */
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav ul { gap: 0.85rem; }
  .nav a { font-size: 0.9rem; }
  .header-actions .header-cta { display: none; }
  .header-actions .header-cta-mobile { display: inline-flex; }
}

/* Untermenü „DATEV & Cloud“: Partnerschaft als Seite, Cloud und 100 % digital als Unterseiten */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex !important; align-items: center; gap: 0.3rem; }
.nav-drop-btn svg { width: 0.75em; height: 0.75em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.nav-drop.is-active > .nav-drop-btn { color: var(--blue); }
.nav-sub {
  position: absolute; left: 50%; top: 100%; z-index: 60;
  display: grid !important; width: 19rem; margin: 0; padding: 0.5rem; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(12, 26, 68, 0.35);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop:hover .nav-sub, .nav-drop:focus-within .nav-sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.18s, transform 0.18s;
}
.nav-drop:hover .nav-drop-btn svg, .nav-drop:focus-within .nav-drop-btn svg { transform: rotate(180deg); }
.nav-sub a { display: grid !important; gap: 0.15rem; padding: 0.7rem 0.85rem !important; border-radius: 10px; white-space: normal !important; }
.nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--surface); }
.nav-sub strong { font-weight: 600; font-size: 0.97rem; color: var(--ink); }
.nav-sub a[aria-current="page"] strong, .nav-sub a:hover strong { color: var(--blue); }
.nav-sub small { font-size: 0.82rem; color: var(--muted, #5a6585); font-weight: 400; }

.mnav-group > span { display: block; padding: 0.9rem 0 0.4rem; color: var(--petrol); font: 600 0.8rem var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.mnav-group ul { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--light); }
.mobile-nav .mnav-group li a { font-size: 1.05rem; }
.mobile-nav a[aria-current="page"] { color: var(--blue); }
.nav .nav-sub { gap: 0.15rem; }

/* Ersatz für das meetergo-Widget: Reiter am rechten Rand, Mitte */
.termin-fab {
  position: fixed; right: 0; top: 50%; z-index: 70; transform: translateY(-50%);
  writing-mode: vertical-rl; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1rem 0.65rem; border-radius: 12px 0 0 12px; background: #e6f542; color: var(--night);
  font: 600 0.95rem var(--font-display); text-decoration: none; box-shadow: 0 10px 30px -10px rgba(12, 26, 68, 0.5);
}
.termin-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; writing-mode: horizontal-tb; }
.termin-fab:hover { color: var(--night); background: #d4e52a; }
.termin-fab:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
@media (max-width: 599px) { .termin-fab { padding: 0.8rem 0.5rem; font-size: 0.85rem; } }