/* =====================================================================
   Umforana – Bausteine & Stile (Website UND Editor)
   Generische Klassen für neue Elemente, die der Kunde über das
   TinyMCE-Menü „Bausteine" einfügt. Optik ist von den bestehenden
   Quix-Elementen abgeleitet (Jost, Blau-Violett #5a6291 / #555d8d).
   ===================================================================== */

:root {
  --umf-primary: #5a6291;
  --umf-primary-dark: #3c4265;
  --umf-button: #555d8d;
  --umf-text: #000;
  --umf-muted: #666;
  --umf-light: #f4f4f7;
}

/* ---------- Layout: Sektionen, Zeilen, Spalten ---------- */
.qx.quix .umf-section { padding: 80px 0; position: relative; }
.qx.quix .umf-section--kompakt { padding: 40px 0; }
.qx.quix .umf-section--grau { background-color: var(--umf-light); }
.qx.quix .umf-section--hero {
  padding: 200px 0;
  min-height: 500px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.qx.quix .umf-section--hero .umf-hero-box {
  display: inline-block;
  background: rgba(0, 0, 0, 0.45);
  padding: 20px 30px;
}
.qx.quix .umf-section--hero .umf-hero-box h1,
.qx.quix .umf-section--hero .umf-hero-box h2 { color: #fff; margin: 0; }

.qx.quix .umf-col { width: 100%; }
.qx.quix .umf-col-100 { width: 100%; }
.qx.quix .umf-col-75  { width: 75%; }
.qx.quix .umf-col-66  { width: 66.6667%; }
.qx.quix .umf-col-50  { width: 50%; }
.qx.quix .umf-col-33  { width: 33.3333%; }
.qx.quix .umf-col-25  { width: 25%; }
.qx.quix .umf-col > .qx-col-wrap { padding: 15px; }
.qx.quix .umf-col .qx-element-wrap + .qx-element-wrap { margin-top: 20px; }

@media (max-width: 767px) {
  .qx.quix .umf-col-75, .qx.quix .umf-col-66, .qx.quix .umf-col-50,
  .qx.quix .umf-col-33, .qx.quix .umf-col-25 { width: 100%; }
  .qx.quix .umf-section { padding: 50px 0; }
  .qx.quix .umf-section--hero { padding: 120px 0; min-height: 320px; }
}

/* ---------- Elemente ---------- */
.qx.quix .umf-heading { text-align: left; }
.qx.quix .umf-heading h1, .qx.quix .umf-heading h2,
.qx.quix .umf-heading h3, .qx.quix .umf-heading h4 { color: var(--umf-primary); margin: 0; }
.qx.quix .umf-heading h3 { font-weight: 600; }
.qx.quix .umf-heading--schwarz h1, .qx.quix .umf-heading--schwarz h2,
.qx.quix .umf-heading--schwarz h3, .qx.quix .umf-heading--schwarz h4 { color: var(--umf-text); }
.qx.quix .umf-heading--weiss h1, .qx.quix .umf-heading--weiss h2,
.qx.quix .umf-heading--weiss h3, .qx.quix .umf-heading--weiss h4 { color: #fff; }
.qx.quix .umf-heading--zentriert { text-align: center; }

.qx.quix .umf-text, .qx.quix .umf-text p, .qx.quix .umf-text li { color: var(--umf-text); }
.qx.quix .umf-text p:last-child { margin-bottom: 0; }
.qx.quix .umf-text--zentriert { text-align: center; }

.qx.quix .umf-divider { text-align: left; }
.qx.quix .umf-divider .qx-divider-separator {
  display: inline-block; width: 30%; border-top: 4px solid var(--umf-button); padding-top: 15px;
}
.qx.quix .umf-divider--duenn .qx-divider-separator { width: 100%; border-top-width: 1px; border-top-color: var(--umf-muted); padding-top: 0; }
.qx.quix .umf-divider--zentriert { text-align: center; }

.qx.quix .umf-button { padding-top: 20px; padding-bottom: 20px; text-align: left; }
.qx.quix .umf-button--zentriert { text-align: center; }
.qx.quix .umf-button .qx-btn {
  background-color: var(--umf-button); color: #fff; padding: 15px 40px;
  border: 0; border-radius: 1px; font-size: 16px; line-height: 24px; text-decoration: none;
  transition: background .3s;
}
.qx.quix .umf-button .qx-btn:hover { background-color: var(--umf-primary-dark); color: #fff; }

.qx.quix .umf-image img { max-width: 100%; height: auto; display: inline-block; }
.qx.quix .umf-image--zentriert { text-align: center; }
.qx.quix .umf-image--rund img { border-radius: 50%; }

/* Bild + Text (Blurb) / Teammitglied */
.qx.quix .umf-blurb .qx-element-blurb__media { width: 100%; }
.qx.quix .umf-blurb .position-left .qx-element-blurb__media { margin-right: 20px; margin-bottom: 20px; }
.qx.quix .umf-blurb .position-right .qx-element-blurb__media { margin-left: 20px; margin-bottom: 20px; }
.qx.quix .umf-blurb .qx-element-blurb__media img { max-width: 100%; height: auto; }
.qx.quix .umf-blurb .qx-element-blurb__title { margin-bottom: 10px; }
.qx.quix .umf-blurb .qx-element-blurb__title * { color: var(--umf-text); }
.qx.quix .umf-blurb .qx-element-blurb__body,
.qx.quix .umf-blurb .qx-element-blurb__body * { color: var(--umf-text); font-size: 17px; }
.qx.quix .umf-blurb--team .qx-element-blurb__media { max-width: 262px; }

/* News-Eintrag */
.qx.quix .umf-news .umf-news-datum { font-size: 16px; color: var(--umf-muted); margin-bottom: 5px; }
.qx.quix .umf-news h3 { color: var(--umf-primary); margin: 0 0 15px; }
.qx.quix .umf-news p:last-child { margin-bottom: 0; }

/* Hinweisbox, Zitat, Abstand */
.qx.quix .umf-hinweisbox {
  background: var(--umf-light); border-left: 4px solid var(--umf-button); padding: 20px 25px; color: var(--umf-text);
}
.qx.quix .umf-hinweisbox p:last-child { margin-bottom: 0; }
.qx.quix .umf-zitat {
  border-left: 4px solid var(--umf-button); padding-left: 20px; color: var(--umf-primary);
  font-size: 24px; line-height: 1.4; font-style: italic;
}
.qx.quix .umf-spacer { height: 40px; }
.qx.quix .umf-spacer--klein { height: 20px; }
.qx.quix .umf-spacer--gross { height: 80px; }

/* ---------- Stile (Formatmenü, auf Absätze / Text anwendbar) ---------- */
.qx.quix .umf-hervorgehoben { color: var(--umf-primary); font-weight: 600; }
.qx.quix .umf-kleingedruckt { font-size: 15px; line-height: 1.5; color: var(--umf-muted); }
.qx.quix .umf-gross { font-size: 24px; line-height: 1.4; }
.qx.quix .umf-zentriert { text-align: center; }
.qx.quix .umf-abstand-oben { margin-top: 40px; }
.qx.quix .umf-abstand-unten { margin-bottom: 40px; }
.qx.quix ul.umf-liste-haken { list-style: none; padding-left: 0; }
.qx.quix ul.umf-liste-haken li { position: relative; padding-left: 28px; margin-bottom: 6px; }
.qx.quix ul.umf-liste-haken li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 8px;
  border-left: 3px solid var(--umf-button); border-bottom: 3px solid var(--umf-button); transform: rotate(-45deg);
}

/* ---------- News-Einträge aus den Feldern (Reiter „News") – Optik wie die bestehenden Quix-News ---------- */
.qx.quix .umf-news-entry { padding: 80px 0; position: relative; }
.qx.quix .umf-news-entry .umf-news-head { padding-top: 10px; padding-bottom: 10px; border-style: solid; border-top-width: 1px; border-bottom-width: 1px; border-color: rgb(183, 183, 183); }
.qx.quix .umf-news-entry .umf-news-body { border-style: solid; border-bottom-width: 1px; border-color: rgb(150, 150, 150); }
.qx.quix .umf-news-entry .umf-news-col-100 { width: 100%; }
.qx.quix .umf-news-entry .umf-news-col-66  { width: 66.6667%; }
.qx.quix .umf-news-entry .umf-news-col-33  { width: 33.3333%; }
.qx.quix .umf-news-entry .umf-news-col-40  { width: 40%; }
.qx.quix .umf-news-entry .umf-news-col-20  { width: 20%; }
.qx.quix .umf-news-entry .qx-element-wrap + .qx-element-wrap { margin-top: 20px; }
.qx.quix .umf-news-entry .qx-element-image-v2 img { display: inline-block; }
@media (min-width: 768px) and (max-width: 1024px) {
  .qx.quix .umf-news-entry { padding: 40px 0; }
  .qx.quix .umf-news-entry .umf-news-col-40, .qx.quix .umf-news-entry .umf-news-col-20 { width: 33.3333%; }
}
@media (max-width: 767px) {
  .qx.quix .umf-news-entry { padding: 20px 0; }
  .qx.quix .umf-news-entry .umf-news-col-66, .qx.quix .umf-news-entry .umf-news-col-33, .qx.quix .umf-news-entry .umf-news-col-40, .qx.quix .umf-news-entry .umf-news-col-20 { width: 100%; }
  .qx.quix .umf-news-entry .qx-element-wrap + .qx-element-wrap { margin-top: 10px; }
}