/* ========================================================================= Fußbereich (Vorlage „Fußbereich“, Post 118) Gestaltung nach kfz-biesterfeldt.vercel.app, Aufbau und Texte von new. (fünf Spalten, Social-Kreise, „Schaden online melden“, „Jetzt anrufen“). Maße und Hover-Regeln am 13.10.2026 bei Vercel ausgelesen. Vorlage ist Vercels Footer (Hintergrund, Kontaktkasten, Knöpfe, Hover). Abweichungen auf Wunsch des Auftraggebers: drei Linkspalten (Leistungen, Navigation, Unternehmen), deren Pfeile beim Überfahren weiß werden und nach rechts rücken, und die Social-Kreise in Markenfarben beim Überfahren. Abstände, Schrift und Farben stehen in Elementor (Post 118 und die globalen Klassen f-*). Hier steht nur, was Elementor nicht kann: die Symbole (als Masken, damit sie der Textfarbe folgen), Hover über Kindelemente, größere Tippflächen auf Touch-Geräten und der Fokusrahmen. Elementors globale Linkfarbe beim Überfahren (.elementor-kit-8 a:hover, Dunkelblau) würde hier alle Symbole in Links dunkel färben. Deshalb setzt jeder Link mit Symbol seine Hover-Farbe selbst (Spezifität 0,3,0). ========================================================================= */ :root { --fi-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E"); --fi-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); --fi-gebaeude: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E"); --fi-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); --fi-rufen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3Cpath d='M14.05 2a9 9 0 0 1 8 7.94'/%3E%3Cpath d='M14.05 6A5 5 0 0 1 18 10'/%3E%3C/svg%3E"); --fi-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); --fi-ort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); /* WhatsApp-Zeichen: Font Awesome Free 5.15.3 „whatsapp“ (CC BY 4.0, fontawesome.com), dasselbe wie im WhatsApp-Knopf der Startseite (bausteine.css, --bi-whatsapp) */ --fi-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -8 528 528'%3E%3Cpath fill='%23000' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E"); --fi-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); --fi-uhr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); --fi-datei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); --fi-hochladen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' x2='12' y1='3' y2='15'/%3E%3C/svg%3E"); --fi-google: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.66 6.34A8 8 0 1 0 20 12h-7.5'/%3E%3C/svg%3E"); --fi-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E"); --fi-kompass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/%3E%3C/svg%3E"); --fi-schild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); --fi-schild-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } /* Gemeinsame Form aller Symbole: eine Fläche in der Textfarbe, die das Symbol ausstanzt */ .elementor-location-footer .f-kopf::before, .elementor-location-footer .f-link::after, .elementor-location-footer .f-zeile::after, .elementor-location-footer [data-id="f-k-anfrage"]::after, .elementor-location-footer [data-id="f-k-rueckruf"]::after, .elementor-location-footer [data-id="f-k-nachreichen"]::after { content: ""; position: static; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--fi) center / contain no-repeat; mask: var(--fi) center / contain no-repeat; } /* Bei Elementor-Containern steht ::after hinter dem Inhalt, das Symbol gehört davor */ .elementor-location-footer .f-link::after, .elementor-location-footer .f-zeile::after, .elementor-location-footer [data-id="f-k-anfrage"]::after, .elementor-location-footer [data-id="f-k-rueckruf"]::after, .elementor-location-footer [data-id="f-k-nachreichen"]::after { order: -1; } /* Spaltenköpfe: 20 px, blue-300 */ .elementor-location-footer .f-kopf::before { width: 20px; height: 20px; color: var(--blue-300); } .elementor-location-footer [data-id="f-kopf-leist"] { --fi: var(--fi-clipboard); } .elementor-location-footer [data-id="f-kopf-info"] { --fi: var(--fi-kompass); } .elementor-location-footer [data-id="f-kopf-unt"] { --fi: var(--fi-schild); } .elementor-location-footer [data-id="f-kopf-kont"] { --fi: var(--fi-telefon); } /* Linklisten: Pfeil 14 px blue-300. Beim Überfahren Text weiß und unterstrichen, Pfeil weiß; Pfeil UND Text rücken 3 px nach rechts (Wunsch des Auftraggebers, seit 13.10. spätabends bewegt sich der Text mit; Bewegung wie Vercels Pfeile: .16s, ease-out). Verschoben werden die Kinder, nicht der Link selbst, damit die Mausfläche stehen bleibt und nichts flackert. Die Hover-Farbe muss hier stehen, sonst färbt Elementors Linkfarbe den Pfeil dunkelblau. */ .elementor-location-footer .f-link { --fi: var(--fi-pfeil); color: var(--blue-300); transition: color var(--dur-fast, .16s); } .elementor-location-footer .f-link::after { width: 14px; height: 14px; transition: transform var(--dur-fast, .16s) var(--ease-out, ease-out); } .elementor-location-footer .f-linktext { transition: color var(--dur-fast, .16s), transform var(--dur-fast, .16s) var(--ease-out, ease-out); } .elementor-location-footer .f-link:hover, .elementor-location-footer .f-link:focus-visible { color: #fff; } .elementor-location-footer .f-link:hover .f-linktext, .elementor-location-footer .f-link:focus-visible .f-linktext { color: #fff; text-decoration: underline; } @media (hover: hover) { .elementor-location-footer .f-link:hover::after, .elementor-location-footer .f-link:hover .f-linktext { transform: translateX(3px); } } .elementor-location-footer .f-link:focus-visible::after, .elementor-location-footer .f-link:focus-visible .f-linktext { transform: translateX(3px); } /* Kontaktzeilen: Symbol 18 px blue-300 in der 20-px-Spalte, 2 px tiefer wie bei Vercel */ .elementor-location-footer .f-zeile { color: var(--blue-300); } .elementor-location-footer .f-zeile::after { width: 18px; height: 18px; margin-top: 2px; } .elementor-location-footer [data-id="f-z-ort"] { --fi: var(--fi-ort); } .elementor-location-footer [data-id="f-z-tel"] { --fi: var(--fi-telefon); } /* Handynummer und „Per WhatsApp schreiben“: das WhatsApp-Zeichen in WhatsApp-Grün, wie der WhatsApp-Knopf auf der Startseite (Auftraggeber 13.10. spätabends: „das ist ja dasselbe“; vorher stand hier Vercels Sprechblase) */ .elementor-location-footer [data-id="f-z-mob"] { --fi: var(--fi-whatsapp); } .elementor-location-footer [data-id="f-z-mob"]::after { background-color: #25d366; } .elementor-location-footer [data-id="f-z-mail"] { --fi: var(--fi-mail); } .elementor-location-footer [data-id="f-z-zeit"] { --fi: var(--fi-uhr); } .elementor-location-footer .f-zlink:hover .f-zlinktext { text-decoration: underline; } .elementor-location-footer [data-id="f-z-wa-a"]:hover .f-ztext { color: #fff; text-decoration: underline; } .elementor-location-footer [data-id="f-z-mail-t"] { overflow-wrap: anywhere; } /* Social-Kreise wie auf new.: in Ruhe weiß, beim Überfahren Ring und Zeichen in den Markenfarben (zweite Datei blendet darüber ein; sie lädt gleich mit, damit beim ersten Überfahren nichts flackert). Dateien in uploads/icons/social-*-weiss|farbig.svg */ .elementor-location-footer .f-kreis { background: var(--soc-weiss) center / 100% 100% no-repeat; transition: transform var(--dur-fast, .16s); } .elementor-location-footer .f-kreis::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--soc-farbig) center / 100% 100% no-repeat; opacity: 0; transition: opacity var(--dur-fast, .16s); } .elementor-location-footer [data-id="f-kreis-wa"] { --soc-weiss: url("/wp-content/uploads/icons/social-whatsapp-weiss.svg"); --soc-farbig: url("/wp-content/uploads/icons/social-whatsapp-farbig.svg"); } .elementor-location-footer [data-id="f-kreis-ig"] { --soc-weiss: url("/wp-content/uploads/icons/social-instagram-weiss.svg"); --soc-farbig: url("/wp-content/uploads/icons/social-instagram-farbig.svg"); } .elementor-location-footer [data-id="f-kreis-fb"] { --soc-weiss: url("/wp-content/uploads/icons/social-facebook-weiss.svg"); --soc-farbig: url("/wp-content/uploads/icons/social-facebook-farbig.svg"); } .elementor-location-footer [data-id="f-kreis-go"] { --soc-weiss: url("/wp-content/uploads/icons/social-google-weiss.svg"); --soc-farbig: url("/wp-content/uploads/icons/social-google-farbig.svg"); } .elementor-location-footer .f-soc:hover .f-kreis, .elementor-location-footer .f-soc:focus-visible .f-kreis { transform: translateY(-2px); } .elementor-location-footer .f-soc:hover .f-kreis::after, .elementor-location-footer .f-soc:focus-visible .f-kreis::after { opacity: 1; } /* Knöpfe im Kontaktkasten exakt wie bei Vercel (Text, Symbol, Maße, Abstände): - „Gutachten anfragen“ (Datei-Symbol) mit Verlauf wie .bf-btn--primary. Verlauf und Schatten stehen in Elementor. Beim Überfahren wandert der Verlauf nach rechts und der Schatten wird größer. - „Rückruf anfordern“ (Hörer mit Schallwellen, Lucide „phone-call“) als Umriss wie .bf-btn--secondary.bf-btn--inverse: Symbol blue-100, beim Überfahren Rand weiß und heller Grund. Die Farben beim Überfahren stehen hier ausdrücklich, sonst färbt Elementors Linkfarbe die Symbole dunkelblau. */ .elementor-location-footer [data-id="f-k-anfrage"], .elementor-location-footer [data-id="f-k-rueckruf"] { transition: background-position var(--dur-base, .24s) var(--ease-standard, ease), background-color var(--dur-fast, .16s), border-color var(--dur-fast, .16s), box-shadow var(--dur-fast, .16s), transform var(--dur-fast, .16s); } .elementor-location-footer [data-id="f-k-anfrage"] { --fi: var(--fi-datei); color: #fff; background-origin: border-box; background-size: 200% 100%; background-position: 0 0; } .elementor-location-footer [data-id="f-k-rueckruf"] { --fi: var(--fi-rufen); color: var(--blue-100); } .elementor-location-footer [data-id="f-k-anfrage"]::after, .elementor-location-footer [data-id="f-k-rueckruf"]::after { width: 20px; height: 20px; } .elementor-location-footer [data-id="f-k-anfrage"]:hover { color: #fff; background-position: 100% 0; box-shadow: var(--shadow-action-hover, 0 12px 26px -8px #053b8c99); } .elementor-location-footer [data-id="f-k-rueckruf"]:hover { color: var(--blue-100); border-color: #fff; background-color: rgba(255, 255, 255, .12); } .elementor-location-footer [data-id="f-k-anfrage"]:active, .elementor-location-footer [data-id="f-k-rueckruf"]:active { transform: translateY(1px); } /* Bewegung wie Vercels GSAP-Regel für Knöpfe (Keyframes in kopfbereich.css): das Symbol wächst kurz auf 112 %. Wackeln gäbe es nur bei tel:-Links, beide Knöpfe sind keine. */ @media (hover: hover) and (pointer: fine) { .elementor-location-footer [data-id="f-k-anfrage"]:hover::after, .elementor-location-footer [data-id="f-k-rueckruf"]:hover::after { animation: kb-hupfen .36s; } } /* „Bilder & Dokumente nachreichen“: Symbol blue-300 wie bei Vercel, auch beim Überfahren */ .elementor-location-footer [data-id="f-k-nachreichen"] { --fi: var(--fi-hochladen); color: var(--blue-300); } .elementor-location-footer [data-id="f-k-nachreichen"]::after { width: 18px; height: 18px; } .elementor-location-footer [data-id="f-k-nachreichen"]:hover { color: var(--blue-300); } .elementor-location-footer [data-id="f-k-nachreichen"]:hover .s-f-k-nachreichen-t { color: #fff; text-decoration: underline; } /* Rechtslinks unten */ .elementor-location-footer .f-recht:hover .f-recht-t { color: #fff; text-decoration: underline; } /* Logo: Fokusrahmen folgt der Bildform (data-id sitzt am Bild, der Link ist sein Elternteil) */ .elementor-location-footer a:has(> [data-id="f-logo"]) { display: inline-flex; border-radius: 6px; } /* Fokus: weißer Rahmen auf dem dunklen Grund, nur bei Tastaturbedienung */ .elementor-location-footer a:focus:not(:focus-visible) { outline: none; } .elementor-location-footer a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* Touch-Geräte: Tippflächen mindestens 44 px, Kontaktzeilen weiter auseinander (wie Vercel) */ @media (pointer: coarse) { .elementor-location-footer .f-link, .elementor-location-footer .f-recht { min-height: 44px; } .elementor-location-footer .s-f-adresse { gap: 22px; } .elementor-location-footer .f-zlink { margin-block: -11px; padding-block: 11px; } .elementor-location-footer [data-id="f-z-wa-a"] { margin-top: 11px; } } @media (prefers-reduced-motion: reduce) { .elementor-location-footer *, .elementor-location-footer *::before, .elementor-location-footer *::after { animation: none !important; transition: none !important; } }