@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;background:#F4F5F7}
body{font-family:'DM Sans',sans-serif;color:#1C1D1C;background:#F4F5F7;line-height:1.6;-webkit-font-smoothing:antialiased}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.2;color:#1C1D1C}
p{margin-bottom:1rem;line-height:1.6}
p:last-child{margin-bottom:0}

.site-wrapper{max-width:1440px;margin:0 auto;overflow:hidden}

/* ============================
   HEADER
   ============================ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:999;background:#F4F5F7;border-bottom:1px solid #1C1D1C}
.header-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:64px}
.header-logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;color:#1C1D1C;letter-spacing:0.04em;text-decoration:none}
.header-logo:hover{text-decoration:none;color:#2A405A}
.nav-list{display:flex;align-items:center;list-style:none;gap:0}
.nav-list li a{display:block;padding:0 18px;font-size:0.875rem;font-weight:500;color:#1C1D1C;border-left:1px solid transparent;height:64px;line-height:64px;transition:background 0.2s,color 0.2s}
.nav-list li:first-child a{border-left:1px solid #1C1D1C}
.nav-list li a:hover{background:#2A405A;color:#F4F5F7;text-decoration:none}
.nav-list li a.active{background:#2A405A;color:#F4F5F7}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:24px;height:2px;background:#1C1D1C;transition:all 0.3s}

/* ============================
   PAGE BODY OFFSET
   ============================ */
.page-body{padding-top:64px}

/* ============================
   GRID SYSTEM
   ============================ */
.container{max-width:1440px;margin:0 auto;padding:0 40px}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:0}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}

/* ============================
   MODULE SYSTEM
   ============================ */
