/* Max. 950px Breite Seiten und Unterseiten Marktplatz */ 


/* --------------------------------------------------
   KATEGORIE ANSICHT
-------------------------------------------------- */

.css_anzeige_detail .main_cat_title .cat_icon {
  display: none;
}


/* --------------------------------------------------
   HEADER AUSRICHTUNG
-------------------------------------------------- */

#reihe1 > .inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hauptnavigation / Logo nimmt den freien Platz */
#reihe1column1 {
  flex: 1 1 auto;
}

/* Avatar und Burger nur so breit wie nötig */
#reihe1column3,
#reihe1column2 {
  flex: 0 0 auto;
  width: auto !important;
}

/* Avatar mittig */
#reihe1column3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 42px;
}

/* Avater Styling */
.djcf_user_avatar_img {
  width: 42px !important;
  border-radius: 50px;
  border: 2px solid #504f5354;
  transition: transform 0.75s ease;
}

.djcf_user_avatar_img:hover {

  transform: scale(1.1);
}

/* Burger mittig */
#reihe1column2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.css_anzeige_erstellen .dj-additem .djform_row .label {
  text-align: left;
}

.css_anzeige_erstellen .dj-additem .djform_row .djform_field {
    min-width: 500px;
}

@media (max-width: 600px) {
    .css_anzeige_erstellen .dj-additem .djform_row .djform_field {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================
   COUNTERKOMPASS
   Anzeige erstellen
   Checkboxen & Radiobuttons
   ========================================================== */


/* ----------------------------------------------------------
   Grundstruktur der Auswahlfelder
   ---------------------------------------------------------- */

.css_anzeige_erstellen .radiofield_box {
    width: 100%;
}

.css_anzeige_erstellen .radiofield_box fieldset,
.css_anzeige_erstellen .radiofield_box .checkboxes {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}


/* ----------------------------------------------------------
   Einzelne Checkbox-/Radio-Zeile
   ---------------------------------------------------------- */

.css_anzeige_erstellen .checkbox_v,
.css_anzeige_erstellen .radio_v {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;

    width: 100%;
    margin: 0 0 10px;
    padding: 0;
}


/* ----------------------------------------------------------
   Checkboxen & Radiobuttons
   ---------------------------------------------------------- */

.css_anzeige_erstellen .checkbox_v input[type="checkbox"],
.css_anzeige_erstellen .radio_v input[type="radio"] {
    width: 18px;
    height: 18px;

    margin: 2px 0 0;
    padding: 0;

    cursor: pointer;
}


/* ----------------------------------------------------------
   Beschriftungen
   ---------------------------------------------------------- */

.css_anzeige_erstellen .checkbox_v .radio_label,
.css_anzeige_erstellen .radio_v .radio_label {
    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    line-height: 1.45;
    cursor: pointer;
}


/* ----------------------------------------------------------
   Letztes Element ohne unnötigen Abstand
   ---------------------------------------------------------- */

.css_anzeige_erstellen .checkbox_v:last-child,
.css_anzeige_erstellen .radio_v:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   Fokus für Tastaturbedienung
   ---------------------------------------------------------- */

.css_anzeige_erstellen .checkbox_v input:focus-visible,
.css_anzeige_erstellen .radio_v input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ==========================================================
   Lange Checkbox-Bereiche
   z.B. Datenschutz / Rechtlicher Pflichtcheck /
   Chancengleichheit
   ========================================================== */

.css_anzeige_erstellen
.djrow_datenschutz_checkbox .checkbox_v,

.css_anzeige_erstellen
.djrow_rechtlicher_pflichtcheck_des_inserenten .checkbox_v,

.css_anzeige_erstellen
.djrow_optionale_standardformulierung_zur_chancengleichheit .checkbox_v {
    padding: 10px 0;
    margin: 0;
	width: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ==========================================================
   Redundante Feldlabels ausblenden
   Überschrift der Gruppe reicht bereits aus
   ========================================================== */

.css_anzeige_erstellen
.djrow_rechtlicher_pflichtcheck_des_inserenten > .label,

.css_anzeige_erstellen
.djrow_optionale_standardformulierung_zur_chancengleichheit > .label,

.css_anzeige_erstellen
.djrow_datenschutz_checkbox > .label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Keine Trennlinie nach dem letzten Eintrag */

.css_anzeige_erstellen
.djrow_datenschutz_checkbox .checkbox_v:last-child,

.css_anzeige_erstellen
.djrow_rechtlicher_pflichtcheck_des_inserenten .checkbox_v:last-child,

.css_anzeige_erstellen
.djrow_optionale_standardformulierung_zur_chancengleichheit .checkbox_v:last-child {
    border-bottom: 0;
}


/* ==========================================================
   Rechtlicher Pflichtcheck
   ========================================================== */

/*
   Das Feld ist ein Pflichtfeld, DJ-Classifieds erzeugt dafür
   aktuell nur ein einzelnes "*" als eigenes Label.
   Das wird oben bereits ausgeblendet.
*/

.css_anzeige_erstellen
.djrow_rechtlicher_pflichtcheck_des_inserenten .djform_field {
    width: 100%;
}


/* ==========================================================
   Optionale Standardformulierung
   ========================================================== */

.css_anzeige_erstellen
.djrow_optionale_standardformulierung_zur_chancengleichheit
.info {
    display: block;

    margin-top: 6px;

    font-size: 0.9em;
    line-height: 1.45;
}


/* ==========================================================
   Übergang von Zusatzfeldern zu Standardfeldern
   ========================================================== */


.css_anzeige_erstellen .djform_row.introdesc {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 2px solid rgba(0, 0, 0, 0.14);
}

.css_anzeige_erstellen .djform_row.description {
    margin-top: 8px;
}

/* --------------------------------------------------
   SUCHE
-------------------------------------------------- */

.marktplatz_nav #form_search603 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-radius: 25px;
}

.marktplatz_nav #form_search603 .djcf_se_row {
    margin: 0;
}

.marktplatz_nav #form_search603 .search_word {
    flex: 1 1 250px;
}

