/* =========================================================
   01 – BASIS / VARIABLEN / GLOBAL
   ========================================================= */
:root {
  --bg:#333;
  --panel:#292929;
  --line:#4a4a4a;
  --muted:#aaa;
  --blue:#198cff;
  --white:#fff;
  --green:#2eaa67
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:#fff;
  font:15px/1.45 Arial,Helvetica,sans-serif
}

/* =========================================================
   02 – HEADER / BRANDING / MIETLISTE
   ========================================================= */
.top {
  height:74px;
  border-bottom:1px solid #484848;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(22px,calc((100vw - 1440px)/2));
  background:#303030;
  position:sticky;
  top:0;
  z-index:5
}

.brand {
  font-size:26px;
  font-weight:800;
  letter-spacing:-1px
}

.brand span {
  color:var(--blue)
}

.brand small {
  font-size:10px;
  letter-spacing:2px;
  color:#aaa;
  margin-left:8px
}

.cartBtn {
  background:#fff;
  color:#222;
  border:0;
  border-radius:9px;
  padding:11px 15px;
  font-weight:700
}

.cartBtn b {
  background:var(--blue);
  color:#fff;
  border-radius:99px;
  padding:3px 7px;
  margin-left:7px
}

/* =========================================================
   03 – HAUPTBEREICH / INTRO / SUCHE / MIETDAUER
   ========================================================= */
.shell {
  max-width:1440px;
  margin:auto;
  padding:48px 22px
}

.intro {
  max-width:760px
}

.eyebrow {
  color:#9bcfff;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px
}

.intro h1 {
  font-size:46px;
  line-height:1.05;
  margin:8px 0 12px
}

.intro>p:last-child {
  color:#bbb;
  font-size:17px
}

.tools {
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  margin-top:34px
}

.tools>input {
  border:0;
  border-radius:10px;
  padding:17px 18px;
  font-size:16px
}

.dates {
  display:flex;
  align-items:center;
  gap:10px;
  background:#292929;
  border:1px solid #494949;
  padding:8px 10px;
  border-radius:10px
}

.dates label {
  font-size:11px;
  color:#aaa
}

.dates input {
  display:block;
  background:#222;
  color:#fff;
  border:1px solid #555;
  border-radius:6px;
  padding:6px
}

.factor {
  padding:0 7px
}

.factor span,.factor b {
  display:block
}

.factor span {
  font-size:11px;
  color:#aaa
}

/* =========================================================
   04 – KATALOG / ERGEBNISLEISTE / PRODUKTKARTEN
   ========================================================= */
.cats {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:22px 0
}

.cats button {
  border:1px solid #555;
  background:#3b3b3b;
  color:#fff;
  padding:9px 13px;
  border-radius:8px
}

.cats button.active {
  background:var(--blue);
  border-color:var(--blue)
}

.resultbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:18px 0 12px;
  color:#bbb
}

.resultbar select {
  background:#292929;
  color:#fff;
  border:1px solid #555;
  padding:8px;
  border-radius:7px
}

.grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px
}

.card {
  background:#fff;
  color:#181818;
  border-radius:11px;
  overflow:hidden;
  display:flex;
  flex-direction:column
}

.imageBox {
  height:220px;
  background:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:pointer
}

.imageBox img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:14px
}

.imageCount,.setTag {
  position:absolute;
  top:10px;
  padding:5px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:700
}

.imageCount {
  right:10px;
  background:#111b;
  color:#fff
}

.setTag {
  left:10px;
  background:var(--blue);
  color:#fff
}

.cardBody {
  padding:15px;
  display:flex;
  flex-direction:column;
  flex:1
}

.vendor {
  font-size:10px;
  letter-spacing:1.2px;
  color:#888;
  font-weight:700
}

.card h3 {
  font-size:17px;
  line-height:1.25;
  margin:5px 0 7px
}

.short {
  font-size:13px;
  color:#666;
  min-height:39px
}

.crumb {
  font-size:11px;
  color:#999;
  margin-top:8px
}

.availability {
  font-size:12px;
  margin-top:auto;
  padding-top:13px;
  color:#555
}

.availability.ok:before {
  content:'●';
  color:var(--green);
  margin-right:6px
}

.price {
  font-size:20px;
  font-weight:800;
  margin:7px 0
}

.price small {
  font-size:11px;
  color:#777;
  font-weight:400
}

