.t3-header .logo-image img {
    width: 350px !important;
    height: auto !important;
}

@media (max-width: 768px) {
  .t3-header .logo-image img {
    width: 220px !important;
  }
}

/* 1. Die gesamte Reihe (Row) zentrieren */
.center-me .row {
    display: flex !important;
    justify-content: center !important;
    float: none !important;
}

/* 2. Die Spalte selbst zentrieren, falls sie noch floatet */
.center-me [class*="col-"] {
    float: none !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
}

/* 3. Das Profil-Element begrenzen und mittig setzen */
.center-me .item {
    margin: 0 auto !important;
    float: none !important;
    max-width: 420px !important; /* Verhindert, dass das Bild bei 1-Spalte zu riesig wird */
    width: 100% !important;
}

/* 4. Das Bild innerhalb des Elements zentrieren */
.center-me .member-image {
    margin: 0 auto !important;
    display: block !important;
}


/* Erzwungene Linksbündigkeit für Listen in JoomlArt Artikeln */
.item-page .article-content ul, 
.item-page .article-content ol,
div[itemprop="articleBody"] ul {
    text-align: left !important;
    display: table !important; /* Das sorgt dafür, dass der Block als Ganzes mittig stehen kann, aber der Text darin links ist */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    list-style-position: outside !important;
    width: auto !important;
    max-width: 100% !important;
}

.item-page .article-content li,
div[itemprop="articleBody"] li {
    text-align: left !important;
    display: list-item !important;
    margin-bottom: 15px !important;
    list-style-type: disc !important; /* Erzwingt den Punkt, falls er unterdrückt wurde */
}


/* Erzeugt einen Abstand für Anker-Links, damit sie nicht vom Menü verdeckt werden */
#ecommerce, #coaching, #agenturen, #hr {
    scroll-margin-top: 120px; /* Passt den Wert an die Höhe deines Menüs an */
}

:root {
    --gutter-small: 3px;
    --gutter-large: 36px;
    --gutter-extra-large: 36px;
}

/* Deaktiviert die automatische Großschreibung basierend auf der Inspektor-Analyse */
.section-title-wrap .main-title,
.section-title-wrap .section-title,
.section-title-wrap h3 {
    text-transform: none !important;
}


/* 1. Zahlen (01, 02, etc.) kräftig blau und ohne Verblassen */
.services-benefits .number {
    background: none !important;
    -webkit-text-fill-color: #0056b3 !important; /* Erzwingt die blaue Füllung */
    color: #0056b3 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    font-family: 'Inter', sans-serif !important; /* Moderne Schrift für Zahlen */
    display: block !important;
}

/* 2. Schriftart modernisieren (Weg von der "Times"-Optik) */
.services-benefits h4,
.services-benefits p {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    text-transform: none !important; /* Verhindert ungewollte Großschreibung */
}

/* 3. Titel (h4) in den Karten markanter gestalten */
.services-benefits h4 {
    font-weight: 700 !important;
    color: #111 !important;
    font-size: 1.2rem !important;
    margin-top: 15px !important;
}

/* 4. Beschreibungstext (p) lesefreundlicher machen */
.services-benefits p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #444 !important;
}


/* 1. Kompletter Stopp aller Fade-Effekte (Masken & Gradients) */
.services-benefits .number,
.services-benefits .number::before,
.services-benefits .number::after {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    
    /* Farbe auf ein sattes Blau ohne Transparenz zwingen */
    -webkit-text-fill-color: #0056b3 !important;
    color: #0056b3 !important;
    
    /* Alle Masken-Effekte löschen */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    
    /* Volle Deckkraft erzwingen */
    opacity: 1 !important;
    fill: #0056b3 !important;
}

/* 2. Schriftart-Check (Sicherstellen, dass keine Serif-Schrift bleibt) */
.services-benefits .number,
.services-benefits .inner,
.services-benefits h4,
.services-benefits p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}


/* 1. TITEL-FIX: Macht das Wort "Content-" noch kompakter */
.relateditems.mod-list.type-services .item-inner .title h3,
.relateditems.mod-list.type-services .item-inner .title h3 a {
    font-size: 0.95rem !important; /* Etwas kleiner für bessere Passform */
    line-height: 1.2 !important;
    font-weight: 700 !important;
    word-break: break-word !important;
    margin-bottom: 0 !important;
}

/* 2. KONSISTENZ-FIX: Entfernt den Einleitungstext (wie in Block 3) komplett */
.relateditems.mod-list.type-services .item-inner .intro-text {
    display: none !important; /* Sorgt dafür, dass alle Blöcke identisch aussehen */
}

/* 3. LAYOUT-FIX: Kompakteres Design ohne den verschwundenen Text */
.relateditems.mod-list.type-services .item-inner {
    min-height: 180px !important; /* Deutlich kompakter, da kein Text mehr stört */
    justify-content: space-between !important;
    padding: 20px !important;
}

/* 4. ABSTAND: "Learn More" sauber positionieren */
.relateditems.mod-list.type-services .readmore {
    margin-top: 15px !important;
    font-size: 0.8rem !important;
}


/* 1. MASTHEAD BASIS: Volle Breite und Zentrierung */
.ja-masthead {
    background-color: #050505 !important;
    background-size: cover !important;
    background-position: center !important; /* Das gesamte Bild wird gezeigt, Fokus ist ja links */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Zentriert den Inhaltsblock horizontal */
    min-height: 400px !important;
    text-align: center !important; /* Zentriert den Text im Block */
}

/* 2. TEXT-BLOCK: Breite für Lesbarkeit optimieren */
.ja-masthead .ja-masthead-inner {
    width: 100% !important;
    max-width: 850px !important; /* Verhindert, dass der Text zu breit läuft */
    padding: 40px 20px !important;
    margin: 0 auto !important;
    z-index: 2 !important; /* Text immer über dem Bild */
    position: relative !important;
}

/* 3. TITEL: Adsmarter-Blau mit Sicherheits-Schatten */
.ja-masthead .ja-masthead-title {
    color: #0056b3 !important;
    font-weight: bold !important;
    font-size: 2.8rem !important;
    margin-bottom: 25px !important;
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.9) !important; /* Macht den Text "schwebend" lesbar */
}

/* 4. BESCHREIBUNG: Weiß, Fett und mit Schatten */
.ja-masthead .ja-masthead-description {
    color: #ffffff !important; /* Textfarbe Weiß */
    font-weight: bold !important; /* Text in BOLD */
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.9) !important; /* Starker Schatten für maximale Lesbarkeit */
}

/* 5. MOBIL-ANPASSUNG */
@media (max-width: 767px) {
    .ja-masthead .ja-masthead-title {
        font-size: 1.8rem !important;
    }
    .ja-masthead .ja-masthead-description {
        font-size: 1rem !important;
    }
}