Skeuomorphe Erdtöne Regierungskarte

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-sm mx-auto p-6 md:p-8 rounded-xl shadow-xl bg-gradient-to-br from-stone-100 to-stone-200 border border-stone-300 transform transition-all duration-300
              dark:from-stone-700 dark:to-stone-800 dark:border-stone-600 dark:shadow-2xl
              hover:shadow-2xl dark:hover:shadow-lg-dark
              relative overflow-hidden
              group">
    <!-- Top Bevel Effect -->
    <div class="absolute inset-0 rounded-xl pointer-events-none 
                before:absolute before:inset-0 before:rounded-xl before:border before:border-stone-50 dark:before:border-stone-900 before:opacity-70 
                after:absolute after:inset-0 after:rounded-xl after:border after:border-stone-300 after:opacity-50 after:blur-sm dark:after:border-stone-700"></div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <div class="w-20 h-20 bg-stone-300 dark:bg-stone-600 rounded-full flex items-center justify-center shadow-inner mb-4
                  group-hover:scale-105 transition-transform duration-300
                  relative overflow-hidden animate-pulse-light dark:animate-pulse-dark">
        <!-- Inner Light Source Effect -->
        <div class="absolute inset-0 rounded-full 
                    before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-white/70 before:to-transparent before:p-0.5 before:blur-sm
                    after:absolute after:inset-0 after:rounded-full after:bg-gradient-to-tl after:from-black/10 after:to-transparent after:p-0.5 after:blur-sm"></div>
        <svg class="h-10 w-10 text-stone-700 dark:text-stone-300 drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm4 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <h2 class="text-2xl font-semibold text-stone-800 dark:text-stone-200 mb-2 drop-shadow-sm">Public Service Info</h2>
      <p class="text-stone-600 dark:text-stone-400 text-sm mb-6 leading-relaxed">
        Access essential information and services provided by your local government. Committed to serving the community.
      </p>
      <button type="button" class="py-2 px-6 rounded-lg text-sm font-medium
                  bg-gradient-to-br from-green-600 to-green-700 text-white shadow-md
                  border border-green-800
                  dark:from-green-700 dark:to-green-800 dark:border-green-900 dark:shadow-lg-dark
                  hover:from-green-700 hover:to-green-800 hover:shadow-lg
                  dark:hover:from-green-800 dark:hover:to-green-900 
                  active:scale-95 active:shadow-inner transition-all duration-150
                  relative overflow-hidden
                  brightness-100 group-hover:brightness-105">
        <!-- Button Bevel Effect -->
        <span class="absolute inset-0 rounded-lg pointer-events-none
                     before:absolute before:inset-0 before:rounded-lg before:border-t before:border-white/30 dark:before:border-white/20
                     after:absolute after:inset-0 after:rounded-lg after:border-b after:border-black/20 dark:after:border-black/30"></span>
        <span class="relative z-10">Learn More</span>
      </button>
    </div>
  </div>
</div>

<style>
/* Basic keyframes for a subtle glow/pulse effect for skeuomorphic elements */
@keyframes pulse-light {
  0%, 100% { box-shadow: 0 0 0px rgba(255, 255, 255, 0.4), inset 0 0 5px rgba(0, 0, 0, 0.1); }
  50% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.6), inset 0 0px 8px rgba(0, 0, 0, 0.15); }
}

@keyframes pulse-dark {
  0%, 100% { box-shadow: 0 0 0px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.05); }
  50% { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0px 8px rgba(255, 255, 255, 0.1); }
}

.animate-pulse-light {
  animation: pulse-light 4s infinite ease-in-out;
}

.dark .animate-pulse-dark {
  animation: pulse-dark 4s infinite ease-in-out;
}

/* Custom shadow for skeuomorphism */
.shadow-xl {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15), inset 0px 1px 0px rgba(255, 255, 255, 0.6),
                inset 0px -1px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.05);
}
.group:hover .shadow-2xl {
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.2), inset 0px 1px 0px rgba(255, 255, 255, 0.7),
                inset 0px -1px 0px rgba(0, 0, 0, 0.25), 0px 1px 1px rgba(0, 0, 0, 0.08);
}

.dark .shadow-2xl-dark {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.05) /* Light bevel */,
                inset 0px -1px 0px rgba(0, 0, 0, 0.6) /* Dark bevel */, 0px 1px 1px rgba(0, 0, 0, 0.1);
}
.dark .group:hover .shadow-lg-dark {
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.08) /* Light bevel */,
                inset 0px -1px 0px rgba(0, 0, 0, 0.7) /* Dark bevel */, 0px 1px 1px rgba(0, 0, 0, 0.15);
}

/* Inner shadow for "pressed" effect on active button */
.active\:shadow-inner {
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px -2px 4px rgba(255, 255, 255, 0.1);
}

.dark .active\:shadow-inner {
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4), inset 0px -2px 4px rgba(255, 255, 255, 0.05);
}

</style>