/*
  WJ Bootstrap Substitute CSS
  Ziel: Minimal benötigte Bootstrap-Klassen nachbilden, ohne Bootstrap zu laden.
  Fokus: responsive Container/Grid, gängige Utilities, Buttons/Formfelder, Alerts, Cards.
  Farben: keine harten Farben; falls Astra-Variablen vorhanden sind, werden diese genutzt.
*/

/* Root Fallbacks (werden nur verwendet, wenn Astra-Variablen fehlen) */
:root {
  --wj-primary: var(--ast-global-color-0, #0d6efd);
  --wj-border: var(--ast-border-color, rgba(0,0,0,.12));
  --wj-light: var(--ast-global-color-7, #f8f9fa);
  /* Falls Bootstrap-Reboot aktiv ist: Link-Variablen an Astra koppeln */
  --bs-link-color: var(--ast-global-color-0, #0d6efd);
  --bs-link-hover-color: var(--ast-global-color-0, #0a58ca);
}

/* Container */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.container-fluid { max-width: 100%; }

/* Max-Widths (ähnlich Bootstrap, ausreichend für unser Layout) */
@media (min-width: 576px) { .container, .container-sm { max-width: 540px; } }
@media (min-width: 768px) { .container, .container-sm, .container-md { max-width: 720px; } }
@media (min-width: 992px) { .container, .container-sm, .container-md, .container-lg { max-width: 960px; } }
@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; } }
@media (min-width: 1400px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1320px; } }

/* Grid */
.row {
  --wj-gx: 30px; /* 2 * 15px */
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--wj-gx) / 2);
  margin-left: calc(-1 * var(--wj-gx) / 2);
}
.row > [class^="col"],
.row > [class*=" col"] {
  padding-right: calc(var(--wj-gx) / 2);
  padding-left: calc(var(--wj-gx) / 2);
  box-sizing: border-box;
}
.col { flex: 1 0 0%; max-width: 100%; }

/* 12er Columns */
[class^="col-"] { flex: 0 0 auto; }
.col-1{width:8.333333%}.col-2{width:16.666667%}.col-3{width:25%}.col-4{width:33.333333%}.col-5{width:41.666667%}
.col-6{width:50%}.col-7{width:58.333333%}.col-8{width:66.666667%}.col-9{width:75%}.col-10{width:83.333333%}
.col-11{width:91.666667%}.col-12{width:100%}

/* Responsive Columns (md breakpoint ~768px) */
@media (min-width: 768px) {
  .col-md-3 { width: 25%; }
  .col-md-9 { width: 75%; }
  .col-md-12 { width: 100%; }
  .col-md-4 { width: 33.333333%; }
}

/* Extra large columns (xxl, 1400px) */
@media (min-width: 1400px) {
  .col-xxl-12 { width: 100%; }
}

/* Large breakpoint (~992px) */
@media (min-width: 992px) {
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.333333%; }
}

/* Flex & Gap Utilities */
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }

