/* steirische.online Harmonika Katalog Styling
   Primary: #e66700
   Scoped to .so-wrap to avoid theme side effects
*/

.so-wrap{
  --so-accent:#e66700;
  --so-text:#222;
  --so-muted:#6b6b6b;
  --so-border:#e9e9e9;
  --so-bg:#fff;
  --so-card:#fff;
  --so-shadow:0 18px 60px rgba(0,0,0,.08);
  --so-radius:18px;
  font-family:inherit;
  color:var(--so-text);
}

.so-wrap *{box-sizing:border-box}

.so-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin:0 0 24px 0}
.so-kicker{letter-spacing:.14em;font-size:12px;color:var(--so-muted);font-weight:600}
.so-title{margin:8px 0 0 0;font-size:48px;line-height:1.05;font-weight:800}
.so-sub{margin:14px 0 0 0;color:var(--so-muted);max-width:820px;font-size:18px;line-height:1.5}

.so-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 28px 0}
.so-input,.so-select{
  height:48px;
  border:1px solid var(--so-border);
  border-radius:999px;
  padding:0 16px;
  background:#fff;
  font-size:16px;
  outline:none;
}
.so-input{min-width:260px;flex:1}
.so-select{min-width:220px}

.so-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:1100px){.so-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:720px){.so-title{font-size:36px}.so-grid{grid-template-columns:1fr}}

