/* Vienna World: Kopf- und Fusszeile aus dem Divi Theme Builder. Raster,
   Groessen, Abstaende, Flaechen und Schrift stehen als Werte an den Modulen.
   Hier bleibt, was Divi nicht fuehrt: Innenleben des Menues, Pseudoelemente,
   Zustaende und Elemente, die erst das Skript anlegt. Diese Datei laedt vor
   Divis erzeugtem Layout-CSS. */

/* sprosse4: Das Mega-Menue richtet sich an der Kopfsektion aus; Spalte und
   Raster duerfen dafuer keine eigene Lage haben. Divi kennt „static“ nicht. */
.vw-composed .et_pb_column.vw-header-column { position: static; width: 100%; }
.vw-header-grid { position: static; }
/* sprosse4: das Logo ist ein Bild im Verweis; ohne Blockanzeige bleibt
   unter ihm die Zeilenluecke stehen. */
.vw-brand-logo a, .vw-brand-logo img, .vw-footer-logo-marke img { display: block; }
/* sprosse4: Zwischen 981 und 1050 px ist die Logospalte „auto“; das SVG mit
   prozentualer Maximalbreite meldet keine Mindestbreite, das Menue drueckte
   die Spalte auf 0. Divi fuehrt keine Mindestbreite je Rasterspur. */
@media (min-width: 981px) and (max-width: 1050px) {
  .vw-header-grid .vw-brand { min-width: 168px; }
}

/* Menue: Abstaende der Punkte, Unterstrich beim Zeigen und das Mega-Menue
   sind Kindelemente des Menuemoduls ohne Divi-Wert. */
.vw-main-nav .et_pb_menu_inner_container,
.vw-main-nav .et_pb_menu__wrap { justify-content: center; }
.vw-main-nav .et-menu { margin: 0; gap: 34px; }
.vw-main-nav .et-menu > li { padding: 0; margin: 0; }
/* sprosse4: Divis Menueschrift gilt fuer alle Ebenen und auf Shopseiten auch
   im Mega-Menue; die oberste Ebene ist kleiner als die Produktgruppen. */
.vw-main-nav .et-menu > li > a { position: relative; display: inline-block; padding: 0; color: #171816; font-size: 14px; font-weight: 650; line-height: 1.2; }
.vw-main-nav .et-menu > li > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: currentColor; transition: right .2s ease; }
.vw-main-nav .et-menu > li > a:hover { opacity: 1; }
.vw-main-nav .et-menu > li > a:hover::after { right: 0; }
/* sprosse4: Kontakt steht als Schaltflaeche im Menue (Kontur wie das Preset
   konturDunkel); ein Menuepunkt fuehrt keine Divi-Schaltflaechenwerte.
   top -4px gleicht Divis padding-bottom 8px der uebrigen Punkte aus, damit
   die Schrift auf einer Linie steht. */
