:root{
    --navy:#1E3A4C;
    --deep-green:#2F5D50;
    --amber:#C98A3E;
    --paper:#F2F4EF;
    --paper-alt:#E8E9DE;
    --ink:#1A1F1D;
    --line:#CFCBB8;
    --max:1120px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    color:var(--navy);
    margin:0 0 0.4em 0;
    line-height:1.08;
    font-weight:600;
  }
  em{font-style:italic; color:var(--deep-green);}
  a{color:inherit;}
  .mono{font-family:"SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace; letter-spacing:0.02em;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
  img,svg{display:block; max-width:100%;}

  a:focus-visible, button:focus-visible{
    outline:3px solid var(--amber);
    outline-offset:3px;
  }

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(242,244,239,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px; max-width:var(--max); margin:0 auto;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; font-weight:600; font-size:1.15rem; color:var(--navy);
    text-decoration:none;
  }
  .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--amber); display:inline-block;}
  nav.links{display:flex; gap:28px; font-size:0.92rem;}
  nav.links a{text-decoration:none; color:var(--ink); opacity:0.8;}
  nav.links a:hover{opacity:1; color:var(--deep-green);}
  .cta-btn{
    display:inline-block;
    background:var(--navy); color:#fff !important;
    padding:11px 22px; border-radius:2px;
    text-decoration:none; font-size:0.9rem; font-weight:500;
    border:1px solid var(--navy);
    transition:background 0.2s ease, color 0.2s ease;
  }
  .cta-btn:hover{background:transparent; color:var(--navy) !important;}
  .cta-btn.ghost{background:transparent; color:var(--navy) !important;}
  .cta-btn.ghost:hover{background:var(--navy); color:#fff !important;}
  .nav .cta-btn{padding:9px 18px; font-size:0.85rem;}

  /* ---------- HERO ---------- */
  .hero{
    padding:88px 0 64px;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
  }
  .eyebrow{
    font-family:"SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace; font-size:0.78rem; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--deep-green); margin-bottom:18px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--deep-green); display:inline-block;}
  .hero h1{font-size:clamp(2.1rem, 4vw, 3.1rem); max-width:12ch;}
  .hero p.lead{
    font-size:1.08rem; max-width:46ch; margin:20px 0 30px; color:#3A423E;
  }
  .hero .ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .hero .microline{
    margin-top:22px; font-size:0.82rem; color:#5C6560; font-family:"SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
  }

  /* compass */
  .compass-wrap{position:relative; display:flex; align-items:center; justify-content:center;}
  .compass{width:100%; max-width:340px; aspect-ratio:1/1;}
  .compass-label{
    position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
    font-family:"SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace; font-size:0.78rem; color:var(--navy);
    background:var(--paper); padding:4px 12px; border:1px solid var(--line); border-radius:20px;
    white-space:nowrap;
  }
  #needle{transform-origin:170px 170px; transition:transform 2.4s cubic-bezier(.2,.9,.25,1);}

  /* ---------- SECTION GENERIC ---------- */
  section{padding:76px 0;}
  .section-head{max-width:640px; margin-bottom:44px;}
  .section-head .eyebrow{margin-bottom:14px;}
  .section-head h2{font-size:clamp(1.6rem, 3vw, 2.2rem);}
  .section-head p{color:#3A423E; font-size:1.02rem; margin-top:14px;}

  /* story */
  .story{background:var(--navy); color:#EDEFE9;}
  .story h2{color:#fff;}
  .story .section-head p{color:#C9D2CC;}
  .story-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;}
  .story p.big{
    font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; font-size:1.3rem; line-height:1.5; font-weight:500;
  }
  .story p.big em{color:var(--amber);}
  .story .fine{font-size:0.92rem; color:#AEB9B2; margin-top:18px;}

  /* audience */
  .pain-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
  .pain-card{
    border:1px solid var(--line); padding:24px 20px; background:#fff;
  }
  .pain-card .mono{font-size:0.75rem; color:var(--amber); display:block; margin-bottom:10px;}
  .pain-card h3{font-size:1.02rem; font-family:"Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-weight:600; color:var(--navy); margin-bottom:6px;}
  .pain-card p{font-size:0.9rem; color:#4A534D; margin:0;}

  /* route / process */
  .route{background:var(--paper-alt);}
  .route-list{border-top:1px solid var(--line);}
  .route-item{
    display:grid; grid-template-columns:110px 1fr; gap:28px;
    padding:26px 0; border-bottom:1px solid var(--line);
  }
  .route-item .bearing{
    font-family:"SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace; font-size:1.3rem; color:var(--deep-green); font-weight:500;
    padding-top:2px;
  }
  .route-item .bearing span{display:block; font-size:0.68rem; color:#7C857F; letter-spacing:0.08em; margin-top:4px;}
  .route-item h3{font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; font-size:1.18rem; color:var(--navy); margin-bottom:6px;}
  .route-item p{margin:0; color:#3A423E; font-size:0.95rem; max-width:56ch;}

  /* deliverables */
  .deliv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .deliv-card{border:1px solid var(--line); background:#fff; padding:28px;}
  .deliv-card .mono{color:var(--deep-green); font-size:0.75rem;}
  .deliv-card h3{font-size:1.05rem; margin-top:10px;}
  .deliv-card p{font-size:0.9rem; color:#4A534D;}

  /* pricing */
  .pricing{background:var(--deep-green); color:#EEF3EE;}
  .price-box{
    display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
    border:1px solid rgba(255,255,255,0.25); padding:40px; background:rgba(255,255,255,0.04);
  }
  .price-box h2{color:#fff;}
  .price-box p{color:#D8E4DA; margin-top:10px; max-width:48ch;}
  .price-tag{text-align:right;}
  .price-tag .num{font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; font-size:3rem; color:var(--amber); font-weight:600;}
  .price-tag .note{font-size:0.78rem; color:#C6D4C9; margin-top:4px; font-family:"SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;}
  .guarantee{
    margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.2);
    font-size:0.92rem; color:#D8E4DA;
  }

  /* testimonial placeholder */
  .voices{}
  .voice-card{
    border:1px dashed var(--line); padding:26px; text-align:center; color:#7C857F; font-size:0.92rem;
    font-family:"SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
  }

  /* contact */
  .contact{}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
  .contact form{display:flex; flex-direction:column; gap:14px;}
  .contact label{font-size:0.82rem; color:var(--navy); font-weight:500;}
  .contact input, .contact textarea{
    padding:12px 14px; border:1px solid var(--line); background:#fff;
    font-family:"Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-size:0.95rem; color:var(--ink);
  }
  .contact textarea{min-height:110px; resize:vertical;}
  .contact-info .item{margin-bottom:22px;}
  .contact-info .mono{color:var(--deep-green); font-size:0.75rem; display:block; margin-bottom:4px;}

  /* footer */
  footer{
    border-top:1px solid var(--line); padding:36px 0; font-size:0.82rem; color:#5C6560;
  }
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

  /* reveal animation */
  .reveal{opacity:0; transform:translateY(14px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 860px){
    .hero{grid-template-columns:1fr; padding-top:60px;}
    .compass-wrap{order:-1; max-width:220px; margin:0 auto 34px;}
    nav.links{display:none;}
    .story-grid{grid-template-columns:1fr; gap:30px;}
    .pain-grid{grid-template-columns:1fr 1fr;}
    .deliv-grid{grid-template-columns:1fr;}
    .price-box{grid-template-columns:1fr; text-align:left;}
    .price-tag{text-align:left;}
    .contact-grid{grid-template-columns:1fr;}
    .route-item{grid-template-columns:70px 1fr; gap:16px;}
  }
  @media (max-width: 520px){
    .pain-grid{grid-template-columns:1fr;}
  }


  /* ---------- LOGO LOCKUP (shared header) ---------- */
  .brand img{height:30px; width:30px; display:block;}

  /* ---------- BLOG ---------- */
  .blog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
  .blog-card{
    border:1px solid var(--line); background:#fff; overflow:hidden;
    display:flex; flex-direction:column; text-decoration:none; color:inherit;
    transition:box-shadow 0.2s ease, transform 0.2s ease;
  }
  .blog-card:hover{box-shadow:0 6px 18px rgba(30,58,76,0.10); transform:translateY(-2px);}
  .blog-card .thumb{
    background:var(--paper-alt); height:150px; display:flex; align-items:center; justify-content:center;
    color:var(--deep-green); font-family:"SF Mono", "Cascadia Code", Consolas, monospace; font-size:0.72rem;
    letter-spacing:0.08em; text-transform:uppercase;
  }
  .blog-card .content{padding:20px 20px 24px;}
  .blog-card .cat{
    font-family:"SF Mono", "Cascadia Code", Consolas, monospace; font-size:0.7rem; color:var(--amber);
    letter-spacing:0.06em; text-transform:uppercase; display:block; margin-bottom:8px;
  }
  .blog-card h3{
    font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size:1.08rem; color:var(--navy); margin-bottom:8px;
  }
  .blog-card p{font-size:0.88rem; color:#4A534D; margin:0;}
  .blog-empty{
    border:1px dashed var(--line); padding:44px 30px; text-align:center; color:#7C857F;
    font-family:"SF Mono", "Cascadia Code", Consolas, monospace; font-size:0.9rem; grid-column:1 / -1;
  }

  /* ---------- SIMPLE SUBPAGE (Impressum/Datenschutz) ---------- */
  .subpage{padding:60px 0 90px;}
  .subpage h1{font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:6px;}
  .subpage .updated{font-family:"SF Mono", "Cascadia Code", Consolas, monospace; font-size:0.78rem; color:#7C857F; margin-bottom:34px; display:block;}
  .subpage h2{font-size:1.15rem; margin-top:34px; font-family:"Segoe UI", -apple-system, sans-serif; font-weight:600; color:var(--navy);}
  .subpage p, .subpage li{font-size:0.95rem; color:#3A423E; line-height:1.7;}
  .subpage ul{padding-left:20px;}
  .back-link{
    display:inline-block; margin-bottom:26px; font-size:0.85rem; text-decoration:none;
    color:var(--deep-green); font-family:"SF Mono", "Cascadia Code", Consolas, monospace;
  }
  .back-link:hover{text-decoration:underline;}

  @media (max-width: 860px){
    .blog-grid{grid-template-columns:1fr;}
  }