.add {
  border:0;
  background:var(--blue);
  color:#fff;
  border-radius:7px;
  padding:11px;
  font-weight:700
}

/* =========================================================
   05 – MIETLISTE / DRAWER
   ========================================================= */
.drawer {
  position:fixed;
  right:-390px;
  top:0;
  width:min(390px,100vw);
  height:100vh;
  background:#242424;
  z-index:20;
  transition:.25s;
  display:flex;
  flex-direction:column;
  box-shadow:-10px 0 30px #0005
}

.drawer.open {
  right:0
}

.drawerHead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  border-bottom:1px solid #444
}

.drawerHead h2 {
  margin:0
}

.drawerHead button,.x {
  border:0;
  background:none;
  color:inherit;
  font-size:30px
}

.drawer #cartItems {
  padding:10px 20px;
  overflow:auto;
  flex:1
}

.ci {
  padding:12px 0;
  border-bottom:1px solid #444
}

.ci b {
  display:block
}

.ci small {
  color:#aaa
}

.qty {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px
}

.qty button {
  width:27px;
  height:27px;
  border:1px solid #555;
  background:#333;
  color:#fff;
  border-radius:5px
}

.cartFoot {
  padding:20px;
  border-top:1px solid #444
}

.cartFoot>div {
  display:flex;
  justify-content:space-between;
  font-size:18px
}

.cartFoot small {
  display:block;
  color:#999;
  margin:7px 0 15px
}

.cartFoot button {
  width:100%;
  padding:13px;
  border:0;
  border-radius:8px;
  background:var(--blue);
  color:#fff;
  font-weight:700
}

.shade {
  position:fixed;
  inset:0;
  background:#0009;
  z-index:15;
  display:none
}

.shade.open {
  display:block
}

/* =========================================================
   06 – PRODUKTDETAIL / MODAL
   ========================================================= */
.modal {
  position:fixed;
  inset:0;
  background:#000b;
  z-index:30;
  display:none;
  padding:24px;
  overflow:auto
}

.modal.open {
  display:block
}

.detail {
  max-width:1120px;
  margin:20px auto;
  background:#fff;
  color:#171717;
  border-radius:13px;
  padding:25px;
  position:relative
}

.x {
  position:absolute;
  right:15px;
  top:8px;
  color:#222;
  z-index:2
}

.detailTop {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px
}

.heroImg {
  height:430px;
  background:#f5f5f5;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center
}

.heroImg img {
  max-width:100%;
  max-height:100%;
  object-fit:contain
}

.thumbs {
  display:flex;
  gap:8px;
  margin-top:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none
}

.thumbs::-webkit-scrollbar {
  display:none
}

.thumbs button {
  width:75px;
  height:62px;
  border:2px solid transparent;
  background:#f5f5f5;
  border-radius:7px
}

.thumbs button.active {
  border-color:var(--blue)
}

.thumbs img {
  width:100%;
  height:100%;
  object-fit:contain
}

.detailInfo {
  padding:25px 15px 0 0
}

.detailInfo h2 {
  font-size:31px;
  line-height:1.1;
  margin:7px 0 10px
}

.detailPrice {
  font-size:25px;
  font-weight:800;
  margin:20px 0
}

.detailSections {
  margin-top:28px;
  border-top:1px solid #ddd
}

.sec {
  padding:22px 0;
  border-bottom:1px solid #ddd
}

.sec h3 {
  margin:0 0 8px
}

.docs a {
  display:inline-block;
  background:#eee;
  color:#222;
  text-decoration:none;
  padding:10px 13px;
  border-radius:7px;
  margin-right:7px
}

.bundle {
  background:#f5f5f5;
  padding:12px;
  border-radius:8px
}

.empty {
  color:#999;
  padding:20px 0
}

@media(max-width:1100px) {
  .grid {
    grid-template-columns:repeat(3,1fr)
  }
}

@media(max-width:800px) {
  .tools {
    grid-template-columns:1fr
  }
  .dates {
    flex-wrap:wrap
  }
  .grid {
    grid-template-columns:repeat(2,1fr)
  }
  .detailTop {
    grid-template-columns:1fr
  }
  .heroImg {
    height:320px
  }
  .intro h1 {
    font-size:36px
  }
}

