/* Globale Bootstrap-Überschreibung für Firmenfarben */
:root {
    --bs-primary: #0CC0DF !important; /* Hauptfarbe: Türkis */
    --bs-primary-rgb: 12, 192, 223 !important;
    --bs-secondary: #001373 !important; /* Sekundärfarbe: Dunkelblau */
    --bs-secondary-rgb: 0, 19, 115 !important;
    --bs-accent: #CADCEC !important; /* Akzentfarbe */
    --bs-accent-rgb: 202, 220, 236 !important;
}

/* Bootstrap-Farben überschreiben */
.btn-primary {
    background-color: #0CC0DF !important; /* Hauptfarbe: Türkis */
    border-color: #0CC0DF !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #0a9fc7 !important; /* Abgedunkeltes Türkis */
    border-color: #0a9fc7 !important;
}

.btn-primary:focus {
    background-color: #0CC0DF !important;
    border-color: #0CC0DF !important;
    box-shadow: 0 0 0 0.25rem rgba(12, 192, 223, 0.25) !important;
}

/* Text-Farben überschreiben */
.text-primary {
    color: #0CC0DF !important; /* Hauptfarbe: Türkis */
}

.text-secondary {
    color: #001373 !important; /* Sekundärfarbe: Dunkelblau */
}

/* Link-Farben überschreiben */
a {
    color: #0CC0DF !important; /* Hauptfarbe: Türkis */
}

a:hover {
    color: #0a9fc7 !important; /* Abgedunkeltes Türkis */
}

/* Dropdown-Menüelemente von der globalen Link-Farbe ausnehmen */
.dropdown-item {
    color: var(--secondary) !important; /* Dunkelblau für Dropdown-Items */
}

.dropdown-item:hover, .dropdown-item:focus {
    color: var(--secondary) !important; /* Dunkelblau auch beim Hover */
}

/* Navigation-styles werden zentral in style.css verwaltet */

/* Standard-Textfarbe für bessere Lesbarkeit */
body, p, .text-body {
    color: #333333 !important; /* Dunkles Grau für bessere Lesbarkeit */
}

/* Blog-Content spezifische Textfarbe */
.blog-content p, .blog-content li, .blog-content .text-body {
    color: #2c3e50 !important; /* Dunkles Blau-Grau für Blog-Texte */
    line-height: 1.6;
}

/* Tool Form Standards */
.tool-form-group {
    margin-bottom: 1.5rem;
}

.tool-input-group {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.tool-label {
    font-weight: 600;
    color: #001373;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tool-label i {
    color: #0066cc;
    font-size: 1.1em;
}

/* Zentrale Sektion-Abstand-Regel für bessere Lesbarkeit */
h1, h2, h3, h4, h5, h6 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
    margin-top: 0;
}

/* Zusätzlicher Abstand zwischen Sektionen */
section, .section, .card, .alert, .row {
    margin-bottom: 2.5rem;
}

/* Letztes Element in einer Sektion ohne zusätzlichen Abstand */
section:last-child, .section:last-child, .card:last-child, .alert:last-child, .row:last-child {
    margin-bottom: 0;
}

/* Spezielle Abstände für Blog-Content */
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
    margin-top: 3.5rem;
    margin-bottom: 2rem;
}

.blog-content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.blog-content ul, .blog-content ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.blog-content li {
    margin-bottom: 0.5rem;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        margin-top: 2.5rem;
        margin-bottom: 1.25rem;
    }
    
    .blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
        margin-top: 3rem;
        margin-bottom: 1.5rem;
    }
    
    section, .section, .card, .alert, .row {
        margin-bottom: 2rem;
    }
}

/* Link Checker Styles - Komplett überarbeitet mit sauberem Bootstrap Grid */
.dv-link-checker-results {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 19, 115, 0.1);
    overflow: hidden;
    margin: 2rem 0;
}

.dv-link-checker-header {
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-bottom: 1px solid #e0e0e0;
}

.dv-link-checker-title {
    color: #001373;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dv-link-checker-title i {
    color: #0066cc;
}

