/* 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;
}

/* Standardfelder bei Stellenangeboten nicht benötigt */
.css_anzeige_erstellen:has(#ex_fields[data-cat-id="1"]) .djform_row.description,
.css_anzeige_erstellen:has(#ex_fields[data-cat-id="1"]) .djform_row.postcode,
.css_anzeige_erstellen:has(#ex_fields[data-cat-id="1"]) .djform_row.price {
    display: none;
}

/* --------------------------------------------------
   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;
}

.css_anzeige_detail .dj-item .title_edit {
  display: none;
}

/* ----------------------------------------------------------
   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;
    }

}

/* ----------------------------------------------------------
   Standort
   ---------------------------------------------------------- */

.css_anzeige_detail .custom_det {
    float: none !important;
    width: 100% !important;
}
.css_anzeige_detail .dj-item .localization_det {
    margin-left: 0px !important;
}

.css_anzeige_detail .localization_det {
    float: none !important;
    clear: both;
    width: 100% !important;

    margin-top: 28px;
    padding-top: 20px;

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

/* ----------------------------------------------------------
   EIGENE ANZEIGEN
   ---------------------------------------------------------- */

/* Spaltenbreiten */
.css_eigene_anzeigen .col_ua.icon_name {
    width: 60% !important;
}

.css_eigene_anzeigen .col_ua.public_status {
    width: 33% !important;
}

.css_eigene_anzeigen .col_ua.advert_active {
    width: 7% !important;
}


/* Bild + Titel/Kategorie */
.css_eigene_anzeigen .col_ua.icon_name .col_ua_in {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 18px;
    align-items: start;
}


/* Bild links */
.css_eigene_anzeigen .col_ua.icon_name .icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    float: none !important;
    margin: 0 !important;
}


/* Bildgröße */
.css_eigene_anzeigen .col_ua.icon_name .icon img {
    display: block;
    width: 180px !important;
    height: 120px;
    max-width: 100%;
    object-fit: cover;
    float: none !important;
}


/* Titel rechts oben */
.css_eigene_anzeigen .col_ua.icon_name .title {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0 0 8px;
    float: none !important;
}


/* Kategorie rechts darunter */
.css_eigene_anzeigen .col_ua.icon_name .c_name {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    float: none !important;
}


/* Altes Clear-Element innerhalb dieses Bereichs nicht mehr nötig */
.css_eigene_anzeigen .col_ua.icon_name .clear_both {
    display: none;
}

.css_eigene_anzeigen .rules-violated {
  display: none;
}