/* =========================================================
   Indigo Detailing – Shop
   Ergänzt style.css, nutzt dieselben Variablen und Bausteine.
   ========================================================= */

/* ---------- Übersicht ---------- */
.shop-tiles{display:grid;gap:1.25rem;}
@media(min-width:768px){ .shop-tiles{grid-template-columns:1fr 1fr;} }

.shop-tile{
  position:relative;
  display:flex;flex-direction:column;
  min-height:100%;
  padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  text-decoration:none;color:inherit;
  overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.shop-tile:hover{transform:translateY(-5px);border-color:var(--accent-line);box-shadow:var(--shadow);}
.shop-tile--soon{cursor:default;}
.shop-tile--soon:hover{transform:none;box-shadow:none;}
.shop-tile__badge{
  display:inline-block;align-self:flex-start;
  padding:.3rem .75rem;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent);
}
.shop-tile__badge--muted{background:rgba(255,255,255,.06);color:var(--text-dim);}
.shop-tile h2{margin:1rem 0 .5rem;}
.shop-tile p{color:var(--text-muted);margin:0;}
.shop-tile__price{margin-top:1.2rem;font-family:'Montserrat',sans-serif;font-weight:700;color:var(--accent-2);}
.shop-tile__cta{margin-top:auto;padding-top:1.4rem;}

.shop-trust{display:grid;gap:1rem;margin-top:2.5rem;}
@media(min-width:640px){ .shop-trust{grid-template-columns:repeat(3,1fr);} }
.shop-trust__item{display:flex;gap:.8rem;align-items:flex-start;font-size:.9rem;color:var(--text-muted);}
.shop-trust__item svg{width:22px;height:22px;flex-shrink:0;color:var(--accent);}
.shop-trust__item strong{display:block;color:var(--text);font-weight:600;margin-bottom:.15rem;}

/* ---------- Konfigurator ---------- */
.cfg{display:grid;gap:1.5rem;align-items:start;}
@media(min-width:1024px){
  .cfg{grid-template-columns:minmax(0,1fr) 360px;gap:2rem;}
  .cfg__summary{position:sticky;top:calc(var(--nav-h) + 1.25rem);}
}

.cfg__step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,1.9rem);
}
.cfg__step + .cfg__step{margin-top:1.25rem;}
.cfg__step-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;}
.cfg__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--grad);color:#00121f;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:.85rem;flex-shrink:0;
}
.cfg__step-head h2{margin:0;font-size:1.1rem;}
.cfg__hint{margin:-.5rem 0 1rem;font-size:.85rem;color:var(--text-dim);}

/* Auswahlkacheln (Radio-Buttons) */
.choice{display:grid;gap:.7rem;}
.choice--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.choice--3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:480px){ .choice--3{grid-template-columns:repeat(2,minmax(0,1fr));} }
.choice__opt{position:relative;display:block;cursor:pointer;min-width:0;}
.choice__opt input{position:absolute;opacity:0;width:1px;height:1px;}
.choice__box{
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  min-height:62px;padding:.8rem .95rem;
  background:#1f1f1f;border:1px solid var(--line-strong);border-radius:var(--r-md);
  text-align:center;transition:border-color .25s,background-color .25s,box-shadow .25s;
}
.choice__box strong{font-size:.95rem;font-weight:600;}
.choice__box small{font-size:.76rem;color:var(--text-dim);}
.choice__opt:hover .choice__box{border-color:var(--accent-line);}
.choice__opt input:checked + .choice__box{
  border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent) inset;
}
.choice__opt input:focus-visible + .choice__box{outline:2px solid var(--accent-2);outline-offset:2px;}
.choice__box--pkg{text-align:left;align-items:flex-start;min-height:74px;}
.choice__box--pkg small{line-height:1.4;}

.cfg__custom{margin-top:.9rem;}
.cfg__custom .field{max-width:260px;}
.cfg__custom-row{display:flex;gap:.6rem;align-items:flex-end;}
.cfg__custom-row .field{flex:1;}
.cfg__suffix{padding-bottom:1rem;color:var(--text-dim);font-weight:600;}

