/* Theme Name: Vorsicht.info Theme Theme URI: https://vorsicht.info/ Description: Darstellung & Design für Vorsicht.info. Stabile, eingefrorene Design-Basis auf Avanta Pro; bestehende Avanta-Einstellungen und Frontend-Strukturen bleiben unverändert. Author: Vorsicht.info Author URI: https://vorsicht.info/ Template: avanta-pro Version: 3.0.21 Requires at least: 6.0 Requires PHP: 8.0 Text Domain: vorsicht-info-theme */ /* * Vorsicht.info Theme 3.0.21 – RC · Darstellung & Design * Build: 2026.08.25.1 * THEME = Darstellung | PLATFORM = Funktionen */ :root { --vorsicht-logo-desktop: 260px; --vorsicht-logo-tablet: 230px; --vorsicht-logo-mobile: 220px; --vorsicht-logo-offset-x: 0px; --vorsicht-ticker-offset-x: 80px; --vorsicht-ticker-label-offset-x: 0px; --vorsicht-ticker-text-offset-x: 0px; --vorsicht-ticker-speed: 12s; --vorsicht-ticker-bg: var(--dt-primary-color, var(--primary-color, var(--corpiva-primary-color, #e31e24))); --vorsicht-ticker-text: #ffffff; --vorsicht-ticker-label-bg: rgba(255,255,255,.14); --vorsicht-ticker-margin-top: 0px; --vorsicht-ticker-margin-bottom: 0px; /* Deutlich unterscheidbare Statusfarben des Header-Tickers */ --vorsicht-ticker-accent-urgent: #b42318; --vorsicht-ticker-accent-warning: #e51b0f; --vorsicht-ticker-accent-caution: #f5a800; --vorsicht-ticker-accent-tip: #147f82; --vorsicht-ticker-accent-info: #1677ff; --vorsicht-ticker-accent-manual: #147f82; --vorsicht-header-cta-offset-x: 42px; } /* Logo: Avanta-Begrenzung lösen, aber Farben/Layout nicht überschreiben */ .site--logo, .logo, .navbar-brand, .site-branding, .dt_navbar-brand, .dt_header .site--logo, .dt_header .logo { max-width: none !important; width: auto !important; flex: 0 0 auto !important; overflow: visible !important; } .site--logo a, .logo a, .navbar-brand a, .custom-logo-link { display: inline-flex !important; align-items: center !important; max-width: none !important; width: auto !important; overflow: visible !important; } .site--logo img, .logo img, .navbar-brand img, .custom-logo { width: auto !important; max-width: var(--vorsicht-logo-desktop, 260px) !important; max-height: none !important; height: auto !important; object-fit: contain; } .site--logo, .logo, .navbar-brand, .custom-logo-link { transform: translateX(var(--vorsicht-logo-offset-x, 0px)); } @media (max-width: 991px) { .site--logo img, .logo img, .navbar-brand img, .custom-logo { max-width: var(--vorsicht-logo-tablet, 230px) !important; } } @media (max-width: 767px) { .site--logo img, .logo img, .navbar-brand img, .custom-logo { max-width: var(--vorsicht-logo-mobile, 220px) !important; } } /* Lokaler Login */ .vorsicht-header-account .dt_user_btn { text-decoration: none; } .vorsicht-login-box { max-width: 560px; margin: 28px auto; padding: 28px; background: #fff; border: 1px solid rgba(17,111,114,.18); border-radius: 18px; box-shadow: 0 18px 45px rgba(0,0,0,.08); } .vorsicht-login-box h3 { margin-top: 0; } .vorsicht-login-box label { display:block; margin: 14px 0; font-weight: 600; } .vorsicht-login-box input[type="text"], .vorsicht-login-box input[type="password"] { width: 100%; max-width: 100%; padding: 12px 14px; border: 1px solid #ccd4d6; border-radius: 8px; } .vorsicht-login-box__button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border-radius: 8px; border: 0; background: var(--dt-primary-color, var(--primary-color, var(--corpiva-primary-color, #e31e24))); color: #fff !important; font-weight: 700; text-decoration: none; cursor: pointer; } .vorsicht-login-box__link { margin-left: 12px; font-weight: 700; } .vorsicht-login-box__notice { padding: 10px 12px; margin: 12px 0; background: #fff4f1; border-left: 4px solid #d63638; } /* News-Ticker: Darstellung im Theme, Inhalte aus Platform oder manuell */ .vorsicht-warning-ticker, .vorsicht-news-ticker { width: 100%; background: var(--vorsicht-ticker-bg, var(--dt-primary-color, var(--primary-color, var(--corpiva-primary-color, #e31e24)))); color: var(--vorsicht-ticker-text, #fff); margin-top: var(--vorsicht-ticker-margin-top, 0px); margin-bottom: var(--vorsicht-ticker-margin-bottom, 0px); position: relative; z-index: 3; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(0,0,0,.08); } .vorsicht-warning-ticker__inner { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 34px; min-height: 44px; } @media (min-width: 1025px) { .vorsicht-warning-ticker__inner { transform: translateX(var(--vorsicht-ticker-offset-x, 80px)); max-width: calc(1240px - max(var(--vorsicht-ticker-offset-x, 0px), 0px)); } } .vorsicht-warning-ticker__label { flex: 0 0 auto; transform: translateX(var(--vorsicht-ticker-label-offset-x, 0px)); display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; background: var(--vorsicht-ticker-label-bg, rgba(255,255,255,.14)); font-weight: 800; line-height: 1; white-space: nowrap; } .vorsicht-news-ticker__stage { flex: 1 1 auto; transform: translateX(var(--vorsicht-ticker-text-offset-x, 0px)); min-width: 0; position: relative; } .vorsicht-news-ticker__item { display: none; color: var(--vorsicht-ticker-text, #fff); font-weight: 700; line-height: 1.45; min-width: 0; --vorsicht-ticker-item-accent: var(--vorsicht-ticker-accent-manual, #147f82); } /* Statusfarbe: bewusst stark getrennte Palette statt kleinem Punkt. */ .vorsicht-news-ticker__item--urgent { --vorsicht-ticker-item-accent: var(--vorsicht-ticker-accent-urgent, #b42318); } .vorsicht-news-ticker__item--warning { --vorsicht-ticker-item-accent: var(--vorsicht-ticker-accent-warning, #e51b0f); } .vorsicht-news-ticker__item--caution { --vorsicht-ticker-item-accent: var(--vorsicht-ticker-accent-caution, #f5a800); } .vorsicht-news-ticker__item--tip { --vorsicht-ticker-item-accent: var(--vorsicht-ticker-accent-tip, #147f82); } .vorsicht-news-ticker__item--info { --vorsicht-ticker-item-accent: var(--vorsicht-ticker-accent-info, #1677ff); } .vorsicht-news-ticker__item--manual, .vorsicht-news-ticker__item--normal { --vorsicht-ticker-item-accent: var(--vorsicht-ticker-accent-manual, #147f82); } .vorsicht-news-ticker__item.is-active, .vorsicht-news-ticker__stage[data-count="1"] .vorsicht-news-ticker__item:first-child { display: flex; align-items: center; gap: 14px; } .vorsicht-news-ticker__accent { display: block; flex: 0 0 5px; width: 5px; height: 22px; border-radius: 999px; background: var(--vorsicht-ticker-item-accent, #147f82); box-shadow: 0 0 0 1px rgba(0,0,0,.05); } .vorsicht-news-ticker__message, .vorsicht-warning-ticker__link { min-width: 0; } .vorsicht-warning-ticker__link, .vorsicht-warning-ticker__link:visited { color: var(--vorsicht-ticker-text, #fff) !important; text-decoration: none; } .vorsicht-warning-ticker__link:hover, .vorsicht-warning-ticker__link:focus { color: var(--vorsicht-ticker-text, #fff) !important; text-decoration: underline; } @media (max-width: 1024px) { .vorsicht-warning-ticker__inner { gap: 26px; padding-left: 20px; padding-right: 20px; } } @media (max-width: 767px) { .vorsicht-warning-ticker__inner { display: block; padding: 12px 18px 14px; min-height: auto; } .vorsicht-warning-ticker__label { margin-bottom: 8px; font-size: 15px; padding: 7px 10px; } .vorsicht-news-ticker__stage { width: 100%; display: block; } .vorsicht-news-ticker__item { display: none; font-size: 17px; line-height: 1.35; white-space: normal; overflow: visible; text-overflow: clip; } .vorsicht-news-ticker__item.is-active, .vorsicht-news-ticker__stage[data-count="1"] .vorsicht-news-ticker__item:first-child { display: flex; } .vorsicht-news-ticker__accent { height: 20px; } } /* Eigene Icons: Theme fasst nur eigene Vorsicht-Icon-Ausgaben an, keine Admin-/Customizer-Stifte */ .vorsicht-custom-icon, .vorsicht-icon, .vorsicht-platform-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--vorsicht-icon-size, 48px); height: var(--vorsicht-icon-size, 48px); vertical-align: middle; } .vorsicht-custom-icon img, .vorsicht-icon img, .vorsicht-platform-icon img, img.vorsicht-icon-img { max-width: 100%; max-height: 100%; width: var(--vorsicht-icon-size, 48px); height: var(--vorsicht-icon-size, 48px); object-fit: contain; } /* Vorsicht.info Theme v1.3.1 – Avanta Information Icon Bridge */ .dt_service .item-icon .vorsicht-avanta-info-icon, .dt_service .item-icon img.vorsicht-avanta-info-icon, .dt_service .item-icon svg.vorsicht-avanta-info-icon { display: inline-block !important; width: 54% !important; height: 54% !important; max-width: 54% !important; max-height: 54% !important; object-fit: contain !important; vertical-align: middle !important; position: relative !important; z-index: 2 !important; } .dt_service--nine .item-inner .item-content .item-icon { overflow: visible !important; } .dt_service--nine .item-inner .item-content .item-icon .vorsicht-avanta-info-icon { margin-top: -4px !important; } /* v1.4.0: Avanta-Icon-Bridge und Mobile-Feinschliff */ .dt_service .item-icon .vorsicht-avanta-info-icon, .dt_service .item-icon img.vorsicht-avanta-info-icon, .dt_service .item-icon .vorsicht-custom-icon, .dt_service .clip .vorsicht-avanta-info-icon { display: inline-block !important; width: 58% !important; height: 58% !important; max-width: 58% !important; max-height: 58% !important; object-fit: contain !important; object-position: center center !important; vertical-align: middle !important; position: absolute !important; inset: 50% auto auto 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .dt_service .item-icon .vorsicht-custom-icon-missing { display:none !important; } .dt_service.dt_service--nine .item-icon { position: relative !important; overflow: hidden !important; } .dt_service.dt_service--nine .item-icon > i[class^="vorsicht-fa-"]::before, .dt_service.dt_service--nine .item-icon > i[class*=" vorsicht-fa-"]::before { content: none !important; } .dt_service .clip { position: relative !important; } .dt_service .clip .vorsicht-avanta-info-icon { width: 62% !important; height: 62% !important; } .dt_service .icon2 .vorsicht-avanta-info-icon { width: 62% !important; height: 62% !important; } @media (max-width: 767px) { .vorsicht-warning-ticker, .vorsicht-news-ticker { min-height: 52px !important; padding: 6px 10px !important; } .vorsicht-warning-ticker__inner { gap: 8px !important; align-items: center !important; } .vorsicht-warning-ticker__label { font-size: 14px !important; padding: 5px 9px !important; white-space: nowrap !important; max-width: 45% !important; overflow: hidden !important; text-overflow: ellipsis !important; } .vorsicht-news-ticker__item, .vorsicht-warning-ticker__link { font-size: 17px !important; line-height: 1.25 !important; } .dt_slider .dt_slider-item, .dt_slider .dt_slider-item > img, .dt_slider .dt_slider-image, .dt_slider .dt_slider-inner { min-height: 520px !important; } .dt_slider .dt_slider-content, .dt_slider .dt_owl_carousel .dt_slider-content, .dt_slider .dt-container { max-width: 100% !important; } .dt_slider .title, .dt_slider h1, .dt_slider h2 { font-size: clamp(32px, 9vw, 46px) !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; } .dt_slider .subtitle, .dt_slider p, .dt_slider .text { font-size: 17px !important; line-height: 1.45 !important; max-width: 92vw !important; } .dt_slider .dt_btn, .dt_slider .btn, .dt_slider a[class*="btn"] { padding: 13px 18px !important; font-size: 16px !important; min-width: 0 !important; } .dt_slider .video-btn, .dt_slider .play-btn, .dt_slider a[href*="youtube"], .dt_slider a[href*="youtu.be"] { margin-top: 10px !important; } .dt_service.dt_service--nine .dt-row, .dt_service .dt-row { row-gap: 22px !important; } .dt_service.dt_service--nine .item-inner { padding: 32px 24px 30px !important; margin-left: 10px !important; margin-right: 10px !important; } .dt_service.dt_service--nine .item-icon { width: 96px !important; height: 96px !important; margin-bottom: 22px !important; } .dt_service.dt_service--nine .item-icon .vorsicht-avanta-info-icon, .dt_service.dt_service--nine .item-icon img.vorsicht-avanta-info-icon { width: 56% !important; height: 56% !important; max-width: 56% !important; max-height: 56% !important; } .dt_service.dt_service--nine .item-title { font-size: 24px !important; line-height: 1.18 !important; } .dt_service.dt_service--nine .desc { font-size: 18px !important; line-height: 1.45 !important; } .dt_header .custom-logo, .dt_header .site--logo img, .site--logo img, .logo img, .navbar-brand img { max-width: 190px !important; } .dt_header .dt_navbar-right, .dt_header .dt_navbar-menu { gap: 8px !important; } } @media (max-width: 480px) { .dt_slider .dt_slider-item, .dt_slider .dt_slider-item > img, .dt_slider .dt_slider-image, .dt_slider .dt_slider-inner { min-height: 500px !important; } .dt_slider .title, .dt_slider h1, .dt_slider h2 { font-size: clamp(30px, 10vw, 42px) !important; } .dt_service.dt_service--nine .item-inner { padding: 28px 20px 28px !important; } } /* v1.4.2: finaler Avanta-Informationsbereich Icon-Fix */ #dt_information .item-icon { position: relative !important; } #dt_information .item-icon > i[class^="vorsicht-fa-"], #dt_information .item-icon > i[class*=" vorsicht-fa-"], #dt_information .item-icon > i[class^="vorsichticon-"], #dt_information .item-icon > i[class*=" vorsichticon-"] { display: none !important; } #dt_information .item-icon img.vorsicht-avanta-info-icon, #dt_information .item-icon svg.vorsicht-avanta-info-icon, #dt_information .item-icon .vorsicht-avanta-info-icon { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 68% !important; height: 68% !important; max-width: 68% !important; max-height: 68% !important; object-fit: contain !important; object-position: center center !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; z-index: 3 !important; } @media (max-width: 767px) { #dt_information .item-icon img.vorsicht-avanta-info-icon, #dt_information .item-icon svg.vorsicht-avanta-info-icon, #dt_information .item-icon .vorsicht-avanta-info-icon { width: 64% !important; height: 64% !important; max-width: 64% !important; max-height: 64% !important; } } /* v1.4.2: Avanta Icon Engine Darstellung aus Plugin-Metadaten */ #dt_information .item-icon .vorsicht-avanta-info-icon-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--vinfo-icon-bg, transparent) !important; overflow: hidden !important; z-index: 4 !important; } #dt_information .item-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon { position: static !important; transform: none !important; width: var(--vinfo-icon-scale, 78%) !important; height: var(--vinfo-icon-scale, 78%) !important; max-width: var(--vinfo-icon-scale, 78%) !important; max-height: var(--vinfo-icon-scale, 78%) !important; object-fit: contain !important; object-position: center center !important; filter: var(--vinfo-icon-filter, none) !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #dt_information .item-icon:has(.vorsicht-avanta-info-icon-wrap.vinfo-bg-transparent) { background-color: transparent !important; } /* v1.4.3: Avanta Icon Engine – endgültiger Darstellungsfix */ #dt_information .item-icon { position: relative !important; } #dt_information .item-icon .vorsicht-avanta-info-icon-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; z-index: 9 !important; background-color: var(--vinfo-icon-bg, transparent) !important; background-image: none !important; } #dt_information .item-icon .vorsicht-avanta-info-icon-wrap.vinfo-bg-standard { background-color: transparent !important; } #dt_information .item-icon .vorsicht-avanta-info-icon-wrap.vinfo-bg-transparent { background-color: transparent !important; } #dt_information .item-icon:has(.vorsicht-avanta-info-icon-wrap.vinfo-bg-transparent) { background: transparent !important; background-color: transparent !important; } #dt_information .item-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, #dt_information .item-icon .vorsicht-avanta-info-icon-wrap .vorsicht-avanta-info-icon { position: static !important; inset: auto !important; transform: none !important; display: block !important; width: var(--vinfo-icon-scale, 78%) !important; height: var(--vinfo-icon-scale, 78%) !important; max-width: var(--vinfo-icon-scale, 78%) !important; max-height: var(--vinfo-icon-scale, 78%) !important; object-fit: contain !important; object-position: center center !important; filter: var(--vinfo-icon-filter, none) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } #dt_information .item-icon .vorsicht-avanta-info-icon-wrap + i, #dt_information .item-icon i[class^="vorsicht-fa-"], #dt_information .item-icon i[class*=" vorsicht-fa-"] { display: none !important; } @media (max-width: 767px) { #dt_information .item-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, #dt_information .item-icon .vorsicht-avanta-info-icon-wrap .vorsicht-avanta-info-icon { width: min(var(--vinfo-icon-scale, 78%), 96%) !important; height: min(var(--vinfo-icon-scale, 78%), 96%) !important; max-width: min(var(--vinfo-icon-scale, 78%), 96%) !important; max-height: min(var(--vinfo-icon-scale, 78%), 96%) !important; } } /* v1.4.4: Avanta native Icon Engine Bridge * Das Plugin erzeugt .vorsicht-fa-name:before inklusive Bild, Farbe, * Hintergrund und Größe. Das Theme stellt im Avanta-Kreis nur die Fläche bereit. */ #dt_information .item-icon { position: relative !important; overflow: hidden !important; } #dt_information .item-icon > i.vinfo-avanta-icon-native, #dt_information .item-icon > i[class^="vorsicht-fa-"], #dt_information .item-icon > i[class*=" vorsicht-fa-"] { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; border-radius: inherit !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; font-size: 0 !important; text-align: center !important; color: transparent !important; font-style: normal !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; z-index: 10 !important; } #dt_information .item-icon > i.vinfo-avanta-icon-native:before, #dt_information .item-icon > i[class^="vorsicht-fa-"]:before, #dt_information .item-icon > i[class*=" vorsicht-fa-"]:before { content: "" !important; display: block !important; position: absolute !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; z-index: 11 !important; } #dt_information .item-icon > .vorsicht-avanta-info-icon-wrap, #dt_information .item-icon > img.vorsicht-avanta-info-icon, #dt_information .item-icon > svg.vorsicht-avanta-info-icon { display: none !important; } @media (max-width: 767px) { .vorsicht-warning-ticker, .vorsicht-news-ticker { min-height: 46px !important; padding: 5px 8px !important; } .vorsicht-warning-ticker__label { font-size: 13px !important; padding: 4px 8px !important; border-radius: 9px !important; } .vorsicht-news-ticker__item, .vorsicht-warning-ticker__link { font-size: 16px !important; line-height: 1.2 !important; } #dt_information.dt_service--nine .item-icon, #dt_information .item-icon { width: 92px !important; height: 92px !important; line-height: 92px !important; } .dt_slider .dt_slider-content, .dt_slider .dt_slider-content * { word-break: normal !important; overflow-wrap: normal !important; } } /* v1.4.6: Avanta Icon Engine – direkte Theme-Ausgabe mit Plugin-Metadaten */ #dt_information .item-icon { position: relative !important; overflow: hidden !important; } #dt_information .item-icon > .vorsicht-avanta-info-icon-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; z-index: 20 !important; background-color: var(--vinfo-icon-bg, transparent) !important; background-image: none !important; line-height: 1 !important; } #dt_information .item-icon > .vorsicht-avanta-info-icon-wrap.vinfo-bg-standard { background-color: transparent !important; } #dt_information .item-icon > .vorsicht-avanta-info-icon-wrap.vinfo-bg-transparent { background-color: transparent !important; } #dt_information .item-icon:has(> .vorsicht-avanta-info-icon-wrap.vinfo-bg-transparent) { background: transparent !important; background-color: transparent !important; background-image: none !important; } #dt_information .item-icon > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon { position: static !important; inset: auto !important; transform: none !important; display: block !important; width: var(--vinfo-icon-scale, 78%) !important; height: var(--vinfo-icon-scale, 78%) !important; max-width: var(--vinfo-icon-scale, 78%) !important; max-height: var(--vinfo-icon-scale, 78%) !important; object-fit: contain !important; object-position: center center !important; filter: var(--vinfo-icon-filter, none) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } #dt_information .item-icon > .vorsicht-avanta-info-icon-wrap ~ i, #dt_information .item-icon > i.vinfo-avanta-icon-native, #dt_information .item-icon > i[class^="vorsicht-fa-"], #dt_information .item-icon > i[class*=" vorsicht-fa-"] { display: none !important; } @media (max-width: 767px) { #dt_information .item-icon > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon { width: min(var(--vinfo-icon-scale, 78%), 105%) !important; height: min(var(--vinfo-icon-scale, 78%), 105%) !important; max-width: min(var(--vinfo-icon-scale, 78%), 105%) !important; max-height: min(var(--vinfo-icon-scale, 78%), 105%) !important; } } /* v1.4.6: nativer Renderer im Child-Template */ #dt_information .item-icon.vorsicht-info-avanta-icon-native, #dt_information .item-icon.vinfo-avanta-controlled { box-sizing: border-box !important; } #dt_information .item-icon.vorsicht-info-avanta-icon-native img.vorsicht-avanta-info-icon, #dt_information .item-icon.vinfo-avanta-controlled img.vorsicht-avanta-info-icon { transform: none !important; position: static !important; inset: auto !important; } /* v1.4.7: Vorsicht.info Icon Engine - Avanta-Renderer erzwingen */ #dt_information .vinfo-avanta-controlled { display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; line-height:1 !important; } #dt_information .vinfo-avanta-controlled > img.vorsicht-avanta-info-icon { position:static !important; transform:none !important; object-fit:contain !important; object-position:center center !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; z-index:5 !important; } /* v1.4.8 Endspurt: Avanta-Informations-Icon pixelgenau an Original-Kreis ausrichten */ .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled, .dt_service--nine .item-inner .item-content .vinfo-avanta-controlled.item-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 9rem !important; height: 9rem !important; min-width: 9rem !important; min-height: 9rem !important; max-width: 9rem !important; max-height: 9rem !important; line-height: 1 !important; border-radius: 50% !important; margin: 0 auto 25px auto !important; padding: 0 !important; box-sizing: border-box !important; text-align: center !important; vertical-align: top !important; overflow: hidden !important; } .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled::before, .dt_service--nine .item-inner .item-content .vinfo-avanta-controlled.item-icon::before { top: -6px !important; right: -6px !important; bottom: -6px !important; left: -6px !important; } .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled .vorsicht-avanta-info-icon, .dt_service--nine .item-inner .item-content .vinfo-avanta-controlled.item-icon .vorsicht-avanta-info-icon { display: block !important; position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; width: var(--vinfo-icon-scale, 78%) !important; height: var(--vinfo-icon-scale, 78%) !important; max-width: var(--vinfo-icon-scale, 78%) !important; max-height: var(--vinfo-icon-scale, 78%) !important; object-fit: contain !important; object-position: center center !important; filter: var(--vinfo-icon-filter, none) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } @media (max-width: 767px) { .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled, .dt_service--nine .item-inner .item-content .vinfo-avanta-controlled.item-icon { width: 8rem !important; height: 8rem !important; min-width: 8rem !important; min-height: 8rem !important; max-width: 8rem !important; max-height: 8rem !important; margin-bottom: 20px !important; } } /* v1.5.0: Globale Vorsicht.info Icon Engine * Ziel: eigene vorsicht-fa-* Icons nicht nur im Informationsbereich, * sondern an möglichst allen Avanta-Icon-Plätzen sauber anzeigen. */ .vinfo-global-icon, .vinfo-global-icon-img, .vorsicht-avanta-info-icon { box-sizing: border-box !important; } .vinfo-global-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; vertical-align: middle !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .vinfo-global-icon-img { display: block !important; width: var(--vinfo-global-icon-scale, 1em) !important; height: var(--vinfo-global-icon-scale, 1em) !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center center !important; filter: var(--vinfo-global-icon-filter, none) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Informationskarten: Kreis exakt wie Avanta, Icon pixelgenau in die Mitte */ #dt_information .item-icon.vinfo-avanta-controlled, .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled, .dt_service--nine .item-inner .item-content .vinfo-avanta-controlled.item-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 84px !important; height: 84px !important; min-width: 84px !important; min-height: 84px !important; max-width: 84px !important; max-height: 84px !important; border-radius: 50% !important; line-height: 1 !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; overflow: hidden !important; } #dt_information .item-icon.vinfo-avanta-controlled img.vorsicht-avanta-info-icon, .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled img.vorsicht-avanta-info-icon { display: block !important; position: static !important; width: var(--vinfo-icon-scale, 78%) !important; height: var(--vinfo-icon-scale, 78%) !important; max-width: var(--vinfo-icon-scale, 78%) !important; max-height: var(--vinfo-icon-scale, 78%) !important; object-fit: contain !important; object-position: center center !important; filter: var(--vinfo-icon-filter, none) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; transform: translate(2px, 1px) !important; } #dt_information .item-icon.vinfo-avanta-controlled:has(img.vorsicht-avanta-info-icon) > i, .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled:has(img.vorsicht-avanta-info-icon) > i { display: none !important; } @media (max-width: 767px) { #dt_information .item-icon.vinfo-avanta-controlled, .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled { width: 82px !important; height: 82px !important; min-width: 82px !important; min-height: 82px !important; max-width: 82px !important; max-height: 82px !important; } } /* v1.5.0: Back-to-top als Vorsicht.info Floating Shield vorbereiten */ .vinfo-floating-shield, .vorsicht-floating-shield, #scrollUp.vinfo-floating-shield, .scroll-top.vinfo-floating-shield, .scrollup.vinfo-floating-shield, .back-to-top.vinfo-floating-shield { width: 48px !important; height: 48px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border: 2px solid #e31e24 !important; box-shadow: 0 10px 24px rgba(0,0,0,.18) !important; color: #111 !important; cursor: pointer !important; transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease !important; overflow: visible !important; z-index: 9999 !important; } .vinfo-floating-shield:hover, .vorsicht-floating-shield:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 30px rgba(0,0,0,.24) !important; } .vinfo-floating-shield svg, .vorsicht-floating-shield svg { width: 30px !important; height: 30px !important; display: block !important; } .vinfo-floating-shield i, .vorsicht-floating-shield i, .vinfo-floating-shield:before, .vorsicht-floating-shield:before { display: none !important; content: none !important; } .vinfo-floating-action-stack { position: fixed !important; right: 24px !important; bottom: 24px !important; z-index: 9999 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: center !important; } @media (max-width: 767px) { .vinfo-floating-action-stack { right: 18px !important; bottom: 18px !important; } .vinfo-floating-shield, .vorsicht-floating-shield { width: 46px !important; height: 46px !important; } } /* v1.5.1 FINAL: Kontextabhängige Icon-Feinjustierung + Floating Action Button * - Service-/Feature-Iconboxen verwenden eigene Vorsicht-Icons in passender Größe. * - Informationskarten bleiben nah am Avanta-Original. * - Back-to-top wird als vorbereiteter Floating Action Button mit Schild dargestellt. */ .vinfo-global-iconbox-controlled { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; line-height: 1 !important; } .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { width: 68% !important; height: 68% !important; max-width: 68% !important; max-height: 68% !important; object-fit: contain !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } /* Große, eckige Avanta-Service-Kacheln: Icons etwas kräftiger darstellen */ [class*="service"] .vinfo-global-iconbox-controlled > .vinfo-global-icon-img, [class*="feature"] .vinfo-global-iconbox-controlled > .vinfo-global-icon-img, [class*="process"] .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { width: 72% !important; height: 72% !important; max-width: 72% !important; max-height: 72% !important; } /* Informationsbereich: Kreis wie Avanta, Icon sauber mittig */ #dt_information .item-icon.vinfo-avanta-controlled, .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled { width: 84px !important; height: 84px !important; min-width: 84px !important; min-height: 84px !important; max-width: 84px !important; max-height: 84px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } #dt_information .item-icon.vinfo-avanta-controlled img.vorsicht-avanta-info-icon, .dt_service--nine .item-inner .item-content .item-icon.vinfo-avanta-controlled img.vorsicht-avanta-info-icon { transform: translate(1px, 0px) !important; transform-origin: center center !important; } /* Floating Action Button: Avanta-Pfeil vollständig in Vorsicht-Schild verwandeln */ #scrollUp.vinfo-floating-shield, .scroll-top.vinfo-floating-shield, .scrollup.vinfo-floating-shield, .back-to-top.vinfo-floating-shield, .vinfo-floating-shield, .vorsicht-floating-shield { position: fixed !important; right: 24px !important; bottom: 24px !important; width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; background-image: none !important; border: 2px solid #e31e24 !important; color: #111111 !important; box-shadow: 0 10px 24px rgba(0,0,0,.18) !important; padding: 0 !important; margin: 0 !important; text-indent: 0 !important; font-size: 0 !important; line-height: 1 !important; overflow: visible !important; z-index: 99999 !important; } #scrollUp.vinfo-floating-shield:before, #scrollUp.vinfo-floating-shield:after, .scroll-top.vinfo-floating-shield:before, .scroll-top.vinfo-floating-shield:after, .scrollup.vinfo-floating-shield:before, .scrollup.vinfo-floating-shield:after, .back-to-top.vinfo-floating-shield:before, .back-to-top.vinfo-floating-shield:after, .vinfo-floating-shield:before, .vinfo-floating-shield:after { content: none !important; display: none !important; } #scrollUp.vinfo-floating-shield > *, .scroll-top.vinfo-floating-shield > *, .scrollup.vinfo-floating-shield > *, .back-to-top.vinfo-floating-shield > * { font-size: 0 !important; } .vinfo-floating-shield svg, .vorsicht-floating-shield svg { width: 34px !important; height: 34px !important; display: block !important; flex: 0 0 auto !important; margin: 0 !important; } .vinfo-floating-shield:hover, .vorsicht-floating-shield:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 14px 30px rgba(0,0,0,.24) !important; } .vinfo-floating-action-stack { position: fixed !important; right: 24px !important; bottom: 24px !important; z-index: 99999 !important; } @media (max-width: 767px) { #scrollUp.vinfo-floating-shield, .scroll-top.vinfo-floating-shield, .scrollup.vinfo-floating-shield, .back-to-top.vinfo-floating-shield, .vinfo-floating-shield, .vorsicht-floating-shield { right: 18px !important; bottom: 18px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; } .vinfo-floating-shield svg, .vorsicht-floating-shield svg { width: 31px !important; height: 31px !important; } } /* v1.5.2: Feinschliff Service-Icons + Floating Shield standardmäßig deaktivierbar */ .vinfo-service-icon-controlled { transform: translateY(var(--vinfo-service-icon-offset-y, -18px)) !important; } .vinfo-service-icon-controlled > .vinfo-global-icon-img { width: 76% !important; height: 76% !important; max-width: 76% !important; max-height: 76% !important; object-fit: contain !important; object-position: center center !important; } /* Nur wenn die Floating-Schild-Testfunktion aktiv ist, greift die Schild-Optik. */ body:not(.vinfo-floating-shield-enabled) .vinfo-floating-action-stack { display: none !important; } @media (max-width: 767px) { .vinfo-service-icon-controlled { transform: translateY(calc(var(--vinfo-service-icon-offset-y, -18px) * .75)) !important; } } /* v1.9.1: Avanta-Service-Höhe angleichen * Nur Layout-Angleichung für eigene Vorsicht.info-Icons im Avanta-Service-Layout 10. * Die Icon-Engine bleibt unverändert. Ziel: Der eigene Icon-Kasten sitzt wieder * wie das Avanta-Original oben auf der Kachel und vergrößert die Karte nicht. */ .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), .dt_service--ten .services-item .services-content .services-info .services-icon:has(i[class^="vorsicht-fa-"]), .dt_service--ten .services-item .services-content .services-info .services-icon:has(i[class*=" vorsicht-fa-"]) { position: absolute !important; top: -22px !important; left: 18px !important; width: 90px !important; height: 87px !important; min-width: 90px !important; min-height: 87px !important; max-width: 90px !important; max-height: 87px !important; line-height: 87px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: none !important; border-radius: 0 !important; z-index: 2 !important; overflow: hidden !important; } .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled > .vorsicht-avanta-info-icon-wrap, .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap) > .vorsicht-avanta-info-icon-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: hidden !important; } .dt_service--ten .services-item .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, .dt_service--ten .services-item .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon { position: static !important; inset: auto !important; transform: none !important; width: var(--vinfo-icon-scale, 58%) !important; height: var(--vinfo-icon-scale, 58%) !important; max-width: 72% !important; max-height: 72% !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } /* Wenn Avanta das eigene Icon versehentlich im normalen Textfluss ausgibt, wird dieser Block wieder aus dem Fluss genommen. */ .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap { position: absolute !important; top: -22px !important; left: 18px !important; width: 90px !important; height: 87px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; z-index: 3 !important; background: var(--dt-main-color) !important; } .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon { width: var(--vinfo-icon-scale, 58%) !important; height: var(--vinfo-icon-scale, 58%) !important; max-width: 72% !important; max-height: 72% !important; } /* v1.9.2: Avanta-Service-Höhe feinjustieren + Hover für eigene Vorsicht-Icons * Basis bleibt v1.9.1 / v1.5.2. Keine neue Icon-Engine. * Ziel: eigener Icon-Kasten minimal tiefer, Hover nicht mehr komplett weiß. */ .dt_service--ten .services-item .services-content .services-info { position: relative !important; } .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), .dt_service--ten .services-item .services-content .services-info .services-icon:has(i[class^="vorsicht-fa-"]), .dt_service--ten .services-item .services-content .services-info .services-icon:has(i[class*=" vorsicht-fa-"]) { top: -14px !important; transform: none !important; } .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -14px !important; transform: none !important; } /* Normale Darstellung: rote Avanta-Fläche, weißes eigenes Icon. */ .dt_service--ten .services-item .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, .dt_service--ten .services-item .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, .dt_service--ten .services-item .services-content .services-info .vinfo-global-icon-img { filter: brightness(0) invert(1) !important; transform: none !important; transition: filter .25s ease, opacity .25s ease !important; } /* Hover: Avanta darf die Fläche weiß setzen; das eigene Icon wird rot statt unsichtbar. */ .dt_service--ten .services-item:hover .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, .dt_service--ten .services-item:hover .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { filter: brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(6940%) hue-rotate(6deg) brightness(97%) contrast(108%) !important; opacity: 1 !important; transform: none !important; } /* Falls Avanta den Hover-Hintergrund am ausgelagerten Wrapper nicht mitnimmt. */ .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap, .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon) { background: #fff !important; background-image: none !important; } /* v1.9.4: Avanta-Service-Höhe + Hover wirklich nachziehen * WICHTIG: Keine Änderung an der Icon-Engine. Nur Position und Hover-Darstellung. * Grund: v1.9.2 wurde im Browser teils nicht neu geladen, weil die Theme-Konstante * noch auf 1.9.1 stand. Ab v1.9.4 wird der CSS-Cache sauber gebrochen. */ body .dt_service--ten .services-item .services-content .services-info { position: relative !important; } /* Eigenes Vorsicht-Icon etwas tiefer setzen: nicht mehr ganz so hoch am Bildrand. */ body .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -6px !important; transform: none !important; } /* Normale Darstellung bleibt: rote Fläche, weißes eigenes Icon. */ body .dt_service--ten .services-item .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { display: block !important; visibility: visible !important; opacity: 1 !important; filter: brightness(0) invert(1) !important; transform: none !important; transition: filter .22s ease, opacity .22s ease !important; } /* Hover für eigene Vorsicht-Icons: weiße Fläche ist ok, aber Icon muss rot sichtbar bleiben. */ body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } body .dt_service--ten .services-item:hover .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { display: block !important; visibility: visible !important; opacity: 1 !important; filter: brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(6500%) hue-rotate(5deg) brightness(96%) contrast(110%) !important; transform: none !important; } /* Fallback: Falls Avanta/Browser :has() nicht wie erwartet greift, bleibt die Fläche rot, damit niemals ein komplett weißer leerer Kasten entsteht. */ body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-avanta-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .vorsicht-info-avanta-icon-native { background-color: var(--dt-primary-color, var(--primary-color, #e31e24)) !important; } /* v1.9.4: Mini-Feinschliff – eigenes Avanta-Service-Icon ein paar Pixel höher. * Keine Änderung an Icon-Engine, Größe oder Hover. Nur vertikale Position. */ body .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -10px !important; transform: none !important; } /* v1.9.5: Feinschliff nach Sichtprüfung * Nur eigenes Vorsicht-Service-Icon: wenige Pixel höher und Icon-Inhalt etwas größer. * Keine Änderung an der Icon-Engine, keine Änderung an Avanta-Standard-Icons. */ body .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -15px !important; transform: none !important; } body .dt_service--ten .services-item .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { width: 66% !important; height: 66% !important; max-width: 66% !important; max-height: 66% !important; } /* v1.9.6: Mini-Feinschliff nach Sichtprüfung * Nur eigenes Vorsicht-Service-Icon: Quadrat etwas höher, Icon-Inhalt etwas größer. * Keine Änderung an der Icon-Engine und keine Änderung an Avanta-Standard-Icons. */ body .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -21px !important; transform: none !important; } body .dt_service--ten .services-item .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { width: 74% !important; height: 74% !important; max-width: 74% !important; max-height: 74% !important; } /* v1.9.7: finaler Mini-Feinschliff nach Sichtprüfung * Nur eigenes Vorsicht-Service-Icon: Quadrat deutlich höher und Inhalt größer. * Keine Änderung an der Icon-Engine, keine Änderung an Avanta-Standard-Icons. */ body .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -25px !important; transform: none !important; } body .dt_service--ten .services-item .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { width: 88% !important; height: 88% !important; max-width: 88% !important; max-height: 88% !important; object-fit: contain !important; opacity: 1 !important; filter: brightness(0) invert(1) !important; transform: none !important; } body .dt_service--ten .services-item:hover .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { width: 88% !important; height: 88% !important; max-width: 88% !important; max-height: 88% !important; object-fit: contain !important; opacity: 1 !important; filter: brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(6500%) hue-rotate(5deg) brightness(96%) contrast(110%) !important; transform: none !important; } /* v1.9.8: finaler Positions-Feinschliff nach Sichtprüfung * Nur eigenes Vorsicht-Service-Icon: Quadrat ein Stück höher. * Inhalt/Männle bleibt wie in v1.9.7, keine Änderung an Icon-Engine oder Avanta-Standard-Icons. */ body .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -50px !important; transform: none !important; } body .dt_service--ten .services-item:hover .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -50px !important; transform: none !important; } /* v1.9.10: Rücknahme der zu aggressiven v1.9.9-Anhebung. * Basis bleibt v1.9.8. Nur das eigene Vorsicht-Service-Icon wird sanft höher gesetzt. * Hover bleibt sichtbar: keine leere weiße Fläche mehr. */ body .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -60px !important; transform: none !important; } body .dt_service--ten .services-item:hover .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap { top: -60px !important; transform: none !important; background: var(--dt-main-color, #e51b0f) !important; border-color: var(--dt-main-color, #e51b0f) !important; } body .dt_service--ten .services-item:hover .services-content .services-info .services-icon img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled > .vinfo-global-icon-img { opacity: 1 !important; visibility: visible !important; filter: brightness(0) invert(1) !important; } /* v1.9.12: Hover sichtbar halten * Korrektur nach Sichtprüfung: Bei eigenen Vorsicht-Service-Icons darf der Hover * nicht als leerer weißer Kasten erscheinen. Avanta darf Standard-Icons weiter * normal steuern; diese Regeln greifen nur bei gerenderten vorsicht-fa-* Icons. */ body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"], body .dt_service--ten .services-item .services-content .services-info .vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .vorsicht-info-avanta-icon-native { background: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; background-color: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; background-image: none !important; border-color: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; color: #ffffff !important; } body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"], body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-avanta-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"]:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-avanta-controlled:hover, body .dt_service--ten .services-item .services-content .services-info .vorsicht-info-avanta-icon-native:hover { background: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; background-color: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; background-image: none !important; border-color: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; color: #ffffff !important; opacity: 1 !important; visibility: visible !important; } body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled > img, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered > img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"] > img, body .dt_service--ten .services-item .services-content .services-info .vinfo-avanta-controlled img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .vorsicht-info-avanta-icon-native img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled > img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered > img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"] > img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-avanta-controlled img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info .vorsicht-info-avanta-icon-native img.vorsicht-avanta-info-icon { display: block !important; opacity: 1 !important; visibility: visible !important; filter: brightness(0) invert(1) !important; transform: none !important; mix-blend-mode: normal !important; } /* v1.9.12: Hover wieder aktiv, aber sichtbar * Nach Sichtprüfung: v1.9.11 hielt den Kasten rot und dadurch wirkte der Hover weg. * Jetzt wieder Avanta-artig: normal roter Kasten mit weißem Icon, * Hover weißer Kasten mit rotem Icon. Keine Änderung an der Icon-Engine. */ body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"], body .dt_service--ten .services-item .services-content .services-info .vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .vorsicht-info-avanta-icon-native { background: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; background-color: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; border-color: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; color: #ffffff !important; opacity: 1 !important; visibility: visible !important; } body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"], body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-avanta-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"]:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-avanta-controlled:hover, body .dt_service--ten .services-item .services-content .services-info .vorsicht-info-avanta-icon-native:hover { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border-color: #ffffff !important; color: var(--dt-main-color, var(--dt-primary-color, #e51b0f)) !important; opacity: 1 !important; visibility: visible !important; } body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled > img, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered > img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"] > img, body .dt_service--ten .services-item .services-content .services-info .vinfo-avanta-controlled img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .vorsicht-info-avanta-icon-native img.vorsicht-avanta-info-icon { display: block !important; opacity: 1 !important; visibility: visible !important; filter: brightness(0) invert(1) !important; transform: none !important; mix-blend-mode: normal !important; } body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled > img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled > .vinfo-global-icon-img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered > img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"] > img, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-avanta-controlled img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item:hover .services-content .services-info .vorsicht-info-avanta-icon-native img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled:hover > img, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled:hover > .vinfo-global-icon-img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered:hover > img, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"]:hover > img, body .dt_service--ten .services-item .services-content .services-info .vinfo-avanta-controlled:hover img.vorsicht-avanta-info-icon, body .dt_service--ten .services-item .services-content .services-info .vorsicht-info-avanta-icon-native:hover img.vorsicht-avanta-info-icon { display: block !important; opacity: 1 !important; visibility: visible !important; filter: brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(6500%) hue-rotate(5deg) brightness(96%) contrast(110%) !important; transform: none !important; mix-blend-mode: normal !important; } /* v1.9.15: Service-Icon-Quadrat etwas tiefer als v1.9.14 * Ausgangspunkt bleibt v1.9.12: Hover bleibt aktiv und sichtbar. * Nur Position des eigenen Vorsicht-Service-Iconkastens wird angepasst. */ body .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"] { top: -61px !important; transform: none !important; } body .dt_service--ten .services-item:hover .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"], body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"]:hover { top: -61px !important; transform: none !important; } /* v1.9.17: Service-Icon Position auf -25px gesetzt * Gewünschte Feinkorrektur: eigener Vorsicht-Service-Iconkasten etwas tiefer als -38px. * Hover und Icon-Inhalt bleiben unverändert. */ body .dt_service--ten .services-item .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item .services-content .services-info > .vorsicht-avanta-info-icon-wrap, body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"] { top: -25px !important; transform: none !important; } body .dt_service--ten .services-item:hover .services-content .services-info .services-icon.vinfo-avanta-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon.vorsicht-info-avanta-icon-native, body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(.vorsicht-avanta-info-icon-wrap), body .dt_service--ten .services-item:hover .services-content .services-info .services-icon:has(img.vorsicht-avanta-info-icon), body .dt_service--ten .services-item:hover .services-content .services-info > .vorsicht-avanta-info-icon-wrap, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-service-icon-controlled, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered, body .dt_service--ten .services-item:hover .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"], body .dt_service--ten .services-item .services-content .services-info .vinfo-service-icon-controlled:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled.vorsicht-fa-rendered:hover, body .dt_service--ten .services-item .services-content .services-info .vinfo-global-iconbox-controlled[class*="vorsicht-fa-rendered-"]:hover { top: -25px !important; transform: none !important; } /* ========================================================================== Vorsicht.info Theme v2.0.10 – Mobile-Header-Fix Mobile/Tablet wird wieder vom Avanta-Pro-Parent gesteuert. Die früheren Vorsicht.info-Mobile-Header-Overrides aus 2.0.8/2.0.9 wurden entfernt, weil sie den mobilen Header, Logo und CTA-Bereich überlagert haben. Desktop-Anpassungen bleiben erhalten. ========================================================================== */ @media (max-width: 1024px) { html, body { max-width: 100% !important; overflow-x: hidden !important; } /* Keine eigenen Header-Geometrie-Eingriffe mehr auf Mobil/Tablet. */ body .dt_header, body .main-header, body .site-header, body .navbar-area, body .dt_navbar-wrapper { transform: none !important; max-width: 100vw !important; } /* Logo nur begrenzen, aber Avanta-Layout nicht umbauen. */ body .site--logo img, body .site-logo img, body .logo img, body .navbar-brand img, body .dt_logo img, body .custom-logo { max-width: 190px !important; height: auto !important; object-fit: contain !important; } } @media (max-width: 480px) { body .site--logo img, body .site-logo img, body .logo img, body .navbar-brand img, body .dt_logo img, body .custom-logo { max-width: 176px !important; } } /* v2.0.9: Header-Hilfe/Button + Opfer-Telefon auf Desktop etwas weiter nach rechts schieben */ @media (min-width: 1200px) { body .dt_header .dt_navbar-right { transform: translateX(var(--vorsicht-header-cta-offset-x, 42px)) !important; } } /* ========================================================================== Vorsicht.info Theme 3.0.19 – Warnzentrale / Warnkarten Kartenlayout eingefroren; Schild und Icon-Darstellung verfeinert. ========================================================================== */ .front-features2 { position:relative; overflow:hidden; } .front-features2 .dt-container,.front-features2 .vorsicht-warning-tiles { position:relative; z-index:2; } .front-features2 .vorsicht-warning-tiles > [class*="dt-col-"] { display:flex; } .front-features2 .vorsicht-warning-tiles-controller { position:relative; z-index:2; } .front-features2 [data-vorsicht-warning-card][hidden] { display:none !important; } .front-features2 .vorsicht-warning-tiles__actions { position:relative; z-index:3; display:flex; justify-content:center; align-items:center; margin:26px 0 4px; } .front-features2 .vorsicht-warning-tiles__more { appearance:none; border:1px solid #147f82; border-radius:999px; background:#147f82; color:#fff; min-height:46px; padding:11px 24px; font-size:14px; font-weight:800; line-height:1.2; cursor:pointer; box-shadow:0 8px 20px rgba(20,127,130,.13); transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease; } .front-features2 .vorsicht-warning-tiles__more:hover,.front-features2 .vorsicht-warning-tiles__more:focus-visible { background:#0f6f72; transform:translateY(-1px); box-shadow:0 10px 24px rgba(20,127,130,.18); } .front-features2 .vorsicht-warning-tiles__more:focus-visible { outline:3px solid rgba(20,127,130,.24); outline-offset:3px; } .front-features2 .vorsicht-warning-empty-state { position:relative; z-index:3; display:flex; align-items:flex-start; gap:16px; max-width:860px; margin:0 auto; padding:22px 24px; border:1px solid rgba(20,127,130,.22); border-radius:18px; background:rgba(255,255,255,.90); box-shadow:0 10px 28px rgba(19,24,44,.035); } .front-features2 .vorsicht-warning-empty-state__icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:rgba(20,127,130,.10); color:#147f82; font-size:20px; font-weight:900; } .front-features2 .vorsicht-warning-empty-state__content strong { display:block; margin:0 0 5px; color:#263b63; font-size:18px; line-height:1.3; } .front-features2 .vorsicht-warning-empty-state__content p { margin:0; color:#5f7084; font-size:14px; line-height:1.55; } .front-features2 .vorsicht-warning-tile.vorsicht-warning-tile--v304 { position:relative; display:flex; width:100%; height:100%; min-height:224px; overflow:hidden; border:1px solid rgba(213,225,228,.95) !important; border-top:1px solid rgba(213,225,228,.95) !important; border-radius:18px !important; background:rgba(255,255,255,.88) !important; box-shadow:0 10px 28px rgba(19,24,44,.035) !important; backdrop-filter:blur(1.4px); -webkit-backdrop-filter:blur(1.4px); transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease; } .front-features2 .vorsicht-warning-tile.vorsicht-warning-tile--v304::before,.front-features2 .vorsicht-warning-tile.vorsicht-warning-tile--v304::after { display:none !important; content:none !important; } .front-features2 .vorsicht-warning-tile.vorsicht-warning-tile--v304:hover,.front-features2 .vorsicht-warning-tile.vorsicht-warning-tile--v304:focus-within { transform:translateY(-3px); background:rgba(255,255,255,.92) !important; box-shadow:0 14px 32px rgba(19,24,44,.065) !important; } .front-features2 .vorsicht-warning-tile__rail { position:absolute; z-index:3; left:0; top:20px; bottom:20px; width:4px; height:auto; max-height:none; min-height:0; border-radius:0 4px 4px 0; background:var(--vorsicht-warning-accent,#147f82); pointer-events:none; transform:none; } .front-features2 .vorsicht-warning-tile__link { display:flex; width:100%; height:100%; color:inherit; text-decoration:none !important; } .front-features2 .vorsicht-warning-tile__content { display:flex; flex-direction:column; justify-content:flex-start; width:100%; min-height:224px; padding:20px 20px 16px 26px !important; } .front-features2 .vorsicht-warning-tile__top { display:flex; align-items:center; gap:10px; margin:0 0 10px !important; } .front-features2 .vorsicht-warning-tile .feature-icon.vorsicht-warning-tile__icon { position:relative; isolation:isolate; display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--vorsicht-warning-accent,#147f82); box-shadow:none !important; transform:none !important; animation:none !important; overflow:visible; } /* Avanta-Ringe/Pseudoelemente konsequent deaktivieren. Der Schild-Hover ist ein eigenes DOM-Element. */ .front-features2 .vorsicht-warning-tile .feature-icon.vorsicht-warning-tile__icon::before,.front-features2 .vorsicht-warning-tile .feature-icon.vorsicht-warning-tile__icon::after { display:none !important; content:none !important; border:0 !important; background:none !important; box-shadow:none !important; opacity:0 !important; transform:none !important; animation:none !important; } .front-features2 .vorsicht-warning-tile__shield-hover { position:absolute; z-index:0; left:50%; top:50%; display:block !important; width:44px; height:48px; margin:0 !important; background:url('assets/images/vorsicht-shield-outline.svg') center/contain no-repeat !important; opacity:0; transform:translate(-50%,-50%) scale(.88); transition:opacity .22s ease,transform .30s ease,filter .22s ease; pointer-events:none; filter:none; } .front-features2 .vorsicht-warning-tile:hover .vorsicht-warning-tile__shield-hover,.front-features2 .vorsicht-warning-tile:focus-within .vorsicht-warning-tile__shield-hover { opacity:.42; transform:translate(-50%,-50%) scale(1.00); animation:vorsicht-warning-icon-shield-breathe 2.6s ease-in-out infinite alternate; } @keyframes vorsicht-warning-icon-shield-breathe { from { opacity:.24; transform:translate(-50%,-50%) scale(.96); } to { opacity:.42; transform:translate(-50%,-50%) scale(1.02); } } .front-features2 .vorsicht-warning-tile__glyph { position:relative; z-index:1; display:block !important; margin:0 !important; font-size:20px; line-height:1; } .front-features2 .vorsicht-warning-tile__icon-image { position:relative; z-index:1; display:block; width:25px; height:25px; object-fit:contain; } .front-features2 .vorsicht-warning-tile__heading { display:flex; min-width:0; flex-direction:column; gap:2px; } .front-features2 .vorsicht-warning-tile__level { display:block; color:var(--vorsicht-warning-accent,#147f82); font-size:10.5px; font-weight:900; letter-spacing:.07em; line-height:1.2; text-transform:uppercase; } .front-features2 .vorsicht-warning-tile__scope { display:block; max-width:100%; overflow:hidden; color:#7a889c; font-size:11.5px; font-weight:635; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .front-features2 .vorsicht-warning-tile__title { margin:0 0 7px !important; color:#263b63 !important; font-size:16px !important; font-weight:760 !important; line-height:1.32 !important; letter-spacing:-.01em; } .front-features2 .vorsicht-warning-tile__summary { display:-webkit-box; margin:0 !important; overflow:hidden; color:#5f7084; font-size:12.5px; line-height:1.47; -webkit-box-orient:vertical; -webkit-line-clamp:4; } .front-features2 .vorsicht-warning-tile__footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:11px; border-top:1px solid rgba(234,239,241,.94); color:#8694a3; font-size:11px; line-height:1.25; } .front-features2 .vorsicht-warning-tile__more { display:inline-flex; align-items:center; gap:6px; color:var(--vorsicht-warning-accent,#147f82); font-weight:850; white-space:nowrap; } .front-features2 .vorsicht-warning-tile__more span { font-size:15px; line-height:1; transition:transform .18s ease; } .front-features2 .vorsicht-warning-tile:hover .vorsicht-warning-tile__more span,.front-features2 .vorsicht-warning-tile:focus-within .vorsicht-warning-tile__more span { transform:translateX(3px); } .front-features2 .vorsicht-warning-tile__link:focus-visible { outline:3px solid color-mix(in srgb, var(--vorsicht-warning-accent,#147f82) 76%, white); outline-offset:-3px; } /* Großes transparentes Vorsicht.info-Schild links. Kein Bildhintergrund, nur das PNG selbst. */ .front-features2 .vorsicht-warning-watermark { position:absolute; z-index:1; left:clamp(-330px,-15vw,-210px); bottom:-172px; width:clamp(430px,34vw,600px); aspect-ratio:1; pointer-events:none; user-select:none; transform-origin:42% 70%; mix-blend-mode:multiply; } .front-features2 .vorsicht-warning-watermark.is-alert { left:clamp(-346px,-16vw,-224px); bottom:-184px; } .front-features2 .vorsicht-warning-watermark img { display:block; width:100%; height:100%; object-fit:contain; opacity:1; filter:grayscale(1) saturate(0) brightness(.54) contrast(.98); } .front-features2 .vorsicht-warning-watermark.is-idle { opacity:.13; animation:vorsicht-warning-shield-float 22s linear infinite; } .front-features2 .vorsicht-warning-watermark.is-alert { opacity:.23; animation:vorsicht-warning-shield-alert-pulse 5.4s ease-in-out infinite; filter:drop-shadow(0 0 16px rgba(184,33,29,.12)); } @keyframes vorsicht-warning-shield-float { 0% { transform:translate3d(-22px,14px,0) rotate(-1.4deg); } 13.9% { transform:translate3d(-8px,-3px,0) rotate(-.8deg); } 28.2% { transform:translate3d(9px,-18px,0) rotate(.1deg); } 41.2% { transform:translate3d(25px,-5px,0) rotate(.8deg); } 54.3% { transform:translate3d(13px,12px,0) rotate(1.1deg); } 65.5% { transform:translate3d(1px,25px,0) rotate(.5deg); } 78.2% { transform:translate3d(-17px,16px,0) rotate(-.4deg); } 90.4% { transform:translate3d(-28px,0,0) rotate(-1deg); } 100% { transform:translate3d(-22px,14px,0) rotate(-1.4deg); } } @keyframes vorsicht-warning-shield-alert-pulse { 0% { transform:translate3d(-12px,12px,0) scale(1) rotate(-1.05deg); filter:drop-shadow(0 0 12px rgba(184,33,29,.08)); } 8% { transform:translate3d(-11px,11px,0) scale(1.010) rotate(-1deg); filter:drop-shadow(0 0 20px rgba(184,33,29,.16)); } 14% { transform:translate3d(-11px,11px,0) scale(1) rotate(-1deg); filter:drop-shadow(0 0 13px rgba(184,33,29,.09)); } 22% { transform:translate3d(-10px,12px,0) scale(1.006) rotate(-.95deg); filter:drop-shadow(0 0 17px rgba(184,33,29,.13)); } 30% { transform:translate3d(-10px,12px,0) scale(1) rotate(-.95deg); filter:drop-shadow(0 0 12px rgba(184,33,29,.08)); } 100% { transform:translate3d(-12px,12px,0) scale(1) rotate(-1.05deg); filter:drop-shadow(0 0 12px rgba(184,33,29,.08)); } } @media(max-width:1180px){ .front-features2 .vorsicht-warning-watermark { left:-245px; width:500px; bottom:-150px; } } @media(max-width:900px){ .front-features2 .vorsicht-warning-tile.vorsicht-warning-tile--v304 { min-height:214px; } .front-features2 .vorsicht-warning-tile__content { min-height:214px; } .front-features2 .vorsicht-warning-watermark { left:-195px; bottom:-136px; width:420px; opacity:.095; } } @media(max-width:680px){ .front-features2 .vorsicht-warning-tile.vorsicht-warning-tile--v304,.front-features2 .vorsicht-warning-tile__content { min-height:0; } .front-features2 .vorsicht-warning-tile__content { padding:19px 18px 16px 24px !important; } .front-features2 .vorsicht-warning-tile__rail { top:18px; bottom:18px; height:auto; min-height:0; } .front-features2 .vorsicht-warning-tile__title { font-size:15.5px !important; } .front-features2 .vorsicht-warning-tile__footer { align-items:flex-start; flex-wrap:wrap; } .front-features2 .vorsicht-warning-watermark { display:none; } } @media(prefers-reduced-motion:reduce){ .front-features2 .vorsicht-warning-watermark.is-idle,.front-features2 .vorsicht-warning-tile,.front-features2 .vorsicht-warning-tile__more span,.front-features2 .vorsicht-warning-tile__shield-hover { animation:none !important; transition:none !important; } } /* ========================================================================== Vorsicht.info Theme 3.0.1 – Desktop-Markenbereich Nur Darstellung. Avanta-Struktur, Navigation, Mobil- und Tablet-Header bleiben unverändert. ========================================================================== */ @media (min-width: 992px) { /* Slogan verändert nicht mehr die Höhe des Avanta-Headers. */ body .header--five .dt_navbar-wrapper .site--logo { position: relative !important; } body .header--five .dt_navbar-wrapper .site--logo .site-description { display: var(--vorsicht-header-slogan-display, block) !important; position: absolute !important; left: 0 !important; bottom: 2px !important; width: var(--vorsicht-logo-desktop, 260px) !important; margin: var(--vorsicht-header-slogan-gap, 4px) 0 0 !important; padding: 0 !important; color: var(--vorsicht-header-slogan-color, #18303b) !important; font-size: var(--vorsicht-header-slogan-size, 13px) !important; font-weight: var(--vorsicht-header-slogan-weight, 500) !important; line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; z-index: 4 !important; } /* Frühere oder vom Parent stammende obere Kanten neutralisieren. */ body .header--five, body .header--five .dt_header-inner, body .header--five .dt_header-topbar, body .header--five .dt_header-navwrapper, body .header--five .dt_navbar-wrapper { border-top: 0 !important; box-shadow: none; } /* Optionaler, bewusst erzeugter oberer Akzent. Standard: aus. */ body .header--five .dt_header-inner::after { content: '' !important; display: var(--vorsicht-header-top-line-display, none) !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: var(--vorsicht-header-line-height, 3px) !important; background: var(--vorsicht-header-line-color, #147f82) !important; pointer-events: none !important; z-index: 20 !important; } /* Den zufälligen langen grünen Rest unter der weißen Navigation abdecken. */ body .header--five .dt_navbar-wrapper .dt_navbar-menu::after { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: var(--vorsicht-header-line-height, 3px) !important; background: #fff !important; pointer-events: none !important; z-index: 1 !important; } /* Eine einzige kontrollierte Markenlinie: nur bis zur weißen Schräge. */ body .header--five .dt_navbar-wrapper::after { content: '' !important; display: var(--vorsicht-header-bottom-line-display, block) !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 25.5% !important; height: var(--vorsicht-header-line-height, 3px) !important; background: var(--vorsicht-header-line-color, #147f82) !important; pointer-events: none !important; z-index: 3 !important; } } /* v3.0.19: Nachlade-Schaltfläche nach der letzten Warnkarte vollständig ausblenden. */ .front-features2 .vorsicht-warning-tiles__actions[hidden], .front-features2 .vorsicht-warning-tiles__more[hidden], .front-features2 .vorsicht-warning-tiles__more[aria-hidden="true"] { display: none !important; } /* ========================================================================== Theme 3.0.19 – eigenes Warnmeldungsarchiv Ersetzt die generische Avanta-Blogansicht für /warnungen/ und die zugehörigen Themen-, Regionen- und Warnkategoriearchive. ========================================================================== */ .vorsicht-warning-archive { background: linear-gradient(180deg, #fffafa 0%, #ffffff 58%, #f8fbfb 100%); color: #263b63; } .vorsicht-warning-archive__inner { width: min(1280px, calc(100% - 48px)); margin: 0 auto; } .vorsicht-warning-archive__hero { padding: 72px 0 44px; background: radial-gradient(circle at 78% 26%, rgba(20,127,130,.08), transparent 28%), radial-gradient(circle at 18% 80%, rgba(229,27,15,.035), transparent 34%), linear-gradient(135deg, #fff 0%, #fff8f8 54%, #f6fbfb 100%); border-bottom: 1px solid rgba(20,127,130,.10); } .vorsicht-warning-archive__hero .vorsicht-warning-archive__eyebrow, .vorsicht-warning-filter__eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; color: #147f82; font-size: 11px; font-weight: 900; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; } .vorsicht-warning-archive__hero h1 { margin: 0 0 12px; color: #171827; font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: -.035em; } .vorsicht-warning-archive__hero p { max-width: 800px; margin: 0; color: #66768c; font-size: 17px; line-height: 1.6; } .vorsicht-warning-archive__content { padding: 34px 0 72px; } .vorsicht-warning-filter { margin: 0 0 28px; padding: 24px; border: 1px solid rgba(209,224,228,.95); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(19,24,44,.045); } .vorsicht-warning-filter__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .vorsicht-warning-filter__head h2 { margin: 0; color: #1c2738; font-size: 23px; line-height: 1.2; } .vorsicht-warning-filter__reset { color: #147f82; font-size: 13px; font-weight: 750; text-decoration: none; } .vorsicht-warning-filter__reset:hover, .vorsicht-warning-filter__reset:focus-visible { text-decoration: underline; } .vorsicht-warning-filter__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .vorsicht-warning-filter__field { display: flex; min-width: 0; flex-direction: column; gap: 7px; } .vorsicht-warning-filter__field--wide { grid-column: span 2; } .vorsicht-warning-filter__field > span { color: #4c5c70; font-size: 12px; font-weight: 800; } .vorsicht-warning-filter__control { width: 100%; min-height: 44px; margin: 0 !important; padding: 10px 12px !important; border: 1px solid #d6e0e3 !important; border-radius: 10px !important; background: #fff !important; color: #263b63 !important; font-size: 14px !important; line-height: 1.25 !important; box-shadow: none !important; } .vorsicht-warning-filter__control:focus { border-color: #147f82 !important; outline: 3px solid rgba(20,127,130,.12) !important; outline-offset: 1px; } .vorsicht-warning-filter__actions { display: flex; justify-content: flex-end; margin-top: 18px; } .vorsicht-warning-filter__submit { min-height: 44px; padding: 10px 20px; border: 1px solid #147f82; border-radius: 999px; background: #147f82; color: #fff; font-size: 14px; font-weight: 850; cursor: pointer; box-shadow: 0 8px 20px rgba(20,127,130,.12); } .vorsicht-warning-filter__submit:hover, .vorsicht-warning-filter__submit:focus-visible { background: #0f6f72; } .vorsicht-warning-results__meta { margin: 0 0 16px; color: #66768c; font-size: 13px; } .vorsicht-warning-results__meta strong { margin-right: 4px; color: #263b63; font-size: 18px; } .vorsicht-warning-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .vorsicht-warning-result { --vi-archive-accent: #147f82; position: relative; min-width: 0; min-height: 300px; overflow: hidden; border: 1px solid rgba(213,225,228,.96); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(19,24,44,.04); transition: transform .18s ease, box-shadow .18s ease; } .vorsicht-warning-result--urgent, .vorsicht-warning-result--warning { --vi-archive-accent: #e51b0f; } .vorsicht-warning-result--caution { --vi-archive-accent: #d99000; } .vorsicht-warning-result--info { --vi-archive-accent: #2c80d3; } .vorsicht-warning-result--tip { --vi-archive-accent: #147f82; } .vorsicht-warning-result:hover, .vorsicht-warning-result:focus-within { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(19,24,44,.07); } .vorsicht-warning-result__link { display: flex; width: 100%; height: 100%; min-height: 300px; flex-direction: column; padding: 22px 22px 18px 27px; color: inherit !important; text-decoration: none !important; } .vorsicht-warning-result__rail { position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 0 4px 4px 0; background: var(--vi-archive-accent); } .vorsicht-warning-result__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .vorsicht-warning-result__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; font-size: 19px; } .vorsicht-warning-result__level { display: block; color: var(--vi-archive-accent); font-size: 10.5px; font-weight: 900; letter-spacing: .07em; line-height: 1.2; text-transform: uppercase; } .vorsicht-warning-result__region { display: block; margin-top: 2px; overflow: hidden; color: #7b899c; font-size: 11.5px; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .vorsicht-warning-result__title { margin: 0 0 8px !important; color: #263b63 !important; font-size: 18px !important; font-weight: 780 !important; line-height: 1.32 !important; letter-spacing: -.01em; } .vorsicht-warning-result__topic { align-self: flex-start; margin: 0 0 9px; padding: 4px 8px; border-radius: 999px; background: rgba(20,127,130,.08); color: #147f82; font-size: 10.5px; font-weight: 800; line-height: 1.2; } .vorsicht-warning-result__summary { margin: 0 !important; color: #617188; font-size: 13.5px; line-height: 1.55; } .vorsicht-warning-result__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #edf1f3; color: #8b98a7; font-size: 11px; } .vorsicht-warning-result__more { color: var(--vi-archive-accent); font-weight: 850; white-space: nowrap; } .vorsicht-warning-results__empty { display: flex; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid rgba(20,127,130,.18); border-radius: 18px; background: #fff; } .vorsicht-warning-results__empty > span { font-size: 28px; } .vorsicht-warning-results__empty h2 { margin: 0 0 5px; font-size: 20px; color: #263b63; } .vorsicht-warning-results__empty p { margin: 0; color: #66768c; } .vorsicht-warning-pagination { margin-top: 30px; } .vorsicht-warning-pagination .page-numbers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .vorsicht-warning-pagination .page-numbers li { margin: 0; } .vorsicht-warning-pagination a.page-numbers, .vorsicht-warning-pagination span.page-numbers { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid #d5e1e4; border-radius: 10px; background: #fff; color: #263b63; text-decoration: none; font-size: 13px; font-weight: 750; } .vorsicht-warning-pagination span.current { border-color: #147f82; background: #147f82; color: #fff; } .vorsicht-warning-pagination a.page-numbers:hover, .vorsicht-warning-pagination a.page-numbers:focus-visible { border-color: #147f82; color: #147f82; } @media (max-width: 1050px) { .vorsicht-warning-filter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vorsicht-warning-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .vorsicht-warning-archive__inner { width: min(100% - 28px, 1280px); } .vorsicht-warning-archive__hero { padding: 48px 0 32px; } .vorsicht-warning-archive__hero p { font-size: 15px; } .vorsicht-warning-filter { padding: 18px; border-radius: 16px; } .vorsicht-warning-filter__head { flex-direction: column; gap: 8px; } .vorsicht-warning-filter__grid { grid-template-columns: 1fr; } .vorsicht-warning-filter__field--wide { grid-column: auto; } .vorsicht-warning-filter__actions { justify-content: stretch; } .vorsicht-warning-filter__submit { width: 100%; } .vorsicht-warning-results { grid-template-columns: 1fr; gap: 16px; } .vorsicht-warning-result, .vorsicht-warning-result__link { min-height: 0; } } /* ========================================================================== Vorsicht.info Theme 3.0.20 – eigene 404-Seite Zufällige Präventionsszenen: Einbrecher, Schockanruf, Phishing, Fakeshop ========================================================================== */ .error404 #content.site-content { margin: 0 !important; padding: 0 !important; } .error404 #page.site { min-height: 100vh; overflow-x: hidden; } .vorsicht-404 { --v404-teal: #147f82; --v404-teal-dark: #0d6668; --v404-teal-soft: #e9f5f5; --v404-dark: #100b1f; --v404-text: #44536b; --v404-soft: #f6f9f9; --v404-border: #d9e8e8; --v404-gold: #f6c744; --v404-skin: #e6b79d; position: relative; z-index: 0; display: flex; flex-direction: column; min-height: 100vh; background: #ffffff; color: var(--v404-dark); overflow: hidden; } .vorsicht-404__main { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; padding: clamp(3.4rem, 6vw, 7.5rem) 2.4rem; } .vorsicht-404__inner { width: min(100%, 1020px); margin: 0 auto; text-align: center; } .vorsicht-404__kicker { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 1.2rem; color: var(--v404-teal); font-size: clamp(2rem, 2.5vw, 3rem); line-height: 1.2; font-weight: 800; } .vorsicht-404__code { display: flex; align-items: center; justify-content: center; gap: clamp(1.8rem, 4vw, 5rem); margin: 0 auto 2rem; } .vorsicht-404__digit { display: block; color: var(--v404-dark); font-size: clamp(10rem, 17vw, 22rem); line-height: .78; font-weight: 900; letter-spacing: -.06em; } .vorsicht-404__scene { position: relative; flex: 0 0 auto; width: clamp(12rem, 16vw, 19rem); aspect-ratio: 1; border: 1px solid var(--v404-border); border-radius: 50%; background: var(--v404-soft); box-shadow: 0 1.6rem 4rem rgba(20, 127, 130, .10); } .vorsicht-404__svg { display: block; width: 100%; height: 100%; overflow: visible; } .vorsicht-404__scene-label { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .55rem 1.25rem; margin: 0 0 1.2rem; border: 1px solid rgba(20, 127, 130, .25); border-radius: 999px; background: rgba(233, 245, 245, .78); color: var(--v404-teal-dark); font-size: 1.35rem; line-height: 1.2; font-weight: 800; letter-spacing: .02em; } .vorsicht-404__title { max-width: 820px; margin: 0 auto .9rem; color: var(--v404-dark); font-size: clamp(2.8rem, 4vw, 4.2rem); line-height: 1.15; font-weight: 800; } .vorsicht-404__intro, .vorsicht-404__text { max-width: 720px; margin-left: auto; margin-right: auto; color: var(--v404-text); font-size: clamp(1.55rem, 1.7vw, 1.8rem); line-height: 1.7; } .vorsicht-404__intro { margin-top: 0; margin-bottom: .45rem; } .vorsicht-404__text { margin-top: 0; margin-bottom: 2.5rem; } .vorsicht-404__text p { margin: 0; } .vorsicht-404__actions { display: flex; align-items: center; justify-content: center; margin: 0 0 1.6rem; } .vorsicht-404__button.dt-btn { min-width: 16rem; border-radius: .8rem; box-shadow: 0 .8rem 2.4rem rgba(20, 127, 130, .16); } .vorsicht-404__punchline { margin: 0; color: #687483; font-size: 1.35rem; line-height: 1.5; font-weight: 600; } .vorsicht-404__marquee { position: relative; z-index: 4; flex: 0 0 auto; width: 100%; overflow: hidden; background: var(--v404-teal); color: #ffffff; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(0, 0, 0, .08); } .vorsicht-404__marquee-track { display: flex; align-items: center; width: max-content; min-width: max-content; white-space: nowrap; will-change: transform; animation: vorsicht404-marquee-left 58s linear infinite; } .vorsicht-404__marquee-track--reverse { animation-name: vorsicht404-marquee-right; animation-duration: 64s; } .vorsicht-404__marquee-group { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 6.4rem; white-space: nowrap; } .vorsicht-404__marquee-item, .vorsicht-404__marquee-brand, .vorsicht-404__marquee-dot { display: inline-block; flex: 0 0 auto; white-space: nowrap; color: #ffffff; font-size: 1.55rem; line-height: 1; font-weight: 700; } .vorsicht-404__marquee-item, .vorsicht-404__marquee-brand { padding: 0 2.2rem; } .vorsicht-404__marquee-brand { opacity: .78; font-weight: 600; } .vorsicht-404__marquee-dot { opacity: .48; } @keyframes vorsicht404-marquee-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes vorsicht404-marquee-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .vorsicht-404__watermark { position: absolute; z-index: 1; pointer-events: none; opacity: .055; } .vorsicht-404__watermark img { display: block; width: 100%; height: auto; } .vorsicht-404__watermark--left { left: -10rem; bottom: 2rem; width: clamp(28rem, 34vw, 54rem); transform: rotate(-9deg); } .vorsicht-404__watermark--right { right: -9rem; top: 8rem; width: clamp(21rem, 25vw, 38rem); transform: rotate(12deg); opacity: .035; } /* Inline-SVG-Farben */ .vorsicht-404 .v404-fill-white { fill: #ffffff; } .vorsicht-404 .v404-fill-soft { fill: var(--v404-soft); } .vorsicht-404 .v404-fill-dark { fill: var(--v404-dark); } .vorsicht-404 .v404-fill-teal { fill: var(--v404-teal); } .vorsicht-404 .v404-fill-teal-soft { fill: var(--v404-teal-soft); } .vorsicht-404 .v404-fill-gold { fill: var(--v404-gold); } .vorsicht-404 .v404-fill-skin { fill: var(--v404-skin); } .vorsicht-404 .v404-stroke-dark, .vorsicht-404 .v404-stroke-teal, .vorsicht-404 .v404-stroke-gold { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .vorsicht-404 .v404-stroke-dark { stroke: var(--v404-dark); } .vorsicht-404 .v404-stroke-teal { stroke: var(--v404-teal); } .vorsicht-404 .v404-stroke-gold { stroke: var(--v404-gold); } /* Ruhige Mini-Animationen – bewusst langsam und unaufdringlich. */ .v404-burglar-look { transform-box: fill-box; transform-origin: center; animation: vorsicht404-look-around 8.5s ease-in-out infinite; } .v404-question { transform-box: fill-box; transform-origin: center; animation: vorsicht404-question 8.5s ease-in-out infinite; } .v404-phone-wiggle { transform-box: fill-box; transform-origin: center; animation: vorsicht404-phone 7.8s ease-in-out infinite; } .v404-phone-bubble { transform-box: fill-box; transform-origin: bottom left; animation: vorsicht404-bubble 7.8s ease-in-out infinite; } .v404-envelope-bob { transform-box: fill-box; transform-origin: center; animation: vorsicht404-envelope 8.2s ease-in-out infinite; } .v404-hook-sway { transform-box: fill-box; transform-origin: top center; animation: vorsicht404-hook 8.2s ease-in-out infinite; } .v404-shop-bag { transform-box: fill-box; transform-origin: center bottom; animation: vorsicht404-shopbag 8.6s ease-in-out infinite; } .v404-shop-tag { transform-box: fill-box; transform-origin: top left; animation: vorsicht404-tag 8.6s ease-in-out infinite; } @keyframes vorsicht404-look-around { 0%, 72%, 100% { transform: translateX(0) rotate(0); } 78% { transform: translateX(-4px) rotate(-2deg); } 84% { transform: translateX(4px) rotate(2deg); } 90% { transform: translateX(0) rotate(0); } } @keyframes vorsicht404-question { 0%, 70%, 100% { transform: translateY(0) scale(1); } 78% { transform: translateY(-4px) scale(1.05); } 86% { transform: translateY(0) scale(1); } } @keyframes vorsicht404-phone { 0%, 74%, 100% { transform: rotate(0); } 78% { transform: rotate(-2.4deg); } 82% { transform: rotate(2.4deg); } 86% { transform: rotate(-1.5deg); } 90% { transform: rotate(0); } } @keyframes vorsicht404-bubble { 0%, 72%, 100% { transform: scale(.97); opacity: .82; } 80%, 90% { transform: scale(1); opacity: 1; } } @keyframes vorsicht404-envelope { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes vorsicht404-hook { 0%, 72%, 100% { transform: rotate(0); } 80% { transform: rotate(3deg); } 88% { transform: rotate(-3deg); } } @keyframes vorsicht404-shopbag { 0%, 72%, 100% { transform: translateY(0); } 80% { transform: translateY(-3px); } 88% { transform: translateY(0); } } @keyframes vorsicht404-tag { 0%, 72%, 100% { transform: rotate(0); } 80% { transform: rotate(4deg); } 88% { transform: rotate(-2deg); } } @media (max-width: 767px) { .vorsicht-404__main { padding: 3.6rem 1.8rem 4.2rem; } .vorsicht-404__code { gap: 1.2rem; margin-bottom: 2.4rem; } .vorsicht-404__digit { font-size: clamp(7.6rem, 28vw, 12rem); } .vorsicht-404__scene { width: clamp(9.4rem, 30vw, 12rem); } .vorsicht-404__title { font-size: clamp(2.5rem, 8vw, 3.3rem); } .vorsicht-404__intro, .vorsicht-404__text { font-size: 1.5rem; line-height: 1.65; } .vorsicht-404__marquee-group { min-height: 5.4rem; } .vorsicht-404__marquee-item, .vorsicht-404__marquee-brand, .vorsicht-404__marquee-dot { font-size: 1.35rem; } .vorsicht-404__marquee-item, .vorsicht-404__marquee-brand { padding: 0 1.5rem; } .vorsicht-404__watermark--right { display: none; } } @media (max-width: 420px) { .vorsicht-404__code { gap: .6rem; } .vorsicht-404__digit { font-size: 7.4rem; } .vorsicht-404__scene { width: 8.7rem; } } @media (prefers-reduced-motion: reduce) { .vorsicht-404__marquee-track, .v404-burglar-look, .v404-question, .v404-phone-wiggle, .v404-phone-bubble, .v404-envelope-bob, .v404-hook-sway, .v404-shop-bag, .v404-shop-tag { animation: none !important; transform: none !important; } } /* ========================================================================== Theme 3.0.20 – Mobile-Header: Bürger-Login + stabiles Hamburger-Menü ========================================================================== */ @media (max-width: 991px) { body .dt_mobilenav-right .vorsicht-header-account { display: list-item !important; } body .dt_mobilenav-right .vorsicht-header-account .dt_user_btn { display: inline-flex !important; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; line-height: 1; } body .dt_mobilenav-mainmenu-content[aria-hidden="false"], body.dt_mobilenav-mainmenu--active .dt_mobilenav-mainmenu-content { display: block !important; } body .vorsicht-mobile-account-link { display: flex; align-items: center; gap: 12px; margin: 0 18px 18px; padding: 13px 15px; border: 1px solid rgba(20,127,130,.18); border-radius: 12px; background: rgba(20,127,130,.08); color: #147f82 !important; font-size: 14px; font-weight: 800; line-height: 1.25; text-decoration: none !important; } body .vorsicht-mobile-account-link i { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #147f82; color: #fff; font-size: 14px; } body .vorsicht-mobile-account-link:hover, body .vorsicht-mobile-account-link:focus { border-color: rgba(20,127,130,.42); background: rgba(20,127,130,.13); color: #0d6669 !important; } } @media (max-width: 420px) { body .dt_mobilenav-right .dt_navbar-list-right > li:not(:last-child) { margin-right: .65rem; } body .dt_mobilenav-right > ul { padding-left: .55rem; } } /* ========================================================================== Build 2026.08.12.5 – Mobile-Menü auf originaler Avanta-Struktur ========================================================================== */ @media (max-width: 991px) { /* Die originale Avanta-Offcanvas-Struktur bleibt zuständig für Geometrie. */ body .vorsicht-mobile-mainmenu .dt_mobilenav-mainmenu-content { z-index: 2147482000 !important; } body .vorsicht-mobile-mainmenu .dt_mobilenav-mainmenu-inner { z-index: 2; overflow-y: auto; -webkit-overflow-scrolling: touch; } body .vorsicht-mobile-mainmenu .vorsicht-mobile-menu-account { margin: 0 1.5rem 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(16,19,34,.08); } body .vorsicht-mobile-mainmenu .vorsicht-mobile-menu-account .vorsicht-mobile-account-link { margin: 0; } body .vorsicht-mobile-mainmenu .dt_navbar-mainmenu { height: auto; min-height: calc(100% - 7rem); padding-bottom: 2rem; } /* Im geöffneten Zustand erzwingen wir die Sichtbarkeit ohne fadeToggle-Abhängigkeit. */ body.dt_mobilenav-mainmenu--active .vorsicht-mobile-mainmenu .dt_mobilenav-mainmenu-content { display: block !important; visibility: visible !important; opacity: 1 !important; } body.dt_mobilenav-mainmenu--active .vorsicht-mobile-mainmenu .dt_mobilenav-mainmenu-inner { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; } body.vorsicht-mobile-nav-open { overflow: hidden !important; } } /* ========================================================================== Build 2026.08.12.6 – mobiles Hauptmenü als natives Browser-Dialog ========================================================================== */ @media (max-width: 991px) { body button.vorsicht-mobile-menu-toggle { position: relative; z-index: 20; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body .vorsicht-mobile-menu-dialog { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #101322; overflow: hidden !important; } body .vorsicht-mobile-menu-dialog:not([open]) { display: none !important; } body .vorsicht-mobile-menu-dialog[open] { display: block !important; } body .vorsicht-mobile-menu-dialog::backdrop { background: rgba(8, 15, 23, .60) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body .vorsicht-mobile-menu-dialog__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 390px); height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; box-shadow: -18px 0 48px rgba(0, 0, 0, .22); } body .vorsicht-mobile-menu-dialog__head { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 14px 18px; border-bottom: 1px solid rgba(20,127,130,.12); background: rgba(255,255,255,.98); } body .vorsicht-mobile-menu-dialog__head strong { color: #101322; font-size: 20px; line-height: 1.2; font-weight: 800; } body .vorsicht-mobile-menu-dialog__close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0 0 3px; border: 1px solid rgba(20,127,130,.18); border-radius: 50%; background: rgba(20,127,130,.08); color: #147f82; font-size: 32px; font-weight: 300; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; } body .vorsicht-mobile-menu-dialog .vorsicht-mobile-account-link { margin: 18px 18px 8px; } body .vorsicht-mobile-menu-dialog__nav { padding: 8px 18px 32px; } body .vorsicht-mobile-dialog-menu, body .vorsicht-mobile-dialog-menu ul { display: block !important; position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; } body .vorsicht-mobile-dialog-menu > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid rgba(16,19,34,.08); } body .vorsicht-mobile-dialog-menu li { float: none !important; } body .vorsicht-mobile-dialog-menu a { display: flex !important; align-items: center; width: 100% !important; min-height: 52px; margin: 0 !important; padding: 12px 8px !important; border: 0 !important; background: transparent !important; color: #101322 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.35 !important; text-decoration: none !important; box-shadow: none !important; } body .vorsicht-mobile-dialog-menu a:hover, body .vorsicht-mobile-dialog-menu a:focus, body .vorsicht-mobile-dialog-menu .current-menu-item > a, body .vorsicht-mobile-dialog-menu .current_page_item > a { color: #147f82 !important; background: rgba(20,127,130,.06) !important; } body .vorsicht-mobile-dialog-menu .sub-menu, body .vorsicht-mobile-dialog-menu .children { display: block !important; margin: 0 0 6px !important; padding-left: 15px !important; } body .vorsicht-mobile-dialog-menu .sub-menu a, body .vorsicht-mobile-dialog-menu .children a { min-height: 44px; padding: 9px 8px !important; font-size: 14px !important; font-weight: 600 !important; } html.vorsicht-mobile-dialog-open, body.vorsicht-mobile-dialog-open { overflow: hidden !important; } } @media (max-width: 420px) { body .vorsicht-mobile-menu-dialog__panel { width: min(92vw, 370px); } } @media (min-width: 992px) { body .vorsicht-mobile-menu-dialog { display: none !important; } } /* v3.0.21 – Avanta Sponsor Section: Vorsicht.info-Abschnittskopf */ .vinfo-sponsor-heading { width: min(100%, 900px); margin: 0 auto 34px; padding: 0 22px; text-align: center; box-sizing: border-box; } .vinfo-sponsor-heading__label { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 13px; border-radius: 999px; background: rgba(17, 127, 130, .10); color: #117f82; font-size: 12px; line-height: 1.25; font-weight: 800; letter-spacing: .095em; text-transform: uppercase; } .vinfo-sponsor-heading__title { margin: 14px 0 10px; color: #101122; font-family: inherit; font-size: clamp(30px, 3vw, 43px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; } .vinfo-sponsor-heading__description { max-width: 780px; margin: 0 auto; color: #667496; font-size: 16px; line-height: 1.75; } @media (max-width: 767px) { .vinfo-sponsor-heading { margin-bottom: 26px; padding: 0 14px; } .vinfo-sponsor-heading__title { font-size: clamp(27px, 8vw, 34px); } .vinfo-sponsor-heading__description { font-size: 15px; line-height: 1.65; } } /* ========================================================= VORSICHT.INFO – TIEFE DESKTOP-UNTERMENÜS NACH RECHTS Avanta öffnet die 3. Untermenüebene standardmäßig links. Für Vorsicht.info wird sie auf Desktop nach rechts geöffnet. ========================================================= */ @media (min-width: 992px) { .dt_navbar-nav .dt_navbar-mainmenu .dropdown-menu li .dropdown-menu li .dropdown-menu { left: 100% !important; right: auto !important; } }