/* Media Load Design - einheitliches Kartenlayout */

.ml-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 11px 5px #ebebeb;
    padding: 30px;
    width: 100%;
    margin-bottom: 30px;
}
.ml-card p:last-child {
    margin-bottom: 0;
}
.ml-card h3 {
    margin-top: 0;
}

/* Raster: alle Karten einer Reihe gleich hoch */
.ml-card-grid {
    margin-top: 20px;
    margin-bottom: 10px;
}
.ml-card-grid > [class*="col-"] {
    display: flex;
}

.ml-card-icon {
    display: block;
    font-size: 36px;
    line-height: 1;
    color: #2b99ff;
    margin-bottom: 20px;
}

/* Kleine Leistungskarte: Icon + Bezeichnung */
.ml-card-feature {
    text-align: center;
    padding: 25px 20px;
}
.ml-card-feature .ml-card-title {
    color: #071d50;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

/* Ablauf-Schritte */
.ml-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2b99ff;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
}

/* Preiskarte */
.ml-card-price {
    text-align: center;
}
.ml-card-price .ml-price {
    color: #071d50;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    margin: 10px 0 5px;
}
.ml-card-price .ml-price-note {
    color: #2b99ff;
    font-size: 14px;
}
.ml-card-price ul {
    padding: 0;
    margin: 15px 0;
}

/* Inhaltskarte fuer laengere Texte (Artikel, Rechtstexte) */
.ml-card-content {
    padding: 40px;
    text-align: left;
}
.ml-card-content li {
    text-align: left;
    display: block;
}
.ml-card-content img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .ml-card,
    .ml-card-content {
        padding: 20px;
    }
}

/* Kurze Aufzaehlungen in Artikeln als kleine Kacheln */
.ml-mini-grid {
    margin-top: 10px;
    margin-bottom: 20px;
}
.ml-mini-card {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f4f9ff;
    border: 1px solid #e3efff;
    border-radius: 8px;
    padding: 15px 18px;
    margin-bottom: 15px;
    color: #071d50;
    font-weight: 500;
    line-height: 24px;
}
.ml-mini-card i {
    color: #2b99ff;
    font-size: 18px;
    flex-shrink: 0;
    margin-right: 12px;
}

/* Unterabschnitte (H3) innerhalb einer Artikelkarte */
.ml-sub-card {
    background: #f9fbff;
    border: 1px solid #e3efff;
    border-radius: 10px;
    padding: 25px;
    width: 100%;
    margin-bottom: 20px;
}
.ml-sub-card h3 {
    margin-top: 0;
}
.ml-sub-card p:last-child {
    margin-bottom: 0;
}