.so-card{
  background:var(--so-card);
  border:1px solid var(--so-border);
  border-radius:var(--so-radius);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.so-card .so-media{background:#f4f4f4;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.so-card .so-media img{width:100%;height:100%;object-fit:cover;display:block}
.so-card .so-mediaPlaceholder{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#888;gap:8px;padding:22px}
.so-phTitle{font-weight:700;color:#555}
.so-phSub{font-size:13px}

.so-body{padding:22px 22px 20px 22px}
/* Pills: keep them compact and NEVER cut off text.
   If they don't fit into one row, allow horizontal scroll (no visible scrollbar). */
.so-tags{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  margin:0 0 14px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.so-tags::-webkit-scrollbar{display:none}
.so-pill{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  border:2px solid var(--so-accent);
  color:var(--so-accent);
  font-weight:700;
  font-size:10.5px;
  white-space:nowrap;
  background:#fff;
  flex:0 0 auto;
}

@media (max-width:520px){
  .so-pill{font-size:10.5px}
}

/* Card titles use the theme's native h3 typography for consistent fonts/sizes.
   We do not override font-family/size/weight here (SEO + design consistency). */
.so-meta{margin:0 0 12px 0;color:var(--so-muted);display:flex;flex-wrap:wrap;gap:10px}
.so-meta span{white-space:nowrap}
.so-moods{margin:0 0 18px 0;color:var(--so-muted);line-height:1.5}

.so-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.so-price{font-weight:900;color:var(--so-accent);font-size:22px}

.so-actions{display:flex;gap:12px;flex-wrap:wrap}

.so-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 22px;
  border-radius:999px;
  font-weight:800;
  font-size:16px;
  text-decoration:none !important;
  border:2px solid transparent;
  cursor:pointer;
}
.so-btnPrimary{
  background:var(--so-accent);
  color:#fff;
}
.so-btnPrimary:hover{filter:brightness(.95)}
.so-btnGhost{
  background:#fff;
  border-color:var(--so-border);
  color:var(--so-text);
}
.so-btnGhost:hover{border-color:#d9d9d9}

.so-empty{
  border:1px solid var(--so-border);
  border-radius:var(--so-radius);
  padding:28px;
  color:var(--so-muted);
  background:#fff;
}

.so-pagination{margin:26px 0 0 0}


/* -------------------------------------------------------------------------- */
/* Übersicht: Einstieg/Hero + Sortierung                                      */
/* -------------------------------------------------------------------------- */

.so-anchor{scroll-margin-top:90px}

.so-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:28px;
  padding:42px;
  margin:0 0 24px 0;
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:22px;
  color:var(--so-text);
  border:1px solid var(--so-border);
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(230,103,0,.10), transparent 60%),
    radial-gradient(700px 420px at 85% 20%, rgba(230,103,0,.06), transparent 55%),
    #fff;
  box-shadow:var(--so-shadow);
}

@media (max-width: 980px){
  .so-hero{grid-template-columns:1fr; padding:30px}
}

.so-heroBadge{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 14px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
  background:#fff;
  border:1px solid var(--so-border);
  /* defensive: some themes may override colors/gradients */
  color:var(--so-text) !important;
  background-clip:initial !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Headings in the hero should follow the theme's H1/H3 typography (SEO + consistent fonts).
   We only apply layout + defensive color rules here. */
.so-hero h1{
  margin:18px 0 0 0;
  color:var(--so-text) !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
  opacity:1 !important;
  filter:none !important;
}


.so-heroText{
  margin:14px 0 0 0;
  color:var(--so-muted) !important;
  font-size:18px;
  line-height:1.55;
  max-width:860px;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
}

.so-heroActions{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 0 0}

.so-heroBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;
  padding:0 26px;
  border-radius:999px;
  font-weight:900;
  font-size:16px;
  text-decoration:none !important;
  border:1px solid transparent;
  white-space:nowrap;
}

.so-heroBtnPrimary{
  background:var(--so-accent);
  color:#fff;
  box-shadow:0 16px 50px rgba(230,103,0,.22);
}

.so-heroBtnPrimary:hover{filter:brightness(.97)}

.so-heroBtnSecondary{
  background:#fff;
  border-color:var(--so-border);
  color:var(--so-text);
}

.so-heroBtnSecondary:hover{background:rgba(255,255,255,.14)}

.so-heroNote{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--so-border);
  color:var(--so-muted) !important;
  font-size:14px;
  line-height:1.55;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
}

.so-heroAside{display:flex;flex-direction:column;gap:16px}

.so-heroCard{
  border-radius:22px;
  padding:20px 22px;
  background:#fff;
  border:1px solid var(--so-border);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.so-heroCard h3{margin:0 0 6px 0;color:var(--so-text) !important;background:none !important;-webkit-text-fill-color:currentColor !important}
.so-heroCardText{color:var(--so-muted) !important;font-size:15px;line-height:1.5;background:none !important;-webkit-text-fill-color:currentColor !important}

/* Sortierung/Filter vor den Modellen (hell – passend zur Seite) */
.so-sortbar{
  margin:18px 0 26px 0;
}

.so-sortFields{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:center;
}

/* Wenn Suche aktiv ist: volle Breite über beiden Dropdowns */
.so-sortFields .so-input{grid-column:1 / -1; width:100%}

@media (max-width: 980px){
  .so-sortFields{grid-template-columns: 1fr}
  .so-sortFields .so-input{grid-column:auto}
}

.so-sortbar .so-input,
.so-sortbar .so-select{
  height:64px !important;
  border-radius:18px !important;
  border:1px solid var(--so-border) !important;
  background:#fff !important;
  color:var(--so-text) !important;
  padding:0 18px !important;
  font-size:16px !important;
  outline:none;
}

.so-sortbar .so-input::placeholder{color:#9aa0a6 !important}

/* Theme-sicheres Dropdown (Pfeil erzwingen – hell) */
.so-wrap .so-sortbar select.so-select{
  padding-right:52px !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 18px 18px !important;
}

.so-sortActions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:14px;
}




/* -------------------------------------------------------------------------- */
/* Detailseite (Reader)                                                       */
/* -------------------------------------------------------------------------- */

.so-reader .so-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 18px;
  font-size: 14px;
  color: #6b7280;
}

.so-reader .so-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.so-reader .so-breadcrumbs a:hover {
  text-decoration: underline;
}

.so-reader .so-crumbSep {
  opacity: .45;
}

.so-detailHeader {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
  margin-bottom: 26px;
}

@media (max-width: 980px) {
  .so-detailHeader {
    grid-template-columns: 1fr;
  }
}

.so-detailHeaderMain .so-kicker {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 8px;
}

.so-reader .so-h1 {
  margin: 0 0 10px;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

@media (max-width: 640px) {
  .so-reader .so-h1 {
    font-size: 34px;
  }
}

.so-reader .so-h2 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.2;
}

.so-reader .so-h3 {
  margin: 18px 0 10px;
  font-size: 16px;
  line-height: 1.2;
}

.so-reader .so-sub {
  margin: 0 0 14px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.6;
}

.so-reader .so-chipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.so-reader .so-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid var(--so-accent, #e65c00);
  color: var(--so-accent, #e65c00);
  font-weight: 700;
  font-size: 13px;
  background: #fff;
}

.so-priceBox {
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .08);
}

.so-priceBoxInner {
  padding: 18px;
  display: grid;
  gap: 10px;
}

.so-priceLabel {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
}

.so-priceValue {
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: var(--so-accent, #e65c00);
}

.so-priceHint {
  font-size: 13px;
  color: #6b7280;
  margin-top: -6px;
}

.so-detailMedia {
  display: grid;
  gap: 12px;
  align-content: start;
}

.so-detailGrid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  align-items: start;
  margin-bottom: 34px;
}

@media (max-width: 980px) {
  .so-detailGrid {
    grid-template-columns: 1fr;
  }
}

.so-mediaMain {
  border-radius: 18px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid rgba(17, 24, 39, .08);
}

.so-mediaPlaceholder {
  aspect-ratio: 16 / 10;
}

.so-mediaFigure img {
  width: 100%;
  height: auto;
  display: block;
}

.so-mediaMain figure,
.so-mediaMain .figure,
.so-mediaMain picture,
.so-mediaMain img {
  display: block;
  width: 100%;
}

.so-mediaMain img {
  height: auto;
}

.so-mediaThumbs {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 640px) {
  .so-mediaThumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.so-thumbFigure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, .10);
}

.so-thumb figure,
.so-thumb .figure,
.so-thumb picture,
.so-thumb img {
  display: block;
  width: 100%;
}

.so-thumb img {
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, .10);
}

