/* voiceOne Navigation 2026 – /css/vo-2026-nav.css (zusammen mit /js/vo-nav.js, Verweis mit ?v=JJJJMMTT).
   Stand 07.10.2026. Das Skript baut die Inhalte: Ausklappmenüs „Funktionen“ und „Branchen“ mit allen Seiten,
   den Sprachumschalter aus den hreflang-Angaben der Seite und das Menü für Handy und Tablet.
   Gilt gleich für die Startseite (eigene Stilregeln im Kopf) und die Unterseiten (vo-2026.css): eigene Klassen vn-,
   Vorrang über „header.nav“, deshalb unabhängig von der Reihenfolge der Stildateien.
   Eine Achse je Linie: Haltepunkte und Teilstrecken haben ihre Mitte 7 px vom linken Listenrand; jede Teilstrecke
   läuft von der Mitte ihres Haltepunkts bis zur Mitte des nächsten, auch wenn ein Eintrag umbricht. */

/* Kopfzeile: Teile schrumpfen nicht, damit das Skript messen kann, ob die Leiste passt (sonst Klasse vn-eng) */
header.nav .nav-in{gap:32px}
header.nav .nav-links{flex:none;align-items:center;gap:24px;white-space:nowrap}
header.nav .nav-rechts{flex:none;margin-left:auto;padding-left:16px}
header.nav .nav-rechts .btn{white-space:nowrap}
header.nav[data-vn] details.menue{display:none!important}

/* Knöpfe der Ausklappmenüs */
.vn-knopf{display:inline-flex;align-items:center;gap:7px;margin:0;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:15px;font-weight:500;line-height:1.6;color:var(--ink-2)}
.vn-knopf:hover,.vn-knopf[aria-expanded="true"]{color:var(--ink)}
.vn-knopf svg{width:10px;height:10px;flex:none;transition:transform .2s}
.vn-knopf[aria-expanded="true"] svg{transform:rotate(180deg)}
.vn-knopf.vn-hier{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:8px}

