refactor: modernize footer layout and styling with simplified SVG logo

This commit is contained in:
2025-06-26 18:29:02 +02:00
parent a76f78378b
commit 32cc192e35
2 changed files with 226 additions and 296 deletions
+50 -116
View File
File diff suppressed because one or more lines are too long
+38 -42
View File
@@ -1,20 +1,11 @@
<nav class="bg-sf_grau-100 shadow-lg sticky top-0 z-50"> <nav class="bg-sf_grau-50 shadow-lg sticky top-0 z-50" data-pgc-define="navbar" data-pgc-define-name="Navigationsleiste" data-pgc-define-description="Navigationsleiste zur Verwendung auf allen Seiten" data-pgc-define-photo-preview-only>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-24 items-center justify-between"> <div class="flex h-24 items-center justify-between">
<!-- Logo (Links) --> <!-- Logo (Links) -->
<a href="https://www.schachfreunde-badsteben.de/"> <div class="flex">
<div class="relative flex justify-center items-center md:mt-6"> <svg class="h-18 w-18 top-2 md:h-36 md:w-36 md:top-6 absolute" viewBox="0 0 316.97 324.57">
<div class="hidden absolute inset-0 w-48 h-48 md:block">
<svg width="100%" height="100%" viewBox="0 0 48 48">
<circle cx="24" cy="24" r="24" fill="#cdcdcd"/>
</svg>
</div>
<svg class="w-18 h-18 md:w-32 md:h-32 relative md:top-7 md:left-7" viewBox="0 0 316.97 324.57" fill="none">
<!-- Bestehendes SVG-Markup -->
<defs> <defs>
<style> <style>.cls-6 { fill-rule: evenodd; } .cls-7 { fill: #fff; } .cls-6, .cls-8 { fill: #1d59a6; }</style>
.cls-6{fill-rule:evenodd}.cls-7{fill:#fff}.cls-6,.cls-8{fill:#1d59a6}
</style>
</defs> </defs>
<path d="M43.622 209.618 158.577 94.663 273.53 209.618 158.577 324.572z" class="cls-7"/> <path d="M43.622 209.618 158.577 94.663 273.53 209.618 158.577 324.572z" class="cls-7"/>
<path fill="#1d1d1b" fill-rule="evenodd" d="M50.16 208.75 157.7 101.21l.87-.87.88.87 107.54 107.54.88.87-.88.88-107.54 107.54-.88.88-.87-.88L50.16 210.5l-.88-.88.88-.87Zm14.88-11.38 12.69 12.68-12.25 12.25 13.54 13.54 12.25-12.25 13.44 13.44-12.25 12.25L106 262.82l12.25-12.25 13.44 13.44-12.25 12.25 13.54 13.54 12.25-12.25 13.44 13.44-12.25 12.25 12.16 12.17 12.3-12.3-12.12-12.12 13.44-13.44 12.12 12.12 13.54-13.54-12.11-12.12 13.44-13.44 12.12 12.12 13.54-13.53-12.11-12.12 13.44-13.44 12.12 12.12 13.54-13.54-12.11-12.12 12.55-12.55-13.54-13.54-12.55 12.55-13.44-13.44 12.55-12.55-13.54-13.54-12.55 12.55-13.44-13.44 12.55-12.55-13.53-13.54-12.55 12.55-13.44-13.44 12.55-12.55-12.73-12.73-12.6 12.6 12.68 12.68-13.44 13.44-12.68-12.69-13.54 13.54 12.68 12.68-13.44 13.44-12.68-12.68-13.54 13.54 12.69 12.68-13.44 13.44-12.68-12.68-13.54 13.53Zm147.67 12.68 13.44 13.45 13.44-13.45-13.44-13.44-13.44 13.44Zm-26.98 26.98 13.44 13.44 13.44-13.44-13.44-13.44-13.44 13.44Zm-26.98 26.98 13.44 13.44 13.44-13.44-13.44-13.44-13.44 13.44Zm-13.53-13.44-13.44 13.44 13.44 13.44 13.44-13.44-13.44-13.44Zm26.98-26.98-13.44 13.44 13.44 13.44 13.44-13.44-13.44-13.44Zm26.97-26.98-13.44 13.44 13.44 13.45 13.44-13.45-13.44-13.44Zm-13.44-13.53 13.44 13.44 13.44-13.44-13.44-13.45-13.44 13.45Zm-26.98 26.97 13.44 13.45 13.44-13.45-13.44-13.44-13.44 13.44Zm-26.98 26.98 13.44 13.44 13.44-13.44-13.44-13.44-13.44 13.44Zm-13.53-13.44-13.44 13.44 13.44 13.44 13.44-13.44-13.44-13.44Zm26.98-26.98-13.44 13.44 13.44 13.45 13.44-13.45-13.44-13.44Zm26.98-26.98-13.44 13.45 13.44 13.44 13.44-13.44-13.44-13.45Zm-13.45-13.53 13.44 13.44 13.44-13.44-13.44-13.44-13.44 13.44Zm-26.98 26.98 13.44 13.44 13.44-13.44-13.44-13.45-13.44 13.45Zm-26.97 26.97 13.44 13.45 13.44-13.45-13.44-13.44-13.44 13.44Zm-13.54-13.44-13.44 13.44 13.44 13.45 13.44-13.45-13.44-13.44Zm26.98-26.98-13.44 13.45 13.44 13.44 13.44-13.44-13.44-13.45Zm26.98-26.97-13.44 13.44 13.44 13.44 13.44-13.44-13.44-13.44Z"/> <path fill="#1d1d1b" fill-rule="evenodd" d="M50.16 208.75 157.7 101.21l.87-.87.88.87 107.54 107.54.88.87-.88.88-107.54 107.54-.88.88-.87-.88L50.16 210.5l-.88-.88.88-.87Zm14.88-11.38 12.69 12.68-12.25 12.25 13.54 13.54 12.25-12.25 13.44 13.44-12.25 12.25L106 262.82l12.25-12.25 13.44 13.44-12.25 12.25 13.54 13.54 12.25-12.25 13.44 13.44-12.25 12.25 12.16 12.17 12.3-12.3-12.12-12.12 13.44-13.44 12.12 12.12 13.54-13.54-12.11-12.12 13.44-13.44 12.12 12.12 13.54-13.53-12.11-12.12 13.44-13.44 12.12 12.12 13.54-13.54-12.11-12.12 12.55-12.55-13.54-13.54-12.55 12.55-13.44-13.44 12.55-12.55-13.54-13.54-12.55 12.55-13.44-13.44 12.55-12.55-13.53-13.54-12.55 12.55-13.44-13.44 12.55-12.55-12.73-12.73-12.6 12.6 12.68 12.68-13.44 13.44-12.68-12.69-13.54 13.54 12.68 12.68-13.44 13.44-12.68-12.68-13.54 13.54 12.69 12.68-13.44 13.44-12.68-12.68-13.54 13.53Zm147.67 12.68 13.44 13.45 13.44-13.45-13.44-13.44-13.44 13.44Zm-26.98 26.98 13.44 13.44 13.44-13.44-13.44-13.44-13.44 13.44Zm-26.98 26.98 13.44 13.44 13.44-13.44-13.44-13.44-13.44 13.44Zm-13.53-13.44-13.44 13.44 13.44 13.44 13.44-13.44-13.44-13.44Zm26.98-26.98-13.44 13.44 13.44 13.44 13.44-13.44-13.44-13.44Zm26.97-26.98-13.44 13.44 13.44 13.45 13.44-13.45-13.44-13.44Zm-13.44-13.53 13.44 13.44 13.44-13.44-13.44-13.45-13.44 13.45Zm-26.98 26.97 13.44 13.45 13.44-13.45-13.44-13.44-13.44 13.44Zm-26.98 26.98 13.44 13.44 13.44-13.44-13.44-13.44-13.44 13.44Zm-13.53-13.44-13.44 13.44 13.44 13.44 13.44-13.44-13.44-13.44Zm26.98-26.98-13.44 13.44 13.44 13.45 13.44-13.45-13.44-13.44Zm26.98-26.98-13.44 13.45 13.44 13.44 13.44-13.44-13.44-13.45Zm-13.45-13.53 13.44 13.44 13.44-13.44-13.44-13.44-13.44 13.44Zm-26.98 26.98 13.44 13.44 13.44-13.44-13.44-13.45-13.44 13.45Zm-26.97 26.97 13.44 13.45 13.44-13.45-13.44-13.44-13.44 13.44Zm-13.54-13.44-13.44 13.44 13.44 13.45 13.44-13.45-13.44-13.44Zm26.98-26.98-13.44 13.45 13.44 13.44 13.44-13.44-13.44-13.45Zm26.98-26.97-13.44 13.44 13.44 13.44 13.44-13.44-13.44-13.44Z"/>
@@ -45,16 +36,11 @@
<path fill="#0d0d0d" fill-rule="evenodd" d="M193.8 49.42c3.74-11.08 9.7-23.25 17.37-32.37-6.4.81-13.75 3.25-18.55 7.66 6.44 8.58-3.49 15.31-15.92 13.33-13.29-2.12-21.73-11.06-6.46-18.18-2.49-7.46-6.56-13.66-11.3-19.85-4.74 6.19-8.82 12.39-11.3 19.85 15.27 7.12 6.82 16.06-6.46 18.18-12.43 1.98-22.36-4.75-15.92-13.33-4.8-4.41-12.16-6.84-18.55-7.66 7.66 9.11 13.62 21.29 17.36 32.36 22.99-4.42 46.76-4.42 69.74 0Zm-8.37-13.12c-2.6.51-5.59.56-8.74.06-3.54-.56-6.74-1.61-9.24-2.98 8.4.19 14.41-4.27 5.89-10.8 2.65-4.43 6.15-7.84 10.06-11.14 2.16 4.65 3.9 9.2 4.44 14.34-8.86 1.97-7.67 6.99-2.42 10.52Zm-35.03-2.92c-2.5 1.37-5.69 2.42-9.24 2.98-3.15.5-6.14.45-8.74-.06 5.25-3.53 6.43-8.54-2.42-10.52.54-5.14 2.29-9.7 4.45-14.34 3.92 3.3 7.41 6.71 10.06 11.14-8.51 6.52-2.51 10.99 5.89 10.8Z"/> <path fill="#0d0d0d" fill-rule="evenodd" d="M193.8 49.42c3.74-11.08 9.7-23.25 17.37-32.37-6.4.81-13.75 3.25-18.55 7.66 6.44 8.58-3.49 15.31-15.92 13.33-13.29-2.12-21.73-11.06-6.46-18.18-2.49-7.46-6.56-13.66-11.3-19.85-4.74 6.19-8.82 12.39-11.3 19.85 15.27 7.12 6.82 16.06-6.46 18.18-12.43 1.98-22.36-4.75-15.92-13.33-4.8-4.41-12.16-6.84-18.55-7.66 7.66 9.11 13.62 21.29 17.36 32.36 22.99-4.42 46.76-4.42 69.74 0Zm-8.37-13.12c-2.6.51-5.59.56-8.74.06-3.54-.56-6.74-1.61-9.24-2.98 8.4.19 14.41-4.27 5.89-10.8 2.65-4.43 6.15-7.84 10.06-11.14 2.16 4.65 3.9 9.2 4.44 14.34-8.86 1.97-7.67 6.99-2.42 10.52Zm-35.03-2.92c-2.5 1.37-5.69 2.42-9.24 2.98-3.15.5-6.14.45-8.74-.06 5.25-3.53 6.43-8.54-2.42-10.52.54-5.14 2.29-9.7 4.45-14.34 3.92 3.3 7.41 6.71 10.06 11.14-8.51 6.52-2.51 10.99 5.89 10.8Z"/>
</svg> </svg>
</div> </div>
</a>
<!-- Desktop Menu (Mitte) --> <!-- Desktop Menu (Mitte) -->
<div class="hidden md:block"> <div class="hidden md:block">
<div class="flex items-baseline space-x-2"> <div class="flex items-baseline space-x-4">
<!-- Einfacher Menüpunkt --> <!-- Einfacher Menüpunkt --><a href="index.html" class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Home</a>
<a href="#" class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Home</a> <!-- Einfacher Menüpunkt --><a href="news.html" class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">News</a>
<!-- Einfacher Menüpunkt -->
<a href="#" class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">News</a>
<!-- Dropdown Menü 1 --> <!-- Dropdown Menü 1 -->
<div class="group relative"> <div class="group relative">
<button class="flex font-bold items-center px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600"> <button class="flex font-bold items-center px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">
@@ -64,7 +50,9 @@
</svg> </svg>
</button> </button>
<div class="invisible absolute left-0 z-10 mt-2 w-48 rounded-md bg-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100"> <div class="invisible absolute left-0 z-10 mt-2 w-48 rounded-md bg-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100">
<div class="py-1"><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">A-Klasse</a><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">B-Klasse</a> <div class="py-1">
<a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2391" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" target="_blank">A-Klasse</a>
<a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2392" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" target="_blank">B-Klasse</a>
</div> </div>
</div> </div>
</div> </div>
@@ -77,24 +65,25 @@
</svg> </svg>
</button> </button>
<div class="invisible absolute left-0 z-10 mt-2 w-48 rounded-md bg-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100"> <div class="invisible absolute left-0 z-10 mt-2 w-48 rounded-md bg-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100">
<div class="py-1"><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Vorstand</a><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">DWZ-Liste</a><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Chronik</a><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">In Memoriam</a> <div class="py-1">
<a href="verein/mitgliedschaft.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mitgliedschaft</a>
<a href="verein/vorstand.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Vorstand</a>
<a href="verein/dwz.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">DWZ-Liste</a>
<a href="verein/chronik.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Chronik</a>
<a href="verein/gedenken.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">In Memoriam</a>
</div> </div>
</div> </div>
</div> </div>
<!-- Einfacher Menüpunkt --> <!-- Einfacher Menüpunkt --><a href="termine.html" class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Termine</a>
<a href="#" class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Termine</a> <!-- Einfacher Menüpunkt --><a href="kontakt.html" class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Kontakt</a>
<!-- Einfacher Menüpunkt -->
<a href="#" class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Kontakt</a>
</div> </div>
</div> </div>
<!-- Social Media Icons (Rechts) - Nur Desktop --> <!-- Social Media Icons (Rechts) - Nur Desktop -->
<div class="hidden items-center space-x-3 lg:flex"> <div class="hidden items-center space-x-3 lg:flex">
<!-- Facebook --> <!-- Facebook --><a href="https://www.facebook.com/SchachBadSteben/" class="text-sf_grau-600 transition-colors hover:text-sf_blau-500" target="_blank"> <svg class="h-10 w-10" fill="currentColor" viewBox="0 0 24 24">
<a href="#" class="text-gray-600 transition-colors hover:text-blue-600"> <svg class="h-10 w-10" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/> <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg> </a> </svg> </a>
<!-- Instagram --> <!-- Instagram --><a href="https://www.instagram.com/sfbadsteben/" class="text-sf_grau-600 transition-colors hover:text-sf_blau-500" target="_blank"> <svg class="h-10 w-10" fill="currentColor" viewBox="0 0 24 24">
<a href="#" class="text-gray-600 transition-colors hover:text-pink-500"> <svg class="h-10 w-10" fill="currentColor" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"> <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6zm14-2.9h.5"/> <path d="M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6zm14-2.9h.5"/>
<path d="M15.462 11.487a3.5 3.5 0 1 1-6.925 1.026a3.5 3.5 0 0 1 6.925-1.026"/> <path d="M15.462 11.487a3.5 3.5 0 1 1-6.925 1.026a3.5 3.5 0 0 1 6.925-1.026"/>
@@ -117,8 +106,10 @@
<!-- Mobile Menu --> <!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden"> <div id="mobile-menu" class="hidden md:hidden">
<div class="space-y-1 border-t bg-white px-2 pt-2 pb-3 sm:px-3"> <div class="space-y-1 border-t bg-white px-2 pt-2 pb-3 sm:px-3">
<!-- Einfacher Menüpunkt --><a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Home</a> <!-- Einfacher Menüpunkt -->
<!-- Einfacher Menüpunkt --><a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">News</a> <a href="index.html" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Home</a>
<!-- Einfacher Menüpunkt -->
<a href="news.html" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">News</a>
<!-- Mobile Dropdown 1 --> <!-- Mobile Dropdown 1 -->
<div class="relative"> <div class="relative">
<button class="mobile-dropdown-btn flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-base font-medium text-gray-700 hover:text-blue-600"> <button class="mobile-dropdown-btn flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-base font-medium text-gray-700 hover:text-blue-600">
@@ -128,8 +119,8 @@
</svg> </svg>
</button> </button>
<div class="mobile-dropdown-content hidden space-y-1 pl-6"> <div class="mobile-dropdown-content hidden space-y-1 pl-6">
<a href="#" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">A-Klasse</a> <a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2391" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">A-Klasse</a>
<a href="#" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">B-Klasse</a> <a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2392" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">B-Klasse</a>
</div> </div>
</div> </div>
<!-- Mobile Dropdown 2 --> <!-- Mobile Dropdown 2 -->
@@ -141,22 +132,27 @@
</svg> </svg>
</button> </button>
<div class="mobile-dropdown-content hidden space-y-1 pl-6"> <div class="mobile-dropdown-content hidden space-y-1 pl-6">
<a href="#" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">Vorstand</a> <a href="verein/mitgliedschaft.html" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">Mitgliedschaft</a>
<a href="#" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">DWZ-Liste</a> <a href="verein/vorstand.html" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">Vorstand</a>
<a href="#" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">Chronik</a> <a href="verein/dwz.html" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">DWZ-Liste</a>
<a href="#" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">In Memoriam</a> <a href="verein/chronik.html" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">Chronik</a>
<a href="verein/gedenken.html" class="block px-3 py-2 text-sm text-gray-600 hover:text-blue-600">In Memoriam</a>
</div> </div>
</div> </div>
<!-- Einfache Menüpunkte --><a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Termine</a><a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Kontakt</a> <!-- Einfache Menüpunkte -->
<a href="termine.html" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Termine</a>
<a href="kontakt.html" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Kontakt</a>
<!-- Social Media Icons im Mobile Menu --> <!-- Social Media Icons im Mobile Menu -->
<div class="mt-4 border-t pt-4"> <div class="mt-4 border-t pt-4">
<div class="px-3 py-2"> <div class="px-3 py-2">
<p class="mb-3 text-sm font-medium text-gray-500">Folge uns</p> <p class="mb-3 text-sm font-medium text-gray-500">Folge uns</p>
<div class="flex space-x-4"> <div class="flex space-x-4">
<!-- Facebook --><a href="#" class="text-gray-600 transition-colors hover:text-blue-600"> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> <!-- Facebook -->
<a href="#" class="text-gray-600 transition-colors hover:text-blue-600"> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/> <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg> </a> </svg> </a>
<!-- Instagram --><a href="#" class="text-gray-600 transition-colors hover:text-pink-500"> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> <!-- Instagram -->
<a href="#" class="text-gray-600 transition-colors hover:text-pink-500"> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"> <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6zm14-2.9h.5"/> <path d="M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6zm14-2.9h.5"/>
<path d="M15.462 11.487a3.5 3.5 0 1 1-6.925 1.026a3.5 3.5 0 0 1 6.925-1.026"/> <path d="M15.462 11.487a3.5 3.5 0 1 1-6.925 1.026a3.5 3.5 0 0 1 6.925-1.026"/>