/* =========================================================
   Basis / Reset
   ========================================================= */
* { box-sizing: border-box; padding: 0; margin: 0; }

.unidomo {
  color: #0e3a61;
  font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
}

.unidomo h1, .unidomo h2, .unidomo h3,
.unidomo h4, .unidomo h5, .unidomo h6,
.unidomo p { margin-top: .5em; margin-bottom: 1em; }

.unidomo h1, .unidomo h2, .unidomo h3,
.unidomo h4, .unidomo h5, .unidomo h6 { font-weight: 400; }

.unidomo h1 { font-size: 2.5em; }
.unidomo h2 { font-size: 2em; }
.unidomo h3 { font-size: 1.75em; }
.unidomo h4 { font-size: 1.5em; }
.unidomo h5 { font-size: 1.25em; }
.unidomo h6 { font-size: 1em; }

.unidomo ul { margin-left: 40px; }
.unidomo ul li { padding-bottom: .5em; }

.unidomo hr {
  margin: 1em 0;
  border: 0;
  border-top: 1px solid rgba(0,0,0,.1);
}

.unidomo a { color: #0e3a61; text-decoration: none; }
.unidomo a:hover, .unidomo a:active { color: #90ee90; }

.unidomo img { max-width: 100%; height: auto; }

.unidomo table tr td { padding-bottom: .5em; padding-right: .5em; color: #0e3a61; }

/* =========================================================
   Header
   ========================================================= */
.unidomo header {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}
@media (min-width: 768px) { .unidomo header { grid-template-columns: 3fr 4fr; } }

.unidomo header .logo { display: flex; align-items: center; }
.unidomo header .logo div:nth-child(1) { flex: 0 1 300px; }
.unidomo header .logo div:nth-child(2) { flex: 0 1 35%; }

.unidomo header h2 { font-weight: 400; font-size: 1.125rem; }
.unidomo header .meisterbetrieb-logo { width: 100px; margin-left: 1rem; }

.unidomo header .facts { justify-self: center; align-self: center; }
@media (min-width: 768px) { .unidomo header .facts { justify-self: end; } }
.unidomo header .facts ul { display: flex; flex-wrap: wrap; align-items: center; margin-left: 0; }
.unidomo header .facts ul li { list-style: none; margin-right: 2rem; }
.unidomo header .facts ul li .impressum { color: red; border-bottom: 1px solid red; }
.unidomo header .facts ul li .impressum:hover { color: #c00; border-color: #c00; }

/* =========================================================
   Hero
   ========================================================= */
.unidomo .hero { color: #fff; position: relative; }
@media (min-width: 808px) {
  .unidomo .hero { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 250px; }
}
@media (min-width: 808px) { .unidomo .hero-image { grid-column: 2 / 5; grid-row: 1; overflow: hidden; } }
.unidomo .hero-image img { display: block; object-fit: cover; object-position: 70% 10%; height: 100%; width: 100%; }
.unidomo .hero-info { background-color: #0e3a61; position: relative; text-align: center; padding: 1em .5em; }
@media (min-width: 800px) {
  .unidomo .hero-info {
    background: linear-gradient(to right, #0e3a61 85%, transparent 100%);
    grid-column: 1 / span 2; grid-row: 1 / span 1;
    display: flex; flex-direction: column; justify-content: center;
  }
}
.unidomo .hero h2 { font-size: 35px; line-height: .9em; margin: 0; font-weight: 800; }
@media (min-width: 800px) { .unidomo .hero h2 { font-size: 55px; } }
.unidomo .hero p { margin-top: 1em; margin-bottom: 0; }
.unidomo .hero .telefon-support-badge { width: 120px; position: absolute; top: 5%; left: 5%; transform: rotateZ(-25deg); }
@media (min-width: 800px) { .unidomo .hero .telefon-support-badge { left: 80%; } }
.unidomo .hero a { color: #fff; }
.unidomo .hero a:hover, .unidomo .hero a:active { color: #90ee90; }

/* =========================================================
   Tabs
   ========================================================= */
.unidomo input.menu { display: none; }
.unidomo label.menu { display: inline-block; margin-left: 1em; margin-top: 1em; padding-bottom: .5em; color: #747474; cursor: pointer; }
.unidomo input.menu:checked + label { border-bottom: 3px solid #0e3a61; }

/* Sichtbarkeit (nur aktive Sektion zeigen) */
.unidomo #section-id1, .unidomo #section-id2, .unidomo #section-id3 { display: none; }
.unidomo input#tab-id1:checked ~ #section-id1 { display: block; }
.unidomo input#tab-id2:checked ~ #section-id2 { display: block; }
.unidomo input#tab-id3:checked ~ #section-id3 { display: block; }

/* =========================================================
   Artikelbeschreibung / About
   ========================================================= */
.unidomo .article-desc { padding: 1em; }
.unidomo .about .about-container {
  display: flex; flex-wrap: wrap; margin-top: 2em; margin-bottom: 1em;
  flex-direction: column; max-width: 1000px; margin-left: auto; margin-right: auto;
}
@media (min-width: 768px) { .unidomo .about .about-container { flex-direction: row; } }
.unidomo .about .about-container .about-foto { flex: 1 1 50%; }
.unidomo .about .about-container .about-foto img { max-width: 100%; height: auto; }
@media (min-width: 768px) { .unidomo .about .about-container .about-foto img { margin: 1em; } }
.unidomo .about .about-container .about-info { flex: 1 1 40%; align-self: center; }
.unidomo .about .about-container .about-info img.telefon-support-badge { width: 100px; }

/* =========================================================
   Experten
   ========================================================= */
.unidomo .experten-container { text-align: center; margin: 1em; background-color: #f3f3f3; position: relative; }
@media (min-width: 900px) { .unidomo .experten-container { display: inline-flex; justify-content: space-between; flex-wrap: nowrap; } }
@media (min-width: 900px) { .unidomo .experten-container .experten-beratung { flex-basis: 50%; } }
.unidomo .experten-container .experten-beratung img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.unidomo .experten-container .experten-info { padding: 1em; }
@media (min-width: 900px) { .unidomo .experten-container .experten-info { flex-basis: 50%; } }
.unidomo .experten-container .experten-info h3 { font-weight: 800; text-transform: uppercase; }
.unidomo .experten-container .telefon-support-badge { width: 150px; position: absolute; top: 5%; right: 2%; }
@media (min-width: 900px) { .unidomo .experten-container .telefon-support-badge { right: 0; left: calc(48% - 150px); } }

/* =========================================================
   Footer
   ========================================================= */
.unidomo .unidomo-footer {
  background: linear-gradient(to top, #f2f0f1, #fff);
  border-bottom: 4px solid #0e3a61;
  color: #081f34;
  padding: 15px;
  margin-bottom: 15px;
}
.unidomo .unidomo-footer h2 {
  text-align: center; overflow: hidden; margin-left: 15px; margin-right: 15px;
  text-transform: uppercase; font-weight: 800;
}
@media (min-width: 630px) {
  .unidomo .unidomo-footer h2:before,
  .unidomo .unidomo-footer h2:after {
    background-color: #ccc; content: ''; display: inline-block; height: 1px;
    position: relative; vertical-align: middle; width: 40%;
  }
  .unidomo .unidomo-footer h2:before { right: .5em; margin-left: -50%; }
  .unidomo .unidomo-footer h2:after  { left: .5em; margin-right: -50%; }
}
.unidomo .unidomo-footer__items { display: flex; flex-wrap: wrap; max-width: 700px; margin: 0 auto; }
.unidomo .unidomo-footer__item { max-width: 350px; margin: 0 auto; float: none; }
.unidomo .unidomo-footer__item h3 { text-transform: uppercase; font-weight: 800; }
.unidomo .unidomo-footer__item-content { display: flex; }
.unidomo .unidomo-footer__item-content > * { margin: 10px; }
@media (min-width: 760px) {
  .unidomo .unidomo-footer__item:nth-child(even) h3 { text-align: right; }
  .unidomo .unidomo-footer__item:nth-child(even) .unidomo-footer__item-content p { text-align: right; }
  .unidomo .unidomo-footer__item:nth-child(even) .unidomo-footer__item-content p:nth-child(1) { order: 2; }
}

/* =========================================================
   Cross-Selling & Zubehör (in Tab 1)
   ========================================================= */
.unidomo #section-similar h3,
.unidomo #section-accessory h3 { margin: .5rem 0 .75rem; }

.unidomo #section-similar   { margin-bottom: 16px; }
.unidomo #section-accessory { margin-top: 0; }

/* Karten-Container als Flex-Grid */
.unidomo .cross-selling { display: flex; flex-wrap: wrap; gap: 12px; }

/* Karte */
.unidomo .cross-selling .card {
  display: flex; flex-direction: column;
  width: 250px; min-height: 325px;
  border: 1px solid #e6e6e6; border-radius: .25rem; background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.unidomo .cross-selling .card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.16); }

/* Bildfläche */
.unidomo .cross-selling .card a { display: block; }
.unidomo .cross-selling .card img {
  display: block; margin: 0 auto;
  aspect-ratio: 1 / 1; object-fit: contain;
  width: 100%; max-width: 130px; padding: 10px; background: #fafafa;
}
@supports not (aspect-ratio: 1 / 1) {
  .unidomo .cross-selling .card img { width: 130px; height: 130px; object-fit: contain; }
}

/* Divider */
.unidomo .cross-selling .card hr { border: 0; border-top: 1px solid #eee; margin: 0; }

/* Textbereich */
.unidomo .cross-selling .card .container {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .75rem .9rem 1rem; flex: 1 1 auto;
}
.unidomo .cross-selling .card .container .title,
.unidomo .cross-selling .card .container .card-title {
  font-size: .95rem; line-height: 1.25rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.25rem);
}
.unidomo .cross-selling .card .container .price,
.unidomo .cross-selling .card .container strong { margin-top: auto; font-weight: 700; font-size: 1rem; }

}

/* =======================
   PATCH: harte Trennung
   ======================= */
/* alte Float-Styles überschreiben */
.unidomo .cross-selling .card { float: none !important; }
/* Sicherheits-Clear, falls externe Styles Floats setzen */
.unidomo .cross-selling::after { content: ""; display: block; clear: both; }
/* Sektionen zwingen, unterhalb der Karten zu beginnen */
.unidomo #section-similar,
.unidomo #section-accessory {
  display: block;
  width: 100%;
  clear: both;
}
.unidomo #section-similar h3,
.unidomo #section-accessory h3 { clear: both; }
/* Cross-Selling-Container zwingend eigene Zeile + BFC (contains floats) */
.unidomo #section-similar,
.unidomo #section-accessory {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important; /* >>> erzwingt Umbruch */
}

/* Falls alte Styles Kinder floaten: BFC über overflow */
.unidomo #section-similar .cross-selling,
.unidomo #section-accessory .cross-selling {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px;
  overflow: hidden;          /* >>> Container umfasst alle Floats */
}

/* Vollständige Absicherung: Karten dürfen NIE floaten */
.unidomo .cross-selling .card { float: none !important; }

/* Notfalls auch die Überschriften zwingen, unten zu starten */
.unidomo #section-similar h3,
.unidomo #section-accessory h3 { clear: both !important; }