/* Ausklappmenü über die ganze Breite unter der Kopfzeile */
.vn-panel{position:absolute;left:0;right:0;top:100%;z-index:2;max-height:calc(100vh - 72px);overflow-y:auto;overscroll-behavior:contain;white-space:normal;text-align:left;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 40px 60px -42px rgba(26,26,46,.4)}
.vn-panel[hidden]{display:none}
.vn-panel-in{padding-top:24px;padding-bottom:30px}
.vn-panel-kopf{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.vn-panel-kopf b{font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
header.nav .vn-alle,header.nav .vn-panel .vn-alle{font-size:14px;font-weight:600;line-height:1.4;color:var(--blue-d);text-decoration:none}
header.nav .vn-alle:hover,header.nav .vn-panel .vn-alle:hover{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
.vn-spalten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
.vn-gt{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px;padding:0;max-width:none;font-size:13px;font-weight:600;line-height:1.35;color:var(--ink-2)}
.vn-gt i{flex:none;width:22px;height:5px;border-radius:3px;background:var(--c)}
.vn-marke{display:inline-block;padding:0 6px;border-radius:3px;background:var(--blue-d);color:#fff;font-size:10.5px;font-weight:700;line-height:1.5;letter-spacing:.01em;vertical-align:1px;white-space:nowrap}

/* Linie mit Haltestellen: Endhaltestellen 18 px mit dunklem Ring, Zwischenhalte 14 px, Mitte jeweils 7 px / 17 px */
.vn-halte{list-style:none;margin:0;padding:0}
.vn-halte li{position:relative;margin:0;padding:6px 0 6px 28px}
header.nav .vn-halte a{display:block;font-size:15px;font-weight:500;line-height:22px;color:var(--ink);text-decoration:none;white-space:normal}
header.nav .vn-halte a:hover{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
header.nav .vn-halte a[aria-current]{color:var(--blue-d);font-weight:600;text-decoration:none}
.vn-hp{position:absolute;z-index:1;left:0;top:10px;box-sizing:border-box;width:14px;height:14px;border-radius:50%;border:3px solid var(--c);background:var(--white);transition:background .15s}
.vn-halte li:first-child>.vn-hp,.vn-halte li:last-child>.vn-hp{left:-2px;top:8px;width:18px;height:18px;border:4px solid var(--ink)}
.vn-halte li:hover>.vn-hp,.vn-halte li.vn-hier>.vn-hp{background:var(--c)}
.vn-ts{position:absolute;left:5px;top:17px;width:4px;height:100%;background:var(--c)}
.vn-halte li:last-child>.vn-ts{display:none}

/* Sprachumschalter (breite Leiste). Knopf genau 32 px hoch, Liste beginnt genau an der Unterkante der 72-px-Kopfzeile. */
header.nav details.vn-sprache{position:relative;margin:0;border:0}
header.nav details.vn-sprache>summary,header.nav details.vn-menue>summary,header.nav details.vn-akk>summary{list-style:none;cursor:pointer;margin:0;border:0}
header.nav details.vn-sprache>summary::-webkit-details-marker,header.nav details.vn-menue>summary::-webkit-details-marker,header.nav details.vn-akk>summary::-webkit-details-marker{display:none}
header.nav details.vn-sprache>summary::after,header.nav details.vn-menue>summary::after{content:none;display:none}
header.nav details.vn-sprache>summary{display:flex;align-items:center;gap:6px;height:32px;padding:0;font-size:14px;font-weight:600;line-height:1;color:var(--ink-2)}
header.nav details.vn-sprache>summary:hover,header.nav details.vn-sprache[open]>summary{color:var(--ink)}
.vn-sprache summary svg{width:16px;height:16px;flex:none}
.vn-sprache-liste{position:absolute;right:-16px;top:calc(100% + 20px);z-index:2;min-width:212px;margin:0;padding:6px 0;list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(26,26,46,.4)}
header.nav .vn-sprache-liste a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 16px;font-size:15px;font-weight:500;line-height:1.35;color:var(--ink);text-decoration:none}
header.nav .vn-sprache-liste a:hover{background:var(--paper)}
header.nav .vn-sprache-liste a[aria-current]{color:var(--blue-d);font-weight:600}
.vn-sprache-liste small{font:12px/1.35 var(--mono);color:var(--ink-3)}

/* Menü für Handy und Tablet */
.vn-menue{display:none}
header.nav details.vn-menue{margin:0;border:0}
header.nav details.vn-menue>summary{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:4px;background:transparent;font-size:15px;font-weight:600;line-height:1.2;color:var(--ink)}
header.nav details.vn-menue[open]>summary{background:var(--ink);border-color:var(--ink);color:#fff}
.vn-blatt{position:absolute;left:0;right:0;top:100%;z-index:2;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;white-space:normal;text-align:left;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 40px 60px -40px rgba(26,26,46,.45)}
.vn-blatt-in{display:block;padding-top:6px;padding-bottom:24px}
header.nav details.vn-akk{margin:0;border:0;border-bottom:1px solid var(--line)}
header.nav details.vn-akk>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)}
header.nav details.vn-akk>summary::after{content:"+";display:block;font-size:24px;font-weight:400;line-height:1;color:var(--blue)}
header.nav details.vn-akk[open]>summary::after{content:"–"}
.vn-akk-in{padding:6px 0 22px}
.vn-akk .vn-spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.vn-akk .vn-alle{display:inline-block;margin-top:18px}
.vn-einfach{list-style:none;margin:0;padding:0}
.vn-einfach li{margin:0;border-bottom:1px solid var(--line)}
header.nav .vn-einfach a{display:block;padding:15px 0;font-size:18px;font-weight:600;line-height:1.3;color:var(--ink);text-decoration:none}
header.nav .vn-einfach a[aria-current]{color:var(--blue-d)}
.vn-sprachen{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:20px}
.vn-sprachen>span{margin-right:8px;font-size:13px;font-weight:600;color:var(--ink-3)}
header.nav .vn-sprachen a{display:inline-block;min-width:44px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;font-size:14px;font-weight:600;line-height:1.2;text-align:center;color:var(--ink-2);text-decoration:none}
header.nav .vn-sprachen a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Umklappen: gemessen vom Skript (vn-eng) und in jedem Fall unter 1020 px */
header.nav.vn-eng .nav-links,header.nav.vn-eng .vn-sprache{display:none}
header.nav.vn-eng .vn-menue{display:block}
header.nav.vn-eng .nav-rechts{padding-left:0}
@media (max-width:1020px){
  header.nav .vn-sprache{display:none}
  header.nav .vn-menue{display:block}
  header.nav .nav-rechts{padding-left:0}
}
@media (max-width:640px){
  header.nav .nav-in{gap:12px;height:64px}
  header.nav .brand img{height:22px}
  header.nav .nav-rechts{gap:10px}
  header.nav .nav-login{display:none}
  header.nav .nav-rechts .btn-sm{padding:9px 12px;font-size:14px}
  header.nav details.vn-menue>summary{padding:8px 10px;font-size:14px}
  .vn-panel,.vn-blatt{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px)}
  .vn-akk .vn-spalten{grid-template-columns:minmax(0,1fr)}
  /* Nachtrag Startseite: Die Statuszeile der Gesprächsmitschrift bricht um, statt die Seite zu verbreitern */
  .ms-ton .ms-status{white-space:normal;min-width:0}
}
/* Schmale Handys: Logo, Menü und „Kostenlos testen“ mit vollem Randabstand */
@media (max-width:400px){
  header.nav .nav-in{gap:10px}
  header.nav .brand img{height:20px}
  header.nav .nav-rechts{gap:8px}
  header.nav .nav-rechts .btn-sm{padding:8px 10px;font-size:13.5px}
  header.nav details.vn-menue>summary{padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){.vn-knopf svg,.vn-hp{transition:none}}