/* CMS-Modul: Motorradvermietung */
.content--rental {
  display: grid;
  gap:0;
}

.rental-eyebrow {
  margin: 0 0 .65rem;
  color: var(--mhg-red);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rental-intro {
  display: grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(360px, .95fr);
  gap:clamp(2rem, 4vw, 4.5rem);
  align-items:stretch;
}

.rental-intro__content {
  align-self:center;
  max-width:760px;
  padding-block:clamp(1rem, 4vw, 3.5rem);
}
.rental-intro h2,
.rental-requirements h2,
.rental-contact h2 {
  margin: 0;
  font-family: "Outfit", Arial, sans-serif;
  line-height: 1.1;
}
.rental-intro h2 { font-size: clamp(2rem, 4vw, 3.8rem); }
.rental-intro__content > p:not(.rental-eyebrow) { margin:1.35rem 0 0; font-size:1.08rem; line-height:1.7; }
.rental-intro .mhg-button { margin-top:1.7rem; white-space:nowrap; }
.content--rental .mhg-button { border-color:var(--mhg-red); color:var(--mhg-white); background:var(--mhg-red); }
.content--rental .mhg-button:hover,
.content--rental .mhg-button:focus-visible { border-color:var(--mhg-black); background:var(--mhg-black); }
.rental-intro__visual {
  min-height:420px;
  margin:0;
  overflow:hidden;
  border-radius:12px;
  background:var(--mhg-light-gray);
}
.rental-intro__visual img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:42% center;
}

.rental-notice {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(2rem, 4vw, 4.5rem);
  align-items:center;
}
.rental-notice__visual {
  min-width:0;
  margin:0;
  overflow:hidden;
  aspect-ratio:800 / 420;
  border-radius:12px;
  background:var(--mhg-light-gray);
}
.rental-notice__visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.rental-notice__content {
  align-self:center;
}
.rental-notice__content h2 {
  margin:0;
  font-family:"Outfit", Arial, sans-serif;
  font-size:clamp(1.8rem, 3vw, 3rem);
  line-height:1.1;
}
.rental-notice__content p {
  margin:1rem 0 0;
  color:var(--mhg-dark-gray);
  font-size:1.08rem;
  line-height:1.7;
}
.rental-notice__actions {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
  margin-top:1.7rem;
}
.content--rental .rental-notice__contact {
  display:flex;
  min-width:0;
  min-height:86px;
  box-sizing:border-box;
  align-items:center;
  gap:1rem;
  padding:1rem 1.15rem;
  border:1px solid #e2e2e2;
  border-radius:10px;
  color:var(--mhg-black);
  background:var(--mhg-white);
  box-shadow:var(--mhg-shadow-soft);
  text-decoration:none;
  transition:border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.content--rental .rental-notice__contact:hover,
.content--rental .rental-notice__contact:focus-visible {
  border-color:var(--mhg-red);
  color:var(--mhg-red);
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0, 0, 0, .13);
}
.content--rental .rental-notice__contact:focus-visible {
  outline:3px solid rgba(227, 6, 32, .2);
  outline-offset:3px;
}
.rental-notice__contact-icon {
  display:grid;
  width:52px;
  height:52px;
  flex:0 0 52px;
  place-items:center;
  /*border-radius:50%;
  background:var(--mhg-red);*/
}
.rental-notice__contact-icon img {
  display:block;
  /*width:28px;
  height:28px;*/
}
.rental-notice__contact-text {
  display:grid;
  min-width:0;
  gap:.18rem;
}
.rental-notice__contact-label {
  color:var(--mhg-dark-gray);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rental-notice__contact-value {
  overflow-wrap:anywhere;
  font-size:clamp(.95rem, 1.25vw, 1.08rem);
  font-weight:800;
  line-height:1.25;
}

.rental-requirements h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.rental-requirements__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.rental-requirement {
  display:grid;
  min-height:300px;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  justify-items:center;
  align-content:start;
  border:1px solid #e5e5e5;
  border-top:4px solid var(--mhg-red);
  border-radius:12px;
  background:linear-gradient(155deg, var(--mhg-white) 0%, #f4f4f4 100%);
  box-shadow:var(--mhg-shadow-soft);
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rental-requirement:hover {
  transform:translateY(-4px);
  box-shadow:var(--mhg-shadow-soft);
}
.rental-requirement__icon {
  display:grid;
  width:clamp(108px, 9vw, 144px);
  aspect-ratio:1;
  margin:0 auto 1.5rem;
  place-items:center;
  border-radius:50%;
  color:var(--mhg-red);
  background:rgba(227, 6, 32, .055);
}
.rental-requirement__icon img {
  display:block;
  width:82%;
  height:auto;
  max-width:none;
}
.rental-requirement h3 { margin: 0 0 .7rem; font-family: "Outfit", Arial, sans-serif; font-size: 1.3rem; }
.rental-requirement p { max-width:28ch; margin:0 auto; color:var(--mhg-dark-gray); line-height:1.6; }

.rental-contact {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
}
.rental-contact h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.rental-contact__links { display:grid; gap:.7rem; text-align:right; }
.content--rental .rental-contact__links a { color:var(--mhg-black); font-size:1.05rem; font-weight:700; text-decoration:none; }
.content--rental .rental-contact__links a { display:inline-flex; justify-content:flex-end; align-items:center; gap:.7rem; }
.content--rental .rental-contact__links img { width:24px; height:24px; color:inherit; }
.content--rental .rental-contact__links a:hover,
.content--rental .rental-contact__links a:focus-visible { color:var(--mhg-red); }

@media (max-width:700px) {
  .rental-intro { grid-template-columns:1fr; gap:1.5rem; }
  .rental-intro__content { padding-block:0; }
  .rental-intro .mhg-button { justify-self:start; }
  .rental-intro__visual { min-height:0; aspect-ratio:4 / 3; }
  .rental-notice { grid-template-columns:1fr; gap:0; }
  .rental-notice__visual { aspect-ratio:800 / 420; }
  .rental-notice__content { padding-top:2rem; }
  .rental-notice__actions { grid-template-columns:1fr; }
  .rental-requirements__grid { grid-template-columns:1fr; }
  .rental-requirement { min-height:0; }
  .rental-contact { align-items:flex-start; flex-direction:column; }
  .rental-contact__links { text-align:left; }
  .content--rental .rental-contact__links a { justify-content:flex-start; }
}

.rental-requirements__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.content--rental .rental-intro .mhg-button {
  min-height: 58px;
  padding: 1rem 1.5rem;
  border: 2px solid var(--mhg-red);
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(227, 6, 32, .25);
}

.content--rental .rental-intro .mhg-button:hover,
.content--rental .rental-intro .mhg-button:focus-visible {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

@media (max-width: 1000px) {
  .rental-requirements__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .rental-requirements__grid {
    grid-template-columns: 1fr;
  }
}
