@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Lora';
    src: url('fonts/Lora-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 700;
    font-style: italic;
}

:root{--g:#2a5425;--gl:#3d7035;--gp:#eef4ec;--sand:#f7f5f0;--border:#ddd8ce;--text:#1c1c1a;--muted:#6b6860;--white:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--sand);color:var(--text);font-size:15px;line-height:1.65}

/* ── SLIDE SHELL ── */
.slide{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:64px 40px;max-width:860px;margin:0 auto}
.slide+.slide{border-top:1px solid var(--border)}

/* ── TYPOGRAPHY ── */
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g);font-weight:500;margin-bottom:10px}
h1{font-family:'Lora',serif;font-size:clamp(32px,5vw,52px);line-height:1.15;font-weight:600;margin-bottom:16px}
h2{font-family:'Lora',serif;font-size:clamp(24px,4vw,38px);line-height:1.2;font-weight:600;margin-bottom:14px}
h3{font-size:15px;font-weight:500;margin-bottom:6px}
.lead{font-size:17px;color:var(--muted);font-weight:300;line-height:1.7;max-width:580px}

/* ── SLIDE 1: HERO ── */
.hero-slide{background:var(--g);color:var(--white);border-top:none}
.hero-slide .eyebrow{color:rgba(255,255,255,.6)}
.hero-slide h1{color:var(--white)}
.hero-slide h1 em{font-style:italic;color:rgba(255,255,255,.65)}
.hero-slide .lead{color:rgba(255,255,255,.7)}
.hero-nav{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 22px;border-radius:4px;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:opacity .18s}
.btn-white{background:var(--white);color:var(--g)}
.btn-white:hover{opacity:.9}
.btn-ghost{border:1.5px solid rgba(255,255,255,.4);color:rgba(255,255,255,.85)}
.btn-ghost:hover{border-color:rgba(255,255,255,.8)}

/* ── SLIDE 2: WARUM ── */
.reason-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:32px}
.reason-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:22px 20px}
.reason-icon{width:36px;height:36px;background:var(--gp);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:12px}
.reason-card p{font-size:13px;color:var(--muted);line-height:1.6;margin-top:4px}

/* ── SLIDE 3: WIE DER PREIS ENTSTEHT ── */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:none}
.step-num{width:32px;height:32px;background:var(--g);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;flex-shrink:0;margin-top:2px}
.step-body p{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.6}

/* ── SLIDE 4: HANGLAGE VISUAL ── */
.hang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:28px}
.hang-col{background:var(--white);padding:18px 14px;text-align:center}
.hang-col:hover{background:var(--gp)}
.hang-bar{height:60px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px}
.hang-rect{width:36px;background:var(--g);border-radius:3px 3px 0 0;opacity:.85;transition:opacity .2s}
.hang-col:hover .hang-rect{opacity:1}
.hang-label{font-size:13px;font-weight:500;margin-bottom:3px}
.hang-deg{font-size:11px;color:var(--muted);margin-bottom:6px}
.hang-geraet{font-size:11px;color:var(--gl);background:var(--gp);padding:2px 8px;border-radius:10px;display:inline-block;margin-bottom:8px}
.hang-price{font-size:14px;font-weight:500;color:var(--g)}

/* ── SLIDE 5: PREISÜBERSICHT ── */
.preis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:28px}
.preis-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:20px}
.preis-card-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.preis-card-head .icon{font-size:18px}
.preis-card-head h3{font-size:14px;font-weight:500;margin:0}
.preis-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:13px;border-bottom:1px solid var(--gp)}
.preis-row:last-of-type{border-bottom:none}
.preis-lbl{color:var(--muted)}
.preis-val{font-weight:500;white-space:nowrap;color:var(--text)}
.preis-note{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.5;padding-top:8px;border-top:1px solid var(--border)}
.tag-hang{font-size:10px;background:#fff8e8;color:#7a5a0a;padding:1px 6px;border-radius:8px;margin-left:4px;vertical-align:1px}

/* ── SLIDE 6: ZUSCHLÄGE ── */
.zuschlag-list{margin-top:24px;display:grid;gap:10px}
.z-row{display:flex;align-items:flex-start;gap:12px;background:var(--white);border:1px solid var(--border);border-radius:6px;padding:14px 16px}
.z-badge{font-size:12px;font-weight:500;padding:3px 10px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:1px}
.z-plus{background:#fff3e0;color:#7a4800}
.z-minus{background:#eef4ec;color:#2a5425}
.z-body h4{font-size:13px;font-weight:500;margin-bottom:2px}
.z-body p{font-size:12px;color:var(--muted)}

/* ── SLIDE 7: ANGEBOT ── */
.angebot-box{background:var(--g);border-radius:10px;padding:48px 40px;color:var(--white);text-align:center;margin-top:8px}
.angebot-box h2{color:var(--white);font-size:clamp(22px,3.5vw,34px);margin-bottom:10px}
.angebot-box p{color:rgba(255,255,255,.7);font-size:15px;margin-bottom:28px;font-weight:300}
.angebot-btn{display:inline-block;background:var(--white);color:var(--g);padding:13px 30px;border-radius:5px;font-weight:500;font-size:15px;text-decoration:none;transition:opacity .18s}
.angebot-btn:hover{opacity:.92}
.info-row{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-bottom:28px;font-size:14px;color:rgba(255,255,255,.75)}
.info-row span{display:flex;align-items:center;gap:6px}

.ku-note{font-size:12px;color:var(--muted);text-align:center;padding:20px 0 40px;max-width:500px;margin:0 auto}

.a-no-style {
  text-decoration: none;
  color: rgba(255,255,255,.75)
}

@media(max-width:600px){
  .slide{padding:48px 20px}
  .hang-grid{grid-template-columns:1fr 1fr}
}