@media(max-width:520px) {
  .grid {
    grid-template-columns:1fr
  }
  .shell {
    padding:30px 14px
  }
  .top {
    padding:0 14px
  }
  .dates label {
    width:calc(50% - 5px)
  }
  .dates input {
    width:100%
  }
  .modal {
    padding:8px
  }
  .detail {
    padding:17px
  }
  .detailInfo h2 {
    font-size:25px
  }
}

/* =========================================================
   07 – MIETANFRAGE / FORMULAR / ZUSAMMENFASSUNG
   ========================================================= */
.requestBox {
  max-width:760px;
  margin:35px auto;
  background:#fff;
  color:#171717;
  border-radius:13px;
  padding:30px;
  position:relative
}

.requestBox h2 {
  font-size:30px;
  margin:5px 0 8px
}

.requestLead {
  color:#666;
  margin:0 0 22px
}

.formGrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.formGrid label {
  font-size:12px;
  font-weight:700;
  color:#555
}

.formGrid .wide {
  grid-column:1/-1
}

.formGrid input,.formGrid textarea {
  display:block;
  width:100%;
  margin-top:5px;
  border:1px solid #ccc;
  border-radius:8px;
  padding:12px;
  font:inherit;
  background:#fff;
  color:#111
}

.formGrid textarea {
  resize:vertical
}

.formError {
  color:#b42318;
  font-size:13px;
  min-height:20px;
  margin:9px 0
}

.primaryWide,.primary,.secondary {
  border:0;
  border-radius:8px;
  padding:13px 17px;
  font-weight:700
}

.primaryWide {
  width:100%;
  background:var(--blue);
  color:#fff
}

.primary {
  background:var(--blue);
  color:#fff
}

.secondary {
  background:#eee;
  color:#222
}

.requestActions {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:20px
}

.requestHint {
  font-size:12px;
  color:#777;
  margin-top:14px
}

.summaryBox {
  border:1px solid #ddd;
  border-radius:10px;
  overflow:hidden;
  margin-top:18px
}

.summaryHead {
  padding:14px 16px;
  background:#f5f5f5;
  display:flex;
  justify-content:space-between;
  gap:15px
}

.summaryCustomer {
  padding:14px 16px;
  border-bottom:1px solid #ddd
}

.summaryLine {
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  padding:11px 16px;
  border-bottom:1px solid #eee
}

.summaryLine:last-child {
  border-bottom:0
}

.summaryLine small {
  display:block;
  color:#777
}

.summaryTotal {
  display:flex;
  justify-content:space-between;
  padding:15px 16px;
  background:#f5f5f5;
  font-size:18px
}

.copyOk {
  background:#eaf8f0!important;
  color:#17643a!important
}

@media(max-width:520px) {
  .requestBox {
    padding:20px
  }
  .formGrid {
    grid-template-columns:1fr
  }
  .formGrid .wide {
    grid-column:auto
  }
  .summaryHead {
    display:block
  }
  .requestActions {
    flex-direction:column
  }
  .requestActions button {
    width:100%
  }
}

/* =========================================================
   08 – MIETLISTE: POSITIONEN / MENGE / LÖSCHEN
   ========================================================= */
.ciTop {
  display:flex;
  align-items:flex-start;
  gap:10px
}

.ciTop b {
  flex:1
}

.removeItem {
  flex:0 0 auto!important;
  width:30px!important;
  height:30px!important;
  border:1px solid #555!important;
  background:#333!important;
  color:#fff!important;
  border-radius:6px!important;
  cursor:pointer
}

.removeItem:hover {
  background:#4a2c2c!important;
  border-color:#8a4b4b!important
}

.qty button:disabled {
  opacity:.35;
  cursor:not-allowed
}

.clearCart {
  background:transparent!important;
  color:#bbb!important;
  border:1px solid #555!important;
  margin:0 0 9px!important
}

.clearCart:hover {
  color:#fff!important;
  border-color:#777!important
}

.cartFoot button:disabled {
  opacity:.45;
  cursor:not-allowed
}

/* =========================================================
   09 – ADMIN-GESTEUERTES FRONTEND-BRANDING
   ========================================================= */
/* v4 admin-driven branding */ :root {
  --vibs-bg:#333333;
  --vibs-accent:#1687ff;
  --vibs-card:#ffffff;
  --vibs-text:#f5f7fa;
  --vibs-radius:14px
}

body {
  background:var(--vibs-bg)
}

.add,.primary,.primaryWide,#requestBtn,.cartBtn {
  background:var(--vibs-accent)!important
}

