:root{
    --navy:#26435c; --navy-d:#17293a; --kupfer:#a8622a;
    --ink:#1c2733; --grau:#5b6b78;
    --creme:#f6f1e9; --creme-d:#efe8dc; --salbei:#e9eff0;
    --linie:#d6cec1; --weiss:#fff;
    --max:1100px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);line-height:1.65;font-size:17px;background:var(--weiss);}
  h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2;color:var(--navy);}
  a{color:var(--navy);}
  img{max-width:100%;height:auto;display:block;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 22px;}
  section{padding:74px 0;}

  /* ---------- Kopf ---------- */
  header{background:var(--navy);color:#fff;padding:16px 0;}
  header .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
  .marke{font-size:14px;letter-spacing:3px;text-transform:uppercase;font-weight:600;color:#fff;
    text-decoration:none;}
  nav{display:flex;gap:22px;flex-wrap:wrap;}
  nav a{color:#cfdae3;text-decoration:none;font-size:15px;}
  nav a:hover{color:#fff;}

  /* ---------- Hero ---------- */
  .hero{background:var(--creme);padding:88px 0 78px;}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
  .hero h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:22px;}
  .hero p.lead{font-size:19px;color:#3c4c59;margin-bottom:16px;}
  .hero .stapel{position:relative;}
  .hero .stapel img{border:1px solid var(--linie);box-shadow:0 18px 40px rgba(23,41,58,.18);}
  /* Zwei Cover gestaffelt: der hintere muss weit genug herausschauen, um als
     eigenes Produkt erkennbar zu sein. */
  .hero .stapel .hinten{position:absolute;top:38px;left:24%;width:76%;z-index:1;}
  .hero .stapel .vorn{position:relative;width:76%;z-index:2;}

  .btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
    padding:15px 30px;border-radius:4px;font-weight:600;font-size:16px;border:2px solid var(--navy);
    transition:background .15s;}
  .btn:hover{background:var(--navy-d);border-color:var(--navy-d);}
  .btn.hell{background:transparent;color:var(--navy);}
  .btn.hell:hover{background:rgba(38,67,92,.07);}
  .btn-reihe{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}

  /* ---------- Problem ---------- */
  .problem{background:var(--weiss);}
  h2.mitte{text-align:center;font-size:clamp(25px,3.4vw,34px);margin-bottom:14px;}
  p.unter{text-align:center;color:var(--grau);max-width:640px;margin:0 auto 46px;}
  .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
  .karte{background:var(--creme);border-radius:6px;padding:30px 28px;}
  .karte h3{font-size:20px;margin-bottom:10px;}
  .karte p{font-size:16px;color:#3c4c59;}
  .karte .zahl{font-family:Georgia,serif;font-size:34px;color:var(--kupfer);display:block;
    margin-bottom:6px;}

  /* ---------- Produkte ---------- */
  .produkte{background:var(--creme);}
  .prod{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;
    background:#fff;border:1px solid var(--linie);border-radius:6px;padding:36px;margin-bottom:34px;}
  .prod img{border:1px solid var(--linie);box-shadow:0 8px 22px rgba(23,41,58,.11);}
  .prod h3{font-size:27px;margin-bottom:6px;}
  .prod .sub{color:var(--grau);margin-bottom:20px;}
  .prod ul{list-style:none;margin:0 0 24px;}
  .prod li{position:relative;padding:0 0 10px 24px;font-size:16px;}
  .prod li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:2px;
    background:var(--kupfer);}
  .preiszeile{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
    border-top:1px solid var(--linie);padding-top:22px;}
  .preis{font-family:Georgia,serif;font-size:31px;color:var(--navy);}
  .preis small{font-size:14px;color:var(--grau);font-family:inherit;display:block;font-weight:400;}

  .buendel{background:var(--navy);color:#fff;border-radius:6px;padding:40px;
    display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;}
  .buendel h3{color:#fff;font-size:26px;margin-bottom:10px;}
  .buendel p{color:#cfdae3;font-size:16px;}
  .buendel .preis{color:#fff;text-align:right;}
  .buendel .preis small{color:#a9bdcd;}
  .buendel .btn{background:#fff;color:var(--navy);border-color:#fff;margin-top:12px;}
  .buendel .btn:hover{background:var(--creme);border-color:var(--creme);}

  /* ---------- Gratis ---------- */
  .gratis{background:var(--salbei);}
  .gratis-grid{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:center;}
  .gratis img{border:1px solid #c3d0d3;box-shadow:0 10px 26px rgba(23,41,58,.13);}
  .gratis h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:14px;}
  .badge{display:inline-block;background:var(--kupfer);color:#fff;font-size:13px;
    letter-spacing:1.6px;text-transform:uppercase;font-weight:600;padding:5px 14px;
    border-radius:3px;margin-bottom:16px;}

  /* ---------- Ablauf ---------- */
  .ablauf{background:#fff;}
  .schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:s;}
  .schritt{position:relative;padding-left:56px;}
  .schritt::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
    width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:18px;}
  .schritt h3{font-size:19px;margin-bottom:7px;}
  .schritt p{font-size:16px;color:#3c4c59;}

  /* ---------- FAQ ---------- */
  .faq{background:var(--creme);}
  details{background:#fff;border:1px solid var(--linie);border-radius:5px;
    padding:18px 24px;margin-bottom:12px;}
  details[open]{border-color:var(--navy);}
  summary{font-weight:600;cursor:pointer;color:var(--navy);font-size:17px;list-style:none;}
  summary::-webkit-details-marker{display:none;}
  summary::after{content:"+";float:right;color:var(--kupfer);font-size:22px;line-height:1;}
  details[open] summary::after{content:"–";}
  details p{margin-top:12px;font-size:16px;color:#3c4c59;}

  /* ---------- Hinweis / Fuss ---------- */
  .rechtlich{background:#fff;padding:44px 0;}
  .rechtlich .box{border-left:4px solid var(--kupfer);background:var(--creme);
    padding:22px 26px;border-radius:4px;font-size:15px;color:#3c4c59;}
  footer{background:var(--navy-d);color:#a9bdcd;padding:44px 0;font-size:15px;}
  footer a{color:#cfdae3;}
  footer .fgrid{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;}
  footer .marke{color:#fff;display:block;margin-bottom:8px;}

  /* ---------- Platzhalter-Markierung ---------- */
  .todo{outline:2px dashed var(--kupfer);outline-offset:3px;}

  @media (max-width:880px){
    .hero-grid,.prod,.gratis-grid{grid-template-columns:1fr;gap:34px;}
    .drei,.schritte{grid-template-columns:1fr;}
    .buendel{grid-template-columns:1fr;}
    .buendel .preis{text-align:left;}
    .hero .stapel{max-width:340px;}
    section{padding:56px 0;}
  }
  /* ---------- Textseiten (Impressum, Datenschutz, ...) ---------- */
  .textseite{padding:64px 0 80px;}
  .textseite .wrap{max-width:760px;}
  .textseite h1{font-size:clamp(28px,4vw,38px);margin-bottom:10px;}
  .textseite .stand{color:var(--grau);font-size:15px;margin-bottom:34px;
    border-bottom:1px solid var(--linie);padding-bottom:18px;}
  .textseite h2{font-size:23px;margin:34px 0 12px;}
  .textseite p{margin-bottom:14px;}
  .textseite ul{margin:0 0 16px 22px;}
  .textseite li{margin-bottom:7px;}
  .zurueck{display:inline-block;margin-top:34px;color:var(--navy);font-size:16px;}

  /* Deutlich sichtbarer Platzhalter - darf niemals live gehen */
  .platzhalter{border:2px dashed var(--kupfer);background:#fdf6ef;border-radius:5px;
    padding:22px 26px;margin:18px 0 26px;}
  .platzhalter .titel{font-weight:700;color:var(--kupfer);text-transform:uppercase;
    letter-spacing:1.4px;font-size:13px;margin-bottom:10px;}
  .platzhalter p{font-size:15.5px;color:#3c4c59;margin-bottom:10px;}
  .platzhalter p:last-child{margin-bottom:0;}
  .platzhalter code{background:#fff;border:1px solid var(--linie);border-radius:3px;
    padding:1px 6px;font-size:14px;}

  /* ---------- Ratgeber-Artikel ---------- */
  .artikel{padding:56px 0 70px;}
  .artikel .wrap{max-width:760px;}
  .kruemel{font-size:14px;color:var(--grau);margin-bottom:22px;}
  .kruemel a{color:var(--grau);}
  .artikel h1{font-size:clamp(29px,4.2vw,40px);margin-bottom:16px;}
  .artikel .vorspann{font-size:19px;color:#3c4c59;line-height:1.6;margin-bottom:12px;}
  .artikel .meta{font-size:14px;color:var(--grau);border-bottom:1px solid var(--linie);
    padding-bottom:20px;margin-bottom:34px;}
  .artikel h2{font-size:clamp(23px,3vw,28px);margin:44px 0 14px;}
  .artikel h3{font-size:19px;margin:28px 0 8px;}
  .artikel p{margin-bottom:16px;}
  .artikel ul,.artikel ol{margin:0 0 20px 24px;}
  .artikel li{margin-bottom:10px;}

  /* Inhaltsübersicht oben */
  .inhalt-box{background:var(--creme);border-radius:6px;padding:24px 28px;margin-bottom:38px;}
  .inhalt-box strong{display:block;margin-bottom:12px;color:var(--navy);
    font-family:Georgia,serif;font-size:18px;}
  .inhalt-box ol{margin:0 0 0 20px;}
  .inhalt-box li{margin-bottom:6px;}

  /* Hervorhebungen im Artikel */
  .kasten{border-radius:5px;padding:22px 26px;margin:26px 0;}
  .kasten h3{margin-top:0;}
  .kasten p:last-child,.kasten ul:last-child{margin-bottom:0;}
  .k-eilig{background:#fdf6ef;border-left:4px solid var(--kupfer);}
  .k-eilig h3{color:var(--kupfer);}
  .k-ruhig{background:var(--salbei);border-left:4px solid var(--navy);}
  .k-ruhig h3{color:var(--navy);}

  /* Fristen-Tabelle */
  .fristen{width:100%;border-collapse:collapse;margin:22px 0 26px;font-size:16px;}
  .fristen th{background:var(--navy);color:#fff;text-align:left;padding:11px 14px;
    font-size:15px;}
  .fristen td{border:1px solid var(--linie);padding:11px 14px;vertical-align:top;}
  .fristen tbody tr:nth-child(even) td{background:#faf7f2;}
  .fristen .frist{font-weight:700;color:var(--kupfer);white-space:nowrap;}
  .tab-scroll{overflow-x:auto;}

  /* Angebot mitten im Text */
  .angebot{border:1.6px solid var(--navy);border-radius:6px;padding:28px 30px;
    margin:36px 0;background:#fff;display:grid;grid-template-columns:110px 1fr;
    gap:24px;align-items:center;}
  .angebot img{border:1px solid var(--linie);}
  .angebot h3{margin:0 0 8px;font-size:21px;}
  .angebot p{font-size:16px;margin-bottom:14px;}
  .angebot .btn{padding:12px 24px;font-size:15px;}

  .quellen{font-size:14.5px;color:var(--grau);border-top:1px solid var(--linie);
    padding-top:22px;margin-top:44px;}
  .quellen a{color:var(--grau);}

  @media (max-width:880px){
    .angebot{grid-template-columns:1fr;}
    .angebot img{max-width:130px;}
  }