/*

Theme Name: Milobor Clean

Author: Boris Milo

Version: 2.2 BAZ STYLE HEADER

*/



/* =========================

   RESET

========================= */



* {

    box-sizing: border-box;

}



html,

body {

    margin: 0;

    padding: 0;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    background: #f4f1ee;

    color: #111111;

}



a {

    color: inherit;

    text-decoration: none;

}



img {

    max-width: 100%;

    height: auto;

}



/* =========================

   HEADER BAZ STYLE

========================= */



.milobor-header {

    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid #dddddd;

}



/* schwarze obere Linie */

.milobor-topbar {

    width: 100%;

    background: #111111;

    color: #ffffff;

    font-size: 12px;

}



.milobor-topbar-inner {

    width: min(1320px, calc(100vw - 48px));

    margin: 0 auto;

    padding: 7px 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Logo Bereich wie Zeitung */

.milobor-header-main {

    width: min(1320px, calc(100vw - 48px));

    margin: 0 auto;

    padding: 34px 0 20px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    border-bottom: 1px solid #d8d8d8;

}



.milobor-brand {

    display: flex;

    align-items: flex-end;

    gap: 14px;

}



.milobor-logo {

    width: 56px;

    height: auto;

    display: block;

}



.milobor-brand-text {

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}



.milobor-title {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 38px;

    line-height: 0.95;

    font-weight: 700;

    letter-spacing: -1px;

    color: #111111;

}



.milobor-subtitle {

    margin-top: 8px;

    padding-bottom: 7px;

    border-bottom: 5px solid #b02020;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2.1px;

    text-transform: uppercase;

    color: #b02020;

}



/* =========================

   WORDPRESS MENU BAZ STYLE

========================= */



.milobor-nav {

    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid #d8d8d8;

    position: relative;

    z-index: 9999;

}



.milobor-nav-inner {

    width: min(1320px, calc(100vw - 48px));

    margin: 0 auto;

    display: flex;

    justify-content: flex-start;

    align-items: center;

}



/* WP menu reset */

.milobor-menu,

.milobor-menu ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



.milobor-menu {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 0;

}



.milobor-menu li {

    list-style: none;

    position: relative;

}



.milobor-menu > li > a {

    display: block;

    padding: 16px 28px 16px 0;

    font-size: 17px;

    font-weight: 500;

    line-height: 1;

    color: #111111;

    white-space: nowrap;

}



.milobor-menu > li > a:hover {

    color: #b02020;

}



/* Dropdown Pfeil */

.milobor-menu > li.menu-item-has-children > a::after {

    content: " ▾";

    font-size: 12px;

    color: #b02020;

}



/* Dropdown versteckt */

.milobor-menu .sub-menu {

    display: none !important;

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 270px;

    background: #ffffff;

    border: 1px solid #dddddd;

    border-top: 4px solid #b02020;

    box-shadow: 0 18px 45px rgba(0,0,0,0.12);

    padding: 8px 0;

    z-index: 99999;

}



/* Dropdown anzeigen */

.milobor-menu li:hover > .sub-menu {

    display: block !important;

}



.milobor-menu .sub-menu li {

    width: 100%;

    border-bottom: 1px solid #eeeeee;

}



.milobor-menu .sub-menu li:last-child {

    border-bottom: none;

}



.milobor-menu .sub-menu a {

    display: block;

    padding: 13px 18px;

    font-size: 15px;

    font-weight: 500;

    color: #111111;

    background: #ffffff;

    white-space: nowrap;

}



.milobor-menu .sub-menu a:hover {

    background: #f8f4f2;

    color: #b02020;

}



/* zweite Dropdown Ebene */

.milobor-menu .sub-menu .sub-menu {

    top: -12px;

    left: 100%;

}



/* =========================

   FRONT PAGE

========================= */



.mb-front {

    width: 100%;

    background: #f4f1ee;

    padding: 38px 24px 90px;

}



.mb-hero-wrap {

    width: min(1320px, calc(100vw - 48px));

    margin: 0 auto 28px;

    background: #e9e5e0;

    border-radius: 28px;

    padding: 22px;

}



.mb-hero {

    background: #ffffff;

    border-radius: 22px;

    padding: 22px;

    display: grid;

    grid-template-columns: 0.85fr 1.65fr;

    gap: 34px;

    align-items: center;

}



.mb-hero-img img {

    width: 100%;

    height: 430px;

    object-fit: cover;

    display: block;

    border-radius: 18px;

}



.mb-kicker {

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 4px;

    color: #b02020;

    margin-bottom: 14px;

    text-transform: uppercase;

}



.mb-hero h1 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 4.2vw, 68px);

    line-height: 1.02;

    font-weight: 500;

    margin: 0 0 18px;

    max-width: 760px;

}



