css
/* Erzwingt die Breite für das SVG Logo */
.astroid-logo img, 
.astroid-logo svg {
    width: 287px !important;
    max-width: 100% !important; /* Verhindert Überlappen auf dem Handy */
    height: auto !important;
    display: block;
}

/* Speziell für Mobilgeräte, falls es dort immer noch zu klein ist */
@media (max-width: 767px) {
    .astroid-logo img, 
    .astroid-logo svg {
        width: 240px !important; /* Hier kannst du die mobile Größe separat steuern */
    }
}

/* Erzwingt swap für geladene Schriften */
@font-face {
    font-display: swap !important;
}

/* Hover-Unterstrich nur für Links im Inhaltsbereich */
#astroid-dynamic-content a:hover,
.astroid-content-inner a:hover,
.com-content a:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Expliziter Schutz für die Hauptnavigation (kein Unterstrich) */
#astroid-header a:hover,
.navbar-nav a:hover,
.astroid-menu a:hover {
    text-decoration: none !important;
}

/* Setzt die Sektion mit dem Such-Widget auf eine niedrige Ebene */
#s1 {
    position: relative !important;
    z-index: 1 !important;
}

/* Stellt sicher, dass das Astroid Mobile-Menü oben liegt */
.astroid-offcanvas {
    z-index: 9999 !important;
}

/* Verknüpft die alte Button-Klasse mit Astroid-Button-Look */
/* Styling weißer Button - farbige Schrift */
.button.button-4 {
    display: inline-block;
    padding: 10px 10px;
    background-color: #ffffff;
    /* Weißer Hintergrund */
    color: #c7410d;
    /* Linkfarbe */
    border: 1px solid #c7410d;
    /* Rahmen in der Linkfarbe */
    text-decoration: none;
    border-radius: 4px;
    /* Abrundung */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover-Effekt: Invertiert die Farben beim Drüberfahren */
.button.button-4:hover {
    background-color: #c7410d;
    /* Hintergrund wird farbig */
    color: #ffffff;
    /* Schrift wird weiß */
    text-decoration: none;
}

/* Styling für Button orange mit weisser Schrift */
.button.button-2 {
    display: inline-block;
    padding: 10px 10px;
    background-color: #c7410d !important;
    /* Hintergrund orange */
    color: #ffffff !important;
    /* Textfarbe weiss */
    border: 1px solid #c7410d;
    /* Rahmen in Hintergrundfarbe */
    text-decoration: none;
    border-radius: 4px;
    /* Abrundung */
    transition: all 0.3s ease;
    cursor: pointer;
    /* Optional: macht den Text besser lesbar */
}

/* Hover-Effekt: Hintergrund wird dunkler */
.button.button-2:hover {
    background-color: #BA4809 !important;
    /* Dunkleres Orange beim Hover */
    border-color: #BA4809 !important;
    /* Rahmen passt sich an */
    color: #ffffff !important;
    /* Schrift bleibt weiss */
    text-decoration: none;
}

/* Styling für kleine weiße Buttons mit farbiger Schrift */
.button.button-4.button-small {
    font-size: 0.85rem;
    /* kleinere Schrift */
    line-height: 1.3;
    /* kompakter */
    display: inline-block;
    padding: 10px 10px;
    background-color: #ffffff;
    /* Weißer Hintergrund */
    color: #c7410d;
    /* Linkfarbe */
    border: 1px solid #c7410d;
    /* Rahmen in der Linkfarbe */
    text-decoration: none;
    border-radius: 4px;
    /* Abrundung */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover-Effekt: Invertiert die Farben beim Drüberfahren */
.button.button-4.button-small:hover {
    background-color: #c7410d;
    /* Hintergrund wird farbig */
    color: #ffffff;
    /* Schrift wird weiß */
    text-decoration: none;
}

/* --- Buttons bei Zeilenumbruch: Minimal: nur Anzeige und Abstände, kein Padding/line-height ändern --- */
.button,
.button-2,
.button.button-4.button-small,
.button-4 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5rem 0.5rem 0;
    /* top right bottom left */
}

/* Optional: wenn Buttons als Links <a> sind und Browser default display anders ist */
.button a,
.button-2 a,
.button.button-4.button-small a,
.button-4 a {
    display: inline-block;
}


/* Setzt in wf-clumns im Grid den Definition-Titel auf normale Schriftstärke zurück */
/* Erhöhte Spezifität für alle Definition-Terme */
/* Erhöhte Spezifität für die Definition-Begriffe */
body .astroid-body dl dt,
body dl dt,
dt {
    font-weight: 400 !important;
    /* Entfernt die Fettschrift */
    font-size: 0.875rem !important;
    /* Setzt die Größe auf 14 Pixel bzw. 0.875rem */
    line-height: 1.5 !important;
    /* Sorgt für einen harmonischen Zeilenabstand */
    text-transform: none !important;
}

/* Ziel: Alle Bilder innerhalb der WF-Columns einheitlich darstellen */
.wf-columns-layout-auto img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}