/* Spacing Utilities (0..5) */
/* Basisgröße 0.25rem; kompatibel mit existierender Nutzung: mt-2, mb-2, my-2, ms-2, me-2, py-2, ps-2, pe-2, mt-3, mb-3, mt-4 */
:root { --wj-sp: .25rem; }
[class^="m"], [class^="p"] { box-sizing: border-box; }
/* Margin */
.m-0{margin:0!important}.m-1{margin:calc(var(--wj-sp)*1)!important}.m-2{margin:calc(var(--wj-sp)*2)!important}.m-3{margin:calc(var(--wj-sp)*3)!important}.m-4{margin:calc(var(--wj-sp)*4)!important}.m-5{margin:calc(var(--wj-sp)*5)!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:calc(var(--wj-sp)*1)!important}.mt-2{margin-top:calc(var(--wj-sp)*2)!important}.mt-3{margin-top:calc(var(--wj-sp)*3)!important}.mt-4{margin-top:calc(var(--wj-sp)*4)!important}.mt-5{margin-top:calc(var(--wj-sp)*5)!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:calc(var(--wj-sp)*1)!important}.mb-2{margin-bottom:calc(var(--wj-sp)*2)!important}.mb-3{margin-bottom:calc(var(--wj-sp)*3)!important}.mb-4{margin-bottom:calc(var(--wj-sp)*4)!important}.mb-5{margin-bottom:calc(var(--wj-sp)*5)!important}
.ms-0{margin-left:0!important}.ms-1{margin-left:calc(var(--wj-sp)*1)!important}.ms-2{margin-left:calc(var(--wj-sp)*2)!important}.ms-3{margin-left:calc(var(--wj-sp)*3)!important}.ms-4{margin-left:calc(var(--wj-sp)*4)!important}.ms-5{margin-left:calc(var(--wj-sp)*5)!important}
.me-0{margin-right:0!important}.me-1{margin-right:calc(var(--wj-sp)*1)!important}.me-2{margin-right:calc(var(--wj-sp)*2)!important}.me-3{margin-right:calc(var(--wj-sp)*3)!important}.me-4{margin-right:calc(var(--wj-sp)*4)!important}.me-5{margin-right:calc(var(--wj-sp)*5)!important}
.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:calc(var(--wj-sp)*1)!important;margin-bottom:calc(var(--wj-sp)*1)!important}.my-2{margin-top:calc(var(--wj-sp)*2)!important;margin-bottom:calc(var(--wj-sp)*2)!important}.my-3{margin-top:calc(var(--wj-sp)*3)!important;margin-bottom:calc(var(--wj-sp)*3)!important}.my-4{margin-top:calc(var(--wj-sp)*4)!important;margin-bottom:calc(var(--wj-sp)*4)!important}.my-5{margin-top:calc(var(--wj-sp)*5)!important;margin-bottom:calc(var(--wj-sp)*5)!important}
.mx-0{margin-left:0!important;margin-right:0!important}.mx-1{margin-left:calc(var(--wj-sp)*1)!important;margin-right:calc(var(--wj-sp)*1)!important}.mx-2{margin-left:calc(var(--wj-sp)*2)!important;margin-right:calc(var(--wj-sp)*2)!important}.mx-3{margin-left:calc(var(--wj-sp)*3)!important;margin-right:calc(var(--wj-sp)*3)!important}.mx-4{margin-left:calc(var(--wj-sp)*4)!important;margin-right:calc(var(--wj-sp)*4)!important}.mx-5{margin-left:calc(var(--wj-sp)*5)!important;margin-right:calc(var(--wj-sp)*5)!important}
/* Padding */
.p-0{padding:0!important}.p-1{padding:calc(var(--wj-sp)*1)!important}.p-2{padding:calc(var(--wj-sp)*2)!important}.p-3{padding:calc(var(--wj-sp)*3)!important}.p-4{padding:calc(var(--wj-sp)*4)!important}.p-5{padding:calc(var(--wj-sp)*5)!important}
.pt-0{padding-top:0!important}.pt-1{padding-top:calc(var(--wj-sp)*1)!important}.pt-2{padding-top:calc(var(--wj-sp)*2)!important}.pt-3{padding-top:calc(var(--wj-sp)*3)!important}.pt-4{padding-top:calc(var(--wj-sp)*4)!important}.pt-5{padding-top:calc(var(--wj-sp)*5)!important}
.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:calc(var(--wj-sp)*1)!important}.pb-2{padding-bottom:calc(var(--wj-sp)*2)!important}.pb-3{padding-bottom:calc(var(--wj-sp)*3)!important}.pb-4{padding-bottom:calc(var(--wj-sp)*4)!important}.pb-5{padding-bottom:calc(var(--wj-sp)*5)!important}
.ps-0{padding-left:0!important}.ps-1{padding-left:calc(var(--wj-sp)*1)!important}.ps-2{padding-left:calc(var(--wj-sp)*2)!important}.ps-3{padding-left:calc(var(--wj-sp)*3)!important}.ps-4{padding-left:calc(var(--wj-sp)*4)!important}.ps-5{padding-left:calc(var(--wj-sp)*5)!important}
.pe-0{padding-right:0!important}.pe-1{padding-right:calc(var(--wj-sp)*1)!important}.pe-2{padding-right:calc(var(--wj-sp)*2)!important}.pe-3{padding-right:calc(var(--wj-sp)*3)!important}.pe-4{padding-right:calc(var(--wj-sp)*4)!important}.pe-5{padding-right:calc(var(--wj-sp)*5)!important}
.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:calc(var(--wj-sp)*1)!important;padding-bottom:calc(var(--wj-sp)*1)!important}.py-2{padding-top:calc(var(--wj-sp)*2)!important;padding-bottom:calc(var(--wj-sp)*2)!important}.py-3{padding-top:calc(var(--wj-sp)*3)!important;padding-bottom:calc(var(--wj-sp)*3)!important}.py-4{padding-top:calc(var(--wj-sp)*4)!important;padding-bottom:calc(var(--wj-sp)*4)!important}.py-5{padding-top:calc(var(--wj-sp)*5)!important;padding-bottom:calc(var(--wj-sp)*5)!important}
.px-0{padding-left:0!important;padding-right:0!important}.px-1{padding-left:calc(var(--wj-sp)*1)!important;padding-right:calc(var(--wj-sp)*1)!important}.px-2{padding-left:calc(var(--wj-sp)*2)!important;padding-right:calc(var(--wj-sp)*2)!important}.px-3{padding-left:calc(var(--wj-sp)*3)!important;padding-right:calc(var(--wj-sp)*3)!important}.px-4{padding-left:calc(var(--wj-sp)*4)!important;padding-right:calc(var(--wj-sp)*4)!important}.px-5{padding-left:calc(var(--wj-sp)*5)!important;padding-right:calc(var(--wj-sp)*5)!important}