@media (min-width: 981px) {
  body #page-container .vw-main-nav .et-menu > li.vw-nav-kontakt > a { top: -4px; align-self: center; height: auto; margin: -12px 0; padding: 11px 20px; border: 1px solid #171816; border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
  body #page-container .vw-main-nav .et-menu > li.vw-nav-kontakt > a::after { display: none; }
  body #page-container .vw-main-nav .et-menu > li.vw-nav-kontakt > a:hover,
  body #page-container .vw-main-nav .et-menu > li.vw-nav-kontakt > a:focus-visible { background: #171816; color: #ffffff; }
}
@media (min-width: 981px) {
  .vw-main-nav .et-menu > li.vw-mega { position: static; }
  body #page-container .vw-main-nav .et-menu > li.vw-mega > a { padding-right: 20px; }
  body #page-container .vw-main-nav .et-menu > li.vw-mega > a::after { content: ""; position: absolute; left: auto; right: 2px; top: 50%; bottom: auto; width: 6px; height: 6px; margin: -10px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; background: none; font-size: 0; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
  body #page-container .vw-main-nav .et-menu > li.vw-mega:hover > a::after,
  body #page-container .vw-main-nav .et-menu > li.vw-mega:focus-within > a::after { margin-top: -7px; transform: rotate(-135deg); }
  .vw-main-nav .et-menu > li.vw-mega > a::before { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: 44px; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu { top: 100%; left: 0; right: 0; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 0 40px; min-height: 330px; padding: 40px 48px 44px calc(48px + 330px); border: 1px solid #d8d3c8; border-top: 0; border-radius: 0 0 22px 22px; background: #ffffff; box-shadow: 0 30px 60px rgba(23,24,22,.14); transition: opacity .2s ease, visibility .2s ease; }
  body #page-container .vw-main-nav .et-menu li.vw-mega:focus-within > .sub-menu { visibility: visible; opacity: 1; }
  .vw-main-nav .et-menu li.vw-mega > .sub-menu::after { content: "Sortiment"; position: absolute; left: 48px; top: 44px; color: #171816; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .2em; text-transform: uppercase; }
  .vw-main-nav .et-menu li.vw-mega > .sub-menu::before { content: "Produktgruppen"; position: absolute; left: 48px; top: 72px; width: 300px; color: #171816; font-family: "Gelasio", Georgia, serif; font-size: 38px; font-weight: 500; line-height: .95; letter-spacing: -.045em; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li { width: auto; padding: 0; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li:not(.vw-mega-all) { border-bottom: 1px solid #d8d3c8; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu a { position: relative; display: flex; width: auto; min-height: 48px; align-items: center; gap: 10px; padding: 0; background: none; color: #171816; font-size: 15px; font-weight: 650; line-height: 1.2; opacity: 1; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu a::after { content: ""; position: static; width: 7px; height: 7px; margin-left: auto; margin-right: 4px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; background: none; transform: rotate(45deg); transition: transform .2s ease; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li:not(.vw-mega-all) a:hover::after,
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li:not(.vw-mega-all) a:focus-visible::after { transform: translateX(4px) rotate(45deg); }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li.vw-mega-marke a::before { content: ""; flex: none; width: 18px; height: 4px; }
  .vw-main-nav .et-menu li.vw-mega-bauxili a::before { background-color: #e8a33d; }
  .vw-main-nav .et-menu li.vw-mega-heart a::before { background-color: #b8912f; }
  .vw-main-nav .et-menu li.vw-mega-stringlies a::before { background-color: #c2402f; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li.vw-mega-all { position: absolute; left: 48px; bottom: 44px; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li.vw-mega-all a { min-height: 50px; padding: 0 22px; border: 1px solid #171816; border-radius: 999px; background: #171816; color: #ffffff; transition: background-color .2s ease, color .2s ease; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li.vw-mega-all a::after { display: none; }
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li.vw-mega-all a:hover,
  body #page-container .vw-main-nav .et-menu li.vw-mega > .sub-menu li.vw-mega-all a:focus-visible { background: transparent; color: #171816; }
}

/* sprosse4: Klappmenue „Geschenkideen“ (Landingpages) in der Gestalt des
   Mega-Menues: Pfeil am Punkt, weisse Flaeche mit Linien, Pfeil je Eintrag.
   Divis blaue Oberkante und graue Schrift sind Kindelemente ohne Divi-Wert. */
@media (min-width: 981px) {
  body #page-container .vw-main-nav .et-menu > li.vw-klapp > a { padding-right: 20px; }
  body #page-container .vw-main-nav .et-menu > li.vw-klapp > a::after { content: ""; position: absolute; left: auto; right: 2px; top: 50%; bottom: auto; width: 6px; height: 6px; margin: -10px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; background: none; font-size: 0; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
  body #page-container .vw-main-nav .et-menu > li.vw-klapp:hover > a::after,
  body #page-container .vw-main-nav .et-menu > li.vw-klapp:focus-within > a::after { margin-top: -7px; transform: rotate(-135deg); }
  body #page-container .vw-main-nav .et-menu li.vw-klapp > .sub-menu { display: flex; flex-direction: column; top: 100%; left: -28px; width: 280px; padding: 12px 28px 16px; border: 1px solid #d8d3c8; border-radius: 0 0 22px 22px; background: #ffffff; box-shadow: 0 30px 60px rgba(23,24,22,.14); transition: opacity .2s ease, visibility .2s ease; }
  body #page-container .vw-main-nav .et-menu li.vw-klapp:focus-within > .sub-menu { visibility: visible; opacity: 1; }
  body #page-container .vw-main-nav .et-menu li.vw-klapp > .sub-menu li { display: block; float: none; width: 100%; padding: 0; }
  body #page-container .vw-main-nav .et-menu li.vw-klapp > .sub-menu li + li { border-top: 1px solid #d8d3c8; }
  body #page-container .vw-main-nav .et-menu li.vw-klapp > .sub-menu a { position: relative; display: flex; width: 100%; min-height: 44px; align-items: center; gap: 10px; padding: 0; background: none; color: #171816; font-size: 15px; font-weight: 650; line-height: 1.2; opacity: 1; }
  body #page-container .vw-main-nav .et-menu li.vw-klapp > .sub-menu a::after { content: ""; position: static; width: 7px; height: 7px; margin-left: auto; margin-right: 4px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; background: none; transform: rotate(45deg); transition: transform .2s ease; }
  body #page-container .vw-main-nav .et-menu li.vw-klapp > .sub-menu a:hover::after,
  body #page-container .vw-main-nav .et-menu li.vw-klapp > .sub-menu a:focus-visible::after { transform: translateX(4px) rotate(45deg); }
}

/* Symbole in der Kopfzeile: Klickflaeche, Bildgroesse und Zeigen sind
   Kindelemente des Bildmoduls. Der Zaehler am Warenkorb entsteht im Skript. */
.vw-header-actions { white-space: nowrap; }
.vw-header-action .et_pb_image_wrap,
.vw-header-action a { position: relative; display: inline-flex; width: 44px !important; height: 44px; align-items: center; justify-content: center; padding: 0; }
.vw-header-action a { transition: opacity .2s ease; }
.vw-header-action a:hover { opacity: .58; }
.vw-header-action img { display: block; width: 21px !important; height: 21px; object-fit: contain; }
.vw-cart-count { position: absolute; z-index: 2; top: 2px; right: 1px; display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #f5f1e7; border-radius: 999px; background: #c2402f; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.vw-cart-count:not(.is-visible) { display: none; }

/* Suchfeld: Ajax Search Lite, vom Skript in die Kopfzeile gehaengt. */
.vw-search-panel { position: absolute; z-index: 40; top: calc(100% + 1px); right: max(32px, calc((100vw - 1320px) / 2)); display: none; width: min(520px, calc(100% - 64px)); padding: 18px; gap: 10px; background: #f5f1e7; border: 1px solid #cdc7ba; border-top: 4px solid #0b4a3f; box-shadow: 0 24px 60px rgba(23,24,22,.2); }
.vw-search-panel.is-open { display: block; }
.vw-search-panel div.asl_m .probox .proinput input.orig,
div.asl_r .results .item .asl_content, div.asl_r .results .item .asl_content h3, div.asl_r .results .item .asl_content h3 a, div.asl_r p.asl_nores { font-size: 16px !important; line-height: 1.4 !important; }

/* Fokus: Zustand ohne Divi-Wert, fuer alle Eingabefelder der Seite. */
body :is(input, select, textarea):is(:focus, :focus-visible) { outline: none !important; box-shadow: none !important; border-color: #171816; }
body .wc-block-components-text-input.is-active input, body .wc-block-components-combobox .components-form-token-field__input:focus, body .wc-blocks-components-select__select:focus { box-shadow: none !important; outline: none !important; }

/* Markenleiste: Farbstrich unter dem Namen ist ein Pseudoelement; das
   Textmodul fuehrt kein eigenes Raster fuer seinen Verweis. */
.vw-rail-item { display: grid; place-items: center; }
.vw-rail-item .et_pb_text_inner,
.vw-rail-item p { width: 100%; }
.vw-rail-item a { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; text-align: center; }
.vw-rail-item a::after { content: ""; width: 28px; height: 4px; transition: width .2s ease; }
.vw-rail-item:hover a::after { width: 46px; }
.vw-rail-vienna a::after { background-color: #0b4a3f; }
.vw-rail-rubbi a::after { background-color: #171816; }
.vw-rail-bauxili a::after { background-color: #e8a33d; }
.vw-rail-heart a::after { background-color: #b8912f; }
.vw-rail-museion a::after { background-color: #13213a; }
.vw-rail-museion a::after { background-color: #13213a; }

/* Fusszeile: Verweise, Logoflaechen und Sprachwahl sind Kindelemente. */
.vw-footer-link a { display: block; opacity: .78; hyphens: auto; }
.vw-footer-link a:hover { opacity: 1; text-decoration: underline; }
.vw-footer-service-text p { opacity: .78; }
/* sprosse4: Divi setzt bei SVG-Bildern die Hoehe aus der Bilddatei und
   ueberstimmt damit den Modulwert; die Flaeche braucht aber 48 px. Eine feste
   Grundbreite (flex-basis) fuehrt Divi nicht, ohne sie bricht die Logozeile um. */
body #page-container .vw-footer-logo { display: flex; flex: 0 0 76px; height: 48px; align-items: center; justify-content: center; }
body #page-container .vw-footer-logo .et_pb_image_wrap { display: flex; align-items: center; justify-content: center; width: 54px; height: 28px; }
body #page-container .vw-footer-logo img { display: block; width: 100%; height: 100%; max-width: none; }
.vw-footer-sprache .wpml-ls { padding: 0; border: 0; background: none; }
.vw-footer-sprache .wpml-ls ul { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.vw-footer-sprache .wpml-ls li { padding: 0; }
.vw-footer-sprache .wpml-ls a { padding: 0; color: inherit; background: none; }
.vw-footer-sprache .wpml-ls a:hover { text-decoration: underline; }
.vw-footer-sprache .wpml-ls-current-language a { font-weight: 700; }

/* Handy-Menue: Umschalten, Lage der Klappliste, Linien und die Produktgruppe
   zum Aufklappen sind Kindelemente des Menuemoduls. */
.vw-main-nav .et_mobile_nav_menu { margin: 0; float: none; display: none; align-items: center; }
body #page-container .et_pb_section .vw-main-nav,
.vw-main-nav .et_pb_menu_inner_container,
.vw-main-nav .et_pb_menu__wrap,
.vw-main-nav .et_mobile_nav_menu,
.vw-main-nav .mobile_nav { position: static; background: none; }
body #page-container .vw-main-nav .mobile_menu_bar { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
body #page-container .vw-main-nav .mobile_menu_bar::before { line-height: 1; top: 0; }
body #page-container .vw-main-nav .et_mobile_menu { position: absolute; left: 0; right: 0; width: auto; top: 100%; margin: 0; padding: 0; border-top: 3px solid #171816; box-shadow: 0 26px 60px rgba(23,24,22,.18); }
/* sprosse4: Divi setzt die Handy-Schrift fuer alle Menueebenen gleich; die
   aufgeklappte Produktgruppe ist eine Stufe kleiner. */
body #page-container .vw-main-nav .et_mobile_menu li a { padding: 18px 24px; border-bottom: 1px solid #d8d3c8; font-size: 18px; }
body #page-container .vw-main-nav .et_mobile_menu li:last-child a { border-bottom: 0; }
body #page-container .vw-main-nav .et_mobile_menu li.vw-mega > a,
body #page-container .vw-main-nav .et_mobile_menu li.vw-klapp > a { display: flex; align-items: center; justify-content: space-between; }
body #page-container .vw-main-nav .et_mobile_menu li.vw-mega > a::after,
body #page-container .vw-main-nav .et_mobile_menu li.vw-klapp > a::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
body #page-container .vw-main-nav .et_mobile_menu li.vw-mega.vw-mega-offen > a::after,
body #page-container .vw-main-nav .et_mobile_menu li.vw-klapp.vw-mega-offen > a::after { transform: rotate(-135deg); }
body #page-container .vw-main-nav .et_mobile_menu li.vw-mega > ul,
body #page-container .vw-main-nav .et_mobile_menu li.vw-klapp > ul { display: none !important; }
body #page-container .vw-main-nav .et_mobile_menu li.vw-mega.vw-mega-offen > ul,
body #page-container .vw-main-nav .et_mobile_menu li.vw-klapp.vw-mega-offen > ul { display: block !important; }
body #page-container .vw-main-nav .et_mobile_menu li.vw-mega > ul a,
body #page-container .vw-main-nav .et_mobile_menu li.vw-klapp > ul a { padding-left: 40px; font-size: 16px; }

@media (max-width: 1050px) and (min-width: 768px) {
  .vw-main-nav .et-menu { gap: 22px; }
}

@media (max-width: 980px) {
  /* sprosse4: Divi gibt Modulen in Spalten ab Tablet einen Abstand nach unten;
     fuer alle Module gleich, ohne gemeinsamen Divi-Wert. */
  :where(body) .et_pb_column .et_pb_module { margin-bottom: 0; }
  .vw-main-nav .et_pb_menu__menu { display: none; }
  .vw-main-nav .et_mobile_nav_menu { display: flex; }
}

@media (max-width: 767px) {
  .vw-search-panel { left: 16px; right: 16px; width: auto; padding: 14px; }
  .vw-rail-item a { gap: 6px; padding: 9px 2px; }
  .vw-rail-item a::after { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .vw-header *,
  .vw-world-rail *,
  .vw-footer * { transition: none !important; animation: none !important; }
}

/* sprosse4: Divi setzt Schaltflaechen beim Zeigen auf padding 1em !important
   (V2-51, V2-61); die Schaltflaechen der Unterseiten behalten ihre 26 px. */
body #page-container .et_pb_section .vw-us-knopf.et_pb_button.et_pb_button:hover,
body #page-container .et_pb_section .vw-us-knopf.et_pb_button.et_pb_button:focus,
body #page-container .et_pb_section .vw-us-knopf.et_pb_button.et_pb_button:active { padding-left: 26px !important; padding-right: 26px !important; }

/* sprosse4: Brotkrume (globales Element, brotkrume.mjs). Rank Math gibt
   nav > p mit Verweisen aus; Absatzrand, Unterstrich und Zeigefarbe sind
   Kindelemente ohne Divi-Wert. Gleich wie .vw-pr-pfad auf der Produktseite. */
.vw-pfad p { margin: 0; padding: 0; }
.vw-pfad a { text-decoration: none; }
.vw-pfad a:hover { color: var(--gcid-vw-tinte); }