.so-specCard {
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .06);
  padding: 18px;
}

.so-specGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin: 0;
}

.so-specGrid div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid rgba(17, 24, 39, .06);
}

.so-specGrid dt {
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 4px;
}

.so-specGrid dd {
  margin: 0;
  font-weight: 800;
  color: #111827;
}

.so-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.so-mood {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #fff;
  font-weight: 700;
  color: #111827;
  font-size: 13px;
}

.so-section {
  margin: 28px 0;
}

.so-config {
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .06);
  padding: 22px;
}

.so-configForm {
  margin-top: 16px;
}

.so-formGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

@media (max-width: 980px) {
  .so-formGrid {
    grid-template-columns: 1fr;
  }
}

.so-fieldset {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #f9fafb;
}

.so-fieldsetTitle {
  margin: 0 0 6px;
}

.so-radioList {
  display: grid;
  gap: 10px;
}

.so-radioRow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.so-radioText {
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.so-fieldset legend {
  padding: 0 8px;
  font-weight: 900;
  color: #111827;
  font-size: 14px;
}

/* Härtung gegen Theme-Formstyles auf Detailseite */
.so-reader .so-config .so-formGrid {
  align-items: stretch !important;
}

.so-reader .so-config .so-formGrid > * {
  min-width: 0 !important;
}

.so-reader .so-config .so-fieldset {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  clear: both !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
  background: #f9fafb !important;
}

.so-reader .so-config .so-fieldsetTitle,
.so-reader .so-config .so-field > label.so-label {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  float: none !important;
  clear: both !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111827 !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.so-reader .so-config .so-radioList {
  display: grid !important;
  gap: 10px !important;
}

.so-reader .so-config .so-radioRow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  border: 0 !important;
  background: transparent !important;
}

.so-reader .so-config .so-radioRow input[type="radio"] {
  position: static !important;
  inset: auto !important;
  float: none !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}

.so-reader .so-config .so-radioRow > label.so-radioText {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  white-space: nowrap !important;
  word-break: normal !important;
  line-height: 1.2 !important;
  color: #111827 !important;
  font-weight: 700 !important;
}

.so-reader .so-config .so-field {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.so-reader .so-config .so-select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
}

.so-radio {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  position: static !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.so-reader .so-config label.so-radio input[type="radio"] {
  position: static !important;
  inset: auto !important;
  float: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

.so-reader .so-config label.so-radio > span {
  display: inline !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  white-space: nowrap;
  line-height: 1.2;
}

/* Selects im Anfrageblock explizit neutralisieren */
.so-reader .so-config .so-select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

.so-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-weight: 700;
  color: #111827;
}

.so-field {
  display: grid;
  gap: 8px;
}

.so-reader .so-config .so-field {
  min-width: 0;
}

.so-label {
  font-weight: 900;
  color: #111827;
  font-size: 14px;
}

.so-select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, .12);
  background: #fff;
  padding: 12px 12px;
  font-size: 14px;
}

.so-configActions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.so-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(230, 92, 0, .08);
  border: 1px solid rgba(230, 92, 0, .22);
  color: #111827;
  font-size: 14px;
}

.so-richCard {
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .06);
  padding: 22px;
}

