/* abgerundete Ecken */
.content-element img,
.card img {
  border-radius: 6px;
  object-fit: cover;
}


/* Abstand zwischen allen Inhaltselementen */
.page-content > .frame {
  display: flow-root;          /* umschließt das gefloatete Bild (ce-gallery float:right) */
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.page-content > .frame:last-child {
  margin-bottom: 0;
}



/********* totop Button ********/
#toTopBtn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;

  background: #a20510;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#toTopBtn.show {
  opacity: 1;
  pointer-events: auto;
}

#toTopBtn svg {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/*---- Textfarbe bei Markierungen ------------------------------------------*/
::selection {
    background-color: #c1392c;
    color: #ffffff;
}

/* Für Firefox zusätzlich nötig (ältere Versionen) */
::-moz-selection {
    background-color: #c1392c;
    color: #ffffff;
}



/********* F.A.Q. – Mobilista Motors ********/

/* Farbvariablen – Rot am besten exakt aus dem Logo-SVG übernehmen */
:root {
  --mm-red: #e30613;
  --mm-text: #161616;
  --mm-muted: #5e5e5e;
  --mm-line: #dcdcd8;
  --mm-hover: #f4f4f2;
}

.c-accordion-title {
  text-align: left;
  color: var(--mm-text);
  display: block;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 1.4em 3em 1.4em 0;
  font-family: inherit;
  font-size: 1.26em;
  font-weight: 400;
  cursor: pointer;
  transition: color .3s, background-color .3s, padding-left .3s;
  background: none;
  border: none;
  border-bottom: 1px solid var(--mm-line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.c-accordion-title:hover {
  color: #000;
  background-color: var(--mm-hover);
  padding-left: .75em;
}

.c-accordion-title:focus-visible {
  outline: 2px solid var(--mm-red);
  outline-offset: 2px;
}

/* geöffneter Zustand */
.c-accordion-title[aria-expanded="true"] {
  color: #000;
  padding-left: .75em;
  border-bottom-color: var(--mm-red);
}

/* Styling Plus und Minus */
.c-accordion-title::before,
.c-accordion-title::after {
  background-color: var(--mm-red) !important;
  transition: transform .35s ease;
}

/* Plus dreht sich beim Öffnen zum × */
.c-accordion-title[aria-expanded="true"]::before {
  transform: rotate(45deg);
}
.c-accordion-title[aria-expanded="true"]::after {
  transform: rotate(135deg);
}

/* Styling der Links in der FAQ */
.c-accordion-title a,
.c-accordion-title a:hover,
.c-accordion-title a:active {
  color: inherit;
  font-size: 1rem;
  text-decoration: none;
}



/* ==========================================================
   Mobilista Motors – Formular (EXT:form)
   ========================================================== */
.frame-type-form_formframework {
  --mm-bg: #ffffff;
  --mm-field: #f7f7f5;
  --mm-line: #d6d6d2;
  --mm-text: #161616;
  --mm-muted: #5e5e5e;
  --mm-red: #e30613;          /* Logo-Rot */
  --mm-radius: 2px;
  max-width: 760px;
  margin-inline: auto;
}

.frame-type-form_formframework form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Labels über den Feldern, im Stil der Navigation */
.frame-type-form_formframework label {
  display: block;
  margin-bottom: .5rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mm-muted);
}
.frame-type-form_formframework .required {
  color: var(--mm-red);
  margin-left: .2em;
}

/* Eingabefelder */
.frame-type-form_formframework input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.frame-type-form_formframework textarea,
.frame-type-form_formframework select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .9rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--mm-text);
  background: var(--mm-field);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius);
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
  -webkit-appearance: none;
  appearance: none;
}
.frame-type-form_formframework textarea {
  min-height: 180px;
  resize: vertical;
}
.frame-type-form_formframework input:hover,
.frame-type-form_formframework textarea:hover {
  border-color: #a8a8a4;
}
.frame-type-form_formframework input:focus,
.frame-type-form_formframework textarea:focus,
.frame-type-form_formframework select:focus {
  border-color: var(--mm-red);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, .12);
}

/* Browser-Autofill-Färbung an die Felder angleichen */
.frame-type-form_formframework input:-webkit-autofill {
  -webkit-text-fill-color: var(--mm-text);
  -webkit-box-shadow: 0 0 0 100px var(--mm-field) inset;
  caret-color: var(--mm-text);
}

/* Absende-Button */
.frame-type-form_formframework button[type="submit"],
.frame-type-form_formframework .btn-primary {
  margin-top: .5rem;
  padding: 1rem 2.75rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mm-red);
  border: 1px solid var(--mm-red);
  border-radius: var(--mm-radius);
  cursor: pointer;
  transition: background .25s, color .25s;
}
.frame-type-form_formframework button[type="submit"]:hover,
.frame-type-form_formframework button[type="submit"]:focus-visible {
  background: transparent;
  color: var(--mm-red);
}

/* Fehlermeldungen & Hilfetexte */
.frame-type-form_formframework .error input,
.frame-type-form_formframework .error textarea,
.frame-type-form_formframework [aria-invalid="true"] {
  border-color: var(--mm-red);
}
.frame-type-form_formframework .help-block,
.frame-type-form_formframework .invalid-feedback,
.frame-type-form_formframework .error .help-block {
  display: block;
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--mm-red);
}

/* Zweispaltig (für Grid-Row-Elemente im Formular-Editor) */
.frame-type-form_formframework .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.frame-type-form_formframework .row > * { min-width: 0; }
@media (max-width: 640px) {
  .frame-type-form_formframework .row { grid-template-columns: 1fr; }
}