/* Lange Listen: Karten lueckenlos in 2 Spalten stapeln */
.ml-masonry {
    column-count: 2;
    column-gap: 30px;
    margin: 10px 0 20px;
}
.ml-masonry .ml-sub-card {
    display: inline-block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
@media (max-width: 767.98px) {
    .ml-masonry {
        column-count: 1;
    }
}

/* Fliesstext statt Blocksatz: keine gedehnten Wortabstaende (Theme setzt sonst justify) */
p,
.cybersicherheit ul li,
.cyberbedrohung ol li {
    text-align: left;
    text-justify: auto;
}

/* Startseite: Hero nicht unter dem fixierten Header verstecken */
.banner {
    padding-top: 100px;
}
.banner .row {
    min-height: calc(100vh - 100px);
}

/* Zentrierte Bereiche: Absaetze mittig (Fliesstext-Regel oben gilt nur fuer normalen Text) */
.tc p,
.ml-card-feature p,
.ml-card-price p {
    text-align: center;
}

/* Preiskarten: Leistungsliste als linksbuendiger Block, Haken exakt untereinander */
.ml-card-price ul {
    display: inline-block;
    text-align: left;
}
.ml-card-price ul li {
    display: block;
    text-align: left;
}

/* Blog: Karte mit Bild oben, Titel, Teaser und Button unten buendig */
.ml-card-post {
    display: flex;
    flex-direction: column;
}
.ml-card-post .btn-large {
    margin-top: auto;
    align-self: flex-start;
}
.ml-card-post p {
    margin-bottom: 20px;
}
.ml-card-img {
    display: block;
    margin: -30px -30px 20px;
    height: 220px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.ml-card-img img,
.ml-blog-carousel .h2-single-blog .img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.ml-post-title {
    font-size: 18px !important;
    line-height: 26px;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 10px !important;
}
.ml-post-title a {
    color: #071d50;
    text-decoration: none;
}
@media (max-width: 767.98px) {
    .ml-card-img {
        margin: -20px -20px 15px;
    }
}

/* Startseite: Blog-Karussell mit gleich hohen Karten */
.ml-blog-carousel .owl-stage {
    display: flex;
}
.ml-blog-carousel .owl-item {
    display: flex;
}
.ml-blog-carousel .owl-item .item {
    display: flex;
    width: 100%;
}
.ml-blog-carousel .h2-single-blog {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* =========================================================
   Farbakzente aus dem Logo
   Navy #003060 | Blau #0090f0 | Cyan #00b0f0 | Hellblau #c0e0f0
   ========================================================= */

/* Karten: farbige Oberkante, im Raster abwechselnd in den Logofarben */
.ml-card {
    border-top: 4px solid #0090f0;
}
.ml-card-grid > [class*="col-"]:nth-child(4n+1) > .ml-card { border-top-color: #003060; }
.ml-card-grid > [class*="col-"]:nth-child(4n+2) > .ml-card { border-top-color: #0090f0; }
.ml-card-grid > [class*="col-"]:nth-child(4n+3) > .ml-card { border-top-color: #00b0f0; }
.ml-card-grid > [class*="col-"]:nth-child(4n+4) > .ml-card { border-top-color: #4fc3f7; }
.ml-card-post,
.ml-card[style*="padding:0"] {
    border-top: none;
}

/* Icons im Farbverlauf-Kreis */
.ml-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 26px !important;
    color: #fff;
    background: linear-gradient(135deg, #003060 0%, #0090f0 100%);
    box-shadow: 0 6px 14px rgba(0, 144, 240, 0.25);
}
.ml-card-grid > [class*="col-"]:nth-child(4n+2) .ml-card-icon { background: linear-gradient(135deg, #0090f0 0%, #00b0f0 100%); }
.ml-card-grid > [class*="col-"]:nth-child(4n+3) .ml-card-icon { background: linear-gradient(135deg, #00b0f0 0%, #4fc3f7 100%); }
.ml-card-grid > [class*="col-"]:nth-child(4n+4) .ml-card-icon { background: linear-gradient(135deg, #003060 0%, #00b0f0 100%); }
.ml-sub-card .ml-card-icon {
    width: 44px;
    height: 44px;
    font-size: 18px !important;
}

/* Ablauf-Nummern im Verlauf */
.ml-step-num {
    background: linear-gradient(135deg, #003060 0%, #00b0f0 100%);
    box-shadow: 0 4px 10px rgba(0, 144, 240, 0.25);
}

/* Abschnittsueberschriften mit farbigem Akzentbalken */
h2.mt30::after,
.ml-card h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    margin-top: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, #003060, #00b0f0);
}
.tc h2::after,
h2.tc::after {
    margin-left: auto;
    margin-right: auto;
}

/* Buttons im Logo-Verlauf */
.btn-large {
    background: linear-gradient(135deg, #003060 0%, #0090f0 100%) !important;
    border: none;
    box-shadow: 0 6px 14px rgba(0, 48, 96, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 144, 240, 0.3);
}

/* Preiskarten: Preis in Navy, mittleres Paket hervorgehoben */
.ml-card-price .ml-price {
    color: #003060;
}
.ml-card-price .ml-price sup,
.ml-card-price .ml-price span {
    color: #0090f0;
}
.ml-card-grid > [class*="col-"]:nth-child(2):nth-last-child(2) > .ml-card-price {
    background: linear-gradient(180deg, #eaf6fd 0%, #ffffff 60%);
    box-shadow: 0 10px 24px rgba(0, 144, 240, 0.18);
}

/* Kacheln und Unterkarten mit Logo-Hellblau */
.ml-mini-card {
    background: linear-gradient(135deg, #eaf6fd 0%, #f7fbff 100%);
    border: 1px solid #c0e0f0;
    border-left: 4px solid #00b0f0;
}
.ml-mini-card i {
    color: #0090f0;
}
.ml-sub-card {
    background: #f7fbff;
    border: 1px solid #c0e0f0;
    border-left: 4px solid #0090f0;
}
.ml-masonry .ml-sub-card:nth-child(odd) {
    border-left-color: #00b0f0;
}

/* Blog-Karten: Titel-Hover in Logo-Blau */
.ml-post-title a:hover {
    color: #0090f0;
}

/* Erste Sektion nicht unter dem fixierten Header verstecken */
.ml-page-top {
    padding-top: 90px;
}

/* Interne Linkkarten */
.ml-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ml-card-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 144, 240, 0.2);
}
.ml-card-link .ml-card-icon {
    margin-bottom: 15px;
}
.ml-card-link-title {
    display: block;
    color: #003060;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 8px;
}
.ml-card-link-text {
    display: block;
    color: #636363;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 15px;
}
.ml-card-link-more {
    margin-top: auto;
    color: #0090f0;
    font-weight: 600;
    font-size: 15px;
}
.ml-card-link:hover .ml-card-link-more {
    color: #003060;
}

/* Animationen der Startseite: Standbild (Handy) bzw. Lottie (ab Tablet), feste Hoehe gegen Layout-Spruenge */
.ml-anim img {
    display: block;
    width: 100%;
    height: auto;
}
@media (min-width: 768px) {
    .ml-anim {
        height: 430px;
    }
    .ml-anim img {
        height: 100%;
        object-fit: contain;
    }
}

/* Schreibmaschinen-Zeile: Platz reservieren, damit der Text darunter nicht springt */
.banner .typewriter {
    min-height: 1.4em;
}
@media (max-width: 767.98px) {
    .banner .typewriter {
        min-height: 2.8em;
    }
}

/* Lokale Poppins mit masseglicher Ersatzschrift (gegen Layout-Spruenge beim Laden) */
html, body, div, a, h1, h2, h3, h4, h5, h6, p, span, input, textarea, select, label, blockquote, pre, abbr, address, cite, code, form, b, strong, i, em, article, aside, details, figcaption, figure, footer, header, nav, output, section, ol, ul, li, button, input[type="button"], input[type="submit"], table {
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
}

/* Barrierefreiheit: kontrastreiches Logo-Blau fuer kleine Texte (#0072bc = 5:1 auf Weiss) */
h3,
.typewriter span,
.typewriter-text,
.c-blue,
h2 span,
p span,
.ml-price-note,
.ml-card-link-more {
    color: #0072bc !important;
}
.view-btn {
    background: #0072bc !important;
}
/* Links im Fliesstext erkennbar machen (nicht nur ueber die Farbe) */
p a:not(.btn-large),
.ml-card-content li a {
    color: #0072bc;
    text-decoration: underline;
    text-underline-offset: 2px;
}
p a:not(.btn-large):hover {
    color: #003060;
}

/* Ehemalige h4 der Startseite (jetzt h3 fuer korrekte Ueberschriften-Reihenfolge), Optik unveraendert */
h3.ml-h4 {
    color: #071d50 !important;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 15px !important;
}
/* Kontrast: Blog-Datum und Abschlussleiste */
.date {
    color: #0072bc !important;
}
.btm-bar a {
    background: linear-gradient(135deg, #003060 0%, #0072bc 100%) !important;
}

/* Kontaktseite: Vertrauenspunkte am Formular */
.ml-trust {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.ml-trust li {
    display: flex;
    align-items: center;
    color: #003060;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 10px;
    text-align: left;
}
.ml-trust li::after,
.ml-trust li::before {
    display: none !important;
}
.ml-trust i {
    color: #fff;
    background: linear-gradient(135deg, #003060 0%, #0090f0 100%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 12px;
    flex-shrink: 0;
}