.module{border:1px solid #1C1D1C;padding:48px 40px}
.module--dark{background:#2A405A;color:#F4F5F7}
.module--dark h1,.module--dark h2,.module--dark h3,.module--dark p,.module--dark .index-label{color:#F4F5F7}
.module--sand{background:#D9B791;color:#1C1D1C}
.module--light{background:#F4F5F7;color:#1C1D1C}
.module--flush{padding:0;overflow:hidden}
.module--flush img{width:100%;height:100%;object-fit:cover}
.module--border-0{border:0}

.index-label{font-family:'Space Grotesk',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0.15em;color:#2A405A;margin-bottom:12px;display:block}
.module--dark .index-label{color:#D9B791}

/* ============================
   HERO
   ============================ */
.hero-section{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #1C1D1C}
.hero-text{padding:80px 60px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid #1C1D1C}
.hero-image{height:520px;overflow:hidden}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-h1{font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.1;margin-bottom:1.5rem}
.hero-lead{font-size:1.05rem;color:#2A405A;font-weight:500;margin-bottom:2rem;max-width:480px}
.btn-editorial{display:inline-block;padding:12px 28px;border:1px solid #1C1D1C;font-family:'Space Grotesk',sans-serif;font-size:0.875rem;font-weight:600;letter-spacing:0.06em;background:#F4F5F7;color:#1C1D1C;transition:background 0.2s,color 0.2s;cursor:pointer}
.btn-editorial:hover{background:#2A405A;color:#F4F5F7;text-decoration:none}
.btn-editorial--dark{background:#2A405A;color:#F4F5F7;border-color:#2A405A}
.btn-editorial--dark:hover{background:#1C1D1C;color:#F4F5F7;border-color:#1C1D1C}
.btn-editorial--sand{background:#D9B791;color:#1C1D1C;border-color:#D9B791}
.btn-editorial--sand:hover{background:#c9a47e;color:#1C1D1C}

/* ============================
   SECTION LAYOUTS
   ============================ */
.section-strip{border-bottom:1px solid #1C1D1C}
.section-strip--dark{background:#2A405A;border-bottom:1px solid #2A405A}
.section-strip--sand{background:#D9B791;border-bottom:1px solid #D9B791}
.section-inner{max-width:1440px;margin:0 auto}

.mosaic-3{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #1C1D1C}
.mosaic-3 .module{border-bottom:0;border-top:0}
.mosaic-3 .module:not(:last-child){border-right:1px solid #1C1D1C}
.mosaic-3 .module:first-child{border-left:1px solid #1C1D1C}

.mosaic-2{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #1C1D1C}
.mosaic-2 .module{border-bottom:0;border-top:0}
.mosaic-2 .module:first-child{border-left:1px solid #1C1D1C;border-right:1px solid #1C1D1C}
.mosaic-2 .module:last-child{border-right:1px solid #1C1D1C}

.mosaic-2--asymm{display:grid;grid-template-columns:4fr 7fr;border-bottom:1px solid #1C1D1C}
.mosaic-2--asymm .module{border-bottom:0;border-top:0}
.mosaic-2--asymm .module:first-child{border-left:1px solid #1C1D1C;border-right:1px solid #1C1D1C}
.mosaic-2--asymm .module:last-child{border-right:1px solid #1C1D1C}

.mosaic-2--7-4{display:grid;grid-template-columns:7fr 4fr;border-bottom:1px solid #1C1D1C}
.mosaic-2--7-4 .module{border-bottom:0;border-top:0}
.mosaic-2--7-4 .module:first-child{border-left:1px solid #1C1D1C;border-right:1px solid #1C1D1C}
.mosaic-2--7-4 .module:last-child{border-right:1px solid #1C1D1C}

.full-module{border-left:1px solid #1C1D1C;border-right:1px solid #1C1D1C;border-bottom:1px solid #1C1D1C;padding:60px}

/* ============================
   COMPARISON TABLE
   ============================ */
.comparison-table{width:100%;border-collapse:collapse;font-size:0.9rem}
.comparison-table th{background:#2A405A;color:#F4F5F7;padding:14px 20px;text-align:left;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.8rem;letter-spacing:0.08em}
.comparison-table td{padding:14px 20px;border-bottom:1px solid #D9B791;vertical-align:top}
.comparison-table tr:last-child td{border-bottom:0}
.comparison-table tr:nth-child(even) td{background:rgba(217,183,145,0.12)}

/* ============================
   GLOSSARY RAIL
   ============================ */
.glossary-rail{border-left:3px solid #D9B791;padding-left:24px}
.glossary-item{margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid rgba(28,29,28,0.15)}
.glossary-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.glossary-term{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.85rem;letter-spacing:0.08em;color:#2A405A;margin-bottom:6px}
.glossary-def{font-size:0.875rem;color:#1C1D1C;line-height:1.55}

/* ============================
   FAQ STRIP
   ============================ */
.faq-table{width:100%;border-collapse:collapse}
.faq-row{border-bottom:1px solid rgba(28,29,28,0.2)}
.faq-row:last-child{border-bottom:0}
.faq-q{padding:18px 0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.95rem;color:#2A405A}
.faq-a{padding:0 0 18px;font-size:0.9rem;color:#1C1D1C;line-height:1.6;max-width:640px}

/* ============================
   STAT STRIP
   ============================ */
.stat-strip{display:grid;border-bottom:1px solid #1C1D1C}
.stat-strip--4{grid-template-columns:repeat(4,1fr)}
.stat-strip--3{grid-template-columns:repeat(3,1fr)}
.stat-item{padding:36px 32px;border-right:1px solid #1C1D1C;border-left:1px solid #1C1D1C}
.stat-item:not(:first-child){border-left:0}
.stat-number{font-family:'Space Grotesk',sans-serif;font-size:2.5rem;font-weight:700;color:#2A405A;line-height:1;margin-bottom:8px}
.stat-label{font-size:0.85rem;color:#1C1D1C;line-height:1.4}

/* ============================
   TIMELINE
   ============================ */
.timeline{list-style:none;padding:0;margin:0}
.timeline-item{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid rgba(28,29,28,0.15)}
.timeline-item:last-child{border-bottom:0}
.timeline-year{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:#D9B791;padding-top:3px}
.timeline-content h3{font-size:1rem;margin-bottom:6px;font-weight:600}
.timeline-content p{font-size:0.875rem;margin:0;line-height:1.55}

/* ============================
   MATRIX
   ============================ */
.matrix-table{width:100%;border-collapse:collapse}
.matrix-table th{background:#2A405A;color:#F4F5F7;padding:12px 20px;text-align:left;font-family:'Space Grotesk',sans-serif;font-size:0.8rem;letter-spacing:0.08em;font-weight:600}
.matrix-table td{padding:14px 20px;border:1px solid rgba(28,29,28,0.2);font-size:0.875rem;vertical-align:top}
.matrix-table tr:nth-child(odd) td{background:#F4F5F7}
.matrix-table tr:nth-child(even) td{background:rgba(217,183,145,0.1)}
.matrix-table .tag-mythos{color:#c0392b;font-weight:600;font-size:0.75rem;letter-spacing:0.08em}
.matrix-table .tag-fakt{color:#2A405A;font-weight:600;font-size:0.75rem;letter-spacing:0.08em}

/* ============================
   BLOG GRID
   ============================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid #1C1D1C;border-top:1px solid #1C1D1C}
.blog-card{border-right:1px solid #1C1D1C;border-bottom:1px solid #1C1D1C;display:flex;flex-direction:column}
.blog-card-img{height:200px;overflow:hidden}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.blog-card:hover .blog-card-img img{transform:scale(1.03)}
.blog-card-body{padding:28px;flex:1;display:flex;flex-direction:column}
.blog-card-index{font-family:'Space Grotesk',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.15em;color:#D9B791;margin-bottom:10px}
.blog-card-title{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:600;margin-bottom:10px;line-height:1.3}
.blog-card-excerpt{font-size:0.875rem;color:#555;line-height:1.6;flex:1;margin-bottom:20px}
.blog-card-meta{font-size:0.75rem;color:#888;border-top:1px solid rgba(28,29,28,0.15);padding-top:14px;display:flex;justify-content:space-between}

/* ============================
   ARTICLE LAYOUT
   ============================ */
.article-hero{display:grid;grid-template-columns:5fr 6fr;border-bottom:1px solid #1C1D1C;min-height:380px}
.article-hero-text{padding:60px 52px;display:flex;flex-direction:column;justify-content:flex-end;border-right:1px solid #1C1D1C}
.article-hero-img{overflow:hidden}
.article-hero-img img{width:100%;height:100%;object-fit:cover}
.article-meta{font-size:0.8rem;color:#888;margin-bottom:12px;letter-spacing:0.04em}
.article-h1{font-size:clamp(1.6rem,2.8vw,2.6rem);margin-bottom:0}

.article-body-wrap{display:grid;grid-template-columns:7fr 3fr;border-bottom:1px solid #1C1D1C}
.article-main{padding:60px 52px;border-right:1px solid #1C1D1C}
.article-aside{padding:48px 36px}
.article-main h2{font-size:1.4rem;margin:2.5rem 0 1rem;padding-top:0.5rem;border-top:2px solid #D9B791}
.article-main h3{font-size:1.1rem;margin:1.8rem 0 0.8rem;color:#2A405A}
.article-main p{font-size:0.95rem;line-height:1.7;margin-bottom:1.1rem}
.article-main ul{padding-left:1.5rem;margin-bottom:1.2rem}
.article-main ul li{font-size:0.95rem;line-height:1.65;margin-bottom:0.4rem}

/* ============================
   BREADCRUMB
   ============================ */
.breadcrumb-bar{border-bottom:1px solid #1C1D1C;padding:14px 60px;font-size:0.8rem;color:#888;display:flex;align-items:center;gap:8px}
.breadcrumb-bar a{color:#2A405A}
.breadcrumb-bar a:hover{text-decoration:underline}
.breadcrumb-sep{color:#bbb}

/* ============================
   CONTACT FORM
   ============================ */
.form-group{margin-bottom:24px}
.form-label{display:block;font-family:'Space Grotesk',sans-serif;font-size:0.8rem;font-weight:600;letter-spacing:0.08em;color:#2A405A;margin-bottom:8px}
.form-control{width:100%;padding:12px 16px;border:1px solid #1C1D1C;background:#F4F5F7;font-family:'DM Sans',sans-serif;font-size:0.9rem;color:#1C1D1C;outline:none;transition:border-color 0.2s}
.form-control:focus{border-color:#2A405A}
textarea.form-control{resize:vertical;min-height:140px}

/* ============================
   FOOTER
   ============================ */
.site-footer{background:#1C1D1C;color:#F4F5F7;border-top:1px solid #2A405A}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:0;border-bottom:1px solid rgba(244,245,247,0.1)}
.footer-col{padding:48px 40px;border-right:1px solid rgba(244,245,247,0.1)}
.footer-col:last-child{border-right:0}
.footer-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1rem;color:#F4F5F7;margin-bottom:12px}
.footer-tagline{font-size:0.85rem;color:rgba(244,245,247,0.6);line-height:1.6;margin-bottom:0}
.footer-heading{font-family:'Space Grotesk',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:0.15em;color:#D9B791;margin-bottom:20px}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:10px}
.footer-links li a{font-size:0.85rem;color:rgba(244,245,247,0.7);transition:color 0.2s}
.footer-links li a:hover{color:#D9B791;text-decoration:none}
.footer-contact-item{font-size:0.85rem;color:rgba(244,245,247,0.7);margin-bottom:8px;line-height:1.5}
.footer-hours{font-size:0.85rem;color:rgba(244,245,247,0.7);line-height:1.6}
.footer-bottom{padding:20px 40px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.footer-copy{font-size:0.8rem;color:rgba(244,245,247,0.4)}
.footer-disclaimer{font-size:0.8rem;color:rgba(244,245,247,0.5);font-style:italic}

/* ============================
   LEGAL PAGES
   ============================ */
.legal-page{max-width:860px;margin:0 auto;padding:80px 40px}
.legal-page h1{font-size:2rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid #D9B791}
.legal-page h2{font-size:1.2rem;margin:2.5rem 0 0.8rem;color:#2A405A}
.legal-page p{font-size:0.95rem;line-height:1.7;margin-bottom:1rem}
.legal-page ul{padding-left:1.5rem;margin-bottom:1rem}
.legal-page ul li{font-size:0.95rem;line-height:1.65;margin-bottom:0.4rem}
.legal-update{font-size:0.85rem;color:#888;margin-bottom:2rem}

/* ============================
   THANK YOU
   ============================ */
.thankyou-wrap{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:60px 40px}
.thankyou-module{max-width:520px;width:100%;border:1px solid #1C1D1C;padding:60px}
.thankyou-module h1{font-size:1.6rem;margin-bottom:1rem}
.thankyou-note{font-size:0.9rem;color:#555;line-height:1.7;margin-bottom:2rem;padding:16px 20px;background:rgba(217,183,145,0.18);border-left:3px solid #D9B791}

/* ============================
   ABOUT
   ============================ */
.about-text-col{max-width:720px;margin:0 auto;padding:80px 60px}
.about-text-col h1{font-size:2.2rem;margin-bottom:2rem}
.about-text-col h2{font-size:1.2rem;margin:2.5rem 0 0.8rem;color:#2A405A}
.about-text-col p{font-size:0.95rem;line-height:1.7;margin-bottom:1rem}

/* ============================
   404
   ============================ */
.error-wrap{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:60px 40px}
.error-module{max-width:480px;text-align:center;border:1px solid #1C1D1C;padding:60px}
.error-module .error-code{font-family:'Space Grotesk',sans-serif;font-size:5rem;font-weight:700;color:#2A405A;line-height:1}
.error-module h1{font-size:1.4rem;margin:16px 0 12px}
.error-module p{font-size:0.9rem;color:#555;margin-bottom:24px}

/* ============================
   COOKIE BANNER
   ============================ */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#1C1D1C;color:#F4F5F7;border-top:2px solid #2A405A;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cookie-text{font-size:0.85rem;color:rgba(244,245,247,0.85);line-height:1.5;flex:1}
.cookie-text a{color:#D9B791;text-decoration:underline}
.cookie-actions{display:flex;gap:12px;flex-shrink:0}
.cookie-btn{padding:10px 24px;font-family:'Space Grotesk',sans-serif;font-size:0.8rem;font-weight:600;letter-spacing:0.06em;cursor:pointer;border:1px solid #F4F5F7;background:transparent;color:#F4F5F7;transition:all 0.2s}
.cookie-btn--accept{background:#D9B791;color:#1C1D1C;border-color:#D9B791}
.cookie-btn--accept:hover{background:#c9a47e}
.cookie-btn:hover{background:rgba(244,245,247,0.1)}

/* ============================
   SECTION TITLE
   ============================ */
.section-title-bar{border-bottom:1px solid #1C1D1C;border-left:1px solid #1C1D1C;border-right:1px solid #1C1D1C;padding:36px 60px;display:flex;align-items:baseline;gap:24px;background:#F4F5F7}
.section-title-bar h2{font-size:1.6rem;margin:0}
.section-num{font-family:'Space Grotesk',sans-serif;font-size:0.75rem;font-weight:700;color:#D9B791;letter-spacing:0.15em}

/* ============================
   UTILS
   ============================ */
.divider-sand{height:4px;background:#D9B791;width:48px;margin-bottom:20px}
.spacer-sm{height:40px}
.spacer-md{height:80px}
.text-muted{color:#888}
.text-accent{color:#2A405A}
.border-top{border-top:1px solid #1C1D1C}
.flush-img{display:block;width:100%;height:100%;object-fit:cover}

/* ============================
   RESPONSIVE
   ============================ */
@media(max-width:1100px){
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-col{padding:36px 28px}
  .mosaic-3{grid-template-columns:1fr 1fr}
  .mosaic-3 .module:nth-child(3){border-top:1px solid #1C1D1C;grid-column:1/-1}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .stat-strip--4{grid-template-columns:repeat(2,1fr)}
  .stat-item:nth-child(3){border-top:1px solid #1C1D1C}
  .stat-item:nth-child(4){border-top:1px solid #1C1D1C;border-left:0}
}
@media(max-width:900px){
  .hero-section{grid-template-columns:1fr}
  .hero-image{height:280px}
  .hero-text{padding:48px 36px;border-right:0;border-bottom:1px solid #1C1D1C}
  .article-hero{grid-template-columns:1fr}
  .article-hero-img{height:260px}
  .article-body-wrap{grid-template-columns:1fr}
  .article-aside{border-top:1px solid #1C1D1C}
  .mosaic-2,.mosaic-2--asymm,.mosaic-2--7-4{grid-template-columns:1fr}
  .mosaic-2 .module:first-child,.mosaic-2--asymm .module:first-child,.mosaic-2--7-4 .module:first-child{border-right:1px solid #1C1D1C;border-bottom:1px solid #1C1D1C}
  .full-module{padding:40px 28px}
  .container{padding:0 20px}
  .breadcrumb-bar{padding:14px 28px}
  .section-title-bar{padding:28px 28px}
}
@media(max-width:768px){
  .header-inner{padding:0 20px}
  .nav-list{display:none;position:absolute;top:64px;left:0;right:0;background:#F4F5F7;border-bottom:1px solid #1C1D1C;flex-direction:column;gap:0}
  .nav-list.open{display:flex}
  .nav-list li a{border-left:0;border-bottom:1px solid rgba(28,29,28,0.1);height:auto;line-height:1;padding:16px 24px}
  .nav-list li:first-child a{border-left:0}
  .nav-toggle{display:flex}
  .blog-grid{grid-template-columns:1fr}
  .stat-strip--4,.stat-strip--3{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-col{border-right:0;border-bottom:1px solid rgba(244,245,247,0.1);padding:32px 24px}
  .footer-bottom{flex-direction:column;text-align:center;padding:20px 24px}
  .cookie-banner{flex-direction:column;align-items:flex-start;padding:20px 24px}
  .cookie-actions{width:100%;flex-direction:column}
  .cookie-btn{text-align:center}
  .mosaic-3{grid-template-columns:1fr}
  .mosaic-3 .module{border-top:1px solid #1C1D1C;grid-column:auto}
  .about-text-col{padding:48px 24px}
  .legal-page{padding:48px 24px}
  .thankyou-module{padding:40px 24px}
  .about-timeline{grid-template-columns:60px 1fr}
}
@media(max-width:480px){
  .stat-strip--4,.stat-strip--3{grid-template-columns:1fr}
  .stat-item{border-left:1px solid #1C1D1C}
  .stat-item:not(:first-child){border-top:1px solid #1C1D1C}
}