body { font-family: 'Open Sans', sans-serif; color: #334155; background-color: #f8fafc; }
        h1, h2, h3, h4, .font-heading { font-family: 'Oswald', sans-serif; }
        .fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; transform: translateY(20px); }
        @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
        .modern-card { background: white; border: 1px solid #e2e8f0; transition: all 0.3s ease; }
        .modern-card:hover { border-color: #2563eb; transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
        .date-card.selected { border-color: #2563eb; background-color: #eff6ff; color: #1e40af; }
        .time-slot.selected { background-color: #2563eb; color: white; border-color: #2563eb; }
        .pie-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(#22c55e 0% 50%, #3b82f6 50% 75%, #e5e7eb 75% 100%); position: relative; }
        .pie-chart::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: white; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        html { scroll-behavior: smooth; }
/* Logo Styling */
.mein-logo {
    height: 60px;       /* Passt die Höhe an - ändere die Zahl nach Wunsch */
    width: auto;        /* Hält das Seitenverhältnis korrekt */
    display: block;     /* Hilft oft bei der Positionierung */
}