.mb-hero p {

    font-size: 17px;

    line-height: 1.55;

    color: #222222;

    margin: 0;

}



.mb-meta {

    font-size: 13px;

    font-weight: 600;

    color: #666666;

    margin-bottom: 18px;

}



/* =========================

   FRONT CARDS

========================= */



.mb-card-grid {

    width: min(1320px, calc(100vw - 48px));

    margin: 0 auto 34px;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 22px;

}



.mb-card {

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 12px 32px rgba(0,0,0,0.05);

}



.mb-card-img img {

    width: 100%;

    height: 210px;

    object-fit: cover;

    display: block;

}



.mb-card-body {

    padding: 18px 18px 22px;

}



.mb-card-body .mb-kicker {

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 10px;

}



.mb-card h2 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;

    line-height: 1.18;

    font-weight: 500;

    margin: 0;

}



/* =========================

   FRONT MORE ARTICLES

========================= */



.mb-more-wrap {

    width: min(1320px, calc(100vw - 48px));

    margin: 0 auto;

    background: #ffffff;

    border-radius: 22px;

    border-top: 4px solid #111111;

    padding: 46px 48px 28px;

}



.mb-more-head {

    display: grid;

    grid-template-columns: 1fr 1.1fr;

    gap: 30px;

    align-items: end;

    border-bottom: 1px solid #dddddd;

    padding-bottom: 26px;

    margin-bottom: 10px;

}



.mb-more-head h2 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 56px;

    line-height: 1;

    font-weight: 500;

    margin: 0;

}



.mb-more-head p {

    font-size: 16px;

    color: #555555;

    margin: 0 0 8px;

}



.mb-more-item {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 30px;

    align-items: center;

    border-bottom: 1px solid #e4e4e4;

    padding: 30px 0;

}



.mb-more-item h3 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 38px;

    line-height: 1.05;

    font-weight: 700;

    color: #b02020;

    margin: 0 0 10px;

}



.mb-more-item p {

    font-size: 15px;

    line-height: 1.55;

    color: #333333;

    max-width: 760px;

    margin: 0;

}



.mb-read {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 92px;

    height: 36px;

    border: 1px solid #e5bcbc;

    border-radius: 999px;

    color: #b02020;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.4px;

    background: #fff8f8;

}



/* =========================

   SINGLE POST

========================= */



.mb-single-page {

    width: 100%;

    background: #f4f1ee;

    padding: 42px 24px 180px;

    margin-top: 38px;

}



.mb-single-layout {

    width: min(1320px, calc(100vw - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: minmax(0, 1fr) 360px;

    gap: 42px;

    align-items: start;

}



.mb-single-article {

    background: #ffffff;

    border-radius: 28px;

    padding: 64px 72px;

    box-shadow: 0 18px 50px rgba(0,0,0,0.04);

}



.mb-single-header h1 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(46px, 4.4vw, 76px);

    line-height: 1.02;

    font-weight: 500;

    margin: 0 0 22px;

    color: #111111;

}



.mb-single-meta {

    font-size: 14px;

    color: #555555;

    margin-bottom: 34px;

}



.mb-single-content {

    font-size: 20px;

    line-height: 1.82;

    color: #202020;

}



.mb-single-content p {

    margin: 0 0 30px;

}



.mb-single-content h2 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 38px;

    line-height: 1.2;

    font-weight: 500;

    margin: 54px 0 22px;

    color: #111111;

    border-left: 3px solid #b02020;

    padding-left: 18px;

}



.mb-single-content h3 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;

    margin: 42px 0 18px;

}



.mb-single-content p:first-of-type::first-letter {

    float: left;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 82px;

    line-height: 0.85;

    padding-right: 12px;

    color: #b02020;

}



/* =========================

   SINGLE SIDEBAR

========================= */



.mb-single-sidebar {

    position: relative;

    top: auto;

    align-self: start;

}



.mb-side-box {

    background: #ffffff;

    border-radius: 24px;

    padding: 28px;

    margin-bottom: 28px;

    box-shadow: 0 18px 50px rgba(0,0,0,0.04);

}



.mb-side-box h2 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;

    line-height: 1.1;

    margin: 0 0 24px;

}



.mb-impuls-box p {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 26px;

    line-height: 1.12;

    font-style: italic;

    margin: 0;

}



.mb-side-post {

    border: 1px solid #eeeeee;

    border-radius: 18px;

    overflow: hidden;

    margin-bottom: 22px;

    background: #ffffff;

}