.card,.detail,.requestBox {
  border-radius:var(--vibs-radius)
}

.brandLogo {
  max-height:42px;
  max-width:180px;
  object-fit:contain;
  display:none
}

.brand.hasLogo .brandText {
  display:none
}

.brand.hasLogo .brandLogo {
  display:block
}

.submitStatus {
  margin-top:12px;
  font-size:14px
}

.submitStatus.ok {
  color:#28c76f
}

.submitStatus.err {
  color:#ff6b6b
}

/* Branding text highlight */ .brandText .brandHighlight {
  color:var(--brand-highlight,var(--blue))
}

/* =========================================================
   VIBS RENT – Kategorie-Navigation
   Desktop: bewährte obere Kategorie-Buttons.
   Mobile: hierarchische Kategorie-Navigation.
   ========================================================= */ #mobileCategories,#desktopCategories {
  display:none
}

@media (max-width:800px) {
  /* Auf kleinen Displays nur die neue hierarchische Navigation zeigen */   #cats {
    display:none!important
  }
  #desktopCategories {
    display:none!important
  }
  #mobileCategories {
    display:block;
    margin:18px 0 20px
  }
  .mobileCategoryTitle {
    font-size:13px;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#fff;
    margin:4px 0 10px
  }
  .mobileCategoryTitle.root {
    color:#aaa
  }
  .mobileCategoryList {
    display:grid;
    grid-template-columns:1fr;
    gap:8px
  }
  .mobileCategoryList button,.mobileDiscover,.mobileBack {
    width:100%;
    border:1px solid #505050;
    background:#3a3a3a;
    color:#fff;
    border-radius:10px;
    padding:13px 14px;
    font:inherit;
    text-align:left;
    cursor:pointer
  }
  .mobileCategoryList button {
    display:grid;
    grid-template-columns:1fr auto 18px;
    align-items:center;
    gap:10px
  }
  .mobileCategoryList button span,.mobileDiscover span {
    font-weight:700
  }
  .mobileCategoryList button em,.mobileDiscover em {
    font-style:normal;
    color:#aaa;
    font-size:12px
  }
  .mobileCategoryList button b {
    font-size:20px;
    line-height:1;
    text-align:right;
    color:#aaa
  }
  .mobileDiscover {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--vibs-accent,var(--blue));
    border-color:var(--vibs-accent,var(--blue));
    margin-bottom:9px
  }
  .mobileDiscover em {
    color:#fff;
    opacity:.85
  }
  .mobileBack {
    width:auto;
    background:transparent;
    border:0;
    color:#bbb;
    padding:5px 0 10px;
    margin:0
  }
}

/* =========================================================
   VIBS RENT – Desktop-Kategorien links / Mobile kompakt
   ========================================================= */ .catalogLayout {
  display:grid;
  grid-template-columns:245px minmax(0,1fr);
  gap:24px;
  align-items:start;
  margin-top:22px
}

.catalogMain {
  min-width:0
}

#desktopCategories {
  display:block;
  position:sticky;
  top:92px;
  background:#2b2b2b;
  border:1px solid #494949;
  border-radius:12px;
  padding:14px
}

#cats {
  display:none!important
}

#mobileCategories {
  display:none
}

.desktopCatHead {
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  color:#9a9a9a;
  margin:2px 4px 10px
}

#desktopCategories button {
  width:100%;
  border:0;
  border-bottom:1px solid #444;
  background:transparent;
  color:#eee;
  padding:11px 8px;
  text-align:left;
  cursor:pointer;
  font:inherit
}

#desktopCategories button:last-child {
  border-bottom:0
}

#desktopCategories button:hover {
  background:#363636
}

#desktopCategories button span {
  font-weight:600
}

#desktopCategories button em {
  float:right;
  font-style:normal;
  color:#929292;
  font-size:12px;
  margin-right:8px
}

#desktopCategories button b {
  float:right;
  color:#8d8d8d;
  font-size:18px;
  line-height:16px
}

#desktopCategories .desktopAll.active {
  background:var(--vibs-accent,var(--blue));
  color:#fff;
  border-radius:8px;
  border-bottom-color:transparent
}

#desktopCategories .desktopAll.active em {
  color:#fff;
  opacity:.85
}

.desktopBack {
  color:#aaa!important;
  font-size:13px!important
}

.desktopCurrent {
  font-size:16px;
  font-weight:800;
  padding:8px 8px 10px;
  color:#fff
}