/* Buttons (neutral; nutzen Astra-Primärfarbe, wenn vorhanden) */
.btn {
  display: inline-block;
  font: inherit;
  line-height: 1.5;
  padding: .375rem .75rem;
  border: 1px solid var(--wj-border);
  background: transparent;
  color: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: .375rem;
}
.btn-primary {
  background-color: var(--ast-global-color-0, var(--wj-primary));
  border-color: var(--ast-global-color-0, var(--wj-primary));
  color: #fff;
}
.btn-primary.text-light{ color:#fff; }
.btn:disabled{ opacity:.65; cursor:not-allowed; }

/* Form Controls */
.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font: inherit;
  line-height: 1.5;
  color: inherit;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var(--wj-border);
  border-radius: .375rem;
}

/* Input Group (einfach) */
.input-group { display:flex; align-items: stretch; width:100%; }
.input-group > .form-control { flex:1 1 auto; }
.input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Alerts (dezente Boxen) */
.alert {
  position: relative;
  padding: .75rem 1rem;
  border: 1px solid var(--wj-border);
  border-radius: .375rem;
}
.alert-success { background: #edf7ed; border-color: #cce5cc; }
.alert-danger { background: #fdecea; border-color: #f5c2c7; }
.alert-warning { background: #fff8e1; border-color: #ffe69c; }

/* Cards / Panels */
.card { border: 1px solid var(--wj-border); border-radius: .375rem; background:#fff; }
.card-body { padding: 1rem; }

/* Farben/Utilities */
.text-primary { color: var(--ast-global-color-0, var(--wj-primary)); }
.bg-light { background-color: var(--wj-light) !important; }
.border { border: 1px solid var(--wj-border) !important; }

/* Helfer: ast-panel (dezente Abtrennung) */
.ast-panel { background-color: var(--wj-light); border: 1px solid var(--wj-border); border-radius: .375rem; padding: .75rem .9rem; }

/* Linkfarben nur in WJ-Bereichen setzen (Elementor-Farben nicht übersteuern) */
.wj-search-page a,
.wj-search-page a:hover,
.wj-exposeelist a,
.wj-exposeelist a:hover,
.saved-search-compact a,
.saved-search-compact a:hover,
.saved-search-howto a,
.saved-search-howto a:hover,
.wj-similar a,
.wj-similar a:hover { color: var(--ast-global-color-0, inherit); }

/* Suchseite: sichere Fluss, keine Nebenstellung von Header/Inhalt */
.wj-search-page .entry-header, .wj-search-page .entry-content { clear: both; }

/* Kompaktformular: dezente Box + gut lesbarer Label-Text */
.saved-search-compact { background-color: var(--wj-light); border: 1px solid var(--wj-border); border-radius: .375rem; padding: .5rem .75rem; }
.saved-search-compact__label span { color: inherit; }