/* ============================================
   LOKVIA EXPOSE — Base Layout CSS
   Replaces grundboden.webflow.shared.min.css
   ============================================ */

/* --- Layout & Spacing --- */
.container-large { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; }
.padding-global { padding-left: 2.5rem; padding-right: 2.5rem; }
.padding-section-medium { padding-top: 5rem; padding-bottom: 5rem; }
.padding-section-large { padding-top: 7rem; padding-bottom: 7rem; }

.spacer-xsmall { width: 100%; padding-top: 1rem; }
.spacer-small  { width: 100%; padding-top: 1.5rem; }
.spacer-medium { width: 100%; padding-top: 2rem; }
.spacer-large  { width: 100%; padding-top: 3rem; }
.spacer-xlarge { width: 100%; padding-top: 4rem; }

/* --- Typography --- */
.heading-style-h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.heading-style-h4 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.heading-style-h6 { font-size: 1rem; font-weight: 700; line-height: 1.4; }
.text-size-regular { font-size: 1rem; }
.text-size-medium  { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.text-size-small   { font-size: 0.875rem; }
.text-size-tiny    { font-size: 0.75rem; }
.text-weight-bold  { font-weight: 700; }
.text-weight-medium { font-weight: 500; }
.text-color-grey, .text-color-gray { color: var(--lv-muted); }
.text-color-light-green { color: #00D68F; }

/* --- Utility (replaces w-* classes) --- */
.lv-inline-block { max-width: 100%; display: inline-block; }
.lv-embed { display: block; }
.lv-richtext { }
.lv-richtext p, .lv-richtext li, .lv-richtext div { line-height: 1.7; }
.lv-richtext h2, .lv-richtext h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; }
.lv-btn {
  color: #fff; cursor: pointer; border: 0; border-radius: 6px;
  padding: 9px 15px; text-decoration: none; display: inline-block;
  font-weight: 600; transition: all 0.2s;
}
.lv-hidden   { display: none !important; }
.lv-dyn-hide { display: none !important; }
.lv-grid { display: grid; grid-row-gap: 16px; grid-column-gap: 16px; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; }

/* --- Forms (replaces w-form, w-input, w-checkbox) --- */
.lv-form { margin: 0 0 15px; }
.lv-form-done { text-align: center; background: rgba(0,214,143,0.15); color: #00D68F; border: 1px solid rgba(0,214,143,0.3); padding: 20px; display: none; border-radius: 8px; }
.lv-form-fail { background: rgba(239,68,68,0.15); color: #EF4444; border: 1px solid rgba(239,68,68,0.3); margin-top: 10px; padding: 10px; display: none; border-radius: 8px; }
.lv-form-label { cursor: pointer; margin-bottom: 0; font-weight: 400; display: inline-block; }
.lv-input { width: 100%; padding: 0.75rem; border: 1px solid var(--lv-border); border-radius: 8px; background: var(--lv-slate); color: var(--lv-cream); font-size: 1rem; }
.lv-input:focus { outline: none; border-color: #00D68F; box-shadow: 0 0 0 3px rgba(0,214,143,0.15); }
.lv-input::placeholder { color: var(--lv-muted); }
.lv-checkbox { margin-bottom: 5px; padding-left: 20px; display: block; }
.lv-checkbox-input { float: left; margin: 4px 0 0 -20px; line-height: normal; accent-color: #00D68F; }

/* --- Section --- */
.section_portfolio-header { position: relative; }
.section_portfolio-print  { display: none; }
@media print { .section_portfolio-print { display: block; } }

/* --- Back Button --- */
.button-back {
  background: var(--lv-graphite); color: var(--lv-cream);
  border: 1px solid var(--lv-border); border-radius: 6px;
  justify-content: center; align-items: center;
  width: 3rem; height: 3rem; margin-bottom: 1.5rem;
  display: inline-flex; position: sticky; top: 0; z-index: 10;
  transition: all 0.2s;
}
.button-back:hover { border-color: #00D68F; background: rgba(0,214,143,0.1); }

.icon-embed-xsmall {
  flex-direction: column; justify-content: center; align-items: center;
  width: 1.5rem; height: 1.5rem; display: flex; transition: color 0.3s;
}
.icon-embed-xxsmall { width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; }

/* --- Breadcrumbs --- */
.breadcrumb_component { align-items: center; width: 100%; margin-bottom: 1rem; display: flex; font-size: 0.8rem; }
.breadcrumb-link { color: var(--lv-muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb-link:hover, .breadcrumb-link:hover div { color: #00D68F; }
.breadcrumb-link.is-active, .breadcrumb-link.is-active div { color: var(--lv-cream); font-weight: 600; }
.breadcrumb-divider { justify-content: center; align-items: center; width: 1rem; height: 1rem; margin: 0 0.5rem; display: flex; }

/* --- Expose Component --- */
.portfolio-header_component {
  grid-column-gap: 16px; grid-row-gap: 16px;
  flex-direction: column; padding-bottom: 3rem; display: flex;
}

.portfolio-header_content-top { margin-bottom: 3rem; overflow: hidden; }

.portfolio-header_content-bottom {
  grid-column-gap: 2.5rem; grid-row-gap: 2rem;
  grid-template-columns: 1fr 1fr; display: grid;
}

/* --- Gallery --- */
.portfolio-header_gallery {
  display: flex; flex-direction: row; gap: 1rem; width: 100%;
}

.mapbox_static-map-wrapper {
  width: 50%; flex: 0 0 50%;
  border: 1px solid var(--lv-border); background: var(--lv-graphite);
  border-radius: 12px; justify-content: center; align-items: stretch;
  height: 100%; display: flex; overflow: hidden;
}

.mapbox_static-map-wrapper-ratio {
  background: var(--lv-graphite);
  width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
}

.portfolio-header_list-wrapper { width: 50%; flex: 0 0 50%; }
.portfolio-header_list {
  grid-column-gap: 0.5rem; grid-row-gap: 0.5rem;
  grid-template-rows: 1fr; grid-template-columns: 1fr 1fr;
  width: 100%; height: 100%; display: grid;
}

.portfolio-header_item { position: relative; }
.portfolio-header_lightbox-link {
  width: 100%; height: 100%; display: block; position: relative; overflow: hidden;
  transition: opacity 0.3s; text-decoration: none;
}
.portfolio-header_lightbox-link:hover { opacity: 0.85; }

.portfolio-header_image-wrapper {
  border: 1px solid var(--lv-border); border-radius: 12px;
  justify-content: center; align-items: center;
  width: 100%; height: 100%; display: flex; overflow: hidden;
}

.portfolio-header_image-small { object-fit: cover; width: 100%; height: 100%; border-radius: 12px; }

.empty-state { display: none; }

/* --- Details Sidebar --- */
.portfolio-header_portfolio-details {
  background: var(--lv-dark); border: 1px solid var(--lv-border);
  border-radius: 12px; padding: 2rem; position: sticky; top: 6rem;
}

.portfolio-line-flex-horizontal {
  gap: 0.5rem; border-bottom: 1px dashed var(--lv-border);
  flex-flow: row; justify-content: space-between; align-items: flex-start;
  margin-bottom: 0.75rem; padding-bottom: 0.5rem; display: flex;
}

.portfolio-line-flex-horizontal-2 { justify-content: space-between; align-self: stretch; display: flex; }

.portfolio-line-flex-vertical {
  gap: 0.5rem; border-bottom: 1px dashed var(--lv-border);
  flex-flow: column; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1.5rem; padding-bottom: 0.5rem; display: flex;
}

.wert-mit-einheit { gap: 0.25rem; display: flex; }
.number-format { font-variant-numeric: tabular-nums; }

.nutzungsart-tag {
  background: rgba(0,214,143,0.15); color: #00D68F; text-align: center;
  border-radius: 0.5rem; margin-bottom: 0.5rem; margin-right: 0.5rem;
  padding: 0.25rem 0.75rem; display: inline-block;
}

.collection-list { gap: 0.5rem; margin-bottom: 1rem; display: inline-flex; flex-wrap: wrap; }

.pflichtfeld { color: #ef4444; font-weight: 600; }

/* --- Print Button --- */
.print-button-wrapper { justify-content: flex-start; align-items: center; padding-top: 1.5rem; display: flex; }
.print-button {
  border: 1px solid #00D68F; background: #00D68F; color: var(--lv-void);
  text-align: center; border-radius: 0.5rem; padding: 1rem 1.5rem;
  font-weight: 600; line-height: 1.5; text-decoration: none; transition: all 0.3s;
}
.print-button:hover { background: #00C080; border-color: #00C080; }

/* --- Print Section --- */
.print-header { display: none; }
.print-header-wrapper { gap: 1rem; justify-content: space-between; align-items: center; width: 100%; display: flex; }
.print-footer { border-top: 1px solid var(--lv-border); justify-content: center; align-items: center; width: 100%; margin-top: 5rem; padding: 1rem; font-size: 0.5rem; display: flex; }
.print-footer-wrapper { gap: 1rem; justify-content: flex-start; align-items: stretch; width: 100%; display: flex; }
.print-footer-text { align-self: center; }

.portfolio-header_component-print { flex-direction: column; display: block; }
.portfolio-header_content-top-print { flex-flow: column; flex: 1; display: flex; gap: 3rem; }
.portfolio-header_content-print { grid-column-gap: 2.5rem; grid-row-gap: 2rem; grid-template-columns: 1fr; display: grid; }
.portfolio-header_portfolio-details-print { display: none; }
@media print { .portfolio-header_portfolio-details-print { display: block; } }

.online-expose-link { gap: 0.5rem; flex-flow: column; padding: 2rem 0; display: flex; }
.link-block { display: flex; text-decoration: none; color: #00D68F; }
.link-block:hover { color: var(--lv-cream); }

/* --- Portfolio Cards (seeker dashboard) --- */
.portfolio13_list-wrapper { position: relative; }
.portfolio13_list {
  grid-column-gap: 1rem; grid-row-gap: 1rem;
  grid-template-columns: repeat(4, 1fr); display: grid;
}
.portfolio13_item { position: relative; }
.portfolio13_item-link {
  text-decoration: none; color: inherit; display: block;
  border: 1px solid var(--lv-border); border-radius: 12px;
  overflow: hidden; background: var(--lv-dark); transition: all 0.2s;
}
.portfolio13_item-link:hover { border-color: #00D68F; transform: translateY(-2px); }

.portfolio13_image-wrapper {
  width: 100%; height: 200px; overflow: hidden; position: relative;
}
.portfolio13_image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

.portfolio13_badge-stack { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; z-index: 2; }
.portfolio13_kategorie-tag {
  background: rgba(0,214,143,0.9); color: var(--lv-void);
  padding: 2px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600;
}
.portfolio13_top-tag {
  background: rgba(255,193,7,0.9); color: var(--lv-void);
  padding: 2px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600;
}

.portfolio13_title-wrapper { padding: 1rem; }
.portfolio13_item-content-top { margin-bottom: 0.5rem; }
.portfolio13-address-divider { border-top: 1px solid var(--lv-border); margin: 0.75rem 0; }

.portfolio13_tag-list { display: flex; gap: 1rem; flex-wrap: wrap; }
.portfolio13_tag-item { font-size: 0.8rem; color: var(--lv-muted); }
.portfolio13_tag-item-value { font-weight: 600; color: var(--lv-cream); }

.portfolio13_button-wrapper { padding: 0 1rem 1rem; }

/* --- Filter Form (Suchprofil) --- */
.suchprofil_component { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.suchprofil_content { display: flex; flex-direction: column; }
.suchprofil_heading-wrapper { margin-bottom: 1.5rem; }
.suchprofil-form_component { }
.suchprofil-form { }
.form_field-wrapper { margin-bottom: 1rem; }
.form_form_label { font-weight: 500; margin-bottom: 0.5rem; display: block; color: var(--lv-text); }
.form_input {
  width: 100%; padding: 0.75rem; border: 1px solid var(--lv-border);
  border-radius: 8px; background: var(--lv-slate); color: var(--lv-cream); font-size: 1rem;
}
.form_input:focus { outline: none; border-color: #00D68F; box-shadow: 0 0 0 3px rgba(0,214,143,0.15); }
.form_checkbox { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.form_checkbox-icon { width: 1.25rem; height: 1.25rem; }
.form_checkbox-label { cursor: pointer; }

/* --- Accordion --- */
.accordion_component { border: 1px solid var(--lv-border); border-radius: 8px; margin-bottom: 0.5rem; overflow: hidden; }
.accordion_top { padding: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.accordion_top:hover { background: rgba(255,255,255,0.03); }
.accordion_bottom { padding: 0 1rem 1rem; }
.accordion2_icon { transition: transform 0.3s; width: 1.25rem; height: 1.25rem; }

/* --- Buttons --- */
.button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: 6px; font-weight: 600; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; }
.button.is-secondary { background: var(--lv-graphite); color: var(--lv-cream); border: 1px solid var(--lv-border); }
.button.is-secondary:hover { border-color: #00D68F; color: #00D68F; }
.button.is-text { background: transparent; color: var(--lv-muted); padding: 0.5rem; }
.button.is-text:hover { color: var(--lv-cream); }
.button.is-icon { gap: 0.25rem; }

.hide { display: none; }
.alternate-space { }
.schwerpunkte, .grundst-cksdaten { }
.section_registrieren { position: relative; }
.text-block { }
.reserviert { position: relative; }
.reserviert-block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 5; border-radius: 12px; }
.mapbox-image-container { position: relative; }

/* --- Responsive --- */
@media (max-width: 1200px) {
  .portfolio-header_content-bottom { grid-template-columns: 1fr; }
  .portfolio13_list { grid-template-columns: repeat(3, 1fr); }
  .suchprofil_component { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .padding-section-medium { padding-top: 4rem; padding-bottom: 4rem; }
  .padding-section-large { padding-top: 5rem; padding-bottom: 5rem; }
  .portfolio-header_gallery { flex-direction: column; }
  .mapbox_static-map-wrapper { width: 100%; flex: none; height: 300px; }
  .portfolio-header_list-wrapper { width: 100%; flex: none; height: auto; }
  .portfolio13_list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .padding-global { padding-left: 1.25rem; padding-right: 1.25rem; }
  .padding-section-medium { padding-top: 3rem; padding-bottom: 3rem; }
  .spacer-large { padding-top: 2rem; }
  .spacer-xlarge { padding-top: 2.5rem; }
  .spacer-small { padding-top: 1.25rem; }
  .spacer-xsmall { padding-top: 0.75rem; }
  .heading-style-h3 { font-size: 1.5rem; }
  .heading-style-h4 { font-size: 1.25rem; }
  .portfolio13_list { grid-template-columns: 1fr; }
  .portfolio-header_content-bottom { grid-template-columns: 1fr; }
}

@media print {
  .print-header { display: block; }
  .section_portfolio-print { display: block; }
  .portfolio-header_portfolio-details-print { display: block; }
}