@media(max-width:1100px) and (min-width:801px) {
  .catalogLayout {
    grid-template-columns:210px minmax(0,1fr);
    gap:16px
  }
}

@media(max-width:800px) {
  .catalogLayout {
    display:block;
    margin-top:0
  }
  #desktopCategories {
    display:none!important
  }
  #mobileCategories {
    display:block;
    margin:18px 0 20px
  }
  #cats {
    display:none!important
  }
}

/* =========================================================
   DESKTOP SIDEBAR CLEAN FIX
   Nur Desktop >800px. Mobile-Regeln bleiben unverändert.
   ========================================================= */ @media (min-width:801px) {
  .catalogLayout {
    display:grid!important;
    grid-template-columns:210px minmax(0,1fr)!important;
    gap:26px!important;
    align-items:start!important;
    margin-top:24px!important;
    width:100%!important;
  }
  .catalogMain {
    display:block!important;
    min-width:0!important;
    width:100%!important;
    overflow:visible!important
  }
  .catalogMain .resultbar {
    margin:0 0 12px!important;
    min-height:34px!important
  }
  .catalogMain #grid {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:15px!important;
    width:100%!important;
    min-width:0!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .catalogMain #grid .card {
    display:flex!important;
    min-width:0!important;
    visibility:visible!important;
    opacity:1!important
  }
  #desktopCategories {
    display:block!important;
    position:sticky!important;
    top:92px!important;
    padding:2px 0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .desktopCatHead {
    margin:0 0 9px 5px!important;
    font-size:10px!important;
    letter-spacing:1.6px!important;
    color:#8f8f8f!important;
  }
  #desktopCategories button {
    min-height:38px!important;
    padding:9px 7px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    border-radius:0!important;
    background:transparent!important;
    color:#d8d8d8!important;
    font-size:13px!important;
    line-height:1.25!important;
  }
  #desktopCategories button:hover {
    background:rgba(255,255,255,.045)!important;
    color:#fff!important
  }
  #desktopCategories button span {
    font-weight:600!important
  }
  #desktopCategories button em {
    font-size:11px!important;
    color:#858585!important;
    margin-right:5px!important
  }
  #desktopCategories button b {
    font-size:16px!important;
    color:#777!important
  }
  #desktopCategories .desktopAll {
    margin:0 0 4px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:8px!important;
    padding:9px 10px!important;
  }
  #desktopCategories .desktopAll.active {
    background:var(--vibs-accent,var(--blue))!important;
    border-color:var(--vibs-accent,var(--blue))!important;
    color:#fff!important;
  }
  #desktopCategories .desktopAll.active em {
    color:#fff!important
  }
  #desktopCategories .desktopBack {
    border-bottom:0!important;
    padding:5px 5px 8px!important;
    min-height:auto!important;
    color:#9c9c9c!important;
    font-size:12px!important;
  }
  .desktopCurrent {
    padding:4px 6px 9px!important;
    font-size:15px!important;
    font-weight:700!important;
  }
}

@media (min-width:801px) and (max-width:1180px) {
  .catalogLayout {
    grid-template-columns:190px minmax(0,1fr)!important;
    gap:18px!important
  }
  .catalogMain #grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
}

/* =========================================================
   VIBS RENT – Desktop Kategorie-Zähler als dezente Badges
   Nur Desktop. Mobile bleibt unverändert.
   ========================================================= */ @media (min-width:801px) {
  #desktopCategories button {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    column-gap:7px!important;
  }
  #desktopCategories button span {
    min-width:0!important;
  }
  #desktopCategories button em {
    float:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:29px!important;
    height:21px!important;
    padding:0 7px!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.045)!important;
    color:#aaa!important;
    font-size:10px!important;
    line-height:1!important;
    font-style:normal!important;
  }
  #desktopCategories button b {
    float:none!important;
    width:10px!important;
    text-align:right!important;
  }
  #desktopCategories .desktopAll.active em {
    border-color:rgba(255,255,255,.38)!important;
    background:rgba(255,255,255,.13)!important;
    color:#fff!important;
  }
}

/* ===== Frontend Branding Feinschliff V1.2 ===== */
/* Normaler Marken-/Seitentitel: Hauptschriftfarbe.
   Nur der explizite Highlight-Teil (.CH) erhält die Akzentfarbe. */ #brand .brandText, .brand .brandText, .brandText {
  color:#d7dce3 !important;
}