.marktplatz_nav #input_search603 {
    border-radius: 25px;
}

/* Suchbutton ausblenden */
.marktplatz_nav #form_search603 .search_buttons button {
    display: none;
}
/* Resetbutton ausblenden */
.marktplatz_nav #form_search603 .search_buttons .reset {
    display: none;
}

.marktplatz_nav .dj_cf_search .button {
    margin: 5px 5px 5px 0;
}


/* --------------------------------------------------
   PROFIL / ANZEIGEN-BUTTONS
-------------------------------------------------- */

.marktplatz_nav #row_ID1783668014082 > .inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.marktplatz_nav .buttonck {
    color: #ffffff;
    background-color: #9566a9;
    border: 1px solid #ffffff;
    border-radius: 25px;
    padding: 7px 14px;
}

.marktplatz_nav .buttonck:hover {
    color: #ffffff;
    background-color: #5B3B68;
}



/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 600px) {
    .css_anzeige_erstellen .checkbox_v,
    .css_anzeige_erstellen .radio_v {
        grid-template-columns: 22px minmax(0, 1fr);
        column-gap: 8px;
    }

}

    .css_anzeige_erstellen .checkbox_v input[type="checkbox"],
    .css_anzeige_erstellen .radio_v input[type="radio"] {
        width: 17px;
        height: 17px;
    }

}

/* ==========================================================
   COUNTERKOMPASS
   Anzeigen-Detailansicht
   ========================================================== */

.css_anzeige_detail .dj-item-in {
    padding: 20px;
}


/* ----------------------------------------------------------
   Beschreibung
   ---------------------------------------------------------- */

.css_anzeige_detail .description {
    margin-top: 24px;
    padding: 20px 24px;

    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.css_anzeige_detail .description h2 {
    margin: 0 0 14px;
}

.css_anzeige_detail .intro_desc_content {
    margin-bottom: 8px;
    font-weight: 600;
}

.css_anzeige_detail .desc_content p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   Spezifische Details
   ---------------------------------------------------------- */

.css_anzeige_detail .custom_det {
    margin-top: 24px;
}

.css_anzeige_detail .custom_det_content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
}


/* Einzelne Detailzeile */

.css_anzeige_detail .custom_det_content > .row {
    display: block;

    margin: 0;
    padding: 12px 0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}





/* ----------------------------------------------------------
   Gruppen optisch trennen
   ---------------------------------------------------------- */

.css_anzeige_detail .custom_det_content .row_label {
    display: block;
    margin-bottom: 5px;

    font-size: 0.86em;
    font-weight: 600;
    opacity: 0.65;
}

.css_anzeige_detail .custom_det_content .row_value {
    display: block;
    font-size: 1em;
    line-height: 1.4;
}

/* ----------------------------------------------------------
   Links
   ---------------------------------------------------------- */

.css_anzeige_detail .row_value a {
    word-break: break-word;
}


/* ----------------------------------------------------------
   Bilder und allgemeine Details oben
   ---------------------------------------------------------- */

.css_anzeige_detail .djcf_images_generaldet_box {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.css_anzeige_detail .images_wrap {
    max-width: 420px;
}

.css_anzeige_detail .general_det {
    flex: 1;
    width: auto !important;
}


/* Hauptbild */

.css_anzeige_detail #djc_mainimage {
    width: 100%;
    height: auto;
    border-radius: 8px;
}


/* ----------------------------------------------------------
   Kontaktbutton
   ---------------------------------------------------------- */

.css_anzeige_detail #ask_form_button {
    margin-top: 12px;
}


/* ----------------------------------------------------------
   Anzeigendetails unten
   ---------------------------------------------------------- */

.css_anzeige_detail .additional {
    margin-top: 28px;
    padding-top: 20px;

    border-top: 1px solid rgba(0, 0, 0, 0.12);
}


.css_anzeige_detail .item_price {
    font-size: 1.4rem !important;
    line-height: 1.5;
    color: #5B3B68 !important;
    font-weight: bold;
}
/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 800px) {

    .css_anzeige_detail .djcf_images_generaldet_box {
        display: block;
    }

    .css_anzeige_detail .images_wrap {
        width: 100% !important;
        max-width: none;
    }

    .css_anzeige_detail .general_det {
        width: 100% !important;
        margin-top: 18px;
    }

    .css_anzeige_detail .custom_det_content {
        grid-template-columns: 1fr;
    }

}