/* ==================================================
   machen-wir-dir.de BLOG
================================================== */

:root {
   --blue: #1769aa;
   --blue-dark: #0f4e82;
   --navy: #172331;
   --text: #283542;
   --muted: #687786;
   --line: #dfe5ea;
   --soft: #f4f7f9;
   --white: #ffffff;
   --green-soft: #edf8f1;
   --green: #24713a;
   --max: 1120px;
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   background: #fff;
   color: var(--text);
   font-family:
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif;
   line-height: 1.6;
}

a {
   color: inherit;
}

img {
   max-width: 100%;
}

.blog-shell,
.site-header-inner,
.blog-article {
   width: min(calc(100% - 40px), var(--max));
   margin-left: auto;
   margin-right: auto;
}


/* HEADER */

.site-header {
   position: sticky;
   top: 0;
   z-index: 20;
   border-bottom: 1px solid rgba(220, 227, 233, .9);
   background: rgba(255,255,255,.96);
   backdrop-filter: blur(12px);
}

.site-header-inner {
   min-height: 76px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.site-brand {
   color: var(--blue);
   font-size: 20px;
   font-weight: 900;
   text-decoration: none;
   letter-spacing: -.02em;
}

.site-nav {
   display: flex;
   align-items: center;
   gap: 24px;
}

.site-nav a {
   color: #4f5c68;
   font-weight: 700;
   text-decoration: none;
}

.site-nav a:hover,
.site-nav a.is-active {
   color: var(--blue);
}


/* HERO */

.blog-hero {
   padding: 88px 0 68px;
   background:
      radial-gradient(
         circle at 88% 15%,
         rgba(23,105,170,.10),
         transparent 34%
      ),
      linear-gradient(
         180deg,
         #f8fbfd 0%,
         #fff 100%
      );
}

.eyebrow {
   display: inline-block;
   margin-bottom: 12px;
   color: var(--blue);
   font-size: 12px;
   font-weight: 900;
   letter-spacing: .13em;
   text-transform: uppercase;
}

.blog-hero h1 {
   max-width: 780px;
   margin: 0;
   color: var(--navy);
   font-size: clamp(38px, 6vw, 70px);
   line-height: 1.02;
   letter-spacing: -.045em;
}

.blog-hero p {
   max-width: 700px;
   margin: 24px 0 0;
   color: var(--muted);
   font-size: 20px;
}


/* LIST */

.blog-list-section {
   padding-top: 34px;
   padding-bottom: 90px;
}

.article-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 28px;
}

.article-card {
   overflow: hidden;
   border: 1px solid var(--line);
   border-radius: 20px;
   background: #fff;
   box-shadow: 0 12px 36px rgba(25,48,70,.06);
}

.article-card-image {
   display: block;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: var(--soft);
}

.article-card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .25s ease;
}

.article-card:hover .article-card-image img {
   transform: scale(1.015);
}

.article-placeholder {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--blue);
   font-weight: 900;
}

.article-card-body {
   padding: 24px;
}

.article-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 16px;
   color: #7b8792;
   font-size: 12px;
   font-weight: 700;
}

.article-meta span {
   color: var(--blue);
}

.article-card h2 {
   margin: 12px 0 10px;
   color: var(--navy);
   font-size: 25px;
   line-height: 1.18;
   letter-spacing: -.025em;
}

.article-card h2 a {
   text-decoration: none;
}

.article-card p {
   margin: 0 0 20px;
   color: var(--muted);
}

.read-more {
   color: var(--blue);
   font-weight: 800;
   text-decoration: none;
}


/* ARTICLE */

.blog-article {
   max-width: 900px;
   padding-top: 62px;
   padding-bottom: 96px;
}

.back-link {
   display: inline-block;
   margin-bottom: 26px;
   color: var(--blue);
   font-weight: 800;
   text-decoration: none;
}

.article-meta-large {
   margin-bottom: 15px;
}

.article-header h1 {
   max-width: 850px;
   margin: 0;
   color: var(--navy);
   font-size: clamp(38px, 6vw, 66px);
   line-height: 1.03;
   letter-spacing: -.045em;
}

.article-lead {
   max-width: 760px;
   margin: 24px 0 0;
   color: var(--muted);
   font-size: 21px;
   line-height: 1.55;
}

.article-hero-image {
   margin: 42px 0;
}

.article-hero-image img {
   display: block;
   width: 100%;
   border-radius: 20px;
}

.article-content {
   max-width: 760px;
   margin: 0 auto;
   font-size: 19px;
   line-height: 1.8;
}

.article-content p {
   margin: 0 0 26px;
}

.article-content h2 {
   margin: 50px 0 18px;
   color: var(--navy);
   font-size: 32px;
   line-height: 1.2;
   letter-spacing: -.025em;
}

.article-content h3 {
   margin: 38px 0 15px;
   color: var(--navy);
   font-size: 24px;
}

.article-content ul {
   margin: 0 0 28px;
   padding-left: 25px;
}

.article-content li {
   margin-bottom: 9px;
}

.article-cta {
   max-width: 760px;
   margin: 54px auto 0;
   padding: 28px;
   border: 1px solid #cfe1ee;
   border-radius: 18px;
   background: #f2f8fc;
}

.article-cta strong {
   color: var(--navy);
   font-size: 22px;
}

.article-cta p {
   margin: 10px 0 20px;
}

.cta-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 46px;
   padding: 0 18px;
   border-radius: 9px;
   background: var(--blue);
   color: #fff;
   font-weight: 800;
   text-decoration: none;
}

.cta-button:hover {
   background: var(--blue-dark);
}


/* FOOTER */

.site-footer {
   border-top: 1px solid var(--line);
   background: #f8fafb;
}

.site-footer .blog-shell {
   min-height: 94px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   color: #77838e;
   font-size: 13px;
}

.site-footer div div {
   display: flex;
   gap: 18px;
}

.site-footer a {
   text-decoration: none;
}


/* EMPTY / 404 */

.empty-state,
.not-found {
   padding: 80px 0;
   text-align: center;
}

.empty-state strong,
.not-found h1 {
   color: var(--navy);
   font-size: 30px;
}


/* RESPONSIVE */

@media (max-width: 760px) {

   .article-grid {
      grid-template-columns: 1fr;
   }

   .site-header-inner {
      min-height: 68px;
   }

   .site-nav {
      gap: 14px;
   }

   .blog-hero {
      padding-top: 62px;
   }

   .site-footer .blog-shell {
      align-items: flex-start;
      flex-direction: column;
      justify-content: center;
      padding-top: 24px;
      padding-bottom: 24px;
   }
}