:root{
  --orange1:#ff6a00; --orange2:#ffb366;
  --bg:#fff; --text:#181818; --muted:#555;
  --card:#fff8ef; --shadow:0 12px 30px rgba(0,0,0,.14)
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.45}

/* Header / Nav */
.header{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,var(--orange1),var(--orange2));color:#fff;padding:.8rem 1.4rem;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font-weight:900}
.brand img{height:42px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.2));mix-blend-mode:multiply}
.navlist{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.navlist a{color:#fff;text-decoration:none;font-weight:600;transition:opacity .2s}
.navlist a:hover{opacity:.85}
.hamburger{display:none;flex-direction:column;border:0;background:transparent;cursor:pointer}
.hamburger span{width:24px;height:3px;background:#fff;margin:4px 0;border-radius:2px;display:block}
@media (max-width:900px){
  .hamburger{display:flex}
  .navlist{display:none;position:absolute;top:64px;right:1rem;background:rgba(0,0,0,.75);border-radius:.6rem;flex-direction:column;padding:.6rem 1rem}
  .navlist.open{display:flex}
}

.page-wrap{min-height:70vh}
.section{padding:4rem 1rem}
.section-title{color:var(--orange1);font-size:clamp(2rem,4vw,2.6rem);text-align:center;margin:0 0 1rem}
.lead{max-width:900px;margin:0 auto 2rem;color:var(--muted);text-align:center}

/* Hero */
.hero{position:relative}
.hero-bg-logo{position:absolute;top:50%;left:50%;width:min(92vmin,780px);height:min(92vmin,780px);background:url('assets/logo.png') center/contain no-repeat;opacity:.12;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:multiply}
.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72vh;padding:2rem 1rem;text-align:center}
.hero-logo{width:min(420px,70vw);filter:drop-shadow(0 15px 30px rgba(255,106,0,.35));mix-blend-mode:multiply}
.wordmark{font-size:clamp(3rem,10vw,8rem);background:linear-gradient(90deg,var(--orange1),var(--orange2));-webkit-background-clip:text;color:transparent;margin:.3rem 0 1rem}
.hero-lead{color:var(--muted);font-size:1.1rem;max-width:900px;margin:0 auto 1.2rem}

.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.btn{display:inline-block;padding:1rem 1.5rem;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn.primary{background:var(--orange1);color:#fff}
.btn.primary:hover{transform:translateY(-2px) scale(1.015);box-shadow:var(--shadow)}
.btn.ghost{border:2px solid var(--orange1);color:var(--orange1)}
.btn.ghost:hover{background:var(--orange1);color:#fff}

/* Stickers (v16) */
.stickers{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:.8rem;max-width:1100px;margin:1rem auto 0;padding:0 1rem}
.sticker{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;border-radius:18px;padding:1rem .8rem;font-weight:800;box-shadow:var(--shadow)}
.sticker strong{font-size:1rem}
.sticker span{font-size:.9rem;opacity:.9}
.sticker.s1{background:linear-gradient(135deg,#ff8a26,#ff6a00);color:#fff}
.sticker.s2{background:#fff;border:2px solid #ffdcb8;color:#a55500}
.sticker.s3{background:linear-gradient(135deg,#ffb366,#ff8a26);color:#fff}
.sticker.s4{background:#fff8ef;border:2px solid #ffdcb8;color:#a55500}
.sticker.s5{background:#fff;border:2px dashed #ffb366;color:#a55500}
.sticker.s7{background:linear-gradient(135deg,#ffd7ad,#ff8f3a);color:#7a3f00}
.sticker.s8{background:linear-gradient(135deg,#ffe7cd,#ff9b45); color:#7a3f00}
@media (max-width:1000px){.stickers{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.stickers{grid-template-columns:repeat(2,1fr)}}

/* Cards, Forms, Canvas */
.card{background:var(--card);border-radius:1rem;padding:1.2rem;box-shadow:var(--shadow);text-align:left;margin:1rem auto;max-width:1200px}
.card.wide{max-width:1200px}
canvas{display:block;margin:1rem auto;width:100%;height:auto;background:#fff;border-radius:.6rem;box-shadow:inset 0 0 10px rgba(0,0,0,.05)}
.row-ctrl{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.row-ctrl label{font-weight:700;color:#8a4a00}
.row-ctrl .info{font-weight:800;color:#ff7a00}
.row-ctrl input[type=range]{width:240px}
.contact{max-width:900px;margin:0 auto}
.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.contact input,.contact textarea{width:100%;padding:.9rem 1rem;border:1px solid #ffdcb8;border-radius:.6rem;font:inherit;background:#fff}

/* Footer */
.footer{background:linear-gradient(90deg,var(--orange2),var(--orange1));color:#fff;text-align:center;padding:1rem;font-weight:600}

/* Cookie Banner */
.consent-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:120;background:var(--card);color:var(--text);border:1px solid #ffdcb8;border-radius:14px;box-shadow:var(--shadow);padding:.8rem;max-width:960px;width:calc(100% - 24px);display:none}
.consent-banner.show{display:block}
.consent-inner{display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.consent-text{max-width:680px}
.consent-text p{margin:.25rem 0 .5rem;color:#555}
.consent-link{color:#ff7a00;text-decoration:none;font-weight:700}
.consent-actions{display:flex;gap:.5rem}

/* =========================
   STICKER / EYECATCHER
   ========================= */

.stickers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1rem;
  max-width:1100px;
  margin:1.5rem auto 0;
  padding:0 1rem;
}

.sticker{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;

  padding:1.1rem 0.9rem;
  border-radius:18px;

  font-weight:700;
  line-height:1.25;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.6);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.sticker strong{
  font-size:1.05rem;
}

.sticker span{
  font-size:.9rem;
  opacity:.9;
  margin-top:.15rem;
}

/* Hover-Effekt */
.sticker:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:
    0 16px 35px rgba(0,0,0,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.8);
}

/* =========================
   EINZELNE STICKER-FARBEN
   ========================= */

/* Preis / Nachhilfeeinheit */
.sticker.s1{
  background:linear-gradient(135deg,#ff8a26,#ff6a00);
  color:#fff;
}

/* Kostenlose Lernstandanalyse */
.sticker.s2{
  background:#ffffff;
  color:#a55500;
  border:2px solid #ffd2a3;
}

/* Soft Skills / Prüfungsangst */
.sticker.s3{
  background:linear-gradient(135deg,#ffb366,#ff9440);
  color:#fff;
}

/* Lernmanagement */
.sticker.s4{
  background:#fff7ee;
  color:#a55500;
  border:2px solid #ffd2a3;
}

/* Austausch mit der Schule */
.sticker.s5{
  background:linear-gradient(135deg,#ffcf9b,#ffb366);
  color:#7a3f00;
}
.sticker.s6{
  background:linear-gradient(135deg,#ffe1bf,#ffb366);
  color:#7a3f00;
}


/* =========================
   MOBILE FEINTUNING
   ========================= */

@media (max-width:600px){
  .sticker{
    padding:1rem .8rem;
  }
  .sticker strong{
    font-size:1rem;
  }
}