:root{
    --sand:#f4f1ea; --sand-dark:#e9e3d6; --line:#e6e0d3;
    --green:#3f5d4a; --green-dark:#2f4a39; --green-mid:#6f8f78; --green-light:#e7ede6;
    --text:#2f3a32; --muted:#6b7368;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"DM Sans",system-ui,sans-serif;background:var(--sand);color:var(--text);line-height:1.55}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}

  /* ---------- Kopfbalken ---------- */
  header{position:sticky;top:0;z-index:20;background:rgba(244,241,234,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand svg{width:54px;height:54px;flex:none;overflow:visible}
  .brand .name{font-family:Fraunces,serif;font-size:23px;font-weight:600;color:var(--green);letter-spacing:-.01em}
  .brand .name span{color:var(--green-mid)}
  .menu{display:flex;align-items:center;gap:6px;list-style:none}
  .menu a{display:block;padding:8px 12px;border-radius:8px;font-size:15px;color:#4c5a50;transition:background .15s,color .15s}
  .menu a:hover{background:var(--green-light);color:var(--green-dark)}
  .menu a.cta{background:var(--green);color:var(--sand);margin-left:6px}
  .menu a.cta:hover{background:var(--green-dark);color:#fff}
  .burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
  .burger span{display:block;width:24px;height:2px;background:var(--green);margin:5px 0;border-radius:2px}

  /* ---------- Teil 1: Hero ---------- */
  .hero{margin:28px 0 0;background:var(--green);color:var(--sand);border-radius:22px;position:relative;overflow:hidden}
  .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;padding:64px 56px 96px}
  .motto{font-family:Fraunces,serif;font-style:italic;font-weight:500;font-size:40px;line-height:1.2;margin-bottom:22px}
  .motto .ph{border-bottom:2px dashed rgba(244,241,234,.5)}
  .lead{font-size:17px;max-width:560px;opacity:.9}
  .hero-actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
  .btn{display:inline-block;padding:11px 20px;border-radius:10px;font-weight:500;font-size:15px}
  .btn.light{background:var(--sand);color:var(--green-dark)}
  .btn.ghost{border:1px solid rgba(244,241,234,.45);color:var(--sand)}
  .portrait{justify-self:center;text-align:center}
  .portrait .photo{margin:0 auto}
  .photo{width:250px;height:300px;border-radius:18px;background:var(--sand-dark);border:5px solid rgba(244,241,234,.35);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;color:var(--green-mid);font-size:13px}
  .photo svg{width:170px;height:auto;display:block}
  .photo small{position:absolute;margin-bottom:270px;background:rgba(255,255,255,.7);padding:2px 10px;border-radius:20px}
  .person{display:inline-block;margin-top:16px}
  .person strong{display:block;font-family:Fraunces,serif;font-size:21px;font-weight:600;border-bottom:1px solid transparent;transition:border-color .15s}
  .person:hover strong{border-color:var(--sand)}
  .person span{font-size:14px;opacity:.8}
  .hero .ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:120px;z-index:0}

  /* ---------- Teil 2: Bereiche ---------- */
  .section-head{margin:72px 0 28px;display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
  .section-head h2{font-family:Fraunces,serif;font-size:32px;font-weight:600;color:var(--green-dark);line-height:1.2}
  .section-head p{color:var(--muted);max-width:420px}
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:80px}
  .card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
  .card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(63,93,74,.12)}
  .card .art{background:var(--green-light);height:150px;display:flex;align-items:flex-end;justify-content:center}
  .card .art svg{height:140px;width:auto}
  .card.wide{grid-column:1 / -1;flex-direction:row}
  .card.wide .art{width:42%;height:auto;min-height:220px;align-items:center}
  .card.wide .art svg{height:170px}
  .card .body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
  .card .kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-mid);font-weight:700;margin-bottom:6px}
  .card h3{font-family:Fraunces,serif;font-size:23px;font-weight:600;color:var(--green-dark);margin-bottom:8px}
  .card p{color:var(--muted);font-size:15px}
  .tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 20px}
  .tags span{font-size:13px;background:var(--sand);border:1px solid var(--line);color:#55624f;padding:3px 10px;border-radius:20px}
  .card .go{margin-top:auto;font-weight:600;color:var(--green);font-size:15px}
  .card:hover .go{color:var(--green-dark)}

  /* ---------- Fusszeile ---------- */
  footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted);font-size:14px}
  footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  footer nav{display:flex;gap:20px}
  footer a:hover{color:var(--green)}

  /* ---------- Mobil ---------- */
  @media (max-width:1000px){
    .burger{display:block}
    .menu{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--sand);border-bottom:1px solid var(--line);padding:10px 20px 18px}
    .menu.open{display:flex}
    .menu a.cta{margin:6px 0 0;text-align:center}
  }
  @media (max-width:820px){
    .wrap{padding:0 18px}
    .hero-grid{grid-template-columns:1fr;padding:44px 28px 100px;text-align:left}
    .portrait{justify-self:center}
    .motto{font-size:30px}
    .cards{grid-template-columns:1fr}
    .card.wide{flex-direction:column}.card.wide .art{width:100%;min-height:0;height:150px}.card.wide .art svg{height:140px}
    .section-head h2{font-size:26px}
  }

  /* ---------- Aktiver Menüpunkt ---------- */
  .menu a.active{background:var(--green-light);color:var(--green-dark);font-weight:500}

  /* ---------- Unterseiten: Kopfbereich ---------- */
  .page-hero{margin:28px 0 0;background:var(--green);color:var(--sand);border-radius:22px;position:relative;overflow:hidden}
  .page-hero .inner{position:relative;z-index:1;padding:40px 56px 92px;max-width:820px}
  .crumbs{font-size:14px;opacity:.75;margin-bottom:14px}
  .crumbs a:hover{text-decoration:underline}
  .page-hero .kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.8;margin-bottom:6px}
  .page-hero h1{font-family:Fraunces,serif;font-weight:600;font-size:40px;line-height:1.15;margin-bottom:12px}
  .page-hero p.lead{font-size:17px;opacity:.9;max-width:640px}
  .page-hero .ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:100px;z-index:0}

  .section{margin:56px 0 72px}
  .section h2{font-family:Fraunces,serif;font-size:28px;font-weight:600;color:var(--green-dark);margin-bottom:8px}
  .section > p.intro{color:var(--muted);max-width:680px;margin-bottom:26px}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .plan{background:#fff;border:1px dashed #cdc6b6;border-radius:16px;padding:22px 24px}
  .plan h3{font-family:Fraunces,serif;font-size:20px;font-weight:600;color:var(--green-dark);margin:10px 0 6px}
  .plan p{color:var(--muted);font-size:15px}
  .plan ul{margin:10px 0 0 18px;color:var(--muted);font-size:14.5px}
  .badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:20px;background:var(--sand);border:1px solid var(--line);color:#6b6455}
  .badge.live{background:var(--green-light);border-color:#cfdacd;color:var(--green-dark)}
  .note{background:var(--green-light);border-radius:14px;padding:18px 22px;color:#3d4b41;font-size:15px;display:flex;gap:12px;align-items:flex-start}
  .note b{color:var(--green-dark)}
  .btn.green{background:var(--green);color:var(--sand)}
  .btn.green:hover{background:var(--green-dark)}
  .btn.outline{border:1px solid var(--green);color:var(--green)}

  /* Über Anja */
  .about{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start}
  .about .photo{width:280px;height:340px;border:none;background:var(--sand-dark)}
  .about h2{margin-top:0}

  /* ---------- Bullet-Journal-Generator ---------- */
  .bj{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start}
  .panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
  .panel h3{font-family:Fraunces,serif;font-size:19px;color:var(--green-dark);margin-bottom:14px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:#3d4b41}
  .field select,.field input,.field textarea{width:100%;font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--sand);color:var(--text)}
  .field textarea{min-height:80px;resize:vertical}
  .field.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .seg{display:flex;gap:6px;flex-wrap:wrap}
  .seg button{font:inherit;font-size:14px;padding:7px 12px;border-radius:9px;border:1px solid var(--line);background:var(--sand);cursor:pointer;color:#4c5a50}
  .seg button.on{background:var(--green);border-color:var(--green);color:var(--sand)}
  .locked{opacity:.65}
  .locked .lock{font-size:12px;font-weight:700;color:#8a6d3b;background:#f6ecd6;border-radius:20px;padding:2px 9px;margin-left:6px}
  .preview{background:#e9e3d6;border-radius:18px;padding:28px;display:flex;flex-direction:column;align-items:center;gap:16px}
  .preview svg{width:100%;max-width:440px;height:auto;background:#fff;box-shadow:0 10px 30px rgba(47,74,57,.18);border-radius:3px}
  .preview .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  .preview small{color:var(--muted)}

  @media print{
    @page{size:A5;margin:0}
    body{background:#fff}
    body *{visibility:hidden}
    #sheet,#sheet *{visibility:visible}
    #sheet{position:fixed;left:0;top:0;width:148mm;height:210mm;max-width:none;box-shadow:none;border-radius:0}
  }

  @media (max-width:900px){
    .grid3,.grid2{grid-template-columns:1fr}
    .about{grid-template-columns:1fr}
    .bj{grid-template-columns:1fr}
    .page-hero .inner{padding:32px 26px 84px}
    .page-hero h1{font-size:30px}
  }