/* 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; }
}

/* Desktop: Fernwartung als Zeichen-Button (Beschriftung per title und für Screenreader), damit Logo, Menü und Anfrage Platz haben */
@media (min-width: 1100px) {
  .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; }
}
/* Schmale Desktops: Menü enger setzen, damit alles in eine Zeile passt */
@media (min-width: 1100px) and (max-width: 1439px) {
  .nav ul { gap: 1.05rem; }
  .nav a { font-size: 0.94rem; }
  .header-inner { gap: 1rem; }
}
@media (min-width: 1440px) {
  .nav ul { gap: 1.6rem; }
}
/* Kleine Desktops: kurzer Anfrage-Button statt langem */
@media (min-width: 1100px) 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(10, 19, 51, 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: #c4ff45; color: var(--night);
  font: 600 0.95rem var(--font-display); text-decoration: none; box-shadow: 0 10px 30px -10px rgba(10, 19, 51, 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: #b4ef2a; }
.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; } }

/* Logo in der Kopfzeile: Signet auf einer Kachel in Stannek-Blau (App-Icon-Fassung, Weiß mit Lime-Pfeil),
   dazu die Wortmarke kräftig in Navy. Alle paar Sekunden läuft die Lichtspur durch das S, der Pfeil leuchtet auf
   und ein Glanz zieht über die Kachel. Beim Darüberfahren rückt der Pfeil nach vorn. Footer bleibt kompakt. */
.site-header .logo { gap: 0.75rem; }
.site-header .logo-tile {
  position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 22%;
  overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 95% at 18% 0%, #8a70ff 0%, #3f00ff 52%, #2a00b8 100%);
  box-shadow: 0 10px 24px -10px rgba(63, 0, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: box-shadow 0.3s var(--ease, ease), transform 0.3s var(--ease, ease);
}
.site-header .logo-tile .logo-mark { position: relative; z-index: 1; width: 34px; height: 33px; overflow: visible; }
.site-header .logo-mark .lm-bracket, .site-header .logo-mark .lm-s { fill: #ffffff; }
.site-header .logo-mark .lm-arrow {
  fill: #c4ff45; transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 1.5px rgba(196, 255, 69, 0.95)) drop-shadow(0 0 5px rgba(196, 255, 69, 0.6));
  transition: transform 0.3s var(--ease, ease);
}
.site-header .logo-tile::before {
  content: ""; position: absolute; z-index: 0; left: 0; top: 50%; width: 75%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(196, 255, 69, 0), rgba(196, 255, 69, 0.95));
  box-shadow: 0 0 6px rgba(196, 255, 69, 0.8); transform: translateX(-100%); opacity: 0;
}
.site-header .logo-tile::after {
  content: ""; position: absolute; inset: -30%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.38) 50%, transparent 58%); transform: translateX(-110%);
}
.site-header .logo-word { font-size: 1.95rem; font-weight: 800; letter-spacing: -0.035em; }
.site-header .logo:hover .logo-tile, .site-header .logo:focus-visible .logo-tile {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(63, 0, 255, 0.95), 0 0 0 3px rgba(196, 255, 69, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@media (prefers-reduced-motion: no-preference) {
  .site-header .logo-tile::before { animation: lt-trail 7s cubic-bezier(.2, .8, .2, 1) 0.8s infinite; }
  .site-header .logo-tile::after { animation: lt-sheen 7s ease-in-out 0.8s infinite; }
  .site-header .logo-mark .lm-arrow { animation: lt-arrow 7s cubic-bezier(.2, .8, .2, 1) 0.8s infinite; }
  .site-header .logo:hover .lm-arrow { animation: none; transform: translateX(16%); }
}
@keyframes lt-trail { 0% { transform: translateX(-100%); opacity: 0; } 3% { opacity: 1; } 12% { transform: translateX(-6%); opacity: 1; } 18%, 100% { transform: translateX(-6%); opacity: 0; } }
@keyframes lt-arrow { 0%, 11% { transform: none; } 16% { transform: translateX(18%) scale(1.12); } 26%, 100% { transform: none; } }
@keyframes lt-sheen { 0%, 16% { transform: translateX(-110%); } 34%, 100% { transform: translateX(110%); } }
@media (min-width: 1100px) and (max-width: 1279px) {
  .site-header .logo-tile { width: 48px; height: 48px; }
  .site-header .logo-tile .logo-mark { width: 31px; height: 30px; }
  .site-header .logo-word { font-size: 1.75rem; }
}
@media (max-width: 1099px) {
  .site-header .logo-tile { width: 46px; height: 46px; }
  .site-header .logo-tile .logo-mark { width: 30px; height: 29px; }
  .site-header .logo-word { font-size: 1.7rem; }
}
@media (max-width: 419px) {
  .site-header .logo { gap: 0.55rem; }
  .site-header .logo-tile { width: 40px; height: 40px; }
  .site-header .logo-tile .logo-mark { width: 26px; height: 25px; }
  .site-header .logo-word { font-size: 1.45rem; }
}
@media (max-width: 359px) { .site-header .logo-word { font-size: 1.25rem; } }