.mb-side-post img {

    width: 100%;

    height: 170px;

    object-fit: cover;

    display: block;

}



.mb-side-post h3 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 19px;

    line-height: 1.2;

    font-weight: 500;

    margin: 14px 16px 8px;

    color: #8f1d1d;

}



.mb-side-post span {

    display: block;

    font-size: 13px;

    color: #777777;

    margin: 0 16px 16px;

}



.mb-archive-list,

.mb-comment-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.mb-archive-list li,

.mb-comment-list li {

    border-bottom: 1px solid #eeeeee;

    padding: 12px 0;

    font-size: 15px;

}



.mb-archive-list a,

.mb-comment-list a {

    color: #111111;

}



/* =========================

   FOOTER

========================= */



.milobor-footer {

    background: #ffffff;

    border-top: 1px solid #eeeeee;

    padding: 22px 24px;

    font-size: 13px;

    color: #555555;

}



/* =========================

   WORDPRESS WRAPPER FIX

========================= */



body.home,

body.blog,

body.single {

    background: #f4f1ee;

}



body.home .site,

body.home #page,

body.home .site-content,

body.home #content,

body.home .content-area,

body.home #primary,

body.blog .site,

body.blog #page,

body.blog .site-content,

body.blog #content,

body.blog .content-area,

body.blog #primary,

body.single .site,

body.single #page,

body.single .site-content,

body.single #content,

body.single .content-area,

body.single #primary {

    width: 100%;

    max-width: none;

    margin: 0;

    padding: 0;

}



/* =========================

   RESPONSIVE

========================= */