#brand .brandText > span:not(.brandHighlight), .brandText > span:not(.brandHighlight) {
  color:inherit !important;
}

#brand .brandText .brandHighlight, .brandText .brandHighlight {
  color:var(--brand-highlight,#1687ff) !important;
}

/* Hauptüberschrift etwas weicher als reines Weiss */ .hero h1, .heroTitle, main h1 {
  color:#d7dce3;
}

/* ===== Frontend Branding Sync V1.3 ===== */ #brand .brandText, .brandText {
  color:inherit;
}

#brand .brandText .brandHighlight, .brandText .brandHighlight {
  color:var(--brand-highlight,#1687ff) !important;
}

/* ===== Anfrage-Erfolg V1.4 ===== */ .submitStatus.ok {
  line-height:1.45;
}

.requestSuccessTitle {
  font-weight:700;
  margin-bottom:4px;
}

.requestSuccessText {
  margin-bottom:2px;
}

.requestSuccessCountdown {
  font-size:.92em;
  opacity:.82;
}

/* =========================================================
   VIBS RENT – Datumsfelder: Kalender-Symbol besser sichtbar
   ========================================================= */ .dates input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity:.72;
  cursor:pointer;
  transition:opacity .15s ease;
}

.dates input[type="date"]:hover::-webkit-calendar-picker-indicator, .dates input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity:1;
}

/* =========================================================
   VIBS RENT – Suche kompakter
   ========================================================= */ .tools > input[type="search"] {
  min-height:0;
  height:58px;
  padding-top:0;
  padding-bottom:0;
}

/* =========================================================
   VIBS RENT – Mobile Mietanfrage: Eingabe-Zoom vermeiden
   ========================================================= */ @media (max-width:800px) {
  #requestModal input,   #requestModal textarea,   #requestModal select {
    font-size:16px;
  }
}

/* =========================================================
   VIBS RENT – Mobile Anfrage Fullscreen V1.5.7
   ========================================================= */ @media (max-width:800px) {
  #requestModal.mobileReviewMode,   #requestModal.mobileSuccessMode {
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    background:var(--vibs-bg,#333)!important;
    z-index:99999!important
  }
  #requestModal.mobileReviewMode .requestBox,   #requestModal.mobileSuccessMode .requestBox {
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
    box-sizing:border-box!important;
    padding:22px 18px 28px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch
  }
  #requestModal.mobileReviewMode #requestReviewStep {
    width:100%!important;
    max-width:760px!important;
    margin:0 auto!important
  }
  #requestModal.mobileSuccessMode .requestBox {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important
  }
  #requestModal.mobileSuccessMode #requestReviewStep {
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
    text-align:center!important
  }
  #requestModal.mobileSuccessMode #rqSummary,   #requestModal.mobileSuccessMode .requestActions,   #requestModal.mobileSuccessMode .eyebrow,   #requestModal.mobileSuccessMode #requestReviewStep>h2 {
    display:none!important
  }
  #requestModal.mobileSuccessMode #rqSubmitStatus {
    display:block!important;
    margin:0!important;
    padding:24px 18px!important;
    font-size:16px!important;
    line-height:1.55!important
  }
  #requestModal.mobileSuccessMode .requestSuccessTitle {
    font-size:22px!important;
    margin-bottom:10px!important
  }
  #requestModal.mobileSuccessMode .requestSuccessText {
    margin-bottom:8px!important
  }
  #requestModal.mobileSuccessMode .requestSuccessCountdown {
    margin-top:10px!important
  }
}

/* =========================================================
   VIBS RENT – Frontend Header wie Admin V1.5.9
   ========================================================= */ .top {
  min-height:38px!important;
  padding:0 28px!important;
  display:flex!important;
  align-items:center!important;
}

.top .brand, .top .brandText {
  line-height:1!important;
}

.top .brandText {
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:.2px!important;
}

.top .brandText small {
  font-size:inherit!important;
  font-weight:inherit!important;
}

.top .brandLogo {
  max-height:24px!important;
  max-width:150px!important;
}

.top .cartBtn {
  min-height:0!important;
  padding:6px 12px!important;
  border-radius:7px!important;
  font-size:12px!important;
  line-height:1.2!important;
}

.top .cartBtn b {
  font-size:11px!important;
}

@media (max-width:800px) {
  .top {
    min-height:42px!important;
    padding:0 14px!important;
  }
}

