/* RT Hero Workflow 1.2.0 — sitesweite Navigations-Gestaltung. Der Site-Header ist ein Avada-Layout-Builder-Template (fusion_tb_section 11) in der Datenbank; Avadas Sticky-System hält die Leiste permanent fixed und nutzt den .fusion-tb-header-Wrapper als Platzhalter. Diese Datei gestaltet die Leiste rein per CSS als dunkle Floating-Navigation um — updatesicher, git-versioniert, ohne DB-Änderung und ohne konkurrierende Sticky-Logik (rthw-site.js toggelt beim Scrollen nur die Klasse .rthw-nav-compact). Wichtig für Wartung: - KEIN transform und KEIN backdrop-filter direkt auf der Leiste — beides würde das position:fixed des Mobil-Panels (Kind der Leiste) an die Leiste binden. Zentrierung über left/right+margin, Blur über ::before. - Logo: es existiert keine transparente Logo-Datei (alle PNGs RGB ohne Alphakanal, dunkle Wortmarke). Das Logo sitzt deshalb bewusst in einem weißen, abgerundeten Chip. Für eine Variante ohne Chip wird eine transparente Quelldatei mit heller Wortmarke benötigt (SVG oder PNG). */ /* ---- Platzhalter unter der schwebenden Leiste ------------------------ */ .fusion-tb-header { min-height: 128px !important; } /* ---- Die Leiste ------------------------------------------------------ */ .fusion-tb-header .fusion-fullwidth { position: fixed !important; top: 20px !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; width: min(1240px, calc(100vw - 36px)) !important; z-index: 20060 !important; background-color: rgba(15, 18, 24, 0.92) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; box-shadow: 0 18px 40px rgba(5, 8, 14, 0.28), 0 2px 8px rgba(5, 8, 14, 0.20) !important; --awb-box-shadow: none !important; --awb-padding-top: 9px !important; --awb-padding-bottom: 9px !important; --awb-padding-left: 18px !important; --awb-padding-right: 12px !important; transition: top 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } /* Glas-Effekt: Blur auf einer Pseudo-Schicht (siehe Kopfkommentar). Mit backdrop-filter darf die Fläche transparenter sein; ohne Unterstützung bleibt die deckendere Grundfarbe — Lesbarkeit ist so immer gegeben. */ .fusion-tb-header .fusion-fullwidth::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; } @supports (backdrop-filter: blur(6px)) { .fusion-tb-header .fusion-fullwidth { background-color: rgba(15, 18, 24, 0.82) !important; } .fusion-tb-header .fusion-fullwidth::before { backdrop-filter: blur(10px); } } /* Kompaktzustand beim Scrollen (Klasse von rthw-site.js auf ): die Leiste wird hell-transparent (Glas), die Menüpunkte schwarz. */ .rthw-nav-compact .fusion-tb-header .fusion-fullwidth { top: 8px !important; background-color: rgba(255, 255, 255, 0.93) !important; border-color: rgba(5, 5, 5, 0.10); box-shadow: 0 12px 32px rgba(5, 8, 14, 0.14), 0 1px 4px rgba(5, 8, 14, 0.10) !important; --awb-padding-top: 7px !important; --awb-padding-bottom: 7px !important; } @supports (backdrop-filter: blur(6px)) { .rthw-nav-compact .fusion-tb-header .fusion-fullwidth { background-color: rgba(255, 255, 255, 0.42) !important; } .rthw-nav-compact .fusion-tb-header .fusion-fullwidth::before { backdrop-filter: blur(14px); } } /* Schwarze Schrift im Kompaktzustand (CTA bleibt rot/weiß) — NUR im Desktop-Menü: das mobile Seitenpanel ist immer dunkel, dort müssen die Punkte unabhängig vom Scrollzustand weiß bleiben. */ @media (min-width: 1025px) { .rthw-nav-compact .fusion-tb-header nav.awb-menu .awb-menu__main-li > a { color: rgba(15, 18, 24, 0.92) !important; } .rthw-nav-compact .fusion-tb-header nav.awb-menu .awb-menu__main-li > a:hover, .rthw-nav-compact .fusion-tb-header nav.awb-menu .awb-menu__main-li > a:focus-visible, .rthw-nav-compact .fusion-tb-header nav.awb-menu .awb-menu__main-li.current-menu-item > a, .rthw-nav-compact .fusion-tb-header nav.awb-menu .awb-menu__main-li.current_page_item > a { color: #050505 !important; } } .rthw-nav-compact .fusion-tb-header a:focus-visible, .rthw-nav-compact .fusion-tb-header button:focus-visible { outline-color: #0f1218; } .rthw-nav-compact .fusion-tb-header .awb-menu__m-toggle { color: #0f1218 !important; } /* Offenes Mobilpanel ist immer dunkel — X-Button darauf weiß halten. */ .rthw-nav-open .fusion-tb-header .awb-menu__m-toggle { color: #ffffff !important; } /* ---- Zeile: Logo links, Menü mittig, CTA rechts ---------------------- */ /* Avada setzt die Zeile inline auf 104% Breite mit negativen Rändern — dadurch ragten Logo und CTA über die Leistenränder hinaus. */ .fusion-tb-header .fusion-builder-row { align-items: center; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .fusion-tb-header .fusion-layout-column { --awb-margin-top-large: 0px !important; --awb-spacing-right-large: 0% !important; --awb-spacing-left-large: 0% !important; --awb-spacing-right-medium: 0% !important; --awb-spacing-left-medium: 0% !important; } .fusion-tb-header .fusion-layout-column:first-child { width: auto !important; flex: 0 0 auto !important; } .fusion-tb-header .fusion-layout-column:nth-child(2) { width: auto !important; flex: 1 1 auto !important; min-width: 0; } /* ---- Logo (transparente Datei, ohne Chip) ---------------------------- */ .fusion-tb-header .fusion-imageframe { background: transparent; padding: 0; display: inline-flex; line-height: 0; } .fusion-tb-header .fusion-image-element { --awb-max-width: 54px !important; --awb-sticky-max-width: 54px !important; /* neutralisiert das 150px-Sticky-Logo des Templates */ } /* Transparente Logo-Variante per content-Austausch (kein DB-Eingriff am Template; Browser ohne content-auf-img zeigen das Original). */ .fusion-tb-header .fusion-imageframe img { content: url("/wp-content/uploads/2026/07/red-tiger-it.net_logo_01-1200x1200_transparent.png"); width: 54px !important; height: 54px !important; transition: width 0.3s ease, height 0.3s ease; } .rthw-nav-compact .fusion-tb-header .fusion-image-element { --awb-max-width: 44px !important; --awb-sticky-max-width: 44px !important; } .rthw-nav-compact .fusion-tb-header .fusion-imageframe img { width: 44px !important; height: 44px !important; } /* ---- Desktop-Menü ---------------------------------------------------- */ .fusion-tb-header nav.awb-menu { display: flex; align-items: center; width: 100%; } /* Avadas Hover-/Aktiv-Hintergrundflächen stören das ruhige Bild. */ .fusion-tb-header .awb-menu__main-background-default, .fusion-tb-header .awb-menu__main-background-active { display: none !important; } .fusion-tb-header nav.awb-menu .awb-menu__main-li > a { color: rgba(255, 255, 255, 0.92) !important; font-size: 15px !important; font-weight: 600; letter-spacing: 0.01em; } .fusion-tb-header nav.awb-menu .awb-menu__main-li > a:hover, .fusion-tb-header nav.awb-menu .awb-menu__main-li > a:focus-visible { color: #ffffff !important; } /* Aktiver Punkt: weißer Text + rote Statuslinie (rot auf dunkel hätte zu wenig Kontrast; das Template setzt sonst rote Schrift). */ .fusion-tb-header nav.awb-menu .awb-menu__main-li.current-menu-item > a, .fusion-tb-header nav.awb-menu .awb-menu__main-li.current_page_item > a { color: #ffffff !important; } @media (min-width: 1025px) { .fusion-tb-header .awb-menu__main-ul { display: flex; align-items: center; gap: 4px; margin: 0 auto; /* Avada gibt dem Menü sonst min-height 96px und bläht die Leiste auf. */ min-height: 0 !important; } .fusion-tb-header nav.awb-menu .awb-menu__main-li > a { position: relative; display: inline-block !important; padding: 12px 15px !important; } /* Hover: feine rote Linie, weich von links nach rechts. */ .fusion-tb-header .awb-menu__main-li > a::before { content: ""; position: absolute; left: 15px; right: 15px; bottom: 7px; height: 2px; border-radius: 1px; background: var(--awb-color5, #e20917); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease; } .fusion-tb-header .awb-menu__main-li > a:hover::before, .fusion-tb-header .awb-menu__main-li > a:focus-visible::before { transform: scaleX(1); } /* Aktiver Menüpunkt: rote Statuslinie, einmaliger dezenter Lichtimpuls. */ .fusion-tb-header .awb-menu__main-li.current-menu-item > a::before, .fusion-tb-header .awb-menu__main-li.current_page_item > a::before { transform: scaleX(1); animation: rthwNavGlow 1.1s ease-out 0.35s 1; } /* Der Panel-CTA-Menüpunkt existiert nur mobil. */ .rthw-nav-cta-li { display: none !important; } } @keyframes rthwNavGlow { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 10px 1px rgba(226, 9, 23, 0.55); } } /* ---- CTA (von rthw-site.js eingefügt) -------------------------------- */ .rthw-nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--awb-color5, #e20917); color: #ffffff !important; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; padding: 11px 18px; border-radius: 11px; text-decoration: none; white-space: nowrap; margin-left: 14px; transition: background-color 0.2s ease; } .rthw-nav-cta svg { flex: 0 0 auto; transition: transform 0.2s ease; } .rthw-nav-cta:hover, .rthw-nav-cta:focus { background: var(--awb-color6, #a60711); color: #ffffff !important; } .rthw-nav-cta:hover svg, .rthw-nav-cta:focus-visible svg { transform: translateX(3px); } @media (max-width: 1024px) { /* Auf Mobil übernimmt der CTA im Panel; der Leisten-CTA verschwindet. */ nav.awb-menu > .rthw-nav-cta { display: none; } } /* ---- Mobilleiste und Panel (Avada-Mechanik, nur umgestaltet) --------- */ /* Auf Desktop bleibt der Toggle verborgen (Avada-Standard absichern). */ @media (min-width: 1025px) { .fusion-tb-header .awb-menu__m-toggle { display: none !important; } } @media (max-width: 1024px) { .fusion-tb-header .awb-menu__m-toggle { min-width: 46px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; background: transparent !important; color: #ffffff !important; font-size: 21px; /* Über dem Panel halten, damit das X als Schließen-Button sichtbar bleibt. */ position: relative; z-index: 20056; } .fusion-tb-header nav.awb-menu .awb-menu__main-ul { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(340px, 86vw) !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 104px 20px 26px !important; display: flex !important; flex-direction: column; justify-content: flex-start !important; align-content: flex-start !important; gap: 2px; overflow-y: auto; background: #0f1218 !important; box-shadow: -18px 0 44px rgba(5, 8, 14, 0.45); /* Avada hebt das offene Panel auf z-index 2147483647 — hier begrenzen, damit der Schließen-Button (X, z 20056) sichtbar bleibt. */ z-index: 20055 !important; transform: translateX(105%); visibility: hidden; transition: transform 0.32s ease, visibility 0.32s; } /* Avadas weiße Mobil-Item-Flächen neutralisieren (liegen auf li UND a). */ .fusion-tb-header nav.awb-menu .awb-menu__main-ul li, .fusion-tb-header nav.awb-menu .awb-menu__main-ul li > a { background: transparent !important; } .fusion-tb-header nav.awb-menu .awb-menu__main-ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .fusion-tb-header nav.awb-menu .awb-menu__main-ul li:last-child { border-bottom: 0; } .fusion-tb-header nav.awb-menu:has(.awb-menu__m-toggle[aria-expanded="true"]) .awb-menu__main-ul { transform: none; visibility: visible; } .fusion-tb-header .awb-menu__main-li { width: 100%; } .fusion-tb-header nav.awb-menu .awb-menu__main-li > a { display: block !important; padding: 14px 12px !important; font-size: 17px !important; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; } /* Aktuelle Seite: roter Indikator links. */ .fusion-tb-header nav.awb-menu .awb-menu__main-li.current-menu-item > a, .fusion-tb-header nav.awb-menu .awb-menu__main-li.current_page_item > a { border-left-color: var(--awb-color5, #e20917); background: rgba(255, 255, 255, 0.07) !important; color: #ffffff !important; } /* CTA am Panel-Ende. */ .rthw-nav-cta-li { margin-top: auto !important; padding-top: 18px; } .fusion-tb-header nav.awb-menu .rthw-nav-cta-li .rthw-nav-cta { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0; padding: 14px 18px !important; font-size: 15.5px !important; font-weight: 700; background: var(--awb-color5, #e20917) !important; color: #ffffff !important; border-radius: 11px; border-left: 0 !important; } } /* Abdunkelung hinter dem offenen Panel + Scroll-Sperre (rthw-site.js). */ .rthw-nav-overlay { position: fixed; inset: 0; background: rgba(5, 8, 14, 0.55); z-index: 20050; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; } .rthw-nav-open .rthw-nav-overlay { opacity: 1; visibility: visible; } html.rthw-nav-open, html.rthw-nav-open body { overflow: hidden; } /* ---- Unterseiten: Typografie und Weißraum ---------------------------- */ /* Avadas globale H1-Typografie (72px) lässt Überschriften ohne Inline-Größe (z. B. Über uns) dreizeilig umbrechen. Deckelung auf ~54px; Überschriften mit eigener Inline-Größe (Kontakt, Hero) bleiben unberührt, der Hero ist zusätzlich per :not ausgenommen. */ #main h1:not(#rthw-title) { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.15; } /* Erster Inhaltscontainer auf Unterseiten: 96px Innenabstand oben + Platz- halter der Floating-Nav ergaben zu viel Leerraum. Startseite (Hero regelt seine Abstände selbst) ausgenommen. */ body:not(.home) #main .post-content > .fusion-fullwidth:first-child { padding-top: 48px !important; } /* ---- Footer (.rtft — Shortcode [rt_footer] in Template 13) ----------- */ /* Der Avada-Container liefert nur die dunkle Fläche; sehr dezenter roter Lichtverlauf oben rechts als einziger Schmuck. */ .fusion-tb-footer .fusion-fullwidth { background-image: radial-gradient(640px 320px at 88% 0%, rgba(226, 9, 23, 0.08), transparent 70%) !important; } .rtft { max-width: 1240px; margin: 0 auto; padding: 60px 0 28px; color: #b9bdc4; font-size: 15px; line-height: 1.6; } .rtft h2, .rtft h3 { color: #ffffff; margin: 0; } .rtft-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } /* Doppelklassen-Spezifität: Avadas globale h2/h3-Typografie würde die Footer-Größen sonst überstimmen. */ .rtft .rtft-cta h2 { font-size: clamp(22px, 2.6vw, 30px) !important; line-height: 1.2; margin-bottom: 8px; } .rtft-cta p { margin: 0; max-width: 640px; } .rtft-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--awb-color5, #e20917); color: #ffffff !important; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; padding: 14px 24px; border-radius: 11px; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease; } .rtft-btn svg { transition: transform 0.2s ease; } .rtft-btn:hover, .rtft-btn:focus { background: var(--awb-color6, #a60711); color: #ffffff !important; } .rtft-btn:hover svg, .rtft-btn:focus-visible svg { transform: translateX(3px); } .rtft-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding: 44px 0; } .rtft .rtft-col h3 { font-size: 13.5px !important; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.4; margin-bottom: 16px; color: rgba(255, 255, 255, 0.92); } .rtft-col ul { list-style: none; margin: 0; padding: 0; } .rtft-col li { margin: 0 0 10px; } .rtft a { color: #e6e8ea; text-decoration: none; } /* Hover/Fokus: kurze rote Linie — dasselbe Muster wie in der Navigation. */ .rtft-col a, .rtft-legal a, .rtft-kontaktlinks a { position: relative; transition: color 0.2s ease; } .rtft-col a::after, .rtft-legal a::after, .rtft-kontaktlinks a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 1px; background: var(--awb-color5, #e20917); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease; } .rtft-col a:hover::after, .rtft-col a:focus-visible::after, .rtft-legal a:hover::after, .rtft-legal a:focus-visible::after, .rtft-kontaktlinks a:hover::after, .rtft-kontaktlinks a:focus-visible::after { transform: scaleX(1); } .rtft-col a:hover, .rtft-legal a:hover { color: #ffffff; } /* Markenzeile: Bildmarke + gesetzte Wortmarke (weiß) — die dunklen Anteile der Original-Wortmarke wären auf Anthrazit unleserlich. Feiner Schein hebt das schwarze T der Bildmarke vom Hintergrund ab. */ .rtft-brandrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .rtft-brandrow img { display: block; width: 56px; height: auto; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.6)); } .rtft .rtft-brandname { margin: 0; color: #ffffff; font-size: 17px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3; } .rtft .rtft-brandname span { display: block; color: #9aa0a8; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 3px; } .rtft-claim { margin: 0; max-width: 300px; } .rtft-adr { margin: 0 0 12px; } .rtft-kontaktlinks { margin: 0; font-size: 16px; line-height: 1.9; } .rtft-kontaktlinks a { font-weight: 600; } .rtft-legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.10); font-size: 13.5px; color: #9aa0a8; } .rtft-legal nav { display: flex; gap: 22px; flex-wrap: wrap; } .rtft-legal a { color: #cfd3d8; } @media (max-width: 980px) { .rtft-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 560px) { .rtft { padding-top: 44px; } .rtft-grid { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; } .rtft-cta { padding-bottom: 28px; } .rtft-btn { width: 100%; justify-content: center; } .rtft-legal { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .rtft-btn, .rtft-btn svg, .rtft a, .rtft-col a::after, .rtft-legal a::after, .rtft-kontaktlinks a::after { transition: none !important; } } /* ---- Fokus und reduzierte Bewegung ----------------------------------- */ .fusion-tb-header a:focus-visible, .fusion-tb-header button:focus-visible, .fusion-tb-footer a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; border-radius: 4px; } .rthw-nav-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .fusion-tb-header .fusion-fullwidth, .fusion-tb-header .fusion-imageframe, .fusion-tb-header .fusion-image-element img, .fusion-tb-header .awb-menu__main-li > a::before, .fusion-tb-header .awb-menu__main-ul, .rthw-nav-cta, .rthw-nav-cta svg, .rthw-nav-overlay { transition: none !important; } .fusion-tb-header .awb-menu__main-li.current-menu-item > a::before, .fusion-tb-header .awb-menu__main-li.current_page_item > a::before { animation: none !important; } }