.cfg__pkg-info{
  margin-top:1rem;padding:1rem 1.1rem;
  background:rgba(79,172,254,.06);border:1px solid var(--accent-line);border-radius:var(--r-md);
  font-size:.9rem;color:var(--text-muted);
}
.cfg__pkg-info strong{color:var(--text);}
.cfg__pkg-info[hidden]{display:none;}

.cfg__consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.88rem;color:var(--text-muted);line-height:1.5;cursor:pointer;}
.cfg__consent input{width:20px;height:20px;flex-shrink:0;margin-top:.15rem;accent-color:var(--accent);}
.cfg__consent a{color:var(--accent);}

.cfg__counter{font-size:.76rem;color:var(--text-faint);text-align:right;margin-top:.3rem;}

/* Zusammenfassung */
.summary{
  background:linear-gradient(180deg,rgba(38,38,38,.7) 0%,rgba(23,23,23,.7) 100%);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,1.8rem);
}
.summary h2{font-size:1rem;margin:0 0 1rem;color:var(--text-dim);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.summary__lines{display:grid;gap:.55rem;margin-bottom:1.1rem;}
.summary__line{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--text-muted);}
.summary__line span:last-child{text-align:right;color:var(--text);min-width:0;overflow-wrap:anywhere;}
.summary__total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:1rem;border-top:1px solid var(--line-strong);margin-bottom:1.2rem;
}
.summary__total span:first-child{font-size:.9rem;color:var(--text-dim);}
.summary__total strong{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.03em;color:var(--accent-2);font-weight:400;}
.summary__meta{margin:.9rem 0 0;font-size:.78rem;color:var(--text-faint);line-height:1.5;}
.summary__pay{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;}
.summary__pay span{font-size:.7rem;letter-spacing:.04em;padding:.25rem .55rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--text-dim);}
.summary .note{margin-top:.9rem;}
.summary .btn[disabled]{opacity:.55;cursor:wait;}

/* Vorschau des Gutscheins */
.gv{
  position:relative;margin-top:1.25rem;padding:1.3rem 1.2rem 1.1rem;
  background:#0a0a0a;border:1px solid var(--line);border-radius:var(--r-md);
  text-align:center;overflow:hidden;
}
.gv::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad);}
.gv__logo{height:22px;width:auto;opacity:.9;margin-bottom:.6rem;}
.gv__title{font-family:'Bebas Neue',sans-serif;font-size:1.9rem;letter-spacing:.06em;line-height:1;margin:.2rem 0 .1rem;}
.gv__value{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.04em;color:var(--accent-2);line-height:1.1;}
.gv__sub{font-size:.72rem;color:var(--text-dim);margin-top:.15rem;}
.gv__names{display:flex;justify-content:space-between;gap:1rem;margin-top:.9rem;font-size:.78rem;color:var(--text-muted);text-align:left;}
.gv__names span{min-width:0;overflow-wrap:anywhere;}
.gv__names b{display:block;font-size:.62rem;letter-spacing:.08em;color:var(--accent);font-weight:700;}
.gv__msg{margin:.8rem 0 0;font-size:.76rem;color:var(--text-dim);font-style:italic;overflow-wrap:anywhere;}
.gv__code{margin-top:.9rem;padding:.45rem;border:1px dashed var(--line-strong);border-radius:var(--r-sm);font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;color:var(--text-faint);font-size:.95rem;}

/* Schritte "So funktioniert's" */
.howto{display:grid;gap:1rem;counter-reset:how;}
@media(min-width:768px){ .howto{grid-template-columns:repeat(3,1fr);} }
.howto__item{
  position:relative;padding:1.4rem 1.3rem 1.3rem 3.6rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.howto__item::before{
  counter-increment:how;content:counter(how);
  position:absolute;left:1.2rem;top:1.25rem;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:#00121f;font-weight:700;font-size:.85rem;
}
.howto__item strong{display:block;margin-bottom:.3rem;}
.howto__item p{margin:0;font-size:.9rem;color:var(--text-muted);}

/* Danke-Seite */
.thanks{max-width:620px;margin:0 auto;text-align:center;}
.thanks__icon{
  width:72px;height:72px;margin:0 auto 1.4rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-2);
}
.thanks__icon svg{width:34px;height:34px;}