.dv-link-checker-hint {
    color: #666666;
    font-size: 0.95rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dv-link-checker-hint i {
    color: #0066cc;
}

.dv-link-checker-table {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    margin: 0;
}

.dv-link-checker-table-header {
    background: var(--color-tool-header);
    color: var(--color-tool-text);
    font-weight: 600;
    padding: 1rem;
    margin: 0;
    border-bottom: 2px solid var(--color-primary);
}

.dv-link-checker-col-check,
.dv-link-checker-col-result,
.dv-link-checker-col-details,
.dv-link-checker-col-info {
    padding: 1rem;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.dv-link-checker-col-info {
    justify-content: center;
}

.dv-link-checker-table-body {
    background: #ffffff;
}

.dv-link-checker-row {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
    background: #ffffff;
    transition: background-color 0.2s ease;
}

.dv-link-checker-row:hover {
    background-color: #f8f9fa;
}

.dv-link-checker-row:last-child {
    border-bottom: none;
}

.dv-link-checker-row-ok {
    border-left: 4px solid #28a745;
}

.dv-link-checker-row-warning {
    border-left: 4px solid #ffc107;
}

.dv-link-checker-row-error {
    border-left: 4px solid #dc3545;
}

.dv-link-checker-cell-check,
.dv-link-checker-cell-result,
.dv-link-checker-cell-details,
.dv-link-checker-cell-info {
    padding: 1rem;
    display: flex;
    align-items: center;
    min-height: 60px;
}

.dv-link-checker-cell-details {
    padding-right: 1.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.dv-link-checker-cell-info {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 1rem;
}

.dv-link-checker-check-name {
    font-weight: 600;
    color: #001373;
    font-size: 0.95rem;
}

.dv-link-checker-result-text {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.9rem;
}

.dv-link-checker-result-text i {
    margin-right: 0.5rem;
}

.dv-link-checker-result-ok {
    color: #28a745;
}

.dv-link-checker-result-warning {
    color: #8B4513;
    background-color: #FFF8DC;
    border: 1px solid #FFD700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    box-shadow: 0 1px 3px rgba(139, 69, 19, 0.1);
    font-weight: 500;
}

.dv-link-checker-result-error {
    color: #dc3545;
}

.dv-link-checker-details-text {
    color: #666666;
    font-size: 0.9rem;
    line-height: 1.4;
}

.dv-link-checker-info-btn {
    background: none;
    border: none;
    color: #001373;
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.dv-link-checker-info-btn:hover {
    background-color: #001373;
    color: #ffffff;
    transform: scale(1.1);
}

.dv-link-checker-status {
    margin-top: 2rem;
    text-align: center;
    padding: 0 2rem 2rem;
}

.dv-link-checker-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dv-link-checker-status-perfect {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #ffffff;
}

.dv-link-checker-status-warning {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 600;
}

.dv-link-checker-status-critical {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: #ffffff;
}

/* Detail-Zeilen für Link-Checker - Komplett überarbeitet mit korrekter Ausrichtung */
.dv-link-checker-detail-row {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-top: 2px solid #0CC0DF;
    border-bottom: 1px solid #e0e0e0;
    margin: 0;
    position: relative;
}

.dv-link-checker-detail-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, #001373, #0CC0DF);
}

.dv-link-checker-detail-content {
    max-width: 100%;
}

.dv-link-checker-detail-section {
    margin-bottom: 1.5rem;
    position: relative;
}

.dv-link-checker-detail-section:last-child {
    margin-bottom: 0;
}

.dv-link-checker-detail-section-title {
    color: #001373;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.dv-link-checker-detail-section-title i {
    color: #0066cc;
    font-size: 1.1em;
}

.dv-link-checker-detail-text {
    color: #333333;
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

.dv-link-checker-recommendation-link {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 102, 204, 0.1);
    transition: all 0.2s ease;
    display: inline-block;
    margin-left: 0.5rem;
}

.dv-link-checker-recommendation-link:hover {
    color: #ffffff;
    background: #0066cc;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.3);
}

.dv-link-checker-detail-tech {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.dv-link-checker-detail-code {
    color: #001373;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    background: #ffffff;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: block;
    word-break: break-all;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .dv-link-checker-results {
        padding: 1rem;
        margin: 1rem 0;
    }

    .dv-link-checker-header {
        padding: 1.5rem;
    }

    .dv-link-checker-title {
        font-size: 1.3rem;
    }

    .dv-link-checker-table-header {
        padding: 0.75rem;
    }

    .dv-link-checker-col-check,
    .dv-link-checker-col-result,
    .dv-link-checker-col-details,
    .dv-link-checker-col-info {
        padding: 0.5rem;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        text-align: left;
    }

    .dv-link-checker-col-info {
        border-bottom: none;
        text-align: center;
    }

    .dv-link-checker-row {
        padding: 0;
    }

    .dv-link-checker-cell-check,
    .dv-link-checker-cell-result,
    .dv-link-checker-cell-details,
    .dv-link-checker-cell-info {
        padding: 0.5rem;
        display: block;
        border-bottom: 1px solid #e0e0e0;
        min-height: auto;
    }

    .dv-link-checker-cell-info {
        border-bottom: none;
        text-align: center;
    }

    .dv-link-checker-check-name {
        font-size: 0.9rem;
    }

    .dv-link-checker-result-text {
        font-size: 0.85rem;
    }

    .dv-link-checker-details-text {
        font-size: 0.85rem;
    }

    .dv-link-checker-status-badge {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem;
    }
    
    .dv-link-checker-detail-section {
        margin-bottom: 1rem;
    }
    
    .dv-link-checker-detail-text {
        font-size: 0.9rem;
    }
    
    .dv-link-checker-detail-code {
        font-size: 0.8rem;
    }
}

/* Zusätzliche mobile Optimierungen für Bootstrap Grid */
@media (max-width: 576px) {
    .dv-link-checker-table-header .row,
    .dv-link-checker-row .row {
        margin: 0;
    }
    
    .dv-link-checker-col-check,
    .dv-link-checker-col-result,
    .dv-link-checker-col-details,
    .dv-link-checker-col-info {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    
    .dv-link-checker-cell-check,
    .dv-link-checker-cell-result,
    .dv-link-checker-cell-details,
    .dv-link-checker-cell-info {
        padding: 0.5rem;
        min-height: 45px;
        font-size: 0.8rem;
    }
    
    .dv-link-checker-cell-details {
        padding-right: 1rem;
    }
    
    .dv-link-checker-cell-info {
        padding-left: 0.25rem;
        padding-right: 0.5rem;
    }
    
    .dv-link-checker-check-name {
        font-size: 0.8rem;
    }
    
    .dv-link-checker-result-text {
        font-size: 0.75rem;
    }
    
    .dv-link-checker-details-text {
        font-size: 0.75rem;
    }
    
    .dv-link-checker-info-btn {
        width: 1.8rem;
        height: 1.8rem;
        font-size: 1rem;
    }
}

/* Einheitliche Styles für alle Eingabefelder - Deutlich sichtbar */
body .form-control, 
body .form-select,
.container .form-control,
.container .form-select,
main .form-control,
main .form-select {
    border: 2px solid #666666 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    padding: 0.5rem 0.75rem !important;
    background: #f9f9f9 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* Spezielle Regeln für input-group Container */
body .input-group,
.container .input-group,
main .input-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Spezielle Regeln für input-group Elemente */
body .input-group .form-control,
body .input-group .form-select,
.container .input-group .form-control,
.container .input-group .form-select,
main .input-group .form-control,
main .input-group .form-select {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Spezielle Regeln für tool-input Klassen */
.tool-input.form-control, 
.tool-select.form-select {
    border: 2px solid #666666 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    padding: 0.5rem 0.75rem !important;
    background: #f9f9f9 !important;
    color: #001373;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
}

/* Spezielle Regeln für tool-input in input-group */
.input-group .tool-input.form-control,
.input-group .tool-select.form-select {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Container-Regeln für alle Formulare */
.form-control,
.form-select,
input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* Spezielle Regeln für Bootstrap Grid Container */
.row .col,
.row .col-1, .row .col-2, .row .col-3, .row .col-4, .row .col-5, .row .col-6,
.row .col-7, .row .col-8, .row .col-9, .row .col-10, .row .col-11, .row .col-12,
.row .col-md-1, .row .col-md-2, .row .col-md-3, .row .col-md-4, .row .col-md-5, .row .col-md-6,
.row .col-md-7, .row .col-md-8, .row .col-md-9, .row .col-md-10, .row .col-md-11, .row .col-md-12,
.row .col-lg-1, .row .col-lg-2, .row .col-lg-3, .row .col-lg-4, .row .col-lg-5, .row .col-lg-6,
.row .col-lg-7, .row .col-lg-8, .row .col-lg-9, .row .col-lg-10, .row .col-lg-11, .row .col-lg-12 {
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Spezielle Regeln für Bootstrap Grid Container mit Eingabefeldern */
.row .col .form-control,
.row .col .form-select,
.row .col-md-4 .form-control,
.row .col-md-4 .form-select,
.row .col-md-6 .form-control,
.row .col-md-6 .form-select,
.row .col-12 .form-control,
.row .col-12 .form-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body .form-control:focus, 
body .form-select:focus,
.container .form-control:focus,
.container .form-select:focus,
main .form-control:focus,
main .form-select:focus {
    border-color: #0CC0DF !important;
    box-shadow: 0 0 0 0.2rem rgba(12, 192, 223, 0.25) !important;
    outline: none !important;
    background: #fff !important;
}

body .form-control:hover, 
body .form-select:hover,
.container .form-control:hover,
.container .form-select:hover,
main .form-control:hover,
main .form-select:hover {
    border-color: #444444 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Spezielle Styles für Farbauswahl-Felder */
.color-picker-wrapper .color-preview {
    border: 2px solid #666666 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.color-picker-wrapper .color-preview:hover {
    border-color: #444444 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

.color-picker-wrapper .color-preview:focus-within {
    border-color: #0CC0DF !important;
    box-shadow: 0 0 0 0.2rem rgba(12, 192, 223, 0.25) !important;
}

.tool-input:focus, .tool-select:focus {
    border-color: #0CC0DF !important;
    box-shadow: 0 0 0 0.2rem rgba(12,192,223,0.25) !important;
    outline: none !important;
}

.tool-input:hover, .tool-select:hover {
    border-color: #444444 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

.tool-help-text {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Tool Button Standards */
.tool-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 0.7rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tool-btn-primary {
    background: #001373;
    color: #fff;
    border: none;
}

.tool-btn-primary:hover,
.tool-btn-primary:focus {
    background: #0CC0DF;
    color: #001373;
}

.tool-btn-outline {
    background: #fff;
    color: #001373;
    border: 2px solid #001373;
}

.tool-btn-outline:hover,
.tool-btn-outline:focus {
    background: #0CC0DF;
    color: #fff;
    border-color: #0CC0DF;
}

/* Info Cards */
.tool-info-card {
    background: #e0f7fa;
    border-radius: 0.7rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: none;
}

.tool-info-card i {
    color: #0CC0DF;
    margin-right: 0.5rem;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .tool-input-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .tool-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .table td {
        display: flex;
        padding: 0.3rem 0.2rem;
    }
    .table td::before {
        content: attr(data-label);
        font-weight: 600;
        min-width: 7em;
    }
}

@media (min-width: 600px) and (max-width: 1024px) {
  .mlm-landingpage h1, .mlm-landingpage .h1 { font-size: 2.8rem !important; line-height: 1.18 !important; }
  .mlm-landingpage h2, .mlm-landingpage .h2 { font-size: 2.3rem !important; line-height: 1.22 !important; }
  .mlm-landingpage h3, .mlm-landingpage .h3 { font-size: 1.7rem !important; line-height: 1.25 !important; }
  .mlm-landingpage h4, .mlm-landingpage .h4 { font-size: 1.35rem !important; line-height: 1.28 !important; }
  .mlm-landingpage h5, .mlm-landingpage .h5 { font-size: 1.18rem !important; line-height: 1.32 !important; }
  .mlm-landingpage h6, .mlm-landingpage .h6 { font-size: 1.12rem !important; line-height: 1.35 !important; }
  .mlm-landingpage body, .mlm-landingpage .body, .mlm-landingpage p, .mlm-landingpage .fs-5, .mlm-landingpage .fs-6, .mlm-landingpage .text-muted, .mlm-landingpage .card-text, .mlm-landingpage .small {
    font-size: 1.35rem !important;
    line-height: 1.85 !important;
  }
  .mlm-landingpage .btn, .mlm-landingpage .btn-lg, .mlm-landingpage .btn-primary, .mlm-landingpage .btn-outline-primary {
    font-size: 1.22rem !important;
  }
}

@media (max-width: 600px) {
  .mlm-landingpage h1, .mlm-landingpage .h1 { font-size: 2.1rem !important; line-height: 1.18 !important; }
  .mlm-landingpage h2, .mlm-landingpage .h2 { font-size: 1.7rem !important; line-height: 1.22 !important; }
  .mlm-landingpage h3, .mlm-landingpage .h3 { font-size: 1.3rem !important; line-height: 1.25 !important; }
  .mlm-landingpage h4, .mlm-landingpage .h4 { font-size: 1.13rem !important; line-height: 1.28 !important; }
  .mlm-landingpage h5, .mlm-landingpage .h5 { font-size: 1.08rem !important; line-height: 1.32 !important; }
  .mlm-landingpage h6, .mlm-landingpage .h6 { font-size: 1.04rem !important; line-height: 1.35 !important; }
  .mlm-landingpage body, .mlm-landingpage .body, .mlm-landingpage p, .mlm-landingpage .fs-5, .mlm-landingpage .fs-6, .mlm-landingpage .text-muted, .mlm-landingpage .card-text, .mlm-landingpage .small {
    font-size: 1.18rem !important;
    line-height: 1.85 !important;
  }
  .mlm-landingpage .btn, .mlm-landingpage .btn-lg, .mlm-landingpage .btn-primary, .mlm-landingpage .btn-outline-primary {
    font-size: 1.08rem !important;
  }
}

@media (max-width: 800px) {
  .mlm-landingpage .row, .mlm-landingpage .g-4, .mlm-landingpage .g-3, .mlm-landingpage .g-2, .mlm-landingpage .g-1 {
    flex-direction: column !important;
  }
  .mlm-landingpage .col-md-4, .mlm-landingpage .col-md-6, .mlm-landingpage .col-lg-3, .mlm-landingpage .col-lg-4, .mlm-landingpage .col-lg-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Entfernt: Eigene Regeln für #blog-content .table und Responsive-Tabellen */ 

/* --- Avatar Testanimation für Landingpage --- */
@keyframes slideDownTest {
  0% { opacity: 0; transform: translateY(-60px) scale(0.85); }
  70% { opacity: 1; transform: translateY(8px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.avatar-anim-test {
  opacity: 0;
  animation: slideDownTest 2.0s cubic-bezier(.23,1.01,.32,1) 0.1s forwards;
}
.avatar-anim-test:hover {
  animation: none;
  transition: transform 0.18s cubic-bezier(.23,1.01,.32,1), box-shadow 0.18s;
  transform: scale(1.01);
  box-shadow: 0 8px 32px rgba(12,192,223,0.18);
}

/* --- Animationen für Landingpage Hero --- */
@keyframes heroCardFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.hero-card-fadein {
  opacity: 0;
  animation: heroCardFadeIn 1.2s ease-out 0.7s forwards;
  transition: box-shadow 0.18s cubic-bezier(.23,1.01,.32,1);
}

@keyframes heroTitleSlideUp {
  0% { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero-title-anim {
  opacity: 0;
  animation: heroTitleSlideUp 1.2s cubic-bezier(.23,1.01,.32,1) 1.3s forwards;
}

.hero-btn-animate {
  transition: transform 0.18s cubic-bezier(.23,1.01,.32,1), box-shadow 0.18s;
}
.hero-btn-animate:hover, .hero-btn-animate:focus {
  transform: scale(1.045);
  box-shadow: 0 4px 18px rgba(12,192,223,0.18);
} 

.avatar-anim-test:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 32px rgba(12,192,223,0.18);
} 

.hero-img-hover {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 2px 8px rgba(44,62,80,0.07), 0 1.5px 6px rgba(12,192,223,0.04);
}
.hero-img-hover:hover {
  transform: scale(1.045) rotate(-1deg);
  box-shadow: 0 8px 32px rgba(44,62,80,0.18), 0 1.5px 6px rgba(12,192,223,0.08);
}

.hero-card-hover {
  transition: transform 0.18s cubic-bezier(.23,1.01,.32,1), box-shadow 0.18s;
}
.hero-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(44,62,80,0.13);
} 

/* --- Lesbare Überschrift auf dunklem Hintergrund für Landingpage --- */
.hero-section-title {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
} 

/* Sanfte Hover-Animationen für Landingpage-Komponenten */
.animated-hover-card {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.animated-hover-card:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 8px 32px rgba(44,62,80,0.18), 0 1.5px 6px rgba(12,192,223,0.08);
}
.animated-hover-img {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.animated-hover-img:hover {
  transform: scale(1.045) rotate(-1deg);
  box-shadow: 0 8px 32px rgba(44,62,80,0.18), 0 1.5px 6px rgba(12,192,223,0.08);
} 

.animated-hover-list li {
  transition: transform 0.22s cubic-bezier(.23,1.01,.32,1), box-shadow 0.22s, background 0.22s;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.animated-hover-list li span {
  flex-shrink: 0;
  margin-right: 0.6rem;
  margin-top: 0.1rem;
}
.animated-hover-list li:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 2px 8px rgba(44,62,80,0.10);
  background: rgba(12,192,223,0.07);
  border-radius: 6px;
} 

@media (max-width: 1024px) {
  .hero-card-hover, .hero-img-hover {
    margin-bottom: 2rem;
  }
  .hero-section .row.align-items-center {
    flex-direction: column !important;
  }
  .hero-section .col-md-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
  }
} 

@media (max-width: 1024px) {
  .mlm-landingpage .row {
    flex-direction: column !important;
  }
  .mlm-landingpage [class^='col-'],
  .mlm-landingpage [class*=' col-'] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
} 

@media (max-width: 1024px) {
  .mlm-landingpage .container {
    max-width: 100vw !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mlm-landingpage .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mlm-landingpage [class^='col-'],
  .mlm-landingpage [class*=' col-'] {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
} 

.mlm-landingpage .hero-card-hover {
  padding: 2.5rem 2rem 2.5rem 2rem !important;
}
.mlm-landingpage .hero-card-hover a.btn {
  margin-top: 1.2rem !important;
  margin-bottom: 0 !important;
  display: inline-block;
} 

/* Hero-Komponente Standardformatierung */
.dv-hero-title {
  font-family: var(--heading-font, 'Helvetica Neue', Arial, sans-serif);
  color: #001373;
  font-weight: 700;
  font-size: 2.2rem;
  margin-bottom: 0.7em;
}
.dv-hero-title.h2, .dv-hero-title h2 {
  font-size: 1.7rem;
}
.dv-hero-subtitle {
  font-family: var(--heading-font, 'Helvetica Neue', Arial, sans-serif);
  color: #001373;
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.5em;
}
.dv-hero-features {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.2em;
}
.dv-hero-feature-icon {
  color: #001373;
  font-size: 1.1em;
  margin-right: 0.5em;
}
.dv-hero-accent {
  color: #001373;
  font-weight: 600;
  margin-bottom: 1em;
}
.dv-hero-btn {
  background: linear-gradient(90deg, #0CC0DF 0%, #001373 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(12,192,223,0.08);
  padding: 0.7em 2em;
  border-radius: 0.5em;
  font-size: 1.1rem;
  transition: background 0.2s;
}
.dv-hero-btn:hover, .dv-hero-btn:focus {
  background: linear-gradient(90deg, #001373 0%, #0CC0DF 100%);
  color: #fff;
}
.dv-hero-img {
  max-width: 90%;
  height: auto;
  border-radius: 1.2rem;
  box-shadow: 0 8px 32px rgba(44,62,80,0.13);
}
.dv-hero-divider path {
  fill: #0CC0DF;
} 

.dv-hero-features li {
  transition: transform 0.25s cubic-bezier(0.4,0.2,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0.2,0.2,1);
  will-change: transform;
}
.dv-hero-features li:hover, .dv-hero-features li:focus {
  transform: scale(1.07);
  box-shadow: 0 2px 12px rgba(0,19,115,0.07);
  z-index: 1;
  background: rgba(12,192,223,0.04);
  border-radius: 0.4em;
} 

.dv-tools-title {
  font-family: var(--heading-font, 'Helvetica Neue', Arial, sans-serif);
  color: #001373;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.7em;
}
.dv-tools-intro {
  font-size: 1.08rem;
  color: #222;
  margin-bottom: 1.2em;
}
.dv-tool-card {
  border-radius: 1.1em;
  box-shadow: 0 2px 16px rgba(0,19,115,0.06);
  border: 1px solid #e6f3f7;
  transition: box-shadow 0.18s, transform 0.18s;
  background: #fff;
}
.dv-tool-card:hover, .dv-tool-card:focus-within {
  box-shadow: 0 6px 32px rgba(0,19,115,0.13);
  transform: translateY(-2px) scale(1.025);
  border-color: #0CC0DF;
}
.dv-tool-icon {
  color: #0CC0DF;
  font-size: 1.5em;
  margin-right: 0.5em;
}
.dv-tool-btn {
  background: linear-gradient(90deg, #0CC0DF 0%, #001373 100%);
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 0.4em;
  padding: 0.5em 1.5em;
  font-size: 1.05rem;
  box-shadow: 0 2px 8px rgba(12,192,223,0.08);
  transition: background 0.18s;
}
.dv-tool-btn:hover, .dv-tool-btn:focus {
  background: linear-gradient(90deg, #001373 0%, #0CC0DF 100%);
  color: #fff;
}
.dv-tools-suggest-btn {
  font-weight: 600;
  border-radius: 0.4em;
  font-size: 1.08rem;
  padding: 0.6em 1.7em;
  border: 2px solid #0CC0DF;
  color: #0CC0DF;
  background: #fff;
  transition: background 0.18s, color 0.18s, border 0.18s;
}
.dv-tools-suggest-btn:hover, .dv-tools-suggest-btn:focus {
  background: #0CC0DF;
  color: #fff;
  border-color: #001373;
} 

.dv-info-box {
  background: #e6f6fb;
  color: #001373;
  border-left: 5px solid #0CC0DF;
  border-radius: 0.5em;
  padding: 1em 1.2em;
  font-size: 1.08em;
  box-shadow: 0 2px 8px rgba(0,19,115,0.04);
  margin-bottom: 1em;
}
.dv-info-icon {
  color: #0CC0DF;
  font-size: 1.5em;
  flex-shrink: 0;
  margin-top: 0.1em;
}
.dv-section-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: flex-start;
}
.dv-section-content {
  flex: 1 1 50%;
  min-width: 300px;
}
.dv-section-image {
  flex: 1 1 50%;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 991px) {
  .dv-section-grid {
    flex-direction: column;
    gap: 1.5rem;
  }
  .dv-section-image {
    margin: 0 auto;
  }
}
.dv-cta-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  color: #001373;
  border-radius: 0.6em;
  padding: 1.2em 1.5em;
  margin-top: 1.5em;
  box-shadow: 0 2px 12px rgba(0,19,115,0.07);
  text-align: center;
  border: 1px solid #e9ecef;
}
.dv-cta-card .btn {
  font-size: 1.15em;
  font-weight: 600;
  margin-top: 0.5em;
}

/* Impressum-Seite Styles */
.impressum-content {
  line-height: 1.6;
  color: #333;
}

.impressum-content h1 {
  color: #001373;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #0CC0DF;
  padding-bottom: 0.5rem;
}

.impressum-content h2 {
  color: #001373;
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-left: 4px solid #0CC0DF;
  padding-left: 1rem;
}

.impressum-content p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

.impressum-content strong {
  color: #001373;
  font-weight: 600;
}

.impressum-content a {
  color: #0CC0DF;
  text-decoration: none;
  transition: color 0.3s ease;
}

.impressum-content a:hover {
  color: #0099CC;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .impressum-content h1 {
    font-size: 1.75rem;
  }
  
  .impressum-content h2 {
    font-size: 1.25rem;
  }
  
  .impressum-content p {
    font-size: 0.95rem;
  }
} 

/* SEO Checker Results Component - Standardkomponente */
.dv-seo-checker-results {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 19, 115, 0.1);
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid #e0e0e0;
}

.dv-seo-checker-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.dv-seo-checker-title {
    color: #001373;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.dv-seo-checker-hint {
    color: #666666;
    font-size: 0.9rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.dv-seo-checker-table {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.dv-seo-checker-table-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 2fr 0.5fr;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    color: #001373;
}

.dv-seo-checker-col-check,
.dv-seo-checker-col-result,
.dv-seo-checker-col-details,
.dv-seo-checker-col-info {
    padding: 1rem;
    border-right: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
}

.dv-seo-checker-col-info {
    border-right: none;
    justify-content: center;
}

.dv-seo-checker-table-body {
    background: #ffffff;
}

.dv-seo-checker-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 2fr 0.5fr;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

.dv-seo-checker-row:hover {
    background-color: #f8f9fa;
}

.dv-seo-checker-row:last-child {
    border-bottom: none;
}

.dv-seo-checker-row-ok {
    border-left: 4px solid #28a745;
}

.dv-seo-checker-row-warning {
    border-left: 4px solid #ffc107;
}

.dv-seo-checker-row-error {
    border-left: 4px solid #dc3545;
}

.dv-seo-checker-cell-check,
.dv-seo-checker-cell-result,
.dv-seo-checker-cell-details,
.dv-seo-checker-cell-info {
    padding: 1rem;
    border-right: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
}

.dv-seo-checker-cell-info {
    border-right: none;
    justify-content: center;
}

.dv-seo-checker-check-name {
    font-weight: 600;
    color: #001373;
}

.dv-seo-checker-result-text {
    display: flex;
    align-items: center;
    font-weight: 500;
}

.dv-seo-checker-result-text i {
    margin-right: 0.5rem;
}

.dv-seo-checker-result-ok {
    color: #28a745;
}

.dv-seo-checker-result-warning {
    color: #8B4513;
    background-color: #FFF8DC;
    border: 2px solid #DAA520;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.2);
}

.dv-seo-checker-result-error {
    color: #dc3545;
}

.dv-seo-checker-details-text {
    color: #666666;
    font-size: 0.9rem;
}

.dv-seo-checker-info-btn {
    background: none;
    border: none;
    color: #001373;
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.dv-seo-checker-info-btn:hover {
    background-color: #001373;
    color: #ffffff;
    transform: scale(1.1);
}

.dv-seo-checker-status {
    margin-top: 2rem;
    text-align: center;
}

.dv-seo-checker-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dv-seo-checker-status-perfect {
    background: linear-gradient(135deg, #1e7e34, #155724);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dv-seo-checker-status-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #ffffff;
}

.dv-seo-checker-status-critical {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: #ffffff;
}

/* SEO Checker Detail Row Styles */
.dv-seo-checker-detail-row {
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 1.5rem;
    margin: 0;
}

.dv-seo-checker-detail-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.dv-seo-checker-detail-content {
    max-width: 100%;
    margin: 0;
}

.dv-seo-checker-detail-section {
    margin-bottom: 1.5rem;
}

.dv-seo-checker-detail-section:last-child {
    margin-bottom: 0;
}

.dv-seo-checker-detail-section-title {
    color: #001373;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dv-seo-checker-detail-section-title i {
    color: var(--color-primary);
    font-size: 1.1em;
}

.dv-seo-checker-detail-text {
    color: #666666;
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

.dv-seo-checker-detail-tech {
    background: #f1f3f4;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.dv-seo-checker-detail-code {
    color: #001373;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    background: #ffffff;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
}

@media (max-width: 768px) {
    .dv-seo-checker-results {
        padding: 1rem;
        margin: 1rem 0;
    }

    .dv-seo-checker-table-header,
    .dv-seo-checker-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .dv-seo-checker-col-check,
    .dv-seo-checker-col-result,
    .dv-seo-checker-col-details,
    .dv-seo-checker-col-info,
    .dv-seo-checker-cell-check,
    .dv-seo-checker-cell-result,
    .dv-seo-checker-cell-details,
    .dv-seo-checker-cell-info {
        padding: 0.5rem;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        justify-content: flex-start;
    }

    .dv-seo-checker-col-info,
    .dv-seo-checker-cell-info {
        border-bottom: none;
        justify-content: center;
    }

    .dv-seo-checker-title {
        font-size: 1.2rem;
    }

    .dv-seo-checker-status-badge {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
} 

/* Performance Checker Results Component - Standardkomponente */
.dv-performance-checker-results {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 19, 115, 0.1);
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid #e0e0e0;
}

.dv-performance-checker-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.dv-performance-checker-title {
    color: #001373;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.dv-performance-checker-hint {
    color: #666666;
    font-size: 0.9rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.dv-performance-checker-table {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.dv-performance-checker-table-header {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr 2fr 0.8fr;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    color: #001373;
}

.dv-performance-checker-col-check,
.dv-performance-checker-col-result,
.dv-performance-checker-col-details,
.dv-performance-checker-col-info {
    padding: 1rem;
    border-right: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
}

.dv-performance-checker-col-info {
    border-right: none;
    justify-content: center;
}

.dv-performance-checker-table-body {
    background: #ffffff;
}

.dv-performance-checker-row {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr 2fr 0.8fr;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

.dv-performance-checker-row:hover {
    background-color: #f8f9fa;
}

.dv-performance-checker-row:last-child {
    border-bottom: none;
}

.dv-performance-checker-row-ok {
    border-left: 4px solid #28a745;
}

.dv-performance-checker-row-warning {
    border-left: 4px solid #ffc107;
}

.dv-performance-checker-row-error {
    border-left: 4px solid #dc3545;
}

.dv-performance-checker-cell-check,
.dv-performance-checker-cell-result,
.dv-performance-checker-cell-details,
.dv-performance-checker-cell-info {
    padding: 1rem;
    border-right: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
}

.dv-performance-checker-cell-info {
    border-right: none;
    justify-content: center;
}

.dv-performance-checker-check-name {
    font-weight: 600;
    color: #001373;
    line-height: 1.3;
}

.dv-performance-checker-result-text {
    display: flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.2;
}

.dv-performance-checker-result-text i {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.dv-performance-checker-result-ok {
    color: #28a745;
}

.dv-performance-checker-result-warning {
    color: #8B4513;
    background-color: #FFF8DC;
    border: 2px solid #DAA520;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.2);
}

.dv-performance-checker-result-error {
    color: #dc3545;
}

.dv-performance-checker-details-text {
    color: #666666;
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
}

.dv-performance-checker-info-btn {
    background: none;
    border: none;
    color: #001373;
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.dv-performance-checker-info-btn:hover {
    background-color: #001373;
    color: #ffffff;
    transform: scale(1.1);
}

.dv-performance-checker-status {
    margin-top: 2rem;
    text-align: center;
}

.dv-performance-checker-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dv-performance-checker-status-perfect {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #ffffff;
}

.dv-performance-checker-status-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #ffffff;
}

.dv-performance-checker-status-critical {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: #ffffff;
}

/* Performance Checker Detail Row Styles */
.dv-performance-checker-detail-row {
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 1.5rem;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.dv-performance-checker-detail-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.dv-performance-checker-detail-content {
    padding-left: 1rem;
}

.dv-performance-checker-detail-section {
    margin-bottom: 1.5rem;
}

.dv-performance-checker-detail-section:last-child {
    margin-bottom: 0;
}

.dv-performance-checker-detail-section-title {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dv-performance-checker-detail-section-title i {
    color: var(--color-primary);
    font-size: 1.1em;
}

.dv-performance-checker-detail-text {
    color: #333333;
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

.dv-performance-checker-detail-tech {
    background: #f1f3f4;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 0.5rem;
    border-left: 3px solid var(--color-primary);
}

.dv-performance-checker-detail-code {
    color: #333333;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    word-break: break-all;
    white-space: pre-wrap;
}

@media (max-width: 1024px) {
    .dv-performance-checker-table-header,
    .dv-performance-checker-row {
        grid-template-columns: 2fr 1.5fr 1.5fr 0.8fr;
    }
    
    .dv-performance-checker-check-name {
        font-size: 0.95rem;
    }
    
    .dv-performance-checker-details-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .dv-performance-checker-results {
        padding: 1rem;
        margin: 1rem 0;
    }

    .dv-performance-checker-table-header,
    .dv-performance-checker-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dv-performance-checker-col-check,
    .dv-performance-checker-col-result,
    .dv-performance-checker-col-details,
    .dv-performance-checker-col-info,
    .dv-performance-checker-cell-check,
    .dv-performance-checker-cell-result,
    .dv-performance-checker-cell-details,
    .dv-performance-checker-cell-info {
        padding: 0.75rem;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        justify-content: flex-start;
    }

    .dv-performance-checker-col-info,
    .dv-performance-checker-cell-info {
        border-bottom: none;
        justify-content: center;
        padding: 0.5rem;
    }
    
    .dv-performance-checker-col-check,
    .dv-performance-checker-cell-check {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #001373;
    }

    .dv-performance-checker-title {
        font-size: 1.2rem;
    }

    .dv-performance-checker-status-badge {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
    
    .dv-performance-checker-check-name {
        font-size: 0.9rem;
    }
    
    .dv-performance-checker-result-text {
        font-size: 0.9rem;
    }
    
    .dv-performance-checker-details-text {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .dv-performance-checker-results {
        padding: 0.75rem;
        margin: 0.75rem 0;
    }
    
    .dv-performance-checker-title {
        font-size: 1.1rem;
    }
    
    .dv-performance-checker-hint {
        font-size: 0.8rem;
    }
    
    .dv-performance-checker-col-check,
    .dv-performance-checker-col-result,
    .dv-performance-checker-col-details,
    .dv-performance-checker-col-info,
    .dv-performance-checker-cell-check,
    .dv-performance-checker-cell-result,
    .dv-performance-checker-cell-details,
    .dv-performance-checker-cell-info {
        padding: 0.5rem;
    }
    
    .dv-performance-checker-status-badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
}

/* Tools Carousel Styles */
.dv-tools-carousel-container {
    position: relative;
    margin: 0 -15px;
    padding: 0 15px; /* Reduziert, da keine Buttons mehr */
}

.dv-tools-scroll-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 1rem 0;
    justify-content: center;
}

.dv-tools-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.dv-tool-card-wrapper {
    flex: 0 0 350px; /* Feste Breite für 3 Karten pro "Seite" */
    max-width: 350px;
    height: 180px; /* Feste Höhe für einheitliches Aussehen */
}

/* Klickbarer Link für die gesamte Karte */
.dv-tool-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: all 0.3s ease;
}

.dv-tool-card-link:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-5px);
}

/* Intensivere visuelle Trennung der Tool-Karten */
.dv-tool-card {
    border: 3px solid var(--color-tool-border) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    cursor: pointer;
}

.dv-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    z-index: 1;
}

.dv-tool-card-link:hover .dv-tool-card {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2) !important;
    border-color: var(--color-primary) !important;
}

.dv-tool-card-link:hover .dv-tool-card::before {
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .dv-tools-carousel-container {
        padding: 0 10px;
    }
    
    .dv-tools-scroll-container {
        justify-content: flex-start;
    }
    
    .dv-tool-card-wrapper {
        flex: 0 0 280px;
        max-width: 280px;
        height: 160px;
    }
}

@media (max-width: 576px) {
    .dv-tools-carousel-container {
        padding: 0 5px;
    }
    
    .dv-tools-scroll-container {
        justify-content: flex-start;
    }
    
    .dv-tool-card-wrapper {
        flex: 0 0 250px;
        max-width: 250px;
        height: 140px;
    }
}

/* UTM Generator Copy Button - ULTIMATIVE LÖSUNG */
html body .input-group .btn.btn-primary.dv-copy-btn,
html body .btn.btn-primary.dv-copy-btn,
html body .dv-copy-btn {
    min-width: 120px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    user-select: none !important;
    border: 1px solid var(--color-primary) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: visible !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

html body .input-group .btn.btn-primary.dv-copy-btn:hover,
html body .btn.btn-primary.dv-copy-btn:hover,
html body .dv-copy-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(12, 192, 223, 0.3) !important;
    background-color: #0a9bc7 !important;
    border-color: #0a9bc7 !important;
    color: white !important;
    text-decoration: none !important;
}

html body .input-group .btn.btn-primary.dv-copy-btn:focus,
html body .btn.btn-primary.dv-copy-btn:focus,
html body .dv-copy-btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(12, 192, 223, 0.25) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    outline: none !important;
}

html body .input-group .btn.btn-primary.dv-copy-btn:active,
html body .btn.btn-primary.dv-copy-btn:active,
html body .dv-copy-btn:active {
    background-color: #0a9bc7 !important;
    border-color: #0a9bc7 !important;
    color: white !important;
    transform: translateY(0) !important;
}

/* Input Group für UTM Generator - ULTIMATIV */
html body .input-group .form-control {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

html body .input-group .btn.btn-primary.dv-copy-btn {
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px !important;
}

/* QR Code Button Layout - ULTIMATIV */
html body #qr-download-form .btn {
    width: 100% !important;
    margin-top: 0.5rem !important;
} 

/* Blog Hero Component - Minimal ohne Bild */
.blog-hero {
    background: linear-gradient(135deg, #d4f0f8 0%, #e8f4f8 30%, #f0f8fa 70%, #ffffff 100%);
    padding: 4rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 3rem;
}

.blog-hero-icon {
    margin-bottom: 2rem;
}

.blog-hero-icon i {
    font-size: 4rem;
    color: #0CC0DF !important; /* Hauptfarbe: Türkis - überschreibt Bootstrap */
    background: linear-gradient(135deg, #0CC0DF, #001373);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-hero-title {
    color: #001373 !important; /* Sekundärfarbe: Dunkelblau - überschreibt Bootstrap */
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.blog-hero-subtitle {
    color: #666666;
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    font-weight: 400;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.blog-hero-description {
    color: #555555;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.blog-hero-features {
    margin: 2rem 0;
}

.blog-hero-features ul {
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

.blog-hero-features li {
    color: #555555;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.blog-hero-features li i {
    color: #0CC0DF !important; /* Hauptfarbe: Türkis - überschreibt Bootstrap */
    font-size: 1.1rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.blog-hero-buttons {
    margin: 2rem 0;
}

.blog-hero-buttons .btn {
    margin: 0.5rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.blog-hero-buttons .btn-primary {
    background: linear-gradient(135deg, #0CC0DF, #001373) !important; /* Firmenfarben - überschreibt Bootstrap */
    border: none !important;
    box-shadow: 0 4px 15px rgba(12, 192, 223, 0.3);
    color: #ffffff !important;
}

.blog-hero-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(12, 192, 223, 0.4);
    background: linear-gradient(135deg, #0a9fc7, #000f5c) !important;
}

.blog-hero-trust-line {
    color: #888888;
    font-size: 0.9rem;
    margin-top: 1.5rem;
    font-style: italic;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .blog-hero {
        padding: 3rem 0;
    }
    
    .blog-hero-icon i {
        font-size: 3rem;
    }
    
    .blog-hero-title {
        font-size: 2rem;
    }
    
    .blog-hero-subtitle {
        font-size: 1.1rem;
    }
    
    .blog-hero-features ul {
        text-align: center;
    }
    
    .blog-hero-features li {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .blog-hero {
        padding: 2rem 0;
    }
    
    .blog-hero-title {
        font-size: 1.75rem;
    }
    
    .blog-hero-subtitle {
        font-size: 1rem;
    }
    
    .blog-hero-buttons .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
}