/* Custom CSS — wird von YOOtheme Pro automatisch geladen. */

/* === ytmcp:start — verwaltet von yootheme-mcp, nicht von Hand ändern === */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@700&display=swap');

:root{
  --inn-lime:#b1ca00;
  --inn-red:#e60029;
  --inn-ink:#0a0a0a;
  --inn-line:#242424;
}

/* ---------- Basis ---------- */
body,.uk-section,.el-content,.uk-panel,p,li{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important}
h1,h2,h3,h4,h5,h6,.el-title{font-family:'Anton','Inter',sans-serif !important;font-weight:400 !important;text-transform:uppercase;letter-spacing:0;padding-top:.04em}
.uk-section{background:var(--inn-ink)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ---------- Buttons ---------- */
.uk-button{border-radius:0 !important;font-family:'Inter',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem !important;border:0}
.uk-button-primary{background:var(--inn-lime) !important;color:#0a0a0a !important}
.uk-button-primary:hover{background:#fff !important;color:#0a0a0a !important}
.uk-button-large{padding:0 34px;line-height:62px}

/* ---------- Header (Theme-Layout) ---------- */
.tm-header .uk-navbar-right .uk-button{background:var(--inn-lime) !important;color:#0a0a0a !important;border-radius:0 !important;font-family:'Inter',sans-serif !important;font-weight:800 !important;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem !important;line-height:44px !important;padding:0 24px !important;border:0 !important;transition:background .15s ease,color .15s ease}
.tm-header .uk-navbar-right .uk-button:hover{background:#fff !important;color:#0a0a0a !important}
.tm-header .uk-logo img{height:36px;width:auto}
.tm-header-mobile .uk-navbar-container{background:#0a0a0a !important;border-bottom:1px solid var(--inn-line)}
.tm-header-mobile .uk-logo img{height:28px;width:auto}

/* ---------- Hero ---------- */
.inn-hero .inn-kicker,.inn-hero .inn-h1,.inn-hero .inn-panels .uk-grid > div,.inn-hero .inn-save{will-change:transform}
.inn-hero{background:var(--inn-ink) !important;padding-top:clamp(66px,14vw,140px) !important}
.inn-kicker{font-size:.7rem !important;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--inn-lime) !important}
.inn-h1{color:#fff !important;font-size:clamp(2.4rem,9.4vw,5.4rem) !important;line-height:1.16 !important;margin-top:.2em !important}
.inn-mark{background:var(--inn-lime);color:#0a0a0a;padding:.03em .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Zwei Panels */
.inn-panels{margin-top:clamp(46px,6.5vw,92px) !important;margin-bottom:clamp(40px,5.5vw,76px) !important;max-width:none;width:100%}
.inn-panels .el-item{position:relative;overflow:hidden;height:100%;padding:clamp(22px,3vw,38px) clamp(18px,2.6vw,34px) clamp(20px,2.6vw,32px);
  background:linear-gradient(180deg,#151515 0%,#0c0c0c 100%);
  border:1px solid #1f1f1f;
  opacity:0;transform:translateY(16px);
  animation:inn-rise .6s cubic-bezier(.2,.8,.3,1) forwards;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.inn-panels .uk-grid > div:nth-child(1) .el-item{animation-delay:.08s}
.inn-panels .uk-grid > div:nth-child(2) .el-item{animation-delay:.22s}
.inn-panels .el-item::before{content:"";position:absolute;left:0;top:0;height:5px;width:72px;
  background:var(--inn-lime);transition:width .4s cubic-bezier(.2,.8,.3,1)}
.inn-panels .el-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(177,202,0,.22),rgba(177,202,0,0) 65%);opacity:0;transition:opacity .25s ease}
.inn-panels .el-item:hover{border-color:var(--inn-lime);transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.6)}
.inn-panels .el-item:hover::before{width:100%}
.inn-panels .el-item:hover::after{opacity:1}
.inn-panels .el-title,.inn-panels .el-content{position:relative;z-index:1}
.inn-panels .el-title{color:#fff !important;font-size:clamp(1.25rem,5.2vw,2.3rem) !important;line-height:1.06 !important;margin:0 !important}
.inn-panels .el-title .inn-hi{color:var(--inn-lime)}
.inn-panels .el-content{color:#9a9a9a;font-size:clamp(.85rem,1.15vw,1.02rem);line-height:1.55;margin-top:14px !important}
@keyframes inn-rise{to{opacity:1;transform:none}}

/* Ersparnis */
.inn-save{margin-top:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.inn-save__main{font-family:'Anton',sans-serif;font-size:clamp(1.6rem,6.4vw,3rem);color:#fff;line-height:1.1;text-transform:uppercase;display:block}
.inn-save__main strong{color:var(--inn-lime);font-weight:400}
.inn-save__hint{display:block;font-size:.8rem;color:#6d6d6d;letter-spacing:.14em;text-transform:uppercase;font-weight:700}


/* ---------- Parallax: scroll-getrieben, laeuft im Compositor ---------- */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .inn-hero .inn-kicker,
    .inn-hero .inn-h1,
    .inn-hero .inn-panels .uk-grid > div:nth-child(1),
    .inn-hero .inn-panels .uk-grid > div:nth-child(2),
    .inn-hero .inn-save{
      animation-timeline:scroll(root block);
      animation-range:0 900px;
      animation-timing-function:linear;
      animation-fill-mode:both;
    }
    .inn-hero .inn-kicker{animation-name:inn-plx-kicker}
    .inn-hero .inn-h1{animation-name:inn-plx-h1}
    .inn-hero .inn-panels .uk-grid > div:nth-child(1){animation-name:inn-plx-p1}
    .inn-hero .inn-panels .uk-grid > div:nth-child(2){animation-name:inn-plx-p2}
    .inn-hero .inn-save{animation-name:inn-plx-save}
  }
}
@keyframes inn-plx-kicker{to{transform:translate3d(0,-126px,0)}}
@keyframes inn-plx-h1{to{transform:translate3d(0,-81px,0)}}
@keyframes inn-plx-p1{to{transform:translate3d(0,-27px,0)}}
@keyframes inn-plx-p2{to{transform:translate3d(0,-50px,0)}}
@keyframes inn-plx-save{to{transform:translate3d(0,-63px,0)}}

/* ---------- Code-Sektion: Limette ---------- */
.inn-code-sec{background:var(--inn-lime) !important}
.inn-code-sec .inn-h2{color:#0a0a0a !important}
.inn-h2{font-size:clamp(1.8rem,6.4vw,3rem) !important;line-height:1.08 !important;color:#fff !important}
.inn-code{max-width:500px;margin:22px auto 0;width:100%}

/* Karte */
.inn-card{background:#0a0a0a;color:#fff;padding:24px 20px 20px;text-align:left}
.inn-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #222}
.inn-card__brand img{height:18px;width:auto;display:block}
.inn-card__tag{font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--inn-lime);white-space:nowrap}
.inn-card__value{font-family:'Anton',sans-serif;font-size:clamp(1.2rem,5.2vw,1.6rem);line-height:1.16;text-transform:uppercase;margin:16px 0 4px}
.inn-card__worth{color:#7d7d7d;font-size:.82rem;margin-bottom:16px}

.inn-card__gen{display:block;width:100%;border:0;cursor:pointer;background:var(--inn-lime);color:#0a0a0a;font-family:'Anton',sans-serif;font-size:clamp(1.1rem,5vw,1.4rem);text-transform:uppercase;letter-spacing:.02em;min-height:62px;padding:18px 14px;transition:background .15s ease,transform .1s ease}
.inn-card__gen:hover{background:#fff}
.inn-card__gen:active{transform:translateY(1px)}
.inn-card__gen[disabled]{opacity:.45;cursor:default}
.inn-card__code{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:clamp(1.05rem,5.6vw,1.7rem);font-weight:700;letter-spacing:.04em;color:var(--inn-lime);text-align:center;border:2px dashed #3a4200;padding:18px 6px;word-break:break-all}
.inn-card__code[hidden]{display:none}
.inn-card__code.is-rolling{color:#d6f531;border-color:var(--inn-lime);border-style:solid}
.inn-card__code.is-set{animation:inn-flash .6s ease}
@keyframes inn-flash{0%{background:rgba(177,202,0,.22);border-color:var(--inn-lime)}100%{background:transparent;border-color:#3a4200}}
.inn-card__actions{display:flex;gap:8px;margin-top:10px}
.inn-card__actions[hidden]{display:none}
.inn-card__copy,.inn-card__pdf{flex:1 1 50%;min-height:52px;border:0;cursor:pointer;font-family:'Inter',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:.78rem;padding:14px 8px;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.inn-card__copy{background:#1a1a1a;color:#fff}
.inn-card__copy:hover{background:#262626}
.inn-card__copy.is-copied{background:var(--inn-lime);color:#0a0a0a}
.inn-card__pdf{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #2c2c2c}
.inn-card__pdf:hover{box-shadow:inset 0 0 0 2px var(--inn-lime);color:var(--inn-lime)}
.inn-card__foot{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid #222;font-size:.74rem;color:#6d6d6d}
.inn-card__timer{font-variant-numeric:tabular-nums;color:var(--inn-lime);font-weight:600}

/* ---------- Countdown-Streifen zwischen Code und Footer ---------- */
.inn-timer-sec{background:var(--inn-ink) !important}
.inn-timer-lbl{font-size:.68rem !important;letter-spacing:.2em;text-transform:uppercase;color:#6d6d6d !important;font-weight:700}
.inn-clock{display:flex;gap:6px;margin:14px auto 0;flex-wrap:nowrap;max-width:520px}
.inn-clock__box{flex:1 1 0;min-width:0;background:#141414;border:1px solid var(--inn-line);padding:12px 2px 9px;text-align:center}
.inn-clock__box:last-child{background:var(--inn-lime);border-color:var(--inn-lime)}
.inn-clock__num{display:block;font-family:'Anton',sans-serif;font-size:clamp(1.9rem,8vw,3rem);line-height:1;color:var(--inn-lime);font-variant-numeric:tabular-nums}
.inn-clock__box:last-child .inn-clock__num{color:#0a0a0a}
.inn-clock__lbl{display:block;margin-top:6px;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:#6d6d6d;font-weight:700}
.inn-clock__box:last-child .inn-clock__lbl{color:#3f4700}
.inn-clock--done{color:#fff;font-family:'Anton',sans-serif;font-size:1.4rem;padding:16px 0;text-align:center;width:100%}
.inn-where{color:#8f8f8f !important;font-size:.88rem;line-height:1.6;margin-top:20px !important}
.inn-where strong{color:#fff;font-weight:600}
.inn-where a{color:var(--inn-lime);text-decoration:none;white-space:nowrap}
.inn-where strong{white-space:nowrap}

/* ---------- Footer ---------- */
.inn-footer{background:#050505 !important;border-top:1px solid var(--inn-line)}
.inn-footer .uk-panel{color:#5c5c5c !important;font-size:.78rem;line-height:1.7}
.inn-footer a{color:#a5a5a5;text-decoration:none;margin-right:14px}
.inn-footer a:hover{color:var(--inn-lime)}
.inn-legal{color:#3d3d3d !important;font-size:.7rem !important;line-height:1.6;margin-top:8px}

/* ---------- Rechtstexte ---------- */
.inn-legal-page{background:var(--inn-ink) !important}
.inn-legal-page .el-content{color:#9a9a9a;line-height:1.7;font-size:.92rem}
.inn-legal-page .el-content p{margin:0 0 .9em}
.inn-legal-page .el-content h3{color:#fff;font-size:1rem;margin:1.6em 0 .5em}
.inn-legal-page .el-content a{color:var(--inn-lime)}

/* ---------- Mobil ---------- */
@media (max-width:959px){
  .inn-hero{padding-top:20px !important}
}
@media (max-width:639px){
  .inn-clock{gap:4px}
  .inn-clock__box{padding:10px 1px 7px}
  .inn-clock__lbl{font-size:.5rem;letter-spacing:.1em}
  .inn-card{padding:20px 15px 16px}
  .inn-card__code{letter-spacing:.01em;padding:16px 4px}
  .inn-card__actions{flex-direction:column}
  .inn-card__copy,.inn-card__pdf{flex:1 1 auto}
  .inn-price__hint{width:100%;margin-top:2px}
  .uk-button-large{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .uk-button,.inn-card__gen{transition:none}
  .inn-panels .el-item{animation:none;opacity:1;transform:none}
  .inn-card__code.is-set{animation:none}
}
/* === ytmcp:end === */