.so-richtext {
  color: #111827;
  line-height: 1.6;
}

.so-richtext > *:first-child { margin-top: 0; }
.so-richtext > *:last-child { margin-bottom: 0; }
.so-richtext p, .so-richtext ul, .so-richtext ol { margin: 0 0 12px; }
.so-richtext ul, .so-richtext ol { padding-left: 1.25rem; }

/* -------------------------------------------------------------------------- */
/* Anfrage (Prefill-Box)                                                      */
/* -------------------------------------------------------------------------- */

.so-prefill {
  margin: 18px 0 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #f9fafb;
}

.so-prefillTitle {
  font-weight: 900;
  margin-bottom: 10px;
  color: #111827;
}

.so-prefillGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 800px) {
  .so-prefillGrid {
    grid-template-columns: 1fr;
  }
}

.so-prefillGrid div {
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .08);
}

.so-prefillGrid span {
  display: block;
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

.so-prefillGrid strong {
  font-size: 14px;
  color: #111827;
}


/* -------------------------------------------------------------------------- */
/* Fallback für ältere Reader-Template-Klassen (falls Cache/alte Twig-Datei)   */
/* -------------------------------------------------------------------------- */

.so-headDetail {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
  margin-bottom: 26px;
}

@media (max-width: 980px) {
  .so-headDetail {
    grid-template-columns: 1fr;
  }
}

.so-cta {
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .08);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.so-priceBig {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
  color: var(--so-accent, #e65c00);
}

.so-detailSpecs {
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .06);
  padding: 18px;
}

.so-gallery {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 640px) {
  .so-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.so-galleryItem figure,
.so-galleryItem .figure,
.so-galleryItem picture,
.so-galleryItem img {
  display: block;
  width: 100%;
}

.so-galleryItem img {
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, .10);
}


/* -------------------------------------------------------------------------- */
/* Detailseite Anfrageblock – moderne Konfiguration                            */
/* an Seitendesign angepasst (helle Variante)                                  */
/* -------------------------------------------------------------------------- */

.so-reader .so-config.so-configModern {
  border-radius: 24px;
  border: 1px solid rgba(17, 24, 39, .10);
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .06);
  padding: 28px;
  color: #111827;
}

.so-reader .so-configModern .so-h2 {
  color: #111827;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 8px;
}

.so-reader .so-configModern .so-sub {
  color: #4b5563;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.so-reader .so-configModern .so-configForm {
  margin-top: 22px;
}

.so-reader .so-configModern .so-formGridModern {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: start !important;
}

.so-reader .so-configModern .so-fieldSpanFull {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .so-reader .so-configModern .so-formGridModern {
    grid-template-columns: 1fr;
  }
  .so-reader .so-configModern .so-fieldSpanFull {
    grid-column: auto;
  }
}

.so-reader .so-configModern .so-field > .so-label {
  color: #111827 !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  font-size: 14px;
}

.so-reader .so-configModern .so-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100% !important;
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .12) !important;
  background-color: #fff !important;
  color: #111827 !important;
  padding: 14px 44px 14px 16px !important;
  font-size: 16px;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.so-reader .so-configModern .so-select:focus {
  outline: 2px solid rgba(230, 103, 0, .22);
  outline-offset: 2px;
  border-color: rgba(230, 103, 0, .35) !important;
}

.so-reader .so-configModern .so-select option {
  color: #111827;
}

.so-reader .so-configModern .so-configHint {
  margin: 14px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}

.so-reader .so-configModern .so-configActions {
  margin-top: 18px;
}

.so-reader .so-configModern .so-btnPrimary {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 18px;
  background: var(--so-accent, #e66700);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(230, 103, 0, .22);
}

.so-reader .so-configModern .so-btnPrimary:hover {
  filter: brightness(.97);
}

@media (max-width: 640px) {
  .so-reader .so-config.so-configModern {
    padding: 20px;
    border-radius: 20px;
  }

  .so-reader .so-configModern .so-h2 {
    font-size: 22px;
  }

  .so-reader .so-configModern .so-select,
  .so-reader .so-configModern .so-btnPrimary {
    min-height: 52px;
    border-radius: 16px;
  }
}



/* -------------------------------------------------------------------------- */
/* Typography                                                                 */
/* -------------------------------------------------------------------------- */
/* Headings (H1–H6) and fonts are controlled by the active site theme.
   This bundle intentionally does not override heading typography. */