/* ==========================================================================
   cosmeticmanuela.ch – vertikale Abstände vereinheitlichen
   Referenz: Abstand Navigation -> Trennlinie (Header-Unterkante) -> Banner
   = --frame-spacing des bootstrap_package: 28 / 33.6 / 36.4 / 39.2 / 42 px
   (xs / ≥576 / ≥768 / ≥992 / ≥1200)
   Prinzip: Jeder Inhaltsblock hat nur noch Abstand NACH unten (1 × Referenz),
   verschachtelte Frames (2 Spalten, Tabs, Slider) bringen keinen eigenen
   zusätzlichen Abstand mehr mit.
   ========================================================================== */

:root { --cm-space: var(--frame-spacing-xs); }
@media (min-width: 576px)  { :root { --cm-space: var(--frame-spacing-sm); } }
@media (min-width: 768px)  { :root { --cm-space: var(--frame-spacing-md); } }
@media (min-width: 992px)  { :root { --cm-space: var(--frame-spacing-lg); } }
@media (min-width: 1200px) { :root { --cm-space: var(--frame-spacing-xl); } }

/* 1. Inhalts-Frames im Hauptbereich: oben 0, unten 1 × Referenz.
      margin:0 neutralisiert die Collapse-Regel (-1 × spacing) und
      individuelle "Abstand vor/nach"-Werte aus dem Backend. */
#page-content .frame {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: var(--cm-space);
}

/* 2. Erstes Element direkt nach dem Banner bzw. nach der Breadcrumb */
.breadcrumb-section { margin-bottom: var(--cm-space); }

/* 3. Verschachtelte Frames (in 2 Spalten, Tabs, Slider): kein eigener
      Abstand unten, nur zwischen aufeinanderfolgenden Elementen. */
#page-content .frame .frame { padding-bottom: 0; }
#page-content .frame .frame ~ .frame { padding-top: var(--cm-space); }

/* 4. Gestapelte Spalten (Handy): 1 × Referenz zwischen den Spalten */
#page-content .row:has(> .ce-col > .frame) { row-gap: var(--cm-space); }

/* 5. Tabs: Abstand Reiter -> Inhalt = Referenz */
#page-content .tab-navigation { margin-bottom: var(--cm-space); }

/* 6. Trennlinien-Element (CType "div") und Fusszeilen-Linie:
      Linie ohne eigenen Zusatz-Margin, Abstand kommt vom Frame */
#page-content .frame-type-div hr { margin: 0; }
#page-content > .frame-type-shortcut:last-child hr:first-of-type { margin-top: 0; margin-bottom: var(--cm-space); }

/* 7. Letztes Element eines Inhaltsblocks ohne Margin (nicht in der Fusszeile) */
#page-content .frame-inner > :last-child,
#page-content .frame:not(.frame-type-shortcut) .ce-col > :last-child { margin-bottom: 0; }

/* 8. Fusszeile (Shortcut am Seitenende): Spalten auf dem Handy 1rem auseinander,
      letzter Text ohne Margin -> Seitenende = 1 × Referenz */
#page-content > .frame-type-shortcut:last-child .row { row-gap: 1rem; }
#page-content > .frame-type-shortcut:last-child .ce-col > p:last-child { margin-bottom: 0; }

/* 9. Leere Container (leeres "2 Spalten"-Element c127 auf /kontakt) nicht
      rendern – sauberer: Element im Backend löschen oder verbergen */
#page-content .frame-type-ce_columns2:not(:has(.ce-col)) { display: none; }

/* ==========================================================================
   10. Banner (Shortcut-Element mit frame-layout-embedded, z. B. c7/c29 …)
       Rand oben/unten und Abstand zwischen Logo-Spalte, Textblock und
       Jubiläums-Badge = 1 × Referenz. Der Schriftzug selbst (Cosmetic Manuela /
       Manuela Hautle / Kosmetikerin mit / Eidgenössischem Fachausweis) bleibt
       als Einheit unverändert. Logogrössen, Schriften, Bilder unverändert.
   ========================================================================== */
.frame-layout-embedded .frame {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.frame-layout-embedded .ce-col > :last-child { margin-bottom: 0; }
.frame-layout-embedded .row { row-gap: var(--cm-space); }
@media (max-width: 767.98px) {
  .frame-layout-embedded .cm-jubi-wrap.in-banner { padding-top: var(--cm-space); padding-bottom: 0; }
}

/* 11. Startseiten-Banner mit Jubiläums-Badge (Desktop/Tablet, Badge absolut
       positioniert): Banner so hoch, dass der sichtbare Badge-Ring (9 px um
       den Kreis) 1 × Referenz vom Rand hat; Text vertikal zentriert.
       Badge-Durchmesser wie im Inline-CSS von c660: 200 / 170 / 260 px. */
:root { --cm-jubi-d: 200px; }
@media (min-width: 992px)  { :root { --cm-jubi-d: 170px; } }
@media (min-width: 1200px) { :root { --cm-jubi-d: 260px; } }
@media (min-width: 768px) {
  .frame-layout-embedded > .frame-group-container > .frame-group-inner:has(> .cm-jubi-wrap.in-banner) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--cm-jubi-d) + 18px + 2 * var(--cm-space));
  }
}