/* =========================================================
   VIBS RENT – Einheitlicher Header-Container V1.6.4
   ========================================================= */ .top {
  padding-left:max(24px,calc((100vw - 1424px)/2))!important;
  padding-right:max(24px,calc((100vw - 1424px)/2))!important;
}

@media(max-width:1472px) {
  .top {
    padding-left:24px!important;
    padding-right:24px!important;
  }
}

@media(max-width:800px) {
  .top {
    padding-left:14px!important;
    padding-right:14px!important;
  }
}


/* =========================================================
   VIBS RENT – Produktdetail V1.7.10
   Desktop: Lieferumfang / Set-Inhalt / Dokumente links unter Bild.
   Mobile: weiterhin normale Reihenfolge untereinander.
   ========================================================= */
@media (min-width:801px) {
  #modal .detailMedia {
    min-width:0;
    overflow:auto;
    padding-right:4px;
  }

  #modal .detailLeftSections {
    margin-top:18px;
    border-top:1px solid #ddd;
  }

  #modal .detailLeftSections .sec {
    padding:16px 0;
  }

  #modal .detailLeftSections .sec h3 {
    font-size:14px;
    margin:0 0 8px;
  }

  #modal .detailLeftSections .sec p,
  #modal .detailLeftSections .bundle {
    font-size:13px;
    line-height:1.45;
    margin:0;
  }

  #modal .detailInfo .detailSections {
    margin-top:20px;
  }
}

@media (max-width:800px) {
  #modal .detailLeftSections {
    margin-top:18px;
    border-top:1px solid #ddd;
  }
}


/* =========================================================
   VIBS RENT – epirent Bestands-Hinweis V1.7.11
   ========================================================= */
.ciAvailability {
  margin-top:3px;
  color:#8f98a3;
  font-size:11px;
  line-height:1.3;
}

.qty button:disabled {
  opacity:.32;
}


/* =========================================================
   VIBS RENT – intelligente Schnellsuche V1.7.12
   ========================================================= */
.searchSuggestions{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:14;
  display:none;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.searchSuggestions.open{display:block}
.searchSuggestion{
  width:100%;
  min-height:62px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 18px;
  gap:11px;
  align-items:center;
  padding:7px 11px;
  border:0;
  border-bottom:1px solid #ececec;
  background:#fff;
  color:#1d1d1d;
  text-align:left;
  cursor:pointer;
}
.searchSuggestion:last-child{border-bottom:0}
.searchSuggestion:hover{background:#f5f7f9}
.searchSuggestionImg{
  width:52px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#f3f3f3;
  border-radius:6px;
}
.searchSuggestionImg img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
}
.searchSuggestionImg.emptyImg{color:#aaa}
.searchSuggestionText{min-width:0}
.searchSuggestionText small{
  display:block;
  margin-bottom:2px;
  color:#888;
  font-size:10px;
  letter-spacing:.4px;
}
.searchSuggestionText strong{
  display:block;
  overflow:hidden;
  color:#222;
  font-size:13px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.searchSuggestionArrow{
  color:#999;
  font-size:22px;
  text-align:right;
}
@media(max-width:800px){
  .searchSuggestions{top:64px}
  .searchSuggestion{min-height:58px}
}

/* =========================================================
   VIBS RENT – Hero kompakter V1.7.14.4
   Kleine Überschrift „MIETMATERIAL“ ausblenden und Platz sparen.
   ========================================================= */
.intro .eyebrow{
  display:none!important;
}
.intro h1{
  margin-top:0!important;
}
.shell{
  padding-top:34px;
}
.tools{
  margin-top:24px;
}

@media(max-width:800px){
  .shell{
    padding-top:24px;
  }
  .tools{
    margin-top:20px;
  }
}


/* =========================================================
   VIBS RENT – GOLD Feinschliff V1.7.15.14
   ========================================================= */
.searchWrap{position:relative;min-width:0}
.searchWrap>input[type="search"]{width:100%;height:100%;box-sizing:border-box;border:0;border-radius:10px;padding:17px 18px;font-size:16px}
.short{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  line-height:1.45;
  min-height:0;
  max-height:4.35em;
}
@media(max-width:520px){
  .dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;box-sizing:border-box;width:100%}
  .dates label{width:auto;min-width:0}
  .dates input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
  .dates .factor{grid-column:1/-1}
}