/* Pflegeset-Vorschau */
.set-list{display:grid;gap:.8rem;margin:1.5rem 0 0;padding:0;list-style:none;}
.set-list li{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.set-list svg{width:22px;height:22px;flex-shrink:0;color:var(--accent);margin-top:.1rem;}
.set-list strong{display:block;margin-bottom:.15rem;}
.set-list span{font-size:.88rem;color:var(--text-muted);}

/* Rechtstexte */
.legal h2{font-size:1.15rem;margin:2rem 0 .6rem;}
.legal h3{font-size:1rem;margin:1.3rem 0 .4rem;}
.legal p,.legal li{color:var(--text-muted);font-size:.95rem;line-height:1.7;}
.legal ol,.legal ul{padding-left:1.2rem;}
.legal .box{margin:1.2rem 0;padding:1.1rem 1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);}

/* ---------- Verwaltung ---------- */
body.admin{padding:0;}
.admin__main{max-width:1180px;margin:0 auto;padding:clamp(1.2rem,3vw,2.5rem) var(--gutter) 4rem;}
.admin__login{max-width:400px;margin:12vh auto 0;}
.admin__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.2rem;}
.admin__head h1{margin:.2rem 0 0;}
.admin__stats{display:grid;gap:.9rem;}
@media(min-width:640px){ .admin__stats{grid-template-columns:repeat(3,1fr);} }
.admin__stats .panel{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.3rem;}
.admin__stat-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);}
.admin__stats strong{font-family:'Bebas Neue',sans-serif;font-size:1.9rem;font-weight:400;color:var(--accent-2);letter-spacing:.03em;}
.admin__row{display:grid;gap:.8rem;align-items:end;}
@media(min-width:768px){ .admin__row{grid-template-columns:1fr 1fr 1.4fr auto;} .admin__row form{display:contents;} }
.admin__row .field label small{font-weight:400;color:var(--text-faint);}
.admin__grid{display:grid;gap:.9rem;}
@media(min-width:768px){ .admin__grid{grid-template-columns:1fr 1fr;} .admin__span2{grid-column:span 2;} }
.admin__hint{font-size:.85rem;color:var(--text-dim);margin:.6rem 0 0;}
.admin__check{display:flex;gap:.6rem;align-items:center;font-size:.9rem;color:var(--text-muted);}
.admin__check input{width:18px;height:18px;accent-color:var(--accent);}
.admin__table-wrap{overflow-x:auto;margin-top:1rem;-webkit-overflow-scrolling:touch;}
.admin__table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:900px;}
.admin__table th{text-align:left;padding:.6rem .55rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--line-strong);}
.admin__table td{padding:.7rem .55rem;border-bottom:1px solid var(--line);vertical-align:top;}
.admin__table small{color:var(--text-faint);}
.admin__table code{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;letter-spacing:.08em;}
.admin__table tr.is-redeemed td,.admin__table tr.is-void td{color:var(--text-faint);}
.admin__table tr.is-void code{text-decoration:line-through;}
.admin__status{font-size:.78rem;padding:.2rem .5rem;border-radius:var(--r-pill);background:rgba(255,255,255,.06);}
tr.is-open .admin__status{background:var(--accent-soft);color:var(--accent);}
tr.is-partly .admin__status{background:rgba(255,200,80,.12);color:#ffcf6b;}
.admin__actions{white-space:nowrap;}
.admin__actions a,.admin__actions button{
  display:inline-block;margin:0 .35rem .35rem 0;padding:.25rem .55rem;
  background:none;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  color:var(--text-muted);font:inherit;font-size:.76rem;text-decoration:none;cursor:pointer;
}
.admin__actions a:hover,.admin__actions button:hover{border-color:var(--accent);color:var(--accent);}
.admin__actions form{display:inline;}
.admin__actions .is-danger:hover{border-color:#ff7b7b;color:#ff7b7b;}
.admin__empty{text-align:center;color:var(--text-faint);padding:2rem !important;}