body.freshly {
    --primary:#006783;
    --on-primary:#ffffff;
    --primary-container:#bde9ff;
    --on-primary-container:#001f2a;
    --secondary:#4d616c;
    --on-secondary:#ffffff;
    --secondary-container:#d0e6f2;
    --on-secondary-container:#081e27;
    --tertiary:#5d5b7d;
    --on-tertiary:#ffffff;
    --tertiary-container:#e3dfff;
    --on-tertiary-container:#191836;
    --error:#ba1a1a;
    --on-error:#ffffff;
    --error-container:#ffdad6;
    --on-error-container:#410002;
    --background:#fbfcfe;
    --on-background:#191c1e;
    --surface:#f8f9fb;
    --on-surface:#191c1e;
    --surface-variant:#dce4e9;
    --on-surface-variant:#40484c;
    --outline:#70787d;
    --outline-variant:#c0c8cd;
    --shadow:#000000;
    --scrim:#000000;
    --inverse-surface:#2e3132;
    --inverse-on-surface:#eff1f3;
    --inverse-primary:#65d3ff;
    --surface-dim:#d9dadc;
    --surface-bright:#f8f9fb;
    --surface-container-lowest:#ffffff;
    --surface-container-low:#f2f4f6;
    --surface-container:#edeef0;
    --surface-container-high:#e7e8ea;
    --surface-container-highest:#e1e2e4;
}

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
th {
    background-color: #f2f2f2;
}
.overflow-example {
    white-space: nowrap; /* Verhindert das Umbruch von Text */
    overflow: hidden; /* Versteckt den überlaufenden Text */
    text-overflow: ellipsis; /* Zeigt "..." für überlaufenden Text an */
}

.warning-text {
    color: #d88200;
}

.add-button {
    position: fixed; /* Fixiert den Button im Viewport */
    bottom: 24px;    /* Abstand vom unteren Rand */
    right: 24px;     /* Abstand vom rechten Rand */
    z-index: 99;   /* Stellt sicher, dass der Button über allem anderen schwebt */
  }

main.responsive {
    overflow-x: visible;
}

.blurry-background {
    position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px;
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    opacity: 0.7;
    z-index: 0;
    zoom: 2;
}


/* Material Design Schatten-System
   Basierend auf Elevation Levels */

.shadow-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 
            0 1px 2px rgba(0,0,0,0.24);
}

.shadow-2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.15), 
            0 2px 4px rgba(0,0,0,0.12);
}

.shadow-3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.15), 
            0 3px 6px rgba(0,0,0,0.10);
}

.shadow-4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.15), 
            0 10px 10px rgba(0,0,0,0.12);
}

.shadow-5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.15), 
            0 15px 12px rgba(0,0,0,0.12);
}

/* Interaktive Hover-Effekte */
.shadow-hover {
transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}

.shadow-hover:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
            0 10px 10px rgba(0,0,0,0.22);
}

/* Subtile Schatten für Karten/Cards */
.shadow-card {
box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.15);
transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}

.shadow-card:hover {
    box-shadow: 0px 0px 12px rgba(0,0,0,0.25);
}

/* Sehr subtiler Schatten für dezente UI-Elemente */
.shadow-subtle {
box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}

dialog.large {
    inline-size: 95% !important;
    block-size: 95% !important;
}

.filter-primary {
    filter: brightness(0) saturate(100%) invert(27%) sepia(18%) saturate(5923%) hue-rotate(165deg) brightness(97%) contrast(103%);
}

.responsive-container {
    min-height: 400px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 2rem 2rem 0 0;
}

/* Stil für Mobilgeräte (Bildschirmbreite kleiner oder gleich 768px) */
@media (max-width: 600px) {
    .responsive-container {
        min-height: unset; /* Entfernt die min-height */
        max-height: 200px; /* Setzt eine max-height */
    }
}

@media (max-width: 600px) {
    .mobile-dialog {
        width: 100% !important;
        transform: translate(0) !important;
        border-radius: 0;
        inset: 0 auto auto 0;
        inline-size: 100%;
        block-size: 100%;
        max-inline-size: 100%;
        max-block-size: 100%;
        transform: translateY(4rem);
        background-color: var(--surface);
    }
}


.wordwrap {
    width: 100%; /* Setze hier die gewünschte maximale Breite in Pixel */
    white-space: nowrap; /* Verhindert Umbrüche im Text */
    overflow: hidden; /* Versteckt den Text, der über die Breite hinausgeht */
    text-overflow: ellipsis; /* Fügt "..." am Ende hinzu */
}


.text-sm {
    font-size: .875rem;
}

.text-md {
    font-size: 1rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.text-3xl {
    font-size: 1.875rem;
}

.-mt-6 {
    margin-top: -3.7rem;
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}