@media (max-width: 1100px) {

    .mb-hero {

        grid-template-columns: 1fr;

    }



    .mb-hero-img img {

        height: 360px;

    }



    .mb-card-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .mb-more-head {

        grid-template-columns: 1fr;

    }



    .mb-single-layout {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 900px) {

    .milobor-topbar-inner,

    .milobor-header-main,

    .milobor-nav-inner {

        width: calc(100vw - 32px);

    }



    .milobor-header-main {

        align-items: flex-start;

        padding: 24px 0 18px;

    }



    .milobor-title {

        font-size: 32px;

    }



    .milobor-subtitle {

        font-size: 10px;

        letter-spacing: 1.4px;

        white-space: normal;

    }



    .milobor-menu {

        flex-direction: column;

        align-items: flex-start;

        width: 100%;

    }



    .milobor-menu > li {

        width: 100%;

    }



    .milobor-menu > li > a {

        padding: 14px 0;

    }



    .milobor-menu .sub-menu {

        position: static;

        display: block !important;

        box-shadow: none;

        border: none;

        border-left: 3px solid #b02020;

        margin-left: 12px;

        min-width: 0;

        width: calc(100% - 12px);

    }



    .milobor-menu .sub-menu a {

        white-space: normal;

    }

}



@media (max-width: 700px) {

    .mb-hero-wrap,

    .mb-card-grid,

    .mb-more-wrap,

    .mb-single-layout {

        width: calc(100vw - 28px);

    }



    .mb-front,

    .mb-single-page {

        padding: 24px 14px 60px;

        margin-top: 24px;

    }



    .milobor-logo {

        width: 48px;

    }



    .milobor-title {

        font-size: 30px;

    }



    .mb-hero-wrap {

        padding: 12px;

        border-radius: 20px;

    }



    .mb-hero {

        padding: 14px;

        border-radius: 16px;

    }



    .mb-hero-img img {

        height: 260px;

    }



    .mb-hero h1 {

        font-size: 36px;

    }



    .mb-card-grid {

        grid-template-columns: 1fr;

    }



    .mb-more-wrap {

        padding: 30px 22px;

    }



    .mb-more-head h2 {

        font-size: 42px;

    }



    .mb-more-item {

        grid-template-columns: 1fr;

    }



    .mb-more-item h3 {

        font-size: 30px;

    }



    .mb-single-article {

        padding: 34px 24px;

        border-radius: 22px;

    }



    .mb-single-header h1 {

        font-size: 38px;

    }



    .mb-single-content {

        font-size: 18px;

    }

}



/* HERO H1 DEZENTER */



.mb-hero h1 {

    font-size: clamp(32px, 2.4vw, 44px); /* deutlich kleiner */

    line-height: 1.15;

    font-weight: 500;

    color: #1f4e8c; /* weniger knallig als aktuell */

    letter-spacing: -0.3px;

}



/* Meta etwas feiner */

.mb-meta {

    font-size: 12px;

    color: #777;

}



/* Text darunter ruhiger */

.mb-hero p {

    font-size: 15px;

    color: #444;

    max-width: 520px;

}



/* SINGLE H1 DEZENTER */



.mb-single-header h1 {

    font-size: clamp(34px, 3vw, 52px);

    line-height: 1.12;

    font-weight: 400;

    letter-spacing: -0.6px;

    color: #111111;

    margin-bottom: 18px;

}



.mb-single-meta {

    font-size: 12px;

    color: #777777;

    margin-bottom: 34px;

}



.mb-single-content h2:first-child,

.mb-single-content h2:first-of-type {

    font-size: 28px;

    line-height: 1.35;

    font-weight: 700;

    margin-top: 24px;

    margin-bottom: 26px;

}



/* SINGLE H1 DEZENT BLAU */



.mb-single-header h1 {

    font-size: clamp(34px, 3vw, 52px);

    line-height: 1.12;

    font-weight: 400;

    letter-spacing: -0.6px;

    color: #2f5d9a; /* dezentes Blau */

    margin-bottom: 18px;

}



/* Meta noch feiner */

.mb-single-meta {

    font-size: 12px;

    color: #777;

}



/* Optional: leichter Hover für Links im Artikel */

.mb-single-content a {

    color: #2f5d9a;

}



.mb-single-content a:hover {

    color: #b02020;

}





/* SINGLE ARTIKEL ÜBERSCHRIFTEN FINAL */



body.single article.mb-single-article h2,

body.single article.mb-single-article .mb-single-content h2,

body.single article.mb-single-article .entry-content h2,

body.single .mb-single-content > h2,

body.single .wp-block-heading,

body.single h2.wp-block-heading {

    font-family: Georgia, "Times New Roman", serif !important;

    font-size: 28px !important;

    line-height: 1.35 !important;

    font-weight: 500 !important;

    color: #666666 !important;

    margin: 42px 0 18px !important;

    border-left: 2px solid #dddddd !important;

    padding-left: 14px !important;

}









/* WEITERE ARTIKEL DEZENTER */



.mb-more-wrap {

    border-top: 2px solid #222 !important;

}



.mb-more-head h2 {

    font-size: 42px !important;

    font-weight: 400 !important;

    color: #2f5d9a !important;

}



.mb-more-head p {

    font-size: 14px !important;

    color: #777 !important;

}



.mb-more-item h3 {

    font-size: 28px !important;

    line-height: 1.18 !important;

    font-weight: 500 !important;

    color: #555 !important;

    letter-spacing: -0.2px !important;

}



.mb-more-item p {

    font-size: 14px !important;

    line-height: 1.55 !important;

    color: #666 !important;

}



.mb-more-item {

    padding: 24px 0 !important;

}



.mb-read {

    color: #666 !important;

    border-color: #ddd !important;

    background: #fff !important;

}





/* HEADER FINAL FIX */



.milobor-topbar-inner,

.milobor-header-main,

.milobor-nav-inner {

    width: min(1500px, calc(100vw - 64px)) !important;

    max-width: 1500px !important;

}



.milobor-header-main {

    padding-top: 34px !important;

    padding-bottom: 20px !important;

}



.milobor-title {

    color: #111111 !important;

}



.milobor-subtitle {

    color: #b02020 !important;

}



/* AUSRICHTUNG OHNE DESIGN ZU ZERSTÖREN */



.milobor-topbar-inner,

.milobor-header-main,

.milobor-nav-inner,

.mb-hero-wrap,

.mb-card-grid,

.mb-more-wrap,

.mb-single-layout {

    width: min(1320px, calc(100vw - 48px)) !important;

    margin-left: auto !important;

    margin-right: auto !important;

}



.mb-archive-post-list {

    margin-top: 30px;

}



.mb-pagination {

    margin-top: 40px;

}



.mb-pagination .nav-links {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.mb-pagination a,

.mb-pagination span {

    padding: 9px 14px;

    border: 1px solid #ddd;

    border-radius: 999px;

    font-size: 13px;

}



.mb-pagination .current {

    background: #2f5d9a;

    color: #fff;

    border-color: #2f5d9a;

}



.mb-tag-cloud a {

    display: inline-block;

    margin: 4px 6px 6px 0;

    padding: 7px 10px;

    border: 1px solid #eee;

    border-radius: 999px;

    font-size: 12px !important;

    color: #555;

}





/* CARD TITEL AUF 3 ZEILEN BEGRENZEN */



.mb-card h2 a {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* CARD TITEL SAUBER BEGRENZEN */



.mb-card h2,

.mb-card h2 a {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;



    overflow: hidden;

    text-overflow: ellipsis;



    line-height: 1.25;

    max-height: 3.75em;



    overflow-wrap: anywhere;

    word-break: